0.1.0

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "juicy-tile-list",
-  "version": "0.0.9",
+  "version": "0.1.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",

dist/juicy-tile-list.html

@@ -3,4 +3,5 @@
 
 @element juicy-tile-list
 @demo https://Juicy.github.io/juicy-tile-list/
---><!-- Import Polymer --><script src="rectangle.js"></script><script src="packer.js"></script><script src="package.js"></script><!-- Define your custom element --><polymer-element name="juicy-tile-list" constructor="JuicyTileListElement" attributes="setup rowspans colspans layersOrientation defaultTileSetup"><template><style>:host{display:block;padding:16px}#container{position:relative}polyfill-next-selector{content:':host #container> *'}#container ::content>*,#container >*{position:absolute;z-index:2}polyfill-next-selector{content:':host #container.animate> *'}#container.animate ::content>*,#container.animate >*{-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}#container{z-index:0}</style><div id="container" class="animate"><content></content></div></template><script>!function(){function t(t){var e=t.offsetWidth,i=window.getComputedStyle(t,null),n=parseFloat(i.getPropertyValue("border-left"))||0,r=parseFloat(i.getPropertyValue("border-right"))||0,o=parseFloat(i.getPropertyValue("padding-left"))||0,s=parseFloat(i.getPropertyValue("padding-right"))||0;return e-n-r-o-s}function e(t){var e=t.offsetHeight,i=window.getComputedStyle(t,null),n=parseFloat(i.getPropertyValue("border-top"))||0,r=parseFloat(i.getPropertyValue("border-bottom"))||0,o=parseFloat(i.getPropertyValue("padding-top"))||0,s=parseFloat(i.getPropertyValue("padding-bottom"))||0;return e-n-r-o-s}function i(t,e){t&&localStorage.setItem(t,e)}function n(t){return t?localStorage.getItem(t):void 0}function r(t){return t.array().filter(function(t){return!(t instanceof Text||t instanceof HTMLLinkElement||t instanceof HTMLStyleElement||t instanceof HTMLTemplateElement||"PUPPET-MORPHURL"==t.nodeName||t instanceof HTMLScriptElement)})}function o(t,e,i,n){for(var r=0,o=t.length;o>r;r++){{t[r]}if(!i[r]){var a=JSON.parse(JSON.stringify(n));a.priority=0==e.length?.5:s(e)*(1-1/o),a.index=r,Object.defineProperty(a,"container",{value:i.root,writable:!0}),e.push(a),i[r]=a}}}function s(t){for(var e=1,i=0,n=t.length;n>i;i++)t[i].priority<e&&(e=t[i].priority);return 0>e&&(e=0),e}function a(t,e){var i=t;for(i=i.parentNode;i&&"BODY"!=i.tagName;){if(i.tagName==t.tagName){i.addEventListener("juicy-tile-list-refresh",e);break}i=i.parentNode}}var h={width:256,height:128,priority:0};Polymer("juicy-tile-list",Platform.mixin({},Package.prototype,{setup:null,_storedSetup:null,elements:null,items:null,defaultTileSetup:h,sorter:function(t,e){return e.priority-t.priority},createItemsList:function(){this.elements=r(this.children),this.elements.root=this.$.container,o(this.elements,this.setup.items,this.items,this.defaultTileSetup)},domReady:function(){var t=this;document.attachEvent?this.attachEvent("onresize",this.refresh.bind(this,null,null)):a(this,this.async.bind(this,"refresh",[null,null],501)),window.addEventListener("resize",this.refresh.bind(this,null,null),!0),this.loadFromStorage();var e=new MutationObserver(function(e){e.forEach(function(i){console.log("observation",i.type,arguments,e),i.addedNodes&&(console.log("something was added"),t.createItemsList(),t.refresh())})});e.observe(this,{childList:!0})},deleteContainer:function(t,e){var i=Package.prototype.deleteContainer.call(this,t,e),n=this.elements[i.name];return n.parentNode.removeChild(n),i},cleanupDOM:function(){for(var t=this.$.container.querySelectorAll(".containerBackground"),e=0,i=t.length;i>e;e++)this.$.container.removeChild(t[e])},packItems:function(i){i||(i=this.setup);var n=this.elements;"downRight"!=this.setup.direction?(this.setup.width=t(this),this.setup.heightAuto=!0):(this.setup.height=e(this),this.setup.widthAuto=!0);for(var r,o=i.items.length;o--;){r=i.items[o];var s;n&&(void 0!==r.index?s=n[r.index]:void 0!==r.name&&(s=n[r.name],s||(s=document.createElement("DIV"),s.className="containerBackground",s.style.zIndex=-1,this.$.container.appendChild(s),n[r.name]=s),void 0!=r.innerHTML&&(s.innerHTML=r.innerHTML))),r.items||(r.widthAuto&&(s.style.width="",s.style["grid-row"]="",s.style["grid-column"]="",r.width=s.scrollWidth),r.heightAuto&&(r.widthAuto||(s.style.width=r.width+"px"),s.style.height="",r.height=s.scrollHeight))}return Package.prototype.packItems.call(this,i)},refresh:function(){var t=this.$.container,e=this.packItems();t.style.width=e.width+"px",t.style.height=e.height+"px",this.renderer(e,this.elements,0,0),this.dispatchEvent(new CustomEvent("juicy-tile-list-refresh"))},isModified:function(){return JSON.stringify(this.setup)!==this._storedSetup},saveToStorage:function(t){this._storedSetup=JSON.stringify(t||this.setup),i(this.id,this._storedSetup)},loadFromStorage:function(){this._storedSetup=n(this.id),this.loadFromString(this._storedSetup)},loadFromString:function(t){this.cleanupDOM(),t&&(this.setup=JSON.parse(t)),Package.call(this,this.setup),this.createItemsList(),this.refresh()},_getMinimumDimension:function(t,e,i){var n=[];if(t.length<1)throw new Error("I need at least one element");t.sort(function(t,i){return t[e]-i[e]}),n.push({start:t[0][e],end:t[0][e]+t[0][i]});for(var r=1,o=t.length;o>r;r++){var s=n[n.length-1],a=t[r][e],h=t[r][e]+t[r][i];s.end<a?n.push({start:a,end:h}):s.end<h&&(s.end=h)}for(var l=0,r=0,o=n.length;o>r;r++)l+=n[r].end-n[r].start;return l},getMinimumDimensions:function(t){return{width:this._getMinimumDimension(t,"offsetLeft","offsetWidth"),height:this._getMinimumDimension(t,"offsetTop","offsetHeight")}},renderer:function l(t,e,i,n){for(var r,o,s,a,h,u=t.items.length;u--;)if(r=t.items[u],o=e[r.name||r.index]){s=o.style,a=(r.x||0)+i,h=(r.y||0)+n;var d=r.oversize||0;s.left=a-d+"px",s.top=h-d+"px",s.width=r.width+2*d+"px",s.height=r.height+2*d+"px",void 0!==r.background&&(s.backgroundColor=r.background||"transparent"),r.items&&l(r,e,a,h)}}}))}();</script></polymer-element>
+version: 0.1.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"><template><style>:host{display:block}#container{position:relative;z-index:0}.juicy-tile{position:absolute}.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 t(t){var e=t.offsetWidth,i=window.getComputedStyle(t,null),n=parseFloat(i.getPropertyValue("border-left"))||0,r=parseFloat(i.getPropertyValue("border-right"))||0,s=parseFloat(i.getPropertyValue("padding-left"))||0,o=parseFloat(i.getPropertyValue("padding-right"))||0;return e-n-r-s-o}function e(t){var e=t.offsetHeight,i=window.getComputedStyle(t,null),n=parseFloat(i.getPropertyValue("border-top"))||0,r=parseFloat(i.getPropertyValue("border-bottom"))||0,s=parseFloat(i.getPropertyValue("padding-top"))||0,o=parseFloat(i.getPropertyValue("padding-bottom"))||0;return e-n-r-s-o}function i(t){return t.array().filter(function(t){return!(t instanceof Text||t instanceof HTMLLinkElement||t instanceof HTMLStyleElement||t instanceof HTMLTemplateElement||"PUPPET-MORPHURL"==t.nodeName||t instanceof HTMLScriptElement)})}function n(t,e,i,n){for(var s=0,o=t.length;o>s;s++){var a=t[s];if(!i[a.id]){var h=JSON.parse(JSON.stringify(n));h.priority=0==e.length?.5:r(e)*(1-1/o),h.id=a.id,Object.defineProperty(h,"container",{value:i.root,writable:!0}),e.push(h),i[a.id]=h}}}function r(t){for(var e=1,i=0,n=t.length;n>i;i++)t[i].priority<e&&(e=t[i].priority);return 0>e&&(e=0),e}function s(t,e){var i=t;for(i=i.parentNode;i&&"BODY"!=i.tagName;){if(i.tagName==t.tagName){i.addEventListener("juicy-tile-list-refresh",e);break}i=i.parentNode}}function o(t,e){e.$.container.children.length&&(e.$.container.innerHTML="");for(var i,n,r,s,o=[],h="",l=0,d=document.createDocumentFragment(),u=0,c=t.length;c>u;u++)r=t[u],"JUICY-TILE-GROUP"!==r.tagName?(s=h+l,l++,i=document.importNode(a,!0),n=i.firstChild,n.id=s,n.firstChild.setAttribute("select","[juicytile='"+s+"']"),d.appendChild(i),r.setAttribute("juicytile",s),o.push(n),o[s]=n):(h=r.getAttribute("name")||"",h+="/",l=0);return e.$.container.appendChild(d),o}var a=(document._currentScript||document.currentScript).ownerDocument.getElementById("juicy-tile").content,h={width:256,height:128,priority:0};Polymer("juicy-tile-list",Platform.mixin({},Package.prototype,{elements:null,tiles:null,allItems:null,duration:.5,defaultTileSetup:h,created:function(){this.setup={}},sorter:function(t,e){return e.priority-t.priority},createItemsList:function(){this.elements=i(this.children),this.tiles=o(this.elements,this),n(this.tiles,this.setup.items,this.allItems,this.defaultTileSetup),this.tiles.root=this.$.container},parseDeclaration:function(t){var e=this.fetchTemplate(t),i=this.createShadowRoot(),n=document.importNode(e.content,!0);this.$={container:n.getElementById("container")},i.appendChild(n),this.shadowRoots[t.name]=i},domReady:function(){var t=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(),document.attachEvent?this.attachEvent("onresize",this.refresh.bind(this,null,null)):s(this,this.async.bind(this,"refresh",[null,null],100*this.duration+1)),window.addEventListener("resize",this.refresh.bind(this,null,null),!0),t.refresh();var e=new MutationObserver(function(e){e.forEach(function(i){console.log("observation",i.type,arguments,e),i.addedNodes&&(t.createItemsList(),t.refresh())})});e.observe(t,{childList:!0}),t.async(function(){t.isReady=!0})},deleteContainer:function(t,e){var i=Package.prototype.deleteContainer.call(this,t,e),n=this.tiles[i.id];return n.parentNode.removeChild(n),i},cleanupDOM:function(){for(var t=this.$.container.querySelectorAll(".containerBackground"),e=0,i=t.length;i>e;e++)this.$.container.removeChild(t[e])},packItems:function(i){i||(i=this.setup);var n=this.tiles;if("downRight"!=this.setup.direction?(this.setup.width=t(this),this.setup.heightAuto=!0):(this.setup.height=e(this),this.setup.widthAuto=!0),n)for(var r,s,o=i.items.length;o--;)r=i.items[o],s=n[r.id],void 0!==r.items&&(s||(s=document.createElement("DIV"),s.className="containerBackground",n[r.id]=s,s.id=r.id,this.$.container.appendChild(s)),void 0!=r.content&&(s.innerHTML=r.content)),s&&!r.items&&(r.widthAuto&&(s.style.width="",r.width=s.scrollWidth),r.heightAuto&&(r.widthAuto||(s.style.width="string"==typeof r.width?r.width:r.width+"px"),s.style.height="",r.height=s.scrollHeight));return Package.prototype.packItems.call(this,i)},refresh:function(){var t=this.$.container,e=this.packItems();t.style.width=e.width+"px",t.style.height=e.height+"px",this.renderer(e,this.tiles,0,0),this.dispatchEvent(new CustomEvent("juicy-tile-list-refresh"))},setupChanged:function(){if(this.isReady){this.cleanupDOM(),Package.call(this,this.setup),n(this.tiles,this.setup.items,this.allItems,this.defaultTileSetup);var t=this;t.refresh()}},_getMinimumDimension:function(t,e,i){var n=[];if(t.length<1)throw new Error("I need at least one element");t.sort(function(t,i){return t[e]-i[e]}),n.push({start:t[0][e],end:t[0][e]+t[0][i]});for(var r=1,s=t.length;s>r;r++){var o=n[n.length-1],a=t[r][e],h=t[r][e]+t[r][i];o.end<a?n.push({start:a,end:h}):o.end<h&&(o.end=h)}for(var l=0,r=0,s=n.length;s>r;r++)l+=n[r].end-n[r].start;return l},getMinimumDimensions:function(t){return{width:this._getMinimumDimension(t,"offsetLeft","offsetWidth"),height:this._getMinimumDimension(t,"offsetTop","offsetHeight")}},renderer:function l(t,e,i,n,r){for(var s,o,a,h,d,u,c=t.items.length;c--;)if(s=t.items[c],o=e[s.id]){if(a=o.style,u=r||s.hidden)a.display="none";else{a.display="",h=(s.x||0)+i,d=(s.y||0)+n;var p=s.oversize||0;a.left=h-p+"px",a.top=d-p+"px",a.width=s.width+2*p+"px",a.height=s.height+2*p+"px",void 0!==s.background&&(a.backgroundColor=s.background||"transparent")}s.items&&l(s,e,h,d,u)}}}))}();</script></polymer-element>