I have the following markup:
<paper-input id="alias-input" floatingLabel label="Person Alias (eg: King, Eldest Son, Mooch, etc.)"></paper-input>
<paper-input id="birth-year-input" floatingLabel label="Birth Year (eg: 1969)" validate="^[12][0-9][0-9][0-9]$"></paper-input>
<div center horizontal layout>
<paper-button id="add-button" on-click="{{addPerson}}" class="add" label="Add Person"></paper-button>
</div>
To go along with this markup I have an addButton method which does:
addPerson(_) {
// Add the person
// ...
// Clear the inputs
($['alias-input'] as PaperInput)..inputValue = ''..commit()..blur();
($['birth-year-input'] as PaperInput)..inputValue = ''..commit()..blur();
}
This correctly clears the contents of the inputs, which I want. But I also want the PaperInput help label to drop down onto the line as it is when the control is first loaded. My hope was that the call to blur() would do that. Is there some other call to achieve this?
It seems you need to call blur on the actual <input id='input'> element inside <paper-input> not the <paper-input> itself.
I got it working with
import 'dart:js' as js;
var inp = $['alias-input'] as PaperInput;
inp.inputValue = '';
new js.JsObject.fromBrowserObject(inp).callMethod('inputBlurAction', []);
alternatively you can do it like
var inp = $['alias-input'] as PaperInput;
inp.inputValue = '';
inp.querySelector('* /deep/ #input') // not yet supported with polyfills
..focus() // blur doesn't work when the field doesn't have the focus
..blur();
Related
Given conditionally rendered div with drop-down menu. In order to calculate its position (to open it to up or down) I need to get its height and width.
Of course element doesn't get correct dimensions before the transition is done.
So question is - how do I turn off transition programmatically? Or how do I get future position of element without showing it?
{#if isOpened}
<div
bind:this={thisMenu}
use:clickOutside
on:click_outside={closeHandler}
class="dropdown absolute left-100p text-gray-600 z-10 w-full animated
rounded-lg"
style={finalStyle}
{isInit ? null : transition:slide }>
<slot name="list" />
</div>
{/if}
slide-transition uses getComputedStyle, so maybe that’s what you need. The following is copied from slide function in svelte’s repository (src/runtime/transition/index.ts). Slide-function sets those values from zero to initial value and back.
const style = getComputedStyle(node);
const opacity = +style.opacity;
const height = parseFloat(style.height);
const padding_top = parseFloat(style.paddingTop);
const padding_bottom = parseFloat(style.paddingBottom);
const margin_top = parseFloat(style.marginTop);
const margin_bottom = parseFloat(style.marginBottom);
const border_top_width = parseFloat(style.borderTopWidth);
const border_bottom_width = parseFloat(style.borderBottomWidth);
EDIT:
#bobfanger explained in comments how to make a custom mySlide-function and within that function there are those initial size values available. Here is a working example:
<script>
import {slide} from "svelte/transition"
let show=false
let d
function mySlide(el) {
let s=window.getComputedStyle(d)
console.log("mySlide",s.height)
return slide(el, {duration:2000})
}
</script>
<h1 on:click={()=>show=show?false:true}>Click me</h1>
{#if show}
<div bind:this={d} transition:mySlide
style="background-color:yellow;padding:10px;border:10px solid;">
<p>test</p>
</div>
{/if}
This is much simpler than to use onMount and visibility hacks.
I am loading UIWebView with html file. the html file contains some text in Div tags. I need to set cursor position in a div tag. the html file contains different div tags.based on some condition i need to locate cursor position.
This is helpful for setting the caret position.
Suppose my html is like this:
<div id="editable" contenteditable="true">
text text text<br>text text text<br>text text text<br>
</div>
<button id="button" onclick="setCaret()">focus</button>
and my javascript method is:
function setCaret() {
var el = document.getElementById("editable");
var range = document.createRange();
var sel = window.getSelection();
range.setStart(el.childNodes[2], 5);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
el.focus();
}
I'm trying to build equivalent example of this
the code I used is:
class proto extends HtmlElement {
static final tag = 'x-foo-from-template';
factory proto()=>new Element.tag(tag);
proto.created() : super.created(){
// 1. Attach a shadow root on the element.
var shadow = this.createShadowRoot();
// 2. Fill it with markup goodness.
var t = new TemplateElement();
t..id="sdtemplate"
..innerHtml = """
<style>
p { color: orange; }
</style>
<p>I'm in Shadow DOM. My markup was stamped from a <template>.</p>
<button>click</button>
""";
var span = t.content.querySelector('span');
span.text= "hello "+span.text;
var btn = t.content.querySelector('button');
btn..onClick.listen((e) => print('hello'));
shadow.nodes.add(t.content.clone(true));
}
}
The code displayed the statement and button, but the following did not work:
1. Styling, nothing had been styled, I checked with the developer tools, and found this output "Removing disallowed element ",
2.OnClick.listen for the button
any thoughts?
I found that Listening to items in Templates is not possible till the template be cloned and called, and Listeners can be added to the script that is calling the template, this is applicable for both Dart and JS.
to add event listeners to the template items, we have to go one step up, and use Custom Elements instead.
I'm developing an extension for FireFox. I use a XUL deck element that contains a XUL browser element. Unfortunately, whenever the page displayed in the browser has an HTML title attribute, the value of this title attribute will not show up as a tooltip.
How can I get tooltips to display correctly?
There is no mechanism to automatically display title attributes in tooltips - the browser window has special code for that and you need to replicate this code in your extension. This means that you need to define a <tooltip> element, e.g.:
<popupset>
<tooltip id="browserTooltip" onpopupshowing="return fillTooltip(this);"/>
</popupset>
You should use this tooltip in your <browser> element, like this:
<browser tooltip="browserTooltip"/>
And you should create a fillTooltip() function that will be called whenever your tooltip shows up. It will need to look at the HTML element that the mouse pointer hovers over, check its title attribute and put the value of the attribute into the tooltip. The function performing this job in Firefox is FillInHTMLTooltip() though you might want to go with a simpler variant like this (untested code):
function fillTooltip(tooltip)
{
// Walk up the DOM hierarchy until we find something with a title attribute
var node = document.tooltipNode;
while (node && !node.hasAttribute("title"))
node = node.parentNode;
// Don't show tooltip if we didn't find anything
if (!node)
return false;
// Fill in tooltip text and show it
tooltip.setAttribute("label", node.getAttribute("title"));
return true;
}
I found the solution for those who are interested, it's by adding a tooltip property to the XUL browser element with the following value:
tooltip="aHTMLTooltip"
Or adding it programmatically using javascript like this:
browser.setAttribute('tooltip','aHTMLTooltip');
for more details check: https://bugzilla.mozilla.org/show_bug.cgi?id=451792#c1
Working example:
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
<window id="mainWindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="NanoFL" width="800" height="600" persist="screenX screenY width height sizemode">
<script>
<![CDATA[
function fillTooltip(tooltip)
{
var nodes = document.getElementById("browser").contentWindow.document.querySelectorAll(":hover");
for (var i=nodes.length-1; i>=0; i--)
{
if (nodes[i].hasAttribute("title"))
{
tooltip.setAttribute("label", nodes[i].getAttribute("title"));
return true;
}
}
return false;
}
]]>
</script>
<browser id="browser" src="chrome://nanofl/content/index.html" flex="1" disablehistory="true" tooltip="browserTooltip" />
<tooltip id="browserTooltip" onpopupshowing="return fillTooltip(this)"/>
</window>
I have a little problem, and I can't figure out where does it come from.
I'm using jQuery UI (and of course jQuery)
I have the following HTML:
<input type="checkbox" id="test" value="test"/>
<label for="test">Show Test</label>
<div id="checkedDiv"></div>
and the following JS:
function clickChange() {
var currentText = this.nextSibling.innerHTML;
this.nextSibling.innerHTML =
(this.checked) ? currentText.replace("Show","Hide") :
currentText.replace("Hide", "Show");
$("#checkedDiv").text(this.nextSibling.innerHTML);
}
var test=document.getElementById("test")
test.onclick=clickChange;
$("#test").button();
The problem is that on the first click, the innerHTML doesn't change. After that it works.
And to be a little more disappointed, the nextSibling seems to change (at least from what is seen in the #checkedDiv), but doesn't appear on the DOM Tree on firefox/firebug.
Am I missing something ?
Thanks
(if you want to try it yourself, it's here: http://jsfiddle.net/nvNKW/3/ )
EDIT:
The (or at least one) solution is to use label as suggested by Aziz Shaikh:
function clickChange() {
var currentText = $(this).button( "option","label");
$(this).button( "option","label",(this.checked)? currentText.replace("Show","Hide") : currentText.replace("Hide", "Show"));
}
And there is no need to change the html or the button initialisation.
Try setting the label using $("#test").button({ label: newText }); instead of this.nextSibling.innerHTML
Edit: So your fixed JS function would be:
function clickChange() {
var currentText = this.nextSibling.firstChild.innerHTML;
var newText = (this.checked) ? currentText.replace("Show","Hide") : currentText.replace("Hide", "Show");
$("#test").button("option", "label", newText);
$("#checkedDiv").text(this.nextSibling.innerHTML);
}
It's because nextSibling() also returns text nodes. You are changing the blank empty space after the input, not the next tag.
jQuery makes it easy, do
$(this).next('label').html()