Skip to content
This repository has been archived by the owner on Aug 2, 2018. It is now read-only.

Commit

Permalink
0.3.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@tomalec
tomalec committed Jul 22, 2015
1 parent 519f86d commit 5a6cf56
Show file tree
Hide file tree
Showing 12 changed files with 13 additions and 13 deletions.
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "juicy-tile-list",
"version": "0.2.2",
"version": "0.3.0",
"homepage": "https://github.com/Juicy/juicy-tile-list",
"description": "<juicy-tile-list> is a Polymer Element with sortable tiles that packs efficiently without changing HTML structure (changes CSS only).",
"license": "MIT",
Expand Down
4 changes: 2 additions & 2 deletions dist/juicy-tile-list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,5 @@
@element juicy-tile-list
@demo https://Juicy.github.io/juicy-tile-list/
version: 0.2.2
--><!-- Import Polymer --><link rel="import" href="../../polymer/polymer.html"><script src="rectangle.js"></script><script src="packer.js"></script><script src="package.js"></script><template id="juicy-tile"><div class="juicy-tile"><content></content></div></template><!-- Define your custom element --><polymer-element name="juicy-tile-list" constructor="JuicyTileListElement" attributes="setup duration layersOrientation defaultTileSetup gutter refreshOnMutation refreshOnResize refreshOnAttached"><template><style>:host{display:block}#container{position:relative;z-index:0}polyfill-next-selector{content:':host #container> .juicy-tile'}.juicy-tile{position:absolute}polyfill-next-selector{content:':host #container> .containerBackground'}.containerBackground{position:absolute;z-index:-1}.animate>.juicy-tile,.animate>.containerBackground{-webkit-transition:width .5s,height .5s,top .5s,left .5s,-webkit-transform .5s;transition:width .5s ease-out,height .5s ease-out,top .5s ease-out,left .5s ease-out,transform .5s ease-out}</style><div id="container" class="animate"></div></template><script>!function(){function e(e){var t=e.offsetWidth,i=window.getComputedStyle(e,null),r=parseFloat(i.getPropertyValue("border-left"))||0,n=parseFloat(i.getPropertyValue("border-right"))||0,s=parseFloat(i.getPropertyValue("padding-left"))||0,o=parseFloat(i.getPropertyValue("padding-right"))||0;return t-r-n-s-o}function t(e){var t=e.offsetHeight,i=window.getComputedStyle(e,null),r=parseFloat(i.getPropertyValue("border-top"))||0,n=parseFloat(i.getPropertyValue("border-bottom"))||0,s=parseFloat(i.getPropertyValue("padding-top"))||0,o=parseFloat(i.getPropertyValue("padding-bottom"))||0;return t-r-n-s-o}function i(e){return e.array().filter(function(e){return!(e instanceof Text||e instanceof HTMLLinkElement||e instanceof HTMLStyleElement||e instanceof HTMLTemplateElement||"PUPPET-MORPHURL"==e.nodeName||e instanceof HTMLScriptElement)})}function r(e,t,i,r){for(var s=0,o=e.length;o>s;s++){var a=e[s];if(!i[a.id]){var h=JSON.parse(JSON.stringify(r));h.priority=0==t.length?.5:n(t)*(1-1/o),h.id=a.id,Object.defineProperty(h,"container",{value:i.root,writable:!0}),t.push(h),i[a.id]=h}}}function n(e){for(var t=1,i=0,r=e.length;r>i;i++)e[i].priority<t&&(t=e[i].priority);return 0>t&&(t=0),t}function s(e,t){var i=e;for(i=i.parentNode;i&&"BODY"!=i.tagName;){if(i.tagName==e.tagName){i.addEventListener("juicy-tile-list-refresh",t);break}i=i.parentNode}}function o(e,t){var i=e;for(i=i.parentNode;i&&"BODY"!=i.tagName;){if(i.tagName==e.tagName){i.removeEventListener("juicy-tile-list-refresh",t);break}i=i.parentNode}}function a(e,t){t.$.container.children.length&&(t.$.container.innerHTML="");for(var i,r,n,s,o=[],a="",d=0,l=document.createDocumentFragment(),u=0,c=e.length;c>u;u++)n=e[u],"JUICY-TILE-GROUP"!==n.tagName?(s=a+d,d++,i=document.importNode(h,!0),r=i.firstChild,r.id=s,r.firstChild.setAttribute("select","[juicytile='"+s+"']"),l.appendChild(i),n.setAttribute("juicytile",s),o.push(r),o[s]=r):(a=n.getAttribute("name")||"",a+="/",d=0);return t.$.container.appendChild(l),o}var h=(document._currentScript||document.currentScript).ownerDocument.getElementById("juicy-tile").content,d={width:256,height:128,priority:0};Polymer("juicy-tile-list",Platform.mixin({},Package.prototype,{elements:null,tiles:null,allItems:null,duration:.5,refreshOnMutation:!1,refreshOnResize:!1,refreshOnAttached:!0,defaultTileSetup:d,created:function(){this.setup={};var e=this;this.observer=new MutationObserver(function(t){t.forEach(function(t){(t.addedNodes.length||t.removedNodes.length)&&(e.createItemsList(),e.refresh())})}),this.refresh=this.refresh.bind(this)},sorter:function(e,t){return t.priority-e.priority},createItemsList:function(){this.elements=i(this.children),this.tiles=a(this.elements,this),r(this.tiles,this.setup.items,this.allItems,this.defaultTileSetup),this.tiles.root=this.$.container},parseDeclaration:function(e){var t=this.fetchTemplate(e),i=this.createShadowRoot(),r=document.importNode(t.content,!0);this.$={container:r.getElementById&&r.getElementById("container")||r.querySelector("#container")},i.appendChild(r),this.shadowRoots[e.name]=i},domReady:function(){var e=this;Package.call(this,this.setup&&void 0!==this.setup.items?this.setup:void 0),void 0!=this.gutter&&(this.setup.gutter=parseInt(this.gutter,10)),this.createItemsList(),this.refreshOnResize&&this.addResizeListeners(),this.refreshOnAttached&&e.refresh(),this.refreshOnMutation&&this.observer.observe(this,{childList:!0}),e.async(function(){e.isReady=!0})},detached:function(){this.observer.disconnect()},addResizeListeners:function(){document.attachEvent?this.attachEvent("onresize",this.refresh):s(this,this.refresh),window.addEventListener("resize",this.refresh,!0)},removeResizeListeners:function(){document.attachEvent?this.detachEvent("onresize",this.refresh):o(this,this.refresh),window.removeEventListener("resize",this.refresh,!0)},deleteContainer:function(e,t){var i=Package.prototype.deleteContainer.call(this,e,t),r=this.tiles[i.id];return r.parentNode.removeChild(r),i},cleanupDOM:function(){for(var e=this.$.container.querySelectorAll(".containerBackground"),t=0,i=e.length;i>t;t++)this.$.container.removeChild(e[t])},packItems:function(i){i||(i=this.setup);var r=this.tiles;if("downRight"!=this.setup.direction?(this.setup.width=e(this),this.setup.precalculateHeight=!0):(this.setup.height=t(this),this.setup.precalculateWidth=!0),r)for(var n,s,o=i.items.length;o--;)if(n=i.items[o],s=r[n.id],void 0!==n.items&&(s?this.$.container.appendChild(s):(s=document.createElement("DIV"),s.className="containerBackground",r[n.id]=s,s.id=n.id,this.$.container.appendChild(s)),void 0!=n.content&&(s.innerHTML=n.content)),s&&!n.items){var a=s.style.padding;s.style.padding="",n.precalculateWidth&&(s.style.width="",n.width=s.scrollWidth),n.precalculateHeight&&(n.precalculateWidth||(s.style.width="string"==typeof n.width?n.width:n.width+"px"),s.style.height="",n.height=s.scrollHeight),s.style.padding=a}return Package.prototype.packItems.call(this,i)},refresh:function(){var e=this.$.container,t=this.packItems();e.style.width=t.width+"px",e.style.height=t.height+"px",this.renderer(t,this.tiles,0,0),this.dispatchEvent(new CustomEvent("juicy-tile-list-refresh"))},attributeChanged:function(e){switch(e){case"setup":this.isReady&&(this.cleanupDOM(),Package.call(this,this.setup),r(this.tiles,this.setup.items,this.allItems,this.defaultTileSetup),this.refresh());break;case"refreshonmutation":this.refreshOnMutation?this.observer.observe(this,{childList:!0}):this.observer.disconnect();break;case"refreshonresize":this.refreshOnResize?this.addResizeListeners():this.removeResizeListeners()}},_getMinimumDimension:function(e,t,i){var r=[];if(e.length<1)throw new Error("I need at least one element");e.sort(function(e,i){return e[t]-i[t]}),r.push({start:e[0][t],end:e[0][t]+e[0][i]});for(var n=1,s=e.length;s>n;n++){var o=r[r.length-1],a=e[n][t],h=e[n][t]+e[n][i];o.end<a?r.push({start:a,end:h}):o.end<h&&(o.end=h)}for(var d=0,n=0,s=r.length;s>n;n++)d+=r[n].end-r[n].start;return d},getMinimumDimensions:function(e){return{width:this._getMinimumDimension(e,"offsetLeft","offsetWidth"),height:this._getMinimumDimension(e,"offsetTop","offsetHeight")}},renderer:function l(e,t,i,r,n){for(var s,o,a,h,d,u,c=e.items.length;c--;)if(s=e.items[c],o=t[s.id]){if(a=o.style,u=n||s.hidden)a.display="none";else{a.display="",h=(s.x||0)+i,d=(s.y||0)+r;var p=s.oversize||0;a.left=h+"px",a.top=d+"px",a.width=s.width+"px",a.height=s.height+"px",a.backgroundColor=void 0!==s.background?s.background||"transparent":"",a.outline=s.outline||"",p?(a.padding=p+"px",a.margin="-"+p+"px"):(a.padding="",a.margin="")}s.items&&l(s,t,h,d,u)}}}))}();</script></polymer-element>
version: 0.3.0
--><!-- Import Polymer --><link rel="import" href="../../polymer/polymer.html"><script src="rectangle.js"></script><script src="packer.js"></script><script src="package.js"></script><template id="juicy-tile"><div class="juicy-tile"><content></content></div></template><!-- Define your custom element --><polymer-element name="juicy-tile-list" constructor="JuicyTileListElement" attributes="setup duration layersOrientation defaultTileSetup gutter refreshOnMutation refreshOnResize refreshOnAttached"><template><style>:host{display:block}#container{position:relative;z-index:0}polyfill-next-selector{content:':host #container> .juicy-tile'}.juicy-tile{position:absolute}polyfill-next-selector{content:':host #container> .containerBackground'}.containerBackground{position:absolute;z-index:-1}</style><div id="container" class="animate"></div></template><script>!function(){function e(e){var t=e.offsetWidth,i=window.getComputedStyle(e,null),r=parseFloat(i.getPropertyValue("border-left"))||0,n=parseFloat(i.getPropertyValue("border-right"))||0,s=parseFloat(i.getPropertyValue("padding-left"))||0,a=parseFloat(i.getPropertyValue("padding-right"))||0;return t-r-n-s-a}function t(e){var t=e.offsetHeight,i=window.getComputedStyle(e,null),r=parseFloat(i.getPropertyValue("border-top"))||0,n=parseFloat(i.getPropertyValue("border-bottom"))||0,s=parseFloat(i.getPropertyValue("padding-top"))||0,a=parseFloat(i.getPropertyValue("padding-bottom"))||0;return t-r-n-s-a}function i(e,t){return t.array().filter(function(t){return t instanceof Text&&t.data.trim()&&console.error("juicy-tile-list can only render DOM element nodes. Provided input contains a text node which cannot be rendered. Wrap it in a <div> to fix the problem. Problematic text node: ",t," (",e.getAttribute("name"),")"),!(t instanceof Text||t instanceof HTMLLinkElement||t instanceof HTMLStyleElement||t instanceof HTMLTemplateElement||"PUPPET-MORPHURL"==t.nodeName||t instanceof HTMLScriptElement||t instanceof Comment)})}function r(e,t,i,r){for(var s=0,a=e.length;a>s;s++){var o=e[s];if(!i[o.id]){var h=JSON.parse(JSON.stringify(r));h.priority=0==t.length?.5:n(t)*(1-1/a),h.id=o.id,Object.defineProperty(h,"container",{value:i.root,writable:!0}),t.push(h),i[o.id]=h}}}function n(e){for(var t=1,i=0,r=e.length;r>i;i++)e[i].priority<t&&(t=e[i].priority);return 0>t&&(t=0),t}function s(e,t){var i=e;for(i=i.parentNode;i&&"BODY"!=i.tagName;){if(i.tagName==e.tagName){i.addEventListener("juicy-tile-list-refresh",t);break}i=i.parentNode}}function a(e,t){var i=e;for(i=i.parentNode;i&&"BODY"!=i.tagName;){if(i.tagName==e.tagName){i.removeEventListener("juicy-tile-list-refresh",t);break}i=i.parentNode}}function o(e,t){t.$.container.children.length&&(t.$.container.innerHTML="");for(var i,r,n,s,a=[],o="",h=0,l=document.createDocumentFragment(),c=0,u=e.length;u>c;c++)n=e[c],"JUICY-TILE-GROUP"!==n.tagName?(s=o+h,h++,i=document.importNode(d,!0),r=i.firstChild,r.id=s,r.firstChild.setAttribute("select","[juicytile='"+s+"']"),l.appendChild(i),n.setAttribute("juicytile",s),a.push(r),a[s]=r):(o=n.getAttribute("name")||"",o+="/",h=0);return t.$.container.appendChild(l),a.root=t.$.container,a}function h(e,t,i,r,n){for(var s,a,o,d,l,c,u=e.items.length;u--;)if(s=e.items[u],a=t[s.id]){if(o=a.style,c=n||s.hidden)o.display="none";else{o.display="",d=e.rightToLeft?e.width-s.width-s.x:s.x||0,d+=i,l=e.bottomUp?e.height-s.height-s.y:s.y||0,l+=r;var p=s.oversize||0;o.left=d+"px",o.top=l+"px",o.width=s.width+"px",o.height=s.height+"px",o.backgroundColor=void 0!==s.background?s.background||"transparent":"",o.outline=s.outline||"",p?(o.padding=p+"px",o.margin="-"+p+"px"):(o.padding="",o.margin="")}s.items&&h(s,t,d,l,c)}}var d=(document._currentScript||document.currentScript).ownerDocument.getElementById("juicy-tile").content,l={width:256,height:128,priority:0};Polymer("juicy-tile-list",Platform.mixin({},Package.prototype,{elements:null,tiles:null,allItems:null,duration:.5,refreshOnMutation:!1,refreshOnResize:!1,refreshOnAttached:!0,defaultTileSetup:l,created:function(){this.setup={};var e=this;this.observer=new MutationObserver(function(t){var i=!1;t.forEach(function(e){(e.addedNodes.length||e.removedNodes.length)&&(i=!0)}),i&&(e.createItemsList(),e.refresh())}),this.refresh=this.refresh.bind(this)},sorter:function(e,t){return t.priority-e.priority},updateWrappers:o,createItemsList:function(){this.elements=i(this,this.childNodes),this.tiles=this.updateWrappers(this.elements,this),r(this.tiles,this.setup.items,this.allItems,this.defaultTileSetup)},parseDeclaration:function(e){var t=this.fetchTemplate(e),i=this.createShadowRoot(),r=document.importNode(t.content,!0);this.$={container:r.getElementById&&r.getElementById("container")||r.querySelector("#container")},i.appendChild(r),this.shadowRoots[e.name]=i},domReady:function(){var e=this;Package.call(this,this.setup&&void 0!==this.setup.items?this.setup:void 0),void 0!=this.gutter&&(this.setup.gutter=parseInt(this.gutter,10)),this.createItemsList(),this.refreshOnResize&&this.addResizeListeners(),this.refreshOnAttached&&e.refresh(),this.refreshOnMutation&&this.observer.observe(this,{childList:!0}),e.async(function(){e.isReady=!0})},detached:function(){this.observer.disconnect()},addResizeListeners:function(){document.attachEvent?this.attachEvent("onresize",this.refresh):s(this,this.refresh),window.addEventListener("resize",this.refresh,!0)},removeResizeListeners:function(){document.attachEvent?this.detachEvent("onresize",this.refresh):a(this,this.refresh),window.removeEventListener("resize",this.refresh,!0)},deleteContainer:function(e,t){var i=Package.prototype.deleteContainer.call(this,e,t),r=this.tiles[i.id];return r.parentNode.removeChild(r),i},cleanupDOM:function(){for(var e=this.$.container.querySelectorAll(".containerBackground"),t=0,i=e.length;i>t;t++)this.$.container.removeChild(e[t])},packItems:function(e){e||(e=this.setup);var t=this.tiles;if(t)for(var i,r,n=e.items.length;n--;)if(i=e.items[n],r=t[i.id],void 0!==i.items&&(r?this.$.container.appendChild(r):(r=document.createElement("DIV"),r.className="containerBackground",t[i.id]=r,r.id=i.id,this.$.container.appendChild(r)),void 0!=i.content&&(r.innerHTML=i.content)),r&&!i.items){var s=r.style.padding;r.style.padding="",i.precalculateWidth&&(r.style.width="",i.width=r.scrollWidth),i.precalculateHeight&&(i.precalculateWidth||(r.style.width="string"==typeof i.width?i.width:i.width+"px"),r.style.height="",i.height=r.scrollHeight),r.style.padding=s}return Package.prototype.packItems.call(this,e)},refresh:function(i){i&&(this.tiles=this.updateWrappers(this.elements,this)),"vertical"!=this.setup.direction?(this.setup.width=this.setup.width||e(this),this.setup.precalculateHeight=!0):(this.setup.height=this.setup.height||t(this),this.setup.precalculateWidth=!0);var r=this.packItems();this.renderer(r,this.tiles,0,0),this.dispatchEvent(new CustomEvent("juicy-tile-list-refresh"))},setupChanged:function(e,t,i,n){this.isReady&&(this.cleanupDOM(),Package.call(this,this.setup),r(this.tiles,this.setup.items,this.allItems,this.defaultTileSetup),this.refresh(n))},attributeChanged:function(e){switch(e){case"refreshonmutation":this.refreshOnMutation?this.observer.observe(this,{childList:!0}):this.observer.disconnect();break;case"refreshonresize":this.refreshOnResize?this.addResizeListeners():this.removeResizeListeners()}},_getMinimumDimension:function(e,t,i){var r=[];if(e.length<1)throw new Error("I need at least one element");e.sort(function(e,i){return e[t]-i[t]}),r.push({start:e[0][t],end:e[0][t]+e[0][i]});for(var n=1,s=e.length;s>n;n++){var a=r[r.length-1],o=e[n][t],h=e[n][t]+e[n][i];a.end<o?r.push({start:o,end:h}):a.end<h&&(a.end=h)}for(var d=0,n=0,s=r.length;s>n;n++)d+=r[n].end-r[n].start;return d},getMinimumDimensions:function(e){return{width:this._getMinimumDimension(e,"offsetLeft","offsetWidth"),height:this._getMinimumDimension(e,"offsetTop","offsetHeight")}},renderer:function(e,t,i,r){this.$.container.style.width=e.width+"px",this.$.container.style.height=e.height+"px",h(e,t,i,r)}}))}();</script></polymer-element>

0 comments on commit 5a6cf56

Please sign in to comment.