Is there any stream I can listen to that fires when a core-splitter is moved? I've tried the following:
Html:
<div id="left-div"></div>
<core-splitter direction="left"></core-splitter>
<div id="right-div"></div>
Dart:
initPolymer().run(() {
Polymer.onReady.then((_) {
querySelector('#left-div').onResize.listen((_) => print('resizing left'));
querySelector('#right-div').onResize.listen((_) => print('resizing right'));
querySelector('core-splitter').onDrag.listen((_) => print('dragging'));
});
});
The page runs, but nothing is ever printed.
More generally, is there a way to listen for an element resizing due to an unspecified parent element's resize event? For example, if I had a div nested inside the left div, is there an easy way I can listen to changes to the inner divs size without explicitly attaching it to the movement of the splitter?
frankiefu from github provided an elegant solution. There is a 'track' event that can be listened to via addEventListener
querySelector('core-splitter').addEventListener('track', callback);
You can see a working js version here, though the script is almost identical in dart.
The documentation doesn't mention any events for core-splitter. I guess events similar to the ones paper-slider https://www.polymer-project.org/docs/elements/paper-elements.html#paper-slider has got recently were a good fit for core-splitter as well.
You can create a feature request at https://github.com/Polymer/core-splitter/issues
Related
I'm trying to attach a DTM Event Based Rule to a Social Share button from Add This, and it's not working.
I have other rules on the same page which are working fine, so I'm confident all the setup basics are correct.
In fact it almost works... In the log below... why does DTM Switch report event13 but then it doesn't show up in the Adobe Analytics Server Call?
Still not fully clear why it partially works (as opposed to not working at all), but the problem seems to be caused by attempting to bind Event Based Rules to elements that were injected into the DOM via Javascript (such as the AddThis API).
Solved by using a custom event handler to dispatch a Direct Call Rule:
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
onElementInserted("body", '.at-share-btn', function(element) {
$(element).one('click', function() {
var network = $($(this).find('title')[0]).text();
window.digitalData.event.socialNetwork = network;
_satellite.track('social-network');
return true;
});
});
});
</script>
where onElementInserted() is borrowed from jquery detecting div of certain class has been added to DOM
Is it an s.tl() beacon? Is event13 set in custom code? I'd doublecheck that s.linkTrackEvents is set to allow event13- see Omniture events is not firing/sending data via DTM when using s.tl tracking methods for more info on that.
I have been scouring the web for a clear answer on how to query for an element generated by a dom-repeat element from Dart code.
sample.html
<dom-module id="so-sample>
<style>...</style>
<template>
<template is="dom-repeat" items="[[cars]] as="car>
...
<paper-button on-click="buttonClicked">Button</paper-button>
<paper-dialog id="dialog">
<h2>Title</h2>
</paper-dialog>
</template>
</template>
sample.dart
I'll omit the boilerplate code here, such as imports or the query to my database to fill the cars property ; everything works fine.
...
#reflectable
void buttonClicked(e, [_])
{
PaperDialog infos = this.shadowRoot.querySelector("#dialog");
infos.open();
}
This generates the following error :
Uncaught TypeError: Cannot read property 'querySelector' of undefined
I have tried several 'solutions', which are not, since nothing works.
The only thing I saw on quite a lot of threads is to use Timer.run() and write my code in the callback, but that seems like a hack. Why would I need a timer ?
I understand my problem may be that the content of the dom-repeat is generated lazily, and I query the items 'before' they are added to the local DOM.
Another advice I didn't follow is to use Mutation Observers. I read in the polymer API documentation that the observeNodes method should be used instead, as it internally uses MO to handle indexing the elements, but it again seems a bit complicated just to open a dialog.
My final objective is to bind the button of each generated model to a dedicated paper-dialog to display additional information on the item.
Has anyone ever done that ? (I should hope so :p)
Thanks for your time !
Update 1:
After reading Gunter's advices, although none of them actually worked by themselves, the fact that the IDs aren't mangled inside a dom-repeat made me think and query paper-dialog instead of the id itself, and now my dialog pops up !
sample.dart:
PaperDialog infos = Polymer.dom(root).querySelector("paper-dialog");
infos.open();
I now hope that each button will call the associated dialog, since I'll bind data inside the dialog relative to the item I clicked ~
Update 2:
So, nope, the data binding didn't work as expected: All buttons were bound to the item at index 0, just as I feared. I tried several ways to query the correct paper-dialog but nothing worked. The only 'workaround' I found is to query all the paper-dialog into a list and then get the 'index-th' element from that list.
#reflectable
void buttonClicked(e, [_])
{
var model = new DomRepeatModel.fromEvent(e);
List<PaperDialog> dialogs = Polymer.dom(this.root).querySelectorAll("paper-dialog");
dialogs[model.index].open();
}
This code definitely works, but it feels kind of a waste of resources to get all the elements when you really only need one and you already know which one.
So yeah, my initial problem is solved, but I still wonder why I couldn't query the dialogs from their id:
...
<paper-dialog id="dialog-[[index]]">
...
</paper-dialog>
#reflectable
void buttonClicked(e, [_])
{
var model = new DomRepeatModel.fromEvent(e);
PaperDialog dialog = Polymer.dom(this.root).querySelector("dialog-${model.index}");
dialog.open();
}
With this code, dialog is always null, although I can find those dialogs, correctly id-ied, in the DOM tree.
You need to use Polymers DOM API with shady DOM (default). If you enable shadow DOM your code would probably work as well.
PaperDialog infos = new Polymer.dom(this).querySelector("#dialog")
I have a custom button component done in Polymer Dart:
<div id="buttonDiv">
<my-button id="traceButton"
mode="icon" faicon="fa-comment-o"
toolTip="Print a simple comment"
disabled="false" on-click="{{ traceSomething }}">
</my-button>
</div>
I'm trying to copy/paste this button somewhere else. So a user defines it somwhere, and I basically move it by way of getting $['buttonDiv'].children then inserting it somewhere else. The problem is that {{ traceSomething }} is now irrelevant since it's not part of the new parent. I get errors saying that the parent object, which is another polymer component doesn't have an instance getter "traceSomething".
My question is, is there a way to remove "traceSomething" before I insert it somwhere else? I tried removing the "onClick" event listeners, but the buttons still wants to call that function upon click. Also, I've tried adding a preventDefault, etc, like in: In Dart, if I listen to a click event with two listeners, how do I know which happens first?
But, no luck.
I'm not sure what you mean by copy/past. Do you clone the element, or do you just append it to some other elements children.
Anyway, I don't think you can remove the event listener if it was added declaratively. If you add it imperatively it is easy to remove and readd later.
import 'dart:async';
...
StreamSubscription subsc;
#override
attached() {
super.attached();
subscr = onClick.listen((e) => (this.parentNode as ShadowRoot).host.traceSomething(e));
}
#override
detached() {
super.detached();
if(subscr != null) {
subscr.cancel();
}
}
See also https://stackoverflow.com/a/22168745/217408 about accessing the parent of a Polymer element (for Dart Polymer <= 0.16.x)
Say I have a AngularDart component that adds a div and an iframe to that div as it's template.
I have the element passed for the outer component in the components constructor
#Component(
selector: "input-html",
templateUrl: "packages/myproject/components/inputs/html.html",
useShadowDom: false
)
class HtmlComponent implements ShadowRootAware {
HtmlComponent(NgModel ngModel, Element element):super(ngModel, element){
}
}
I have shadowdom turned off because I'm using Bootstrap for styling and want the elements easily accessible for the bootstrap css.
My template code is along the lines of
<div>
<iframe id="my-iframe"></iframe>
</div>
It's more complicated than that, there's a bunch of buttons etc, as I'm porting a javascript html editor to angulardart.
My problem is, I need to get the iframe element, but whenever I query element.querySelector("#my-iframe") or even window.document.querySelector("#my-iframe") the object is null. I believe this is because the template hasn't been added to the DOM yet.
I need the iframe object because I need to set the iframe content for the HTML editor to work. There's a few other areas of my project that I wanted to get the template dom objects but couldn't either.
I've tried onShadowRoot, which worked in AngularDart 0.14 but no longer works in 1.0. I've tried ScopeAware and querying for the iframe when the scope is set, but that didn't work (ScopeAware fires before shadowroot event).
I have a hack that's messy that works, by using ng-show="init()" and in that init method I have
bool _initDone = false;
bool init() {
if(_initDone == false) {
iframe = element.querySelector("#my-iframe")
_initDone = true;
}
return true;
}
Which works, but it's messy and I don't like that solution and obviously isn't the correct way to do it.
Anyone know how I can achieve this in AngularDart 1.0?
I think onShadowRoot is the right place for the code to query the element. If it really doesn't work wrap it in a Future to add it as a task at the end of the event queue to delay it a bit more.
onShadowRoot() {
new Future(() {
querySelector(...);
});
}
I am using Jquery Ui panels.([http://code.google.com/p/ist-ui-panel/][1])
While loading the application, everything is fine like collasible, draggable etc.
But i want to make the panel collapsible while clicking on some links.fo ex:
This code will run when the form is loading....
$('#myNews').panel({
'collapsible' :true,
'stackable':false,
});
The html
<div class="panel" id="myNews" >
<h3>Poll</h3>
<div>Some content</div>
</div>
I want to make 'collapsible' :false when clicking some link.... like this
$('#click1').click(function() {
$('#myNews').panel({
'collapseType':'slide-right',
'collapsible':false,
});
});
the code is running without any error, but the '#myNews' not getting affected when clicking the '#click1' link.
Need some help pls.
Thanks in advance
I'm the one behind ist-ui-panel, and Jesse was right — by now the only way for you is to use 'destroy' method somewhat like:
$(document).ready(function(){
$('#click1').bind({
'click': function() {
$('#myNews').panel('destroy');
$('#myNews').panel({
'collapsible' :true,
'collapseType':'slide-right',
'stackable':true
});
}
});
$('#click2').bind({
'click': function() {
$('#myNews').panel('destroy');
$('#myNews').panel({'collapsible': false});
}
});
});
Notice, you should explicitly destroy previous panel before making a new one.
If you read the uncompressed source code for that widget, it appears that what you are doing is only meant to be used to create panels, not to modify them afterward.
The underlying software is either buggy or I don't understand it. So you'll have to hunt down some bugs, but you can use the 'destroy' method on that widget to reset the div completely, and then make it a panel again, like so:
$('#myNews').panel("destroy");
$('#myNews').panel(...
As I said, it's buggy or I don't quite get it - there's an error raised by the destroy call which you have to catch, and subsequent calls to make new panels do make panels, but they aren't completely correct.