Polymer: Nesting content inside of content - dart

<!-- my-poly -->
<template>
<content select=".useBtn">
<button id="defaultBtn">
<content select=".useBtnIcon">
Button
</content>
</button>
</content>
</template>
So if my Element gets used, the User can input a Button which will be shown instead of the defaultBtn. But if no Button is given, the defaultBtn with the Button Text will be shown. But the user also should have the Option to use the defaultBtn and to input a text or icon which will be shown in the Button.
If I use a <div class="useBtn"></div> it will be used as the Button. But <div class="useBtnIcon"> BtnText</div> does not seem to work. Is there a way to make this work?

According to the spec its not going to work.
http://www.w3.org/TR/shadow-dom/#content-insertion-points
The content element that satisfies all of the following conditions represents a content insertion point:
The root node of the content element is a shadow root
There is no other content element in the ancestors of the content element
There is no shadow element in the ancestors of the content element
With this in mind, i guess, you cant make this thing work with nestetd content elements.
This one will work. Custom Icon wins if both are applied
<polymer-element name="the-button">
<template>
<content id="contentButton" select=".useBtn">
<button id="PREFIXEDdefaultBtn">
Default Button
</button>
</content>
<button id="defaultBtnWithCustomIcon">
<!--be sure that this content element doesnt contain a default set -->
<content id="contentIcon" select=".useBtnIcon"></content>
</button>
</template>
<script>
Polymer('the-button', {
domReady: function () {
var customIcon = this.$.contentIcon;
var disNodes = customIcon.getDistributedNodes();
//Test if the content element contains distributed nodes.
if (disNodes.length !== 0) {
this.$.contentButton.remove();
} else {
// the button is customized, remove the icon
this.$.defaultBtnWithCustomIcon.remove();
}
}
});
</script>
</polymer-element>

I'm pretty sure that your inner <content> element is purged when the outer <content> element selects its content.

Can you provide a jsfiddle or plnkr or anything for this? Polymer imports so many things, it's hard to trouble-shoot an issue without building our own project ourselves.
Without having the source to trouble-shoot this, it sounds like you might need to add the attributes to allow users to change preferences within your element in the <polymer-element> tag:
<polymer-element name="my-element" attributes="defaultBtn inputBtn">
See here: https://www.polymer-project.org/docs/polymer/polymer.html#declarative-event-mapping
That should allow users to configure your custom element. Once again, without having the code to tinker with, not sure if this is going to work for your situation?

Related

Set display of section tags to flex or grid

With Reveal.js, I would like to use flexbox and/or grids to layout slides. Unfortunately, it seems Reveal.js always overrides the display property of section tags with block as part of its slide show/hide logic. Viz:
<section class="mylayout">
<div>...</div>
<div>...</div>
</section>
section.mylayout {
display: flex;
}
Has no effect, because Reveal.js adds a style="display: block" attribute to the section tag.
Is there any way around this? It works to put a nested div inside the section and have that be grid/flex, but it just feels clunky and gross to have an extra layer in there that adds no other value than a workaround.
Has anyone else found a different way to address it?
You can set it to use flexbox in the initialization settings now. See this update on the documentation.

How to make nested layouts with jquery-layout resizable?

I'm trying to create a 4-pane layout using the jQuery-Layout plugin.
Really basic stuff:
The layout (note that I use iframes):
<iframe class="ui-layout-center">Outer Center</iframe>
<iframe class="ui-layout-east">Outer East</iframe>
<div class="ui-layout-west ">
<iframe class="ui-layout-south">Middle South</iframe>
<div class="ui-layout-center ">
<iframe class="ui-layout-center">Inner Center</iframe>
</div>
</div>
The initialization:
$(document).ready(function () {
$('body').layout({
west__childOptions: {
center__childOptions: {
}
}
});
});
Here's a fiddle.
Updated, simpler fiddle.
All is well until I try to resize the panes. It kinda works, but is very rough. When dragging the pane resizer handles it looks like they lose contact with the mouse pointer and stop resizing.
If the panes are simple divs, everything works, but not if the panes are iframes (which is what I need).
Any idea on how I could debug this?
I have found the answer here
Basically, you need to mask each panel (and its parents, in case of nested panels) that contains an iframe.
Like this:
$('body').layout({
center__maskContents: true,
west__maskContents: true
});
Here's the working demo of the fiddle from the question: click

jquery mobile: keeping horizontal control group in one row

I have two dynamic horizontal control groups of radio buttons:
<div class="categories-panel" id="sections-panel">
<fieldset id="section-choice-fieldset" data-role="controlgroup" data-type="horizontal">
<!-- ko foreach: Sections -->
<input type="radio"
data-mini="true"
...
/>
<label data-bind="text:Name, attr:{'for':Id}"></label>
<!-- /ko -->
</fieldset>
</div>
The content of controlgroups is updated by knockoutjs. The markup is updated this way:
self.refreshCategoriesList = function() {
$("#section-choice-fieldset").find("input[type='radio']").checkboxradio();
$("#category-choice-fieldset").controlgroup();
};
The problem is: the controlgroups don't fit in one row until I turn of and turn on the display: inline-block property of .ui-controlgroup-controls div in debugger:
before display: inline-block refresh:
http://i890.photobucket.com/albums/ac105/cubius/screen-1.png
after display: inline-block refresh (desired view):
http://i890.photobucket.com/albums/ac105/cubius/screen-2.jpg
How to make jQM always paint my controlgroups in one row?
First of all, the way you select your control group is wrong in this line :
$("#category-choice-fieldset").controlgroup();
Mustnt it be
$("#section-choice-fieldset").controlgroup();
(Maybe a typo)
You could do this in any of the two ways :
Method 1
Works fine in my fiddle. I'd say you move the <script> tag from head to body because page events of jQM dont play well with KnockOut.js and KnockOut.js needs a DOM ready to work properly, AND DOM ready doesnt work well with jQM. So I guess its a vicious loop indeed.
Demo : http://jsfiddle.net/hungerpain/k7UR5/
Method 2
And you could try one more thing in your refreshCategoriesList method:
//$("#section-choice-fieldset").find("input[type='radio']").checkboxradio();
//$("#category-choice-fieldset").controlgroup();
$("[data-role=page]").trigger("create");
Refreshing the entire controls on the page - thats what trigger("create") does
Demo : http://jsfiddle.net/hungerpain/k7UR5/1/
If you are updating the control group (appending, modifying etc) , access the control group like this:
$("#my-controlgroup").controlgroup("container")["append"]($el);
You need to access the control group container. See my jsfiddle for modifying the control group:
http://jsfiddle.net/androdify/WAzs6/

All anchor tags work except top

On this site I'm using a smooth-scroll function, which works on every link unless you try and go back home. Any suggestions?
The id "Home" refers to an fixed positioned element (the header), it's always visible so the script has no where to scroll to.
Swap Id's between <header id="home"> and <section id="intro"> to <header id="intro"> and <section id="home"> ,or you can just change your first list's item anchor to <a href="#home">that way the script has somewhere to head to.
Remove your section's padding, and apply it to a more inner element of your sections, otherwise your first section's headings will be misplaced.
Good Luck Developer!

How make jquery-ui autocomplete get out iframe?

Is it possible to make the suggestions of autocomplete (jQueryUI) get out one iframe, having the same behaviour of "select" element? I make one example:
http://jsbin.com/ehidef/1
As a matter of fact, it can be done, though some styling will be mandatory. jQueryUI accepts an element to append the options to, and you can pass the parent window as that element. An example:
main window:
<html>
<head></head>
<body>
<iframe src="iframe.html"></iframe>
</body>
</html>
iframe.html
<html>
<head>
<!-- include jQuery and jQuery UI and the like -->
<script type="text/javascript">
jQuery(function($){
// This will take parent frame if in iframe, own body elsehow
var el=top.document.body
// Instructs jQuery UI to show things on that previous element
$('input').autocomplete({appendTo:el});
});
</script>
</head>
<body>
<input type="text"/>
</body>
</html>
The whole example is missing all things not relevant to explainig the point, so it's not functional. Addapt as needed and add some suggar.
As for the styling i was refering before, you will have to give elements a position and style, as 1) position relative to input position is irrelevant on parent window and 2) parent doesn't need to have jqueryui stylesheets loaded, although you can load them dinamically from inside the iframe with a similar technique.
IMPORTANT:
This will only work if both, parent and child are in the same domain [see: SOP]
UPDATE
After finishing doing this same thing, i came up with this solution for styling and position:
var files=[ // UI styles to be loaded on top frame
"css/ui-lightness/jquery-ui-1.10.3.custom.css",
"css/ui-lightness/custom.css"
]
// Create link tag and append to top frame head
for (var a in files) {
var style=$("<link/>", {
rel: "stylesheet",
type: "text/css",
href: files[a]
});
$(top.document).find('head').append(style);
}
// As it turns out i had many iframes, so this will get the right one
var parentIframe=$(el).find('iframe').filter(function(){
return window.frameElement==this
});
$('input').each(function(){ // Cicle inputs to use with ui autocomplete
// set position to left + input offset 2 is a fix for borders on input
var pos= "left+"+($(this).offset().left+2)+
// and to top + input position + height to have it on the bottom
" top+"+($(this).offset().top+$(this).outerHeight()+1);
// Autocomplete
$(this).autocomplete({
appendTo:top.document.body, // put it on top window's body
position:{
at: pos, // at calculated position
of:parentIframe // from parent iframe
}
})
});
Once again, there may be voids, so fill up with relevant code at will

Resources