Documentation
Material Design components
This web starter template includes Material Design Lite components, implemented using zuix.js, and that can be also rendered using zx short code tags.
Material Design tags
button
Usage:
{% zx 'button' '<link>' ['<type>' ['<classes>']] %}
+}Material Design components
This web starter template includes Material Design Lite components, implemented using zuix.js, and that can be also rendered using zx short code tags.
Material Design tags
button
Usage:
{% zx 'button' '<link>' ['<type>' ['<classes>']] %}
<content>
{% endzx %}
Where '<type>' can be one of the following:
flatraisedfab
and '<classes>' can be one of the following values:
coloredaccentprimarymini-fab (can be added only if type is fab)
Examples
Basic button
{% zx 'button' '#test-link-1' %}
Basic
diff --git a/docs/content/docs/page-options/index.bundle.ext.js b/docs/content/docs/page-options/index.bundle.ext.js
index 251990f..a968040 100644
--- a/docs/content/docs/page-options/index.bundle.ext.js
+++ b/docs/content/docs/page-options/index.bundle.ext.js
@@ -1 +1 @@
-!function(){"use strict";function s(s,t){var e,i;s&&(t.element_.classList.contains(t.CssClasses_.MDL_JS_RIPPLE_EFFECT)&&((e=document.createElement("span")).classList.add(t.CssClasses_.MDL_RIPPLE_CONTAINER),e.classList.add(t.CssClasses_.MDL_JS_RIPPLE_EFFECT),(i=document.createElement("span")).classList.add(t.CssClasses_.MDL_RIPPLE),e.appendChild(i),s.appendChild(e)),s.addEventListener("click",function(e){"#"===s.getAttribute("href").charAt(0)&&(e.preventDefault(),e=s.href.split("#")[1],e=t.element_.querySelector("#"+e),t.resetTabState_(),t.resetPanelState_(),s.classList.add(t.CssClasses_.ACTIVE_CLASS),e.classList.add(t.CssClasses_.ACTIVE_CLASS))}))}function c(s,t,i,n){function a(){var e=s.href.split("#")[1],e=n.content_.querySelector("#"+e);n.resetTabState_(t),n.resetPanelState_(i),s.classList.add(n.CssClasses_.IS_ACTIVE),e.classList.add(n.CssClasses_.IS_ACTIVE)}var e,l;n.tabBar_.classList.contains(n.CssClasses_.JS_RIPPLE_EFFECT)&&((e=document.createElement("span")).classList.add(n.CssClasses_.RIPPLE_CONTAINER),e.classList.add(n.CssClasses_.JS_RIPPLE_EFFECT),(l=document.createElement("span")).classList.add(n.CssClasses_.RIPPLE),e.appendChild(l),s.appendChild(e)),n.tabBar_.classList.contains(n.CssClasses_.TAB_MANUAL_SWITCH)||s.addEventListener("click",function(e){"#"===s.getAttribute("href").charAt(0)&&(e.preventDefault(),a())}),s.show=a}var p,C,u,n={upgradeDom:function(e,s){},upgradeElement:function(e,s){},upgradeElements:function(e){},upgradeAllRegistered:function(){},registerUpgradedCallback:function(e,s){},register:function(e){},downgradeElements:function(e){}};function E(e,s){for(var t=0;tt+1?s[t+1]:s[0]).focus()):e.keyCode===this.Keycodes_.SPACE||e.keyCode===this.Keycodes_.ENTER?(e.preventDefault(),t=new MouseEvent("mousedown"),e.target.dispatchEvent(t),t=new MouseEvent("mouseup"),e.target.dispatchEvent(t),e.target.click()):e.keyCode===this.Keycodes_.ESCAPE&&(e.preventDefault(),this.hide())))},f.prototype.handleItemClick_=function(e){e.target.hasAttribute("disabled")?e.stopPropagation():(this.closing_=!0,window.setTimeout(function(e){this.hide(),this.closing_=!1}.bind(this),this.Constant_.CLOSE_TIMEOUT))},f.prototype.applyClip_=function(e,s){this.element_.classList.contains(this.CssClasses_.UNALIGNED)?this.element_.style.clip="":this.element_.classList.contains(this.CssClasses_.BOTTOM_RIGHT)?this.element_.style.clip="rect(0 "+s+"px 0 "+s+"px)":this.element_.classList.contains(this.CssClasses_.TOP_LEFT)?this.element_.style.clip="rect("+e+"px 0 "+e+"px 0)":this.element_.classList.contains(this.CssClasses_.TOP_RIGHT)?this.element_.style.clip="rect("+e+"px "+s+"px "+e+"px "+s+"px)":this.element_.style.clip=""},f.prototype.removeAnimationEndListener_=function(e){e.target.classList.remove(f.prototype.CssClasses_.IS_ANIMATING)},f.prototype.addAnimationEndListener_=function(){this.element_.addEventListener("transitionend",this.removeAnimationEndListener_),this.element_.addEventListener("webkitTransitionEnd",this.removeAnimationEndListener_)},f.prototype.show=function(s){if(this.element_&&this.container_&&this.outline_){var e=this.element_.getBoundingClientRect().height,t=this.element_.getBoundingClientRect().width;this.container_.style.width=t+"px",this.container_.style.height=e+"px",this.outline_.style.width=t+"px",this.outline_.style.height=e+"px";for(var i=this.Constant_.TRANSITION_DURATION_SECONDS*this.Constant_.TRANSITION_DURATION_FRACTION,n=this.element_.querySelectorAll("."+this.CssClasses_.ITEM),a=0;a=this.maxRows&&e.preventDefault()},N.prototype.onFocus_=function(e){this.element_.classList.add(this.CssClasses_.IS_FOCUSED)},N.prototype.onBlur_=function(e){this.element_.classList.remove(this.CssClasses_.IS_FOCUSED)},N.prototype.onReset_=function(e){this.updateClasses_()},N.prototype.updateClasses_=function(){this.checkDisabled(),this.checkValidity(),this.checkDirty(),this.checkFocus()},N.prototype.checkDisabled=function(){this.input_.disabled?this.element_.classList.add(this.CssClasses_.IS_DISABLED):this.element_.classList.remove(this.CssClasses_.IS_DISABLED)},N.prototype.checkFocus=function(){Boolean(this.element_.querySelector(":focus"))?this.element_.classList.add(this.CssClasses_.IS_FOCUSED):this.element_.classList.remove(this.CssClasses_.IS_FOCUSED)},N.prototype.checkValidity=function(){this.input_.validity&&(this.input_.validity.valid?this.element_.classList.remove(this.CssClasses_.IS_INVALID):this.element_.classList.add(this.CssClasses_.IS_INVALID))},N.prototype.checkDirty=function(){this.input_.value&&0{navigator.serviceWorker.register("/web-app/service-worker.js")});
\ No newline at end of file
+!function(){"use strict";function s(s,t){var e,i;s&&(t.element_.classList.contains(t.CssClasses_.MDL_JS_RIPPLE_EFFECT)&&((e=document.createElement("span")).classList.add(t.CssClasses_.MDL_RIPPLE_CONTAINER),e.classList.add(t.CssClasses_.MDL_JS_RIPPLE_EFFECT),(i=document.createElement("span")).classList.add(t.CssClasses_.MDL_RIPPLE),e.appendChild(i),s.appendChild(e)),s.addEventListener("click",function(e){"#"===s.getAttribute("href").charAt(0)&&(e.preventDefault(),e=s.href.split("#")[1],e=t.element_.querySelector("#"+e),t.resetTabState_(),t.resetPanelState_(),s.classList.add(t.CssClasses_.ACTIVE_CLASS),e.classList.add(t.CssClasses_.ACTIVE_CLASS))}))}function c(s,t,i,n){function a(){var e=s.href.split("#")[1],e=n.content_.querySelector("#"+e);n.resetTabState_(t),n.resetPanelState_(i),s.classList.add(n.CssClasses_.IS_ACTIVE),e.classList.add(n.CssClasses_.IS_ACTIVE)}var e,l;n.tabBar_.classList.contains(n.CssClasses_.JS_RIPPLE_EFFECT)&&((e=document.createElement("span")).classList.add(n.CssClasses_.RIPPLE_CONTAINER),e.classList.add(n.CssClasses_.JS_RIPPLE_EFFECT),(l=document.createElement("span")).classList.add(n.CssClasses_.RIPPLE),e.appendChild(l),s.appendChild(e)),n.tabBar_.classList.contains(n.CssClasses_.TAB_MANUAL_SWITCH)||s.addEventListener("click",function(e){"#"===s.getAttribute("href").charAt(0)&&(e.preventDefault(),a())}),s.show=a}var p,C,u,n={upgradeDom:function(e,s){},upgradeElement:function(e,s){},upgradeElements:function(e){},upgradeAllRegistered:function(){},registerUpgradedCallback:function(e,s){},register:function(e){},downgradeElements:function(e){}};function E(e,s){for(var t=0;tt+1?s[t+1]:s[0]).focus()):e.keyCode===this.Keycodes_.SPACE||e.keyCode===this.Keycodes_.ENTER?(e.preventDefault(),t=new MouseEvent("mousedown"),e.target.dispatchEvent(t),t=new MouseEvent("mouseup"),e.target.dispatchEvent(t),e.target.click()):e.keyCode===this.Keycodes_.ESCAPE&&(e.preventDefault(),this.hide())))},f.prototype.handleItemClick_=function(e){e.target.hasAttribute("disabled")?e.stopPropagation():(this.closing_=!0,window.setTimeout(function(e){this.hide(),this.closing_=!1}.bind(this),this.Constant_.CLOSE_TIMEOUT))},f.prototype.applyClip_=function(e,s){this.element_.classList.contains(this.CssClasses_.UNALIGNED)?this.element_.style.clip="":this.element_.classList.contains(this.CssClasses_.BOTTOM_RIGHT)?this.element_.style.clip="rect(0 "+s+"px 0 "+s+"px)":this.element_.classList.contains(this.CssClasses_.TOP_LEFT)?this.element_.style.clip="rect("+e+"px 0 "+e+"px 0)":this.element_.classList.contains(this.CssClasses_.TOP_RIGHT)?this.element_.style.clip="rect("+e+"px "+s+"px "+e+"px "+s+"px)":this.element_.style.clip=""},f.prototype.removeAnimationEndListener_=function(e){e.target.classList.remove(f.prototype.CssClasses_.IS_ANIMATING)},f.prototype.addAnimationEndListener_=function(){this.element_.addEventListener("transitionend",this.removeAnimationEndListener_),this.element_.addEventListener("webkitTransitionEnd",this.removeAnimationEndListener_)},f.prototype.show=function(s){if(this.element_&&this.container_&&this.outline_){var e=this.element_.getBoundingClientRect().height,t=this.element_.getBoundingClientRect().width;this.container_.style.width=t+"px",this.container_.style.height=e+"px",this.outline_.style.width=t+"px",this.outline_.style.height=e+"px";for(var i=this.Constant_.TRANSITION_DURATION_SECONDS*this.Constant_.TRANSITION_DURATION_FRACTION,n=this.element_.querySelectorAll("."+this.CssClasses_.ITEM),a=0;a=this.maxRows&&e.preventDefault()},N.prototype.onFocus_=function(e){this.element_.classList.add(this.CssClasses_.IS_FOCUSED)},N.prototype.onBlur_=function(e){this.element_.classList.remove(this.CssClasses_.IS_FOCUSED)},N.prototype.onReset_=function(e){this.updateClasses_()},N.prototype.updateClasses_=function(){this.checkDisabled(),this.checkValidity(),this.checkDirty(),this.checkFocus()},N.prototype.checkDisabled=function(){this.input_.disabled?this.element_.classList.add(this.CssClasses_.IS_DISABLED):this.element_.classList.remove(this.CssClasses_.IS_DISABLED)},N.prototype.checkFocus=function(){Boolean(this.element_.querySelector(":focus"))?this.element_.classList.add(this.CssClasses_.IS_FOCUSED):this.element_.classList.remove(this.CssClasses_.IS_FOCUSED)},N.prototype.checkValidity=function(){this.input_.validity&&(this.input_.validity.valid?this.element_.classList.remove(this.CssClasses_.IS_INVALID):this.element_.classList.add(this.CssClasses_.IS_INVALID))},N.prototype.checkDirty=function(){this.input_.value&&0{navigator.serviceWorker.register("/web-app/service-worker.js")});
\ No newline at end of file
diff --git a/docs/content/docs/page-options/index.bundle.js b/docs/content/docs/page-options/index.bundle.js
index 4d81f44..ebabb70 100644
--- a/docs/content/docs/page-options/index.bundle.js
+++ b/docs/content/docs/page-options/index.bundle.js
@@ -1 +1,45 @@
-zuix.setComponentCache([{componentId:"/web-app/lib/1.1/controllers/header-auto-hide",controller:function(){"use strict";let e={};return e.exports=function(o){let i,t,s,r,l,a=0,c;function p(){null!=i&&i.hasClass("header-collapse")&&i.removeClass("header-collapse").addClass("header-expand"),null!=t&&t.hasClass("footer-collapse")&&t.removeClass("footer-collapse").addClass("footer-expand"),c&&c.check()}function d(){i.hasClass("header-collapse")||i.removeClass("header-expand").addClass("header-collapse"),null==t||t.hasClass("footer-collapse")||t.removeClass("footer-expand").addClass("footer-collapse")}o.init=function(){o.options().css=!1,o.options().html=!1},o.create=function(){if(s=o.options().showEnd||"true"===o.view().attr("data-o-show-end"),!(i=o.options().header||o.view().attr("data-o-header")))throw new Error("Header element not specified.");if(0===(i=zuix.field(i)).length())throw new Error('Header element not found: "'+i+'".');r=i.position().rect.height;var e=getComputedStyle(i.get()).position;"fixed"!==e&&"absolute"!==e&&(a=r);const n=o.view();zuix.$.appendCss("\n/* Header bar shrink/expand */\n@keyframes header-collapse-anim {\n from { top: 0; }\n to { top: -"+r+"px; }\n}\n@keyframes header-expand-anim {\n from { top: -"+r+"px; }\n to { top: 0; }\n}\n.header-collapse {\n animation-fill-mode: forwards;\n animation-name: header-collapse-anim;\n animation-duration: 0.5s;\n top: -"+r+"px;\n}\n.header-expand {\n animation-fill-mode: forwards;\n animation-name: header-expand-anim;\n animation-duration: 0.5s;\n top: 0px;\n}\n",null,"onscroll_header_hide_show");e=o.options().footer||o.view().attr("data-o-footer");null!=e&&((t=zuix.field(e)).css({position:"fixed",zIndex:1}),l=t.position().rect.height,zuix.$.appendCss("\n/* Footer bar shrink/expand */\n@keyframes footer-collapse-anim {\n from { bottom: 0; }\n to { bottom: -"+l+"px; }\n}\n@keyframes footer-expand-anim {\n from { bottom: -"+l+"px; }\n to { bottom: 0; }\n}\n.footer-collapse {\n animation-fill-mode: forwards;\n animation-name: footer-collapse-anim;\n animation-duration: 0.5s;\n bottom: -"+l+"px;\n}\n.footer-expand {\n animation-fill-mode: forwards;\n animation-name: footer-expand-anim;\n animation-duration: 0.5s;\n bottom: 0;\n}\n",null,"zkit_onscroll_hide_show")),zuix.load("@lib/controllers/scroll-helper",{view:n,on:{"scroll:change":function(e,t){"scroll"===t.event&&t.info.viewport.y<-a?t.info.shift.y<-4?(0=o&&(n.apply(e,t),s=Date.now())},o-(Date.now()-s))):(n.apply(e,t),s=Date.now())}}return e.exports=function(){const s={timestamp:0,size:{width:0,height:0},viewport:{x:0,y:0,width:0,height:0}};let t,n,i,r=0,l;const a=this;function c(){null!=t&&clearTimeout(t);var e=(new Date).getTime();if(100m+100&&l.stepTimep?(f=!0,a=!1,t.get().draggable=!1,g(e,e.x,e.y)):a=!0},passive:c}).on("mousemove",{handler:function(e){!a&&f&&t(e,e.x,e.y)},passive:c}).on("mouseup",function(e){1!==e.which||a||(f=!1,w(e))}).on("touchstart",{handler:function(e){const t=zuix.$(e.target);!(a=-1===document.elementsFromPoint(e.touches[0].clientX,e.touches[0].clientY).indexOf(x.view().get()))&&0===t.parent('[class*="no-gesture"]').length()&&e.touches[0].clientX>p?(a=!1,t.get().draggable=!1,g(e,e.touches[0].clientX,e.touches[0].clientY)):a=!0},passive:c}).on("touchmove",{handler:function(e){a||t(e,e.touches[0].clientX,e.touches[0].clientY)},passive:c}).on("touchend",function(e){a||w(e)})}},e.exports}()}]);
\ No newline at end of file
+zuix.setComponentCache([{componentId:"https://zuixjs.github.io/zkit/lib/1.2/controllers/header-auto-hide",controller:function(){"use strict";let e={};return e.exports=function(r){let l,t,a,c,u,p=0,d;function h(){null!=l&&l.hasClass("header-collapse")&&l.removeClass("header-collapse").addClass("header-expand"),null!=t&&t.hasClass("footer-collapse")&&t.removeClass("footer-collapse").addClass("footer-expand"),d&&d.check()}function f(){l.hasClass("header-collapse")||l.removeClass("header-expand").addClass("header-collapse"),null==t||t.hasClass("footer-collapse")||t.removeClass("footer-expand").addClass("footer-collapse")}r.init=function(){r.options().css=!1,r.options().html=!1},r.create=function(){a=r.options().showEnd,l=r.options().header;const o=r.options().zIndex||10;if(!l)throw new Error("Header element not specified.");if(0===(l=zuix.field(l)).length())throw new Error('Header element not found: "'+l+'".');const n=getComputedStyle(l.get());zuix.$.appendCss(`
+/* Header bar shrink/expand */
+@keyframes header-collapse-anim {
+ from { top: 0; }
+ to { top: var(--header-height); }
+}
+@keyframes header-expand-anim {
+ from { top: var(--header-height); }
+ to { top: 0; }
+}
+.header-collapse {
+ animation-fill-mode: forwards;
+ animation-name: header-collapse-anim;
+ animation-duration: 0.5s;
+ top: var(--header-height);
+}
+.header-expand {
+ animation-fill-mode: forwards;
+ animation-name: header-expand-anim;
+ animation-duration: 0.5s;
+ top: 0px;
+}
+`,null,"zkit_header_auto_hide");var e=r.options().footer;let i=null;null!=e&&((t=zuix.field(e)).css({position:"fixed",zIndex:o}),i=getComputedStyle(t.get()),zuix.$.appendCss(`
+/* Footer bar shrink/expand */
+@keyframes footer-collapse-anim {
+ from { bottom: 0; }
+ to { bottom: var(--footer-height); }
+}
+@keyframes footer-expand-anim {
+ from { bottom: var(--footer-height); }
+ to { bottom: 0; }
+}
+.footer-collapse {
+ animation-fill-mode: forwards;
+ animation-name: footer-collapse-anim;
+ animation-duration: 0.5s;
+ bottom: var(--footer-height);
+}
+.footer-expand {
+ animation-fill-mode: forwards;
+ animation-name: footer-expand-anim;
+ animation-duration: 0.5s;
+ bottom: 0;
+}
+`,null,"zkit_header_auto_hide"));const s=r.options().scrollHost||r.view();zuix.load("@lib/controllers/scroll-helper",{view:s,on:{"scroll:change":function(e,t){c=parseFloat(n.height),"fixed"!==n.position&&"absolute"!==n.position&&(p=c),document.documentElement.style.setProperty("--header-height",-c+"px"),i&&(u=parseFloat(i.height),document.documentElement.style.setProperty("--footer-height",-u+"px")),"scroll"===t.event&&t.info.viewport.y<-p?t.info.shift.y<-4?(0=n&&(o.apply(e,t),s=Date.now())},n-(Date.now()-s))):(o.apply(e,t),s=Date.now())}}return e.exports=function(){const s={timestamp:0,size:{width:0,height:0},viewport:{x:0,y:0,width:0,height:0}};let t,o,i,r=0,l;const a=this;function c(){null!=t&&clearTimeout(t);var e=(new Date).getTime();if(100m+100&&l.stepTimeu?(f=!0,a=!1,t.get().draggable=!1,x(e,e.x,e.y)):a=!0},passive:c}).on("mousemove",{handler:function(e){!a&&f&&t(e,e.x,e.y)},passive:c}).on("mouseup",function(e){1!==e.which||a||(f=!1,w(e))}).on("touchstart",{handler:function(e){const t=zuix.$(e.target);!(a=-1===document.elementsFromPoint(e.touches[0].clientX,e.touches[0].clientY).indexOf(g.view().get()))&&0===t.parent('[class*="no-gesture"]').length()&&e.touches[0].clientX>u?(a=!1,t.get().draggable=!1,x(e,e.touches[0].clientX,e.touches[0].clientY)):a=!0},passive:c}).on("touchmove",{handler:function(e){a||t(e,e.touches[0].clientX,e.touches[0].clientY)},passive:c}).on("touchend",function(e){a||w(e)})}},e.exports}()}]);
\ No newline at end of file
diff --git a/docs/content/docs/page-options/index.html b/docs/content/docs/page-options/index.html
index 3b9d7a1..2d52798 100644
--- a/docs/content/docs/page-options/index.html
+++ b/docs/content/docs/page-options/index.html
@@ -733,11 +733,11 @@
}
.theme-dark [z-load*="/components/menu-overlay"] div[z-field="menu_overlay"] {
background: radial-gradient(circle at bottom, black, #000000dd, #00000077, transparent)!important;
-}Page options
In addition to the zuix-web-starer base options, the following options are available.
Front matter data
layout
Available layouts:
landing_page
a simple splash screen used for the main page (./source/index.liquid) and that redirects to the home page (./source/home.liquid).side_drawer
a page with a responsive navigation drawer layout, like the one used by this very page.
options
mdl
use Material Design Light styles.highlight
include Prims code highlighter.ext-links
open external links in a new windowno-title
do not include page titleno-footer
do not include common footer
When using mdl style, also the theme variable can be added to the front matter for specifying the material theme to be used (e.g. indigo-pink, amber-green, etc...).
icon
Icon associated to the page. This icon is currently shown next to the page name in the side drawer's menu of the side_drawer layout.
coverPreview
A 256x256 preview image to be used in cards list, like the ones used in the home page.
Components
This web-app template is a component based application that takes advantages of zuix.js library, a very versatile and fast library for creating components.
The following components are used:
- Side Drawer with adaptive layout, that works both on mobile and desktop devices, supporting touch gestures
- Auto-hiding header, to allow a full immersive experience while reading pages on small screens
- Menu overlay, that can be used to quickly navigate within a page content, and that auto hides when the page is scrolled
- Scroll helper, used in some of the above components to handle page scroll events, and that can eventually
be used to "watch" elements position and trigger events as they become visible on screen - Gesture detector, used in various components to detect gestures
- Material Design buttons, menu and cards, that can be also rendered using liquid tags
All the above components are part of zKit library, a library of components built with zuix.js.
To learn more about how to create and load components, see zuix.js website.
Files structure in brief
Template engine folders:
./source/_data # data folder
+}Page options
In addition to the zuix-web-starer base options, the following options are available.
Front matter data
layout
Available layouts:
landing_page
a simple splash screen used for the main page (./source/index.liquid) and that redirects to the home page (./source/home.liquid).side_drawer
a page with a responsive navigation drawer layout, like the one used by this very page.
options
mdl
use Material Design Light styles.highlight
include Prims code highlighter.ext-links
open external links in a new windowno-title
do not include page titleno-footer
do not include common footer
When using mdl style, also the theme variable can be added to the front matter for specifying the material theme to be used (e.g. indigo-pink, amber-green, etc...).
icon
Icon associated to the page. This icon is currently shown next to the page name in the side drawer's menu of the side_drawer layout.
coverPreview
A 256x256 preview image to be used in cards list, like the ones used in the home page.
Components
This web-app template is a component based application that takes advantages of zuix.js library, a very versatile and fast library for creating components.
The following components are used:
- Side Drawer with adaptive layout, that works both on mobile and desktop devices, supporting touch gestures
- Auto-hiding header, to allow a full immersive experience while reading pages on small screens
- Menu overlay, that can be used to quickly navigate within a page content, and that auto hides when the page is scrolled
- Scroll helper, used in some of the above components to handle page scroll events, and that can eventually
be used to "watch" elements position and trigger events as they become visible on screen - Gesture detector, used in various components to detect gestures
- Material Design buttons, menu and cards, that can be also rendered using liquid tags
All the above components are part of zKit library, a library of components built with zuix.js.
To learn more about how to create and load components, see zuix.js website.
Files structure in brief
Template engine folders:
./source/_data # data folder
./source/_filters # filters
./source/_inc # includes and layouts
+./templates/tags/ # user-defined components liquid tags
zuix.js components folders:
./source/app # user-defined components
-./source/lib # copy of zKit components
Global asset files and folders:
./source/css
./source/images
./source/js
diff --git a/docs/content/docs/zkit-components-tags/index.bundle.ext.js b/docs/content/docs/zkit-components-tags/index.bundle.ext.js
index 251990f..a968040 100644
--- a/docs/content/docs/zkit-components-tags/index.bundle.ext.js
+++ b/docs/content/docs/zkit-components-tags/index.bundle.ext.js
@@ -1 +1 @@
-!function(){"use strict";function s(s,t){var e,i;s&&(t.element_.classList.contains(t.CssClasses_.MDL_JS_RIPPLE_EFFECT)&&((e=document.createElement("span")).classList.add(t.CssClasses_.MDL_RIPPLE_CONTAINER),e.classList.add(t.CssClasses_.MDL_JS_RIPPLE_EFFECT),(i=document.createElement("span")).classList.add(t.CssClasses_.MDL_RIPPLE),e.appendChild(i),s.appendChild(e)),s.addEventListener("click",function(e){"#"===s.getAttribute("href").charAt(0)&&(e.preventDefault(),e=s.href.split("#")[1],e=t.element_.querySelector("#"+e),t.resetTabState_(),t.resetPanelState_(),s.classList.add(t.CssClasses_.ACTIVE_CLASS),e.classList.add(t.CssClasses_.ACTIVE_CLASS))}))}function c(s,t,i,n){function a(){var e=s.href.split("#")[1],e=n.content_.querySelector("#"+e);n.resetTabState_(t),n.resetPanelState_(i),s.classList.add(n.CssClasses_.IS_ACTIVE),e.classList.add(n.CssClasses_.IS_ACTIVE)}var e,l;n.tabBar_.classList.contains(n.CssClasses_.JS_RIPPLE_EFFECT)&&((e=document.createElement("span")).classList.add(n.CssClasses_.RIPPLE_CONTAINER),e.classList.add(n.CssClasses_.JS_RIPPLE_EFFECT),(l=document.createElement("span")).classList.add(n.CssClasses_.RIPPLE),e.appendChild(l),s.appendChild(e)),n.tabBar_.classList.contains(n.CssClasses_.TAB_MANUAL_SWITCH)||s.addEventListener("click",function(e){"#"===s.getAttribute("href").charAt(0)&&(e.preventDefault(),a())}),s.show=a}var p,C,u,n={upgradeDom:function(e,s){},upgradeElement:function(e,s){},upgradeElements:function(e){},upgradeAllRegistered:function(){},registerUpgradedCallback:function(e,s){},register:function(e){},downgradeElements:function(e){}};function E(e,s){for(var t=0;tt+1?s[t+1]:s[0]).focus()):e.keyCode===this.Keycodes_.SPACE||e.keyCode===this.Keycodes_.ENTER?(e.preventDefault(),t=new MouseEvent("mousedown"),e.target.dispatchEvent(t),t=new MouseEvent("mouseup"),e.target.dispatchEvent(t),e.target.click()):e.keyCode===this.Keycodes_.ESCAPE&&(e.preventDefault(),this.hide())))},f.prototype.handleItemClick_=function(e){e.target.hasAttribute("disabled")?e.stopPropagation():(this.closing_=!0,window.setTimeout(function(e){this.hide(),this.closing_=!1}.bind(this),this.Constant_.CLOSE_TIMEOUT))},f.prototype.applyClip_=function(e,s){this.element_.classList.contains(this.CssClasses_.UNALIGNED)?this.element_.style.clip="":this.element_.classList.contains(this.CssClasses_.BOTTOM_RIGHT)?this.element_.style.clip="rect(0 "+s+"px 0 "+s+"px)":this.element_.classList.contains(this.CssClasses_.TOP_LEFT)?this.element_.style.clip="rect("+e+"px 0 "+e+"px 0)":this.element_.classList.contains(this.CssClasses_.TOP_RIGHT)?this.element_.style.clip="rect("+e+"px "+s+"px "+e+"px "+s+"px)":this.element_.style.clip=""},f.prototype.removeAnimationEndListener_=function(e){e.target.classList.remove(f.prototype.CssClasses_.IS_ANIMATING)},f.prototype.addAnimationEndListener_=function(){this.element_.addEventListener("transitionend",this.removeAnimationEndListener_),this.element_.addEventListener("webkitTransitionEnd",this.removeAnimationEndListener_)},f.prototype.show=function(s){if(this.element_&&this.container_&&this.outline_){var e=this.element_.getBoundingClientRect().height,t=this.element_.getBoundingClientRect().width;this.container_.style.width=t+"px",this.container_.style.height=e+"px",this.outline_.style.width=t+"px",this.outline_.style.height=e+"px";for(var i=this.Constant_.TRANSITION_DURATION_SECONDS*this.Constant_.TRANSITION_DURATION_FRACTION,n=this.element_.querySelectorAll("."+this.CssClasses_.ITEM),a=0;a=this.maxRows&&e.preventDefault()},N.prototype.onFocus_=function(e){this.element_.classList.add(this.CssClasses_.IS_FOCUSED)},N.prototype.onBlur_=function(e){this.element_.classList.remove(this.CssClasses_.IS_FOCUSED)},N.prototype.onReset_=function(e){this.updateClasses_()},N.prototype.updateClasses_=function(){this.checkDisabled(),this.checkValidity(),this.checkDirty(),this.checkFocus()},N.prototype.checkDisabled=function(){this.input_.disabled?this.element_.classList.add(this.CssClasses_.IS_DISABLED):this.element_.classList.remove(this.CssClasses_.IS_DISABLED)},N.prototype.checkFocus=function(){Boolean(this.element_.querySelector(":focus"))?this.element_.classList.add(this.CssClasses_.IS_FOCUSED):this.element_.classList.remove(this.CssClasses_.IS_FOCUSED)},N.prototype.checkValidity=function(){this.input_.validity&&(this.input_.validity.valid?this.element_.classList.remove(this.CssClasses_.IS_INVALID):this.element_.classList.add(this.CssClasses_.IS_INVALID))},N.prototype.checkDirty=function(){this.input_.value&&0{navigator.serviceWorker.register("/web-app/service-worker.js")});
\ No newline at end of file
+!function(){"use strict";function s(s,t){var e,i;s&&(t.element_.classList.contains(t.CssClasses_.MDL_JS_RIPPLE_EFFECT)&&((e=document.createElement("span")).classList.add(t.CssClasses_.MDL_RIPPLE_CONTAINER),e.classList.add(t.CssClasses_.MDL_JS_RIPPLE_EFFECT),(i=document.createElement("span")).classList.add(t.CssClasses_.MDL_RIPPLE),e.appendChild(i),s.appendChild(e)),s.addEventListener("click",function(e){"#"===s.getAttribute("href").charAt(0)&&(e.preventDefault(),e=s.href.split("#")[1],e=t.element_.querySelector("#"+e),t.resetTabState_(),t.resetPanelState_(),s.classList.add(t.CssClasses_.ACTIVE_CLASS),e.classList.add(t.CssClasses_.ACTIVE_CLASS))}))}function c(s,t,i,n){function a(){var e=s.href.split("#")[1],e=n.content_.querySelector("#"+e);n.resetTabState_(t),n.resetPanelState_(i),s.classList.add(n.CssClasses_.IS_ACTIVE),e.classList.add(n.CssClasses_.IS_ACTIVE)}var e,l;n.tabBar_.classList.contains(n.CssClasses_.JS_RIPPLE_EFFECT)&&((e=document.createElement("span")).classList.add(n.CssClasses_.RIPPLE_CONTAINER),e.classList.add(n.CssClasses_.JS_RIPPLE_EFFECT),(l=document.createElement("span")).classList.add(n.CssClasses_.RIPPLE),e.appendChild(l),s.appendChild(e)),n.tabBar_.classList.contains(n.CssClasses_.TAB_MANUAL_SWITCH)||s.addEventListener("click",function(e){"#"===s.getAttribute("href").charAt(0)&&(e.preventDefault(),a())}),s.show=a}var p,C,u,n={upgradeDom:function(e,s){},upgradeElement:function(e,s){},upgradeElements:function(e){},upgradeAllRegistered:function(){},registerUpgradedCallback:function(e,s){},register:function(e){},downgradeElements:function(e){}};function E(e,s){for(var t=0;tt+1?s[t+1]:s[0]).focus()):e.keyCode===this.Keycodes_.SPACE||e.keyCode===this.Keycodes_.ENTER?(e.preventDefault(),t=new MouseEvent("mousedown"),e.target.dispatchEvent(t),t=new MouseEvent("mouseup"),e.target.dispatchEvent(t),e.target.click()):e.keyCode===this.Keycodes_.ESCAPE&&(e.preventDefault(),this.hide())))},f.prototype.handleItemClick_=function(e){e.target.hasAttribute("disabled")?e.stopPropagation():(this.closing_=!0,window.setTimeout(function(e){this.hide(),this.closing_=!1}.bind(this),this.Constant_.CLOSE_TIMEOUT))},f.prototype.applyClip_=function(e,s){this.element_.classList.contains(this.CssClasses_.UNALIGNED)?this.element_.style.clip="":this.element_.classList.contains(this.CssClasses_.BOTTOM_RIGHT)?this.element_.style.clip="rect(0 "+s+"px 0 "+s+"px)":this.element_.classList.contains(this.CssClasses_.TOP_LEFT)?this.element_.style.clip="rect("+e+"px 0 "+e+"px 0)":this.element_.classList.contains(this.CssClasses_.TOP_RIGHT)?this.element_.style.clip="rect("+e+"px "+s+"px "+e+"px "+s+"px)":this.element_.style.clip=""},f.prototype.removeAnimationEndListener_=function(e){e.target.classList.remove(f.prototype.CssClasses_.IS_ANIMATING)},f.prototype.addAnimationEndListener_=function(){this.element_.addEventListener("transitionend",this.removeAnimationEndListener_),this.element_.addEventListener("webkitTransitionEnd",this.removeAnimationEndListener_)},f.prototype.show=function(s){if(this.element_&&this.container_&&this.outline_){var e=this.element_.getBoundingClientRect().height,t=this.element_.getBoundingClientRect().width;this.container_.style.width=t+"px",this.container_.style.height=e+"px",this.outline_.style.width=t+"px",this.outline_.style.height=e+"px";for(var i=this.Constant_.TRANSITION_DURATION_SECONDS*this.Constant_.TRANSITION_DURATION_FRACTION,n=this.element_.querySelectorAll("."+this.CssClasses_.ITEM),a=0;a=this.maxRows&&e.preventDefault()},N.prototype.onFocus_=function(e){this.element_.classList.add(this.CssClasses_.IS_FOCUSED)},N.prototype.onBlur_=function(e){this.element_.classList.remove(this.CssClasses_.IS_FOCUSED)},N.prototype.onReset_=function(e){this.updateClasses_()},N.prototype.updateClasses_=function(){this.checkDisabled(),this.checkValidity(),this.checkDirty(),this.checkFocus()},N.prototype.checkDisabled=function(){this.input_.disabled?this.element_.classList.add(this.CssClasses_.IS_DISABLED):this.element_.classList.remove(this.CssClasses_.IS_DISABLED)},N.prototype.checkFocus=function(){Boolean(this.element_.querySelector(":focus"))?this.element_.classList.add(this.CssClasses_.IS_FOCUSED):this.element_.classList.remove(this.CssClasses_.IS_FOCUSED)},N.prototype.checkValidity=function(){this.input_.validity&&(this.input_.validity.valid?this.element_.classList.remove(this.CssClasses_.IS_INVALID):this.element_.classList.add(this.CssClasses_.IS_INVALID))},N.prototype.checkDirty=function(){this.input_.value&&0{navigator.serviceWorker.register("/web-app/service-worker.js")});
\ No newline at end of file
diff --git a/docs/content/docs/zkit-components-tags/index.bundle.js b/docs/content/docs/zkit-components-tags/index.bundle.js
index 306b7c2..532ed06 100644
--- a/docs/content/docs/zkit-components-tags/index.bundle.js
+++ b/docs/content/docs/zkit-components-tags/index.bundle.js
@@ -1 +1,45 @@
-zuix.setComponentCache([{componentId:"/web-app/lib/1.1/components/menu-overlay",controller:function(){"use strict";let t={};return t.exports=function(r){let l=!1,c=!1,d,p,u,i,h,o=null,s=0,f="right";function a(){(c?g:x)()}function g(){d.isPlaying()||(c=!1,d.playTransition({classes:"fadeIn fadeOutDown",onEnd:function(){this.hide(),r.trigger("hide")}}))}function x(){d.isPlaying()||(c=!0,d.playTransition("fadeOutDown fadeIn"),d.show(),r.trigger("show"))}function m(){if(!u.isPlaying()){const a="fadeIn";let o="fadeOutDown",s=("right"===f?o="fadeOutRight":"left"===f&&(o="fadeOutLeft"),200/h.length());if(l){if(l){l=!1,r.trigger("close"),c?(p.playTransition({classes:"rotateIn rotateOutLeft",onEnd:p.hide}),d.playTransition("rotateOutRight rotateIn")):p.playTransition({classes:"fadeIn fadeOutDown",onEnd:p.hide}),u.playTransition({classes:"fadeIn fadeOut",holdState:!0,onEnd:function(){this.visibility("hidden")}});let i=s*h.length();"left"!==f&&"right"!==f||(i=0,s*=-1),h.each(function(t,n,e){i-=s,e.playTransition({classes:[a,o],options:{duration:"200ms",delay:i+"ms"},onEnd:e.hide}).show()}),d.show()}}else{l=!0,r.trigger("open"),d.playTransition({classes:"rotateIn rotateOutRight",onEnd:d.hide}),p.playTransition("rotateOutLeft rotateIn").show();let e=0;"left"!==f&&"right"!==f||(e=s*h.length(),s*=-1),u.playTransition("fadeOut fadeIn").visibility(""),h.each(function(t,n){e+=s,this.playTransition({classes:[o,a],options:{duration:"200ms",delay:e+"ms"}}).show()})}}}r.create=function(){f=r.options().position||r.view().attr("data-o-position")||f,d=r.field("menu_button").addClass(f).hide().on("click",m),p=r.field("menu_button_close").addClass(f).hide().on("click",m),u=r.field("menu_overlay").addClass(f).visibility("hidden").on("click",m),i=r.field("items_wrapper").addClass(f);const t=zuix.$(r.model().items).children(),n=(t.each(function(t,n){const e=zuix.$(document.createElement("div")).addClass("menu-item").append(n.observableTarget||n);i.append(e.get())}),h=i.find('div[class*="menu-item"]'),r.view());var e=r.options().buttonColor||n.attr("data-o-button-color"),e=(null!=e&&n.find(".circle-button").css({background:e}),r.options().iconColor||n.attr("data-o-icon-color")),e=(null!=e&&n.find(".circle-button i").css({fill:e,color:e}),n.attr("data-o-scroller"));if(null!=(o=null!=e?zuix.field(e):zuix.$(window))){let e=r.options().before||n.attr("data-o-before"),i=(e=e&&zuix.field(e).get(),r.options().after||n.attr("data-o-after"));i=i&&zuix.field(i).get(),o.on("scroll",function(t){var n=o.get()===window?document.documentElement.scrollTop||document.body.scrollTop:o.get().scrollTop;c?s-n<-2&&(null==i||n>i.offsetTop+i.offsetHeight-56)&&setTimeout(g,100):c||2\n \n
\n\n\x3c!-- Colored FAB menu button --\x3e\n\n\n'},{componentId:"/web-app/lib/1.1/components/media-browser",controller:function(){"use strict";let t={};return t.exports=function(a){let o=0,i=!1,t=!1,r=!0,l,c,d;function p(t,n){o=+n.in;const e=c.get(o),i=(e&&e.addClass("page-active"),c.get(+n.out));i&&i.removeClass("page-active")}function u(t){return l.page(t)}function h(){i||g(),a.view().show(),a.trigger("open")}function f(){x(),i||a.trigger("close")}function g(){r||(r=!0,a.view().addClass("fullscreen").css({height:null,maxHeight:null,aspectRatio:null}),y(),a.trigger("fullscreen:open"))}function x(){var t,n;r&&(r=!1,i&&(a.view().removeClass("fullscreen"),n=getComputedStyle(a.view().get()),t=parseInt(n.width),0===parseInt(n.height)&&(n=t/16*9,a.view().css({height:n+"px",maxHeight:n+"px",aspectRatio:"16 / 9"})),y()),a.trigger("fullscreen:close"))}function m(){(t?v:w)()}function v(){t=!1,a.trigger("controls:hide")}function w(){t=!0,null!=c&&null!=l&&c.page(l.page()),a.trigger("controls:show")}function y(){setTimeout(function(){c&&c.refresh(),l&&l.refresh()},10)}a.create=function(){a.expose({open:h,close:f,current:u,showControls:w,hideControls:v,toggleControls:m,refresh:y,fullScreen:function(t){(t?g:x)()},next:function(){l.next()},prev:function(){l.prev()}}),a.expose("ui",{get:function(){return{currentPage:o,isFirstPage:function(){return 0===o},isLastPage:function(){return!d||o===d.length()-1},inlineMode:i,showingFullscreen:r}}});const s=a.field("carousel"),n=(zuix.context(s,function(){(c=this).on("page:change",p).on("page:tap",function(t,n){l.page(n)}),setTimeout(()=>{const t=c.get(0);t&&t.addClass("page-active")})}),a.field("media"));if(zuix.context(n,function(){(l=this).on({"page:tap":function(){m(),a.view().get().focus()},"page:change":function(t,n){c.page(n.in),a.trigger("page:change",n)}}),d=n.children().each(function(t,n,e){let i=this.find('[z-field="preview"]'),o=(i.get()&&"IMG"!==i.get().tagName&&(i.attr("z-field",null),i=i.find("IMG").attr("z-field","preview")),i.on("load error",function(){c&&c.refresh()}),0 * {\n display: none;\n}\n\n[z-field="carousel"] {\n overflow: visible !important;\n height: 100%!important;\n}\n\n[z-field="preview"] {\n padding: 0 4px;\n border-top: solid 4px transparent;\n border-bottom: solid 4px transparent;\n position: relative;\n width: auto;\n height: 90%;\n transition: all 0.2s ease-in;\n opacity: 1.0;\n transform: scale(1.0);\n}\n\n[z-field="controls"] {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 140px;\n max-height: 20%;\n z-index: 1001;\n padding-left: 6px;\n padding-right: 6px;\n background-color: rgba(0,0,0,0.75);\n}\n\n[z-field*="nav"] {\n z-index: 10;\n background-color: rgba(1,1,1,0.75);\n border-radius: 12px;\n}\n\n[z-field="navPrev"] {\n position: absolute;\n left: 12px;\n bottom: calc(50% - 24px);\n border: solid 1px white;\n border-radius: 48px;\n}\n[z-field="navNext"] {\n position: absolute;\n right: 12px;\n bottom: calc(50% - 24px);\n border: solid 1px white;\n border-radius: 48px;\n}\n[z-field="navClose"] {\n position: absolute;\n right: 12px;\n top: 12px;\n}\n[z-field="navFullscreen"] {\n position: absolute;\n right: 12px;\n top: 12px;\n}\n[z-field="navFullscreen-exit"] {\n position: absolute;\n right: 12px;\n top: 12px;\n}\n\nsvg {\n vertical-align: middle!important;\n fill: white!important;\n cursor: pointer!important;\n}\n\n.media-list {\n width: 100%;\n height: 100%;\n}\n\n.page-active {\n /*box-shadow: 0 0 16px 4px rgb(0 0 255 / 100%);*/\n border-radius: 4px;\n border-top: solid 4px greenyellow!important;\n border-bottom: solid 4px greenyellow!important;\n transform: scale(1.0) !important;\n opacity: 1.0;\n padding: 0 4px;\n}\n\n@media only screen and (max-width: 820px) {\n [z-field="controls"] {\n height: 104px;\n }\n [z-field="preview"] img {\n max-height: 80px;\n }\n [z-field="navPrev"] {\n left: 6px;\n }\n [z-field="navNext"] {\n right: 6px;\n }\n [z-field="navClose"] {\n right: 6px;\n top: 6px;\n }\n [z-field="navFullscreen"] {\n right: 6px;\n top: 6px;\n }\n [z-field="navFullscreenExit"] {\n right: 6px;\n top: 6px;\n }\n}\n',view:'\n\n \n\n \n\n \n\n \n\n \n \n \n \n \n \n \n \n \n \n \n \n\n\n\x3c!-- do not remove the following line --\x3e\nComponents short codes
Using zx's short code's tags it is possible to render components and fragments without writing any HTML or JavaScript code.
Components tags
menu-overlay
This tag renders zKit's Menu Overlay component. It will show a floating menu button visible at the bottom of the page and that automatically shows/hides when the page is scrolled. The button can be positioned on the left, center or right using the position option.
Example
{% zx 'menu-overlay' %}
+}Components short codes
Using zx's short code's tags it is possible to render components and fragments without writing any HTML or JavaScript code.
Components tags
menu-overlay
This tag renders zKit's Menu Overlay component. It will show a floating menu button visible at the bottom of the page and that automatically shows/hides when the page is scrolled. The button can be positioned on the left, center or right using the position option.
Example
{% zx 'menu-overlay' %}
items:
diff --git a/docs/feed/rss.xml b/docs/feed/rss.xml
index caa3898..0c28e1a 100644
--- a/docs/feed/rss.xml
+++ b/docs/feed/rss.xml
@@ -7,44 +7,22 @@
en
Fri, 19 May 2023 17:56:59 +0200
- Fri, 19 May 2023 17:56:59 +0200
+ Tue, 23 May 2023 18:40:54 +0200
+ Tue, 23 May 2023 18:40:54 +0200
Web App Template
https://zuixjs.github.io/web-app//images/icons/icon-152x152.png
https://zuixjs.github.io/web-app/
- -
-
Search
- https://zuixjs.github.io/web-app//search/
- https://zuixjs.github.io/web-app//search/
- Search this website
- Fri, 19 May 2023 17:56:59 +0200
-
-
Documentation
https://zuixjs.github.io/web-app//content/docs/
https://zuixjs.github.io/web-app//content/docs/
Documentation section
- Fri, 19 May 2023 17:56:59 +0200
+ Tue, 23 May 2023 18:40:54 +0200
- -
-
Page options
- https://zuixjs.github.io/web-app//content/docs/page-options/
- https://zuixjs.github.io/web-app//content/docs/page-options/
- Front matter data, layout and other page options.
- Mon, 07 Mar 2022 10:34:14 +0100
-
-
Components short codes
https://zuixjs.github.io/web-app//content/docs/zkit-components-tags/
@@ -63,7 +41,7 @@
https://zuixjs.github.io/web-app//content/docs/material-design-tags/
https://zuixjs.github.io/web-app//content/docs/material-design-tags/
Rendering Material Design components using <code>zx</code> short code
- Fri, 19 May 2023 17:56:59 +0200
+ Tue, 23 May 2023 18:40:54 +0200
https://zuixjs.github.io/web-app//home/
https://zuixjs.github.io/web-app//home/
zuix.js web app home page
- Fri, 19 May 2023 17:56:59 +0200
+ Tue, 23 May 2023 18:40:54 +0200
+ -
+
Page options
+ https://zuixjs.github.io/web-app//content/docs/page-options/
+ https://zuixjs.github.io/web-app//content/docs/page-options/
+ Front matter data, layout and other page options.
+ Mon, 07 Mar 2022 10:34:14 +0100
+
+ -
+
Search
+ https://zuixjs.github.io/web-app//search/
+ https://zuixjs.github.io/web-app//search/
+ Search this website
+ Tue, 23 May 2023 18:40:54 +0200
+
diff --git a/docs/home/index.bundle.ext.js b/docs/home/index.bundle.ext.js
index 251990f..a968040 100644
--- a/docs/home/index.bundle.ext.js
+++ b/docs/home/index.bundle.ext.js
@@ -1 +1 @@
-!function(){"use strict";function s(s,t){var e,i;s&&(t.element_.classList.contains(t.CssClasses_.MDL_JS_RIPPLE_EFFECT)&&((e=document.createElement("span")).classList.add(t.CssClasses_.MDL_RIPPLE_CONTAINER),e.classList.add(t.CssClasses_.MDL_JS_RIPPLE_EFFECT),(i=document.createElement("span")).classList.add(t.CssClasses_.MDL_RIPPLE),e.appendChild(i),s.appendChild(e)),s.addEventListener("click",function(e){"#"===s.getAttribute("href").charAt(0)&&(e.preventDefault(),e=s.href.split("#")[1],e=t.element_.querySelector("#"+e),t.resetTabState_(),t.resetPanelState_(),s.classList.add(t.CssClasses_.ACTIVE_CLASS),e.classList.add(t.CssClasses_.ACTIVE_CLASS))}))}function c(s,t,i,n){function a(){var e=s.href.split("#")[1],e=n.content_.querySelector("#"+e);n.resetTabState_(t),n.resetPanelState_(i),s.classList.add(n.CssClasses_.IS_ACTIVE),e.classList.add(n.CssClasses_.IS_ACTIVE)}var e,l;n.tabBar_.classList.contains(n.CssClasses_.JS_RIPPLE_EFFECT)&&((e=document.createElement("span")).classList.add(n.CssClasses_.RIPPLE_CONTAINER),e.classList.add(n.CssClasses_.JS_RIPPLE_EFFECT),(l=document.createElement("span")).classList.add(n.CssClasses_.RIPPLE),e.appendChild(l),s.appendChild(e)),n.tabBar_.classList.contains(n.CssClasses_.TAB_MANUAL_SWITCH)||s.addEventListener("click",function(e){"#"===s.getAttribute("href").charAt(0)&&(e.preventDefault(),a())}),s.show=a}var p,C,u,n={upgradeDom:function(e,s){},upgradeElement:function(e,s){},upgradeElements:function(e){},upgradeAllRegistered:function(){},registerUpgradedCallback:function(e,s){},register:function(e){},downgradeElements:function(e){}};function E(e,s){for(var t=0;tt+1?s[t+1]:s[0]).focus()):e.keyCode===this.Keycodes_.SPACE||e.keyCode===this.Keycodes_.ENTER?(e.preventDefault(),t=new MouseEvent("mousedown"),e.target.dispatchEvent(t),t=new MouseEvent("mouseup"),e.target.dispatchEvent(t),e.target.click()):e.keyCode===this.Keycodes_.ESCAPE&&(e.preventDefault(),this.hide())))},f.prototype.handleItemClick_=function(e){e.target.hasAttribute("disabled")?e.stopPropagation():(this.closing_=!0,window.setTimeout(function(e){this.hide(),this.closing_=!1}.bind(this),this.Constant_.CLOSE_TIMEOUT))},f.prototype.applyClip_=function(e,s){this.element_.classList.contains(this.CssClasses_.UNALIGNED)?this.element_.style.clip="":this.element_.classList.contains(this.CssClasses_.BOTTOM_RIGHT)?this.element_.style.clip="rect(0 "+s+"px 0 "+s+"px)":this.element_.classList.contains(this.CssClasses_.TOP_LEFT)?this.element_.style.clip="rect("+e+"px 0 "+e+"px 0)":this.element_.classList.contains(this.CssClasses_.TOP_RIGHT)?this.element_.style.clip="rect("+e+"px "+s+"px "+e+"px "+s+"px)":this.element_.style.clip=""},f.prototype.removeAnimationEndListener_=function(e){e.target.classList.remove(f.prototype.CssClasses_.IS_ANIMATING)},f.prototype.addAnimationEndListener_=function(){this.element_.addEventListener("transitionend",this.removeAnimationEndListener_),this.element_.addEventListener("webkitTransitionEnd",this.removeAnimationEndListener_)},f.prototype.show=function(s){if(this.element_&&this.container_&&this.outline_){var e=this.element_.getBoundingClientRect().height,t=this.element_.getBoundingClientRect().width;this.container_.style.width=t+"px",this.container_.style.height=e+"px",this.outline_.style.width=t+"px",this.outline_.style.height=e+"px";for(var i=this.Constant_.TRANSITION_DURATION_SECONDS*this.Constant_.TRANSITION_DURATION_FRACTION,n=this.element_.querySelectorAll("."+this.CssClasses_.ITEM),a=0;a=this.maxRows&&e.preventDefault()},N.prototype.onFocus_=function(e){this.element_.classList.add(this.CssClasses_.IS_FOCUSED)},N.prototype.onBlur_=function(e){this.element_.classList.remove(this.CssClasses_.IS_FOCUSED)},N.prototype.onReset_=function(e){this.updateClasses_()},N.prototype.updateClasses_=function(){this.checkDisabled(),this.checkValidity(),this.checkDirty(),this.checkFocus()},N.prototype.checkDisabled=function(){this.input_.disabled?this.element_.classList.add(this.CssClasses_.IS_DISABLED):this.element_.classList.remove(this.CssClasses_.IS_DISABLED)},N.prototype.checkFocus=function(){Boolean(this.element_.querySelector(":focus"))?this.element_.classList.add(this.CssClasses_.IS_FOCUSED):this.element_.classList.remove(this.CssClasses_.IS_FOCUSED)},N.prototype.checkValidity=function(){this.input_.validity&&(this.input_.validity.valid?this.element_.classList.remove(this.CssClasses_.IS_INVALID):this.element_.classList.add(this.CssClasses_.IS_INVALID))},N.prototype.checkDirty=function(){this.input_.value&&0{navigator.serviceWorker.register("/web-app/service-worker.js")});
\ No newline at end of file
+!function(){"use strict";function s(s,t){var e,i;s&&(t.element_.classList.contains(t.CssClasses_.MDL_JS_RIPPLE_EFFECT)&&((e=document.createElement("span")).classList.add(t.CssClasses_.MDL_RIPPLE_CONTAINER),e.classList.add(t.CssClasses_.MDL_JS_RIPPLE_EFFECT),(i=document.createElement("span")).classList.add(t.CssClasses_.MDL_RIPPLE),e.appendChild(i),s.appendChild(e)),s.addEventListener("click",function(e){"#"===s.getAttribute("href").charAt(0)&&(e.preventDefault(),e=s.href.split("#")[1],e=t.element_.querySelector("#"+e),t.resetTabState_(),t.resetPanelState_(),s.classList.add(t.CssClasses_.ACTIVE_CLASS),e.classList.add(t.CssClasses_.ACTIVE_CLASS))}))}function c(s,t,i,n){function a(){var e=s.href.split("#")[1],e=n.content_.querySelector("#"+e);n.resetTabState_(t),n.resetPanelState_(i),s.classList.add(n.CssClasses_.IS_ACTIVE),e.classList.add(n.CssClasses_.IS_ACTIVE)}var e,l;n.tabBar_.classList.contains(n.CssClasses_.JS_RIPPLE_EFFECT)&&((e=document.createElement("span")).classList.add(n.CssClasses_.RIPPLE_CONTAINER),e.classList.add(n.CssClasses_.JS_RIPPLE_EFFECT),(l=document.createElement("span")).classList.add(n.CssClasses_.RIPPLE),e.appendChild(l),s.appendChild(e)),n.tabBar_.classList.contains(n.CssClasses_.TAB_MANUAL_SWITCH)||s.addEventListener("click",function(e){"#"===s.getAttribute("href").charAt(0)&&(e.preventDefault(),a())}),s.show=a}var p,C,u,n={upgradeDom:function(e,s){},upgradeElement:function(e,s){},upgradeElements:function(e){},upgradeAllRegistered:function(){},registerUpgradedCallback:function(e,s){},register:function(e){},downgradeElements:function(e){}};function E(e,s){for(var t=0;tt+1?s[t+1]:s[0]).focus()):e.keyCode===this.Keycodes_.SPACE||e.keyCode===this.Keycodes_.ENTER?(e.preventDefault(),t=new MouseEvent("mousedown"),e.target.dispatchEvent(t),t=new MouseEvent("mouseup"),e.target.dispatchEvent(t),e.target.click()):e.keyCode===this.Keycodes_.ESCAPE&&(e.preventDefault(),this.hide())))},f.prototype.handleItemClick_=function(e){e.target.hasAttribute("disabled")?e.stopPropagation():(this.closing_=!0,window.setTimeout(function(e){this.hide(),this.closing_=!1}.bind(this),this.Constant_.CLOSE_TIMEOUT))},f.prototype.applyClip_=function(e,s){this.element_.classList.contains(this.CssClasses_.UNALIGNED)?this.element_.style.clip="":this.element_.classList.contains(this.CssClasses_.BOTTOM_RIGHT)?this.element_.style.clip="rect(0 "+s+"px 0 "+s+"px)":this.element_.classList.contains(this.CssClasses_.TOP_LEFT)?this.element_.style.clip="rect("+e+"px 0 "+e+"px 0)":this.element_.classList.contains(this.CssClasses_.TOP_RIGHT)?this.element_.style.clip="rect("+e+"px "+s+"px "+e+"px "+s+"px)":this.element_.style.clip=""},f.prototype.removeAnimationEndListener_=function(e){e.target.classList.remove(f.prototype.CssClasses_.IS_ANIMATING)},f.prototype.addAnimationEndListener_=function(){this.element_.addEventListener("transitionend",this.removeAnimationEndListener_),this.element_.addEventListener("webkitTransitionEnd",this.removeAnimationEndListener_)},f.prototype.show=function(s){if(this.element_&&this.container_&&this.outline_){var e=this.element_.getBoundingClientRect().height,t=this.element_.getBoundingClientRect().width;this.container_.style.width=t+"px",this.container_.style.height=e+"px",this.outline_.style.width=t+"px",this.outline_.style.height=e+"px";for(var i=this.Constant_.TRANSITION_DURATION_SECONDS*this.Constant_.TRANSITION_DURATION_FRACTION,n=this.element_.querySelectorAll("."+this.CssClasses_.ITEM),a=0;a=this.maxRows&&e.preventDefault()},N.prototype.onFocus_=function(e){this.element_.classList.add(this.CssClasses_.IS_FOCUSED)},N.prototype.onBlur_=function(e){this.element_.classList.remove(this.CssClasses_.IS_FOCUSED)},N.prototype.onReset_=function(e){this.updateClasses_()},N.prototype.updateClasses_=function(){this.checkDisabled(),this.checkValidity(),this.checkDirty(),this.checkFocus()},N.prototype.checkDisabled=function(){this.input_.disabled?this.element_.classList.add(this.CssClasses_.IS_DISABLED):this.element_.classList.remove(this.CssClasses_.IS_DISABLED)},N.prototype.checkFocus=function(){Boolean(this.element_.querySelector(":focus"))?this.element_.classList.add(this.CssClasses_.IS_FOCUSED):this.element_.classList.remove(this.CssClasses_.IS_FOCUSED)},N.prototype.checkValidity=function(){this.input_.validity&&(this.input_.validity.valid?this.element_.classList.remove(this.CssClasses_.IS_INVALID):this.element_.classList.add(this.CssClasses_.IS_INVALID))},N.prototype.checkDirty=function(){this.input_.value&&0{navigator.serviceWorker.register("/web-app/service-worker.js")});
\ No newline at end of file
diff --git a/docs/home/index.bundle.js b/docs/home/index.bundle.js
index d492e5b..50c7883 100644
--- a/docs/home/index.bundle.js
+++ b/docs/home/index.bundle.js
@@ -1 +1,45 @@
-zuix.setComponentCache([{componentId:"/web-app/lib/1.1/templates/mdl-card-image",controller:null,css:':host {\n font-family: "Roboto","Helvetica","Arial",sans-serif !important;\n transition: box-shadow 0.2s ease-in-out;\n}\n\n.mdl-card {\n width: 256px;\n height: 256px; /* 259 306 317 342 392 292 */\n background: url(\'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\');\n background-repeat: no-repeat!important;\n background-position: center!important;\n}\n.mdl-card__actions {\n height: 52px;\n padding: 16px;\n border-top: solid 1px rgba(255,255,255, 0.4);\n background: rgba(0, 0, 0, 0.7);\n}\n.title {\n color: #fff;\n font-size: 120%;\n font-weight: 500;\n width: 220px;\n max-width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.mdl-ripple {\n background: #fff;\n}\n.mdl-card__title {\n align-items: start;\n}\n.mdl-card__title span {\n width: 100%;\n font-size: 95%;\n padding: 6px;\n background: rgba(255,255,255,0.85);\n border-radius: 3px;\n}\n\n[z-field="text"]:empty {\n display: none;\n}\n',view:'\n \n \n \n \n \n\nWelcome!
Welcome to Web App starter template.
- Navigation drawer
- Material design UI
- Search page
- RSS feed
- Example web components
- Progressive Web App
- Installable
- Works offline
- Integrated content editor
This is part of a series of templates based on zuix-web-starter. It is recommended to read its documentation before using this template.
web
starterBelow you will find documented all extra features and specific configuration for this web app template.
Welcome!
Welcome to Web App starter template.
- Navigation drawer
- Material design UI
- Search page
- RSS feed
- Example web components
- Progressive Web App
- Installable
- Works offline
- Integrated content editor
This is part of a series of templates based on zuix-web-starter. It is recommended to read its documentation before using this template.
webstarterBelow you will find documented all extra features and specific configuration for this web app template.
-
-
-
-
diff --git a/docs/lib/1.1/components/media-browser.js b/docs/lib/1.1/components/media-browser.js
deleted file mode 100644
index 8b8ed6e..0000000
--- a/docs/lib/1.1/components/media-browser.js
+++ /dev/null
@@ -1,338 +0,0 @@
-'use strict';
-
-/**
- * MenuOverlay class.
- *
- * @author Gene
- * @version 1.1.1 (2022-03-30)
- *
- * @author Gene
- * @version 1.1.0 (2022-03-25)
- *
- * @author Gene
- * @version 1.0.0 (2018-02-12)
- *
- * @constructor
- * @this {ContextController}
- */
-function MediaBrowser(cp) {
- // state vars
- let currentPage = 0;
- let inlineMode = false;
- let showingControls = false;
- let showingFullscreen = true;
-
- // view-pager views
- let fullView;
- let listView;
-
- // UI control buttons
- /** @type ZxQuery */
- let imageList;
-
- cp.create = function() {
- // export public component methods
- cp.expose({
- open: openBrowser,
- close: closeBrowser,
- current: setCurrent,
- showControls,
- hideControls,
- toggleControls,
- refresh: refreshViewPagers,
- fullScreen: function(fullScreen) {
- fullScreen ? enterFullscreen() : exitFullscreen();
- },
- next: function() {
- fullView.next();
- },
- prev: function() {
- fullView.prev();
- }
- });
-
- // UI state
- cp.expose('ui', {get: function() {
- return {
- currentPage,
- isFirstPage: function() {
- return currentPage === 0;
- },
- isLastPage: function() {
- return !imageList || currentPage === imageList.length() - 1;
- },
- inlineMode,
- showingFullscreen
- };
- }});
-
- // Carousel ViewPager component
- const carousel = cp.field('carousel');
- zuix.context(carousel, function() {
- listView = this;
- listView
- .on('page:change', pageChanged)
- .on('page:tap', function(e, page) {
- fullView.page(page);
- });
- // highlight initial page
- setTimeout(() => {
- const firstPage = listView.get(0);
- firstPage && firstPage.addClass('page-active');
- });
- });
-
- // Main ViewPager component
- const mediaList = cp.field('media');
- zuix.context(mediaList, function() {
- fullView = this;
- fullView.on({
- 'page:tap': function() {
- toggleControls();
- cp.view().get().focus();
- },
- 'page:change': function(e, page) {
- listView.page(page.in);
- cp.trigger('page:change', page);
- }
- });
- // sets list of media with thumbnails and full size items
- // with temporary preview background
- imageList = mediaList.children().each(function(i, el, $el) {
- let preview = this.find('[z-field="preview"]');
- // TODO: the following 4 lines were added for backward compatibility with 1.0.0
- if (preview.get() && preview.get().tagName !== 'IMG') {
- preview.attr('z-field', null);
- preview = preview.find('IMG').attr('z-field', 'preview');
- }
- // refresh the viewpager when images are loaded
- preview.on('load error', function() {
- if (listView) listView.refresh();
- });
- if (preview.length() > 0) {
- this.css({
- background: 'url("'+preview.attr('src')+'") scroll no-repeat center/contain'
- });
- carousel.append(preview.detach().get());
- } else {
- // TODO: add a button or something if preview thumbnail not specified
- carousel.append(document.createElement('div'));
- }
- $el.addClass('visible-on-ready');
- // creates lazy loaded components to host full sized media
- let type = this.attr('data-type');
- if (type == null) type = 'image'; // default type
- this.attr({
- 'z-load': cp.context.componentId + '/' + type,
- 'z-lazy': true,
- 'data-index': i
- });
- zuix.context(el, function() {
- this.host(cp.view());
- });
- });
- // set auto-slide option
- const autoSlide = cp.options().slide;
- fullView.slide(autoSlide != null ? +autoSlide : false);
- // final initialization steps
- initializeAnimations();
- preventImageDrag();
- // setup complete, open media-browser
- showControls();
- if (inlineMode) {
- openBrowser();
- }
- });
-
- // Keyboard navigation handling
- cp.view().attr('tabindex', 0);
- document.body.addEventListener('keydown', function(e) {
- if (cp.view().get() !== document.activeElement) {
- return;
- }
- switch (e.code) {
- case 'Escape':
- closeBrowser();
- e.preventDefault();
- break;
- case 'Space':
- toggleControls();
- e.preventDefault();
- break;
- case 'ArrowLeft':
- fullView.prev();
- e.preventDefault();
- break;
- case 'ArrowUp':
- showControls();
- e.preventDefault();
- break;
- case 'ArrowRight':
- fullView.next();
- e.preventDefault();
- break;
- case 'ArrowDown':
- hideControls();
- e.preventDefault();
- break;
- }
- });
-
- // if not inlineMode mode === true, the media-browser will be hidden
- // and show only fullscreen after the `open()` method is called
- inlineMode = cp.options().inline;
- if (!inlineMode) {
- cp.view().hide();
- showingFullscreen = false;
- const buttonName = cp.options().button;
- const button = zuix.field(buttonName);
- button.on('click', openBrowser);
- } else {
- // without this timeout the component sometimes starts "hidden"
- setTimeout(exitFullscreen, 100);
- }
- };
-
- function pageChanged(e, page) {
- currentPage = +page.in;
- const pageIn = listView.get(currentPage);
- if (pageIn) {
- pageIn.addClass('page-active');
- }
- const pageOut = listView.get(+page.out);
- if (pageOut) {
- pageOut.removeClass('page-active');
- }
- }
-
- function setCurrent(current) {
- return fullView.page(current);
- }
-
- function openBrowser() {
- if (!inlineMode) {
- enterFullscreen();
- }
- cp.view().show();
- cp.trigger('open');
- }
- function closeBrowser() {
- exitFullscreen();
- if (!inlineMode) {
- cp.trigger('close');
- }
- }
-
- function enterFullscreen() {
- if (!showingFullscreen) {
- showingFullscreen = true;
- cp.view().addClass('fullscreen').css({
- height: null,
- maxHeight: null,
- aspectRatio: null
- });
- refreshViewPagers();
- cp.trigger('fullscreen:open');
- }
- }
- function exitFullscreen() {
- if (showingFullscreen) {
- showingFullscreen = false;
- if (inlineMode) {
- cp.view().removeClass('fullscreen');
- const style = getComputedStyle(cp.view().get());
- const actualWidth = parseInt(style.width);
- const actualHeight = parseInt(style.height);
- if (actualHeight === 0) {
- const computedHeight = (actualWidth / 16 * 9 );
- cp.view().css({
- height: computedHeight + 'px',
- maxHeight: computedHeight + 'px',
- aspectRatio: '16 / 9'
- });
- }
- refreshViewPagers();
- }
- cp.trigger('fullscreen:close');
- }
- }
-
- function toggleControls() {
- if (showingControls) {
- hideControls();
- } else {
- showControls();
- }
- }
- function hideControls() {
- showingControls = false;
- cp.trigger('controls:hide');
- }
- function showControls() {
- showingControls = true;
- if (listView != null && fullView != null) {
- listView.page(fullView.page());
- }
- cp.trigger('controls:show');
- }
-
- function refreshViewPagers() {
- setTimeout(function() {
- if (listView) listView.refresh();
- if (fullView) fullView.refresh();
- }, 10);
- }
-
- function preventImageDrag() {
- // prevent default dragging on image elements
- cp.view().on('dragstart', {
- handler: function(e) {
- if (e.target.nodeName.toUpperCase() === 'IMG') {
- e.preventDefault();
- }
- },
- passive: false
- });
- }
-
- function initializeAnimations() {
- const commonOptions = {
- duration: '0.5s',
- timingFunction: 'ease-in-out'
- };
- cp.addTransition( 'fadeIn', {
- transform: 'translateXY(0,0)',
- opacity: '1'
- }, commonOptions);
- cp.addTransition( 'fadeOutUp', {
- transform: 'translateY(-200px)',
- opacity: '0'
- }, commonOptions);
- cp.addTransition( 'fadeOutDown', {
- transform: 'translateY(200px)',
- opacity: '0'
- }, commonOptions);
- cp.addTransition('fadeOutLeft', {
- transform: 'translateX(-100px)',
- opacity: 0
- }, commonOptions);
- cp.addTransition('fadeOutRight', {
- transform: 'translateX(100px)',
- opacity: 0
- }, commonOptions);
- cp.addTransition('zoomIn', {
- transform: 'scale(1)'
- }, {
- duration: '250ms',
- timingFunction: 'ease-in-out'
- });
- cp.addTransition('zoomOut', {
- transform: 'scale(0)'
- }, {
- duration: '250ms',
- timingFunction: 'ease-in-out'
- });
- }
-}
-
-module.exports = MediaBrowser;
diff --git a/docs/lib/1.1/components/media-browser/article.css b/docs/lib/1.1/components/media-browser/article.css
deleted file mode 100644
index b078fb9..0000000
--- a/docs/lib/1.1/components/media-browser/article.css
+++ /dev/null
@@ -1,17 +0,0 @@
-:host {
- position: relative;
- top:0;
- left: 0;
- bottom: 0;
- right: 0;
-}
-
-.page {
- color: white;
- position: absolute;
- left:0;
- right:0; bottom:120px;
- height:auto;
- padding: 24px;
- overflow-y: auto;
-}
diff --git a/docs/lib/1.1/components/media-browser/article.html b/docs/lib/1.1/components/media-browser/article.html
deleted file mode 100644
index 9af6f89..0000000
--- a/docs/lib/1.1/components/media-browser/article.html
+++ /dev/null
@@ -1,15 +0,0 @@
-![]()
-
- Article title
-
- And this is a subtitle where a quick brown fox
- jumped over the lazy dog.
-
-
- "On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains."
- "On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains."
- "On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains."
- "On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains."
- "On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains."
-
-
diff --git a/docs/lib/1.1/components/media-browser/image.css b/docs/lib/1.1/components/media-browser/image.css
deleted file mode 100644
index 8b8e471..0000000
--- a/docs/lib/1.1/components/media-browser/image.css
+++ /dev/null
@@ -1,158 +0,0 @@
-:host {
- position: relative;
- top:0;
- left: 0;
- bottom: 0;
- right: 0;
-}
-
-.info-container {
- width: 100%;
- top:0;
- position: absolute;
- padding: 12px 62px;
- display: flex;
- align-items: start;
- justify-content: center;
-}
-.info-box {
- background: rgba(255,255,255,0.85);
- border: solid 1px rgba(255,255,255,0.25);
- border-radius: 6px;
- max-width: 100%;
- height:auto;
- padding: 6px;
- overflow: hidden;
-}
-
-.cover {
- position: relative;
- width: 100%;
- height: 100%;
- overflow-y: auto;
-}
-
-img {
- position: absolute;
- margin: auto;
- top: 0; bottom: 0;
- left: 0; right: 0;
- max-width: 100%;
- max-height: 100%;
-}
-
-[z-field="title"] {
- font-weight: 500;
- color: #073669;
- font-size: 120%!important;
- margin: 0!important;
- padding: 0!important;
-}
-[z-field="description"] {
- color: #0c5aaf;
- font-weight: 400;
- font-size: 100%!important;
- line-height: 120%;
- margin: 0;
- padding: 0;
-}
-[z-field="url"] {
- display: none;
-}
-
-@media only screen and (max-width: 820px) {
- .info-container {
- padding-top: 6px;
- }
-}
-
-
-/* spin anim */
-div.loader {
- position: absolute;
- margin: auto;
- left: 0;
- top: 0;
- right: 0;
- bottom: 0;
-}
-.loader {
- color: #ffffff;
- font-size: 300%;
- text-indent: -9999em;
- overflow: hidden;
- width: 1em;
- height: 1em;
- border-radius: 50%;
- margin: 72px auto;
- position: relative;
- -webkit-transform: translateZ(0);
- -ms-transform: translateZ(0);
- transform: translateZ(0);
- -webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease;
- animation: load6 1.7s infinite ease, round 1.7s infinite ease;
-}
-@-webkit-keyframes load6 {
- 0% {
- box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
- }
- 5%,
- 95% {
- box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
- }
- 10%,
- 59% {
- box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
- }
- 20% {
- box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
- }
- 38% {
- box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
- }
- 100% {
- box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
- }
-}
-@keyframes load6 {
- 0% {
- box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
- }
- 5%,
- 95% {
- box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
- }
- 10%,
- 59% {
- box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
- }
- 20% {
- box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
- }
- 38% {
- box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
- }
- 100% {
- box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
- }
-}
-@-webkit-keyframes round {
- 0% {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- 100% {
- -webkit-transform: rotate(360deg);
- transform: rotate(360deg);
- }
-}
-@keyframes round {
- 0% {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- 100% {
- -webkit-transform: rotate(360deg);
- transform: rotate(360deg);
- }
-}
diff --git a/docs/lib/1.1/components/media-browser/image.html b/docs/lib/1.1/components/media-browser/image.html
deleted file mode 100644
index ad5a87f..0000000
--- a/docs/lib/1.1/components/media-browser/image.html
+++ /dev/null
@@ -1,14 +0,0 @@
-
- ![]()
-
-
-
-
-
- The quick brown fox jumped over the lazy dog.
-
-
-
-
diff --git a/docs/lib/1.1/components/media-browser/image.js b/docs/lib/1.1/components/media-browser/image.js
deleted file mode 100644
index 9047895..0000000
--- a/docs/lib/1.1/components/media-browser/image.js
+++ /dev/null
@@ -1,50 +0,0 @@
-'use strict';
-
-/**
- * ImageItem class.
- *
- * @author Gene
- * @version 1.0.0 (2018-02-12)
- *
- * @constructor
- * @this {ContextController}
- */
-function ImageItem() {
- let mediaBrowser;
- let infoBox;
-
- const cp = this;
-
- cp.create = function() {
- cp.expose('host', setHost);
- cp.field('full-image').on('load', function() {
- cp.view().css({background: null});
- cp.view('.loader').hide();
- }).attr('src', cp.field('url').attr('href') || cp.field('url').html());
- infoBox = cp.view('.info-container')
- .addClass('fadeIn');
- };
-
- function setHost(h) {
- mediaBrowser = zuix.context(h);
- const showTitleBox = cp.field('title').html().length > 0;
- if (showTitleBox) {
- h.on('controls:hide', function() {
- infoBox.addClass('fadeOutUp').removeClass('fadeIn');
- }).on('controls:show', function() {
- infoBox.removeClass('fadeOutUp').addClass('fadeIn');
- }).on('page:change', function(e, page) {
- if (mediaBrowser.current() === +cp.view().attr('data-index')) {
- infoBox.removeClass('fadeOutUp').addClass('fadeIn');
-// mediaBrowser.showControls();
- } else if (infoBox.position().visible) {
- infoBox.addClass('fadeOutUp').removeClass('fadeIn');
- }
- });
- } else {
- infoBox.hide();
- }
- }
-}
-
-module.exports = ImageItem;
diff --git a/docs/lib/1.1/components/media-browser/video-yt.css b/docs/lib/1.1/components/media-browser/video-yt.css
deleted file mode 100644
index bcb5676..0000000
--- a/docs/lib/1.1/components/media-browser/video-yt.css
+++ /dev/null
@@ -1,34 +0,0 @@
-:host {
- width: 100%;
- height: 100%;
-}
-[z-field="overlay"] {
- background: rgba(255,255,255,0);
- left: 0; right: 0;
- bottom: 56px; top: 0;
- position: absolute;
-}
-[z-field="player-controls"] {
- background-color: rgba(255,255,255,0);
- padding: 12px;
-}
-[z-field*="nav-"] {
- width: 48px;
-}
-[z-field="video"] {
- display: none;
-}
-
-iframe {
- position: absolute;
- left:0;
- right: 0;
- top:0;
- bottom: 0;
-}
-
-@media only screen and (max-width: 820px) {
- [z-field="player-controls"] {
- padding: 6px;
- }
-}
diff --git a/docs/lib/1.1/components/media-browser/video-yt.html b/docs/lib/1.1/components/media-browser/video-yt.html
deleted file mode 100644
index d6d893d..0000000
--- a/docs/lib/1.1/components/media-browser/video-yt.html
+++ /dev/null
@@ -1,34 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/docs/lib/1.1/components/media-browser/video-yt.js b/docs/lib/1.1/components/media-browser/video-yt.js
deleted file mode 100644
index 47a94e4..0000000
--- a/docs/lib/1.1/components/media-browser/video-yt.js
+++ /dev/null
@@ -1,154 +0,0 @@
-'use strict';
-
-/**
- * YouTubeVideoItem class.
- *
- * @author Gene
- * @version 1.1.0 (2022-03-27)
- *
- * @author Gene
- * @version 1.0.0 (2018-02-12)
- *
- * @constructor
- * @this {ContextController}
- */
-function YouTubeVideoItem(cp) {
- let mediaBrowser;
- let player;
- let controlsHideTimeout;
- let pageIndex = -1;
-
- cp.create = function() {
- pageIndex = +cp.view().attr('data-index');
- // expose public methods
- cp.expose('host', setHost);
- cp.expose('setup', setPlayer);
- cp.expose('play', play);
- cp.expose('pause', pause);
- cp.expose('stop', stop);
- cp.expose('active', isActive);
- // set initial controls state
- cp.field('nav-pause').hide();
- // load YouTube API if not already loaded
- const ytApiSrc = 'https://www.youtube.com/iframe_api';
- if (zuix.$.find('script[src="' + ytApiSrc + '"]').length() === 0) {
- const tag = document.createElement('script');
- tag.src = ytApiSrc;
- const firstScriptTag = zuix.$.find('script').get();
- firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
- }
- };
-
- function setHost(view) {
- mediaBrowser = zuix.context(view);
- const controls = cp.field('player-controls');
- mediaBrowser.on({
- 'open': function() {
- if (isActive()) {
- play();
- }
- },
- 'close': pause,
- 'controls:show': function() {
- controls.playTransition({classes: 'fadeOutUp fadeIn', holdState: true});
- },
- 'controls:hide': function() {
- controls.playTransition({classes: 'fadeIn fadeOutUp', holdState: true});
- },
- 'page:change': pageChanged,
- 'refresh:inactive': function() {
- const ps = player.getPlayerState();
- if (isActive() && (ps === 1 || ps === 3)) {
- pause();
- }
- },
- 'refresh:active': function() {
- const ps = player.getPlayerState();
- if (isActive() && ps !== 1 && ps !== 3) {
- play();
- }
- }
- });
- if (mediaBrowser.current() === pageIndex) {
- play();
- }
- }
-
- function isActive() {
- return mediaBrowser && mediaBrowser.current() === pageIndex;
- }
-
- function pageChanged(e) {
- const page = e.detail;
- if (+page.out === pageIndex) {
- pause();
- } else if (+page.in === pageIndex) {
- play();
- }
- }
-
- // YouTube Player API
-
- function setPlayer() {
- const videoUrl = cp.field('url').attr('href') || cp.field('url').html();
- player = new YT.Player(cp.field('player').get(), {
- height: '100%',
- width: '100%',
- playerVars: {controls: 1, disablekb: 1, fs: 0, modestbranding: 0, rel: 0, showinfo: 0, ecver: 2},
- videoId: parseVideoId(videoUrl),
- events: {
- 'onReady': onPlayerReady,
- 'onStateChange': onPlayerStateChange
- }
- });
- return player;
- }
-
- function onPlayerReady(event) {
- // not used
- }
- function onPlayerStateChange(event) {
- /** Yourube API
- -1 (unstarted)
- 0 (ended)
- 1 (playing)
- 2 (paused)
- 3 (buffering)
- 5 (video cued)
- **/
- if (controlsHideTimeout !== null) {
- clearTimeout(controlsHideTimeout);
- }
- if (event.data === 0) {
- mediaBrowser.showControls();
- } else if (event.data === 1) {
- cp.field('nav-play').hide();
- cp.field('nav-pause').show();
- controlsHideTimeout = setTimeout(function() {
- mediaBrowser.hideControls();
- }, 2500);
- } else if (event.data === 2) {
- cp.field('nav-play').show();
- cp.field('nav-pause').hide();
- }
- }
-
- function play() {
- player.playVideo();
- }
- function pause() {
- player.pauseVideo();
- }
- function stop() {
- player.stopVideo();
- }
-
- // https://stackoverflow.com/questions/3452546/how-do-i-get-the-youtube-video-id-from-a-url
- function parseVideoId(url) {
- const regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
- const match = url.match(regExp);
- return (match && match[7].length === 11) ? match[7] : url;
- }
-}
-
-module.exports = YouTubeVideoItem;
diff --git a/docs/lib/1.1/components/media-browser/video.css b/docs/lib/1.1/components/media-browser/video.css
deleted file mode 100644
index 905c613..0000000
--- a/docs/lib/1.1/components/media-browser/video.css
+++ /dev/null
@@ -1,22 +0,0 @@
-[z-field="overlay"] {
- background: rgba(255,255,255,0);
- left: 0; right: 0;
- bottom: 56px; top: 0;
- position: absolute;
-}
-[z-field="player-controls"] {
- background-color: rgba(255,255,255,0);
- padding: 12px;
-}
-[z-field*="nav-"] {
- width: 48px;
-}
-[z-field="preview"], [z-field="url"] {
- display: none;
-}
-
-@media only screen and (max-width: 820px) {
- [z-field="player-controls"] {
- padding: 6px;
- }
-}
diff --git a/docs/lib/1.1/components/media-browser/video.html b/docs/lib/1.1/components/media-browser/video.html
deleted file mode 100644
index a73417a..0000000
--- a/docs/lib/1.1/components/media-browser/video.html
+++ /dev/null
@@ -1,23 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/docs/lib/1.1/components/media-browser/video.js b/docs/lib/1.1/components/media-browser/video.js
deleted file mode 100644
index 24c096b..0000000
--- a/docs/lib/1.1/components/media-browser/video.js
+++ /dev/null
@@ -1,111 +0,0 @@
-'use strict';
-
-/**
- * VideoItem class.
- *
- * @author Gene
- * @version 1.0.0 (2022-03-30)
- *
- * @constructor
- * @this {ContextController}
- */
-function VideoItem(cp) {
- let mediaBrowser;
- let player;
- let controlsHideTimeout;
- let pageIndex = -1;
-
- cp.create = function() {
- pageIndex = +cp.view().attr('data-index');
- // expose public methods
- cp.expose('host', setHost);
- cp.expose('play', play);
- cp.expose('pause', pause);
- // set initial controls state
- cp.field('nav-pause').hide();
- // get reference to the video player instance
- player = cp.view('video').get();
- player.src = cp.field('url').attr('href') || cp.field('url').html();
- player.poster = cp.field('preview').html();
- zuix.$(player).on('pause playing', playerStateChanged);
- };
-
- function setHost(view) {
- const controls = cp.field('player-controls');
- mediaBrowser = zuix.context(view);
- mediaBrowser.on({
- 'open': function() {
- if (isActive()) {
- play();
- }
- },
- 'close': pause,
- 'controls:show': function() {
- controls.playTransition({classes: 'fadeOutUp fadeIn', holdState: true});
- },
- 'controls:hide': function() {
- controls.playTransition({classes: 'fadeIn fadeOutUp', holdState: true});
- },
- 'page:change': pageChanged,
- 'refresh:inactive': function() {
- if (mediaBrowser.ui.inlineMode && isActive() && !player.paused) {
- pause();
- }
- },
- 'refresh:active': function() {
- if (mediaBrowser.ui.inlineMode && isActive() && player.paused) {
- play();
- }
- }
- });
- player.onplaying = playerStateChanged;
- if (mediaBrowser.current() === pageIndex) {
- play();
- }
- }
-
- function isActive() {
- return mediaBrowser && mediaBrowser.current() === pageIndex;
- }
-
- function pageChanged(e) {
- const page = e.detail;
- if (+page.out === pageIndex) {
- pause();
- } else if (+page.in === pageIndex) {
- play();
- }
- }
-
- function playerStateChanged(e) {
- if (controlsHideTimeout !== null) {
- clearTimeout(controlsHideTimeout);
- }
- if (e.type === 'playing') {
- cp.field('nav-play').hide();
- cp.field('nav-pause').show();
- controlsHideTimeout = setTimeout(function() {
- mediaBrowser.hideControls();
- }, 2500);
- } else if (e.type === 'pause') {
- cp.field('nav-play').show();
- cp.field('nav-pause').hide();
- }
- }
-
- function play() {
- try {
- player.play();
- } catch (e) {
- console.log(e);
- }
- }
- function pause() {
- player.pause();
- }
- function stop() {
- player.stop();
- }
-}
-
-module.exports = VideoItem;
diff --git a/docs/lib/1.1/components/menu-overlay.css b/docs/lib/1.1/components/menu-overlay.css
deleted file mode 100644
index 5ddde13..0000000
--- a/docs/lib/1.1/components/menu-overlay.css
+++ /dev/null
@@ -1,100 +0,0 @@
-button, .button {
- background: transparent;
- outline: transparent;
- border: none;
- color: inherit;
- font-weight: bold;
- display: inline-flex;
- align-items: center;
- gap: 12px;
- justify-content: center;
- padding-right: 12px;
- padding-left: 12px;
- margin-right: 0;
- margin-left: 0;
- height: 42px;
-}
-.item-title {
- font-size: 150%;
- padding: 16px;
- opacity: 0.7;
-}
-.menu-button {
- z-index: 100; /* topmost */
- position: fixed;
- right: calc(50% - 28px);
- left: calc(50% - 28px);
- bottom: 24px;
-}
-.menu-button.left {
- left: 24px;
- right: unset!important;
-}
-.menu-button.right {
- right: 24px;
- left: unset!important;
-}
-div[z-field="menu_overlay"] {
- z-index: 100; /* topmost */
- position: fixed;
- left: 0;
- top: 0;
- right: 0;
- bottom: 0;
- padding-top: 80px;
- padding-bottom: 80px;
- background: radial-gradient(circle at bottom, white, #ffffffee, #ffffff88, transparent);
- display: flex;
- justify-content: space-between;
- flex-direction: column-reverse;
-}
-div[z-field="menu_overlay"].left {
- background: linear-gradient(230deg, transparent, #ffffff88, #ffffffee, white);
-}
-div[z-field="menu_overlay"].right {
- background: linear-gradient(130deg, transparent, #ffffff88, #ffffffee, white);
-}
-div[z-field="items_wrapper"] {
- text-align: center;
- margin-top: auto;
- margin-bottom: 24px;
-}
-div[z-field="items_wrapper"].left {
- padding-left: 24px;
- text-align: left;
-}
-div[z-field="items_wrapper"].right {
- padding-right: 24px;
- text-align: right;
-}
-
-.circle-button {
- cursor: pointer;
- border-radius: 50%;
- width: 56px;
- height: 56px;
- background: deeppink;
- fill: white;
- color: white;
- box-shadow: 0 0 10px rgb(0 0 0 / 25%), 0 0 4px rgb(0 0 0 / 25%);
- font-size: 0;
- transition: all 0.1s cubic-bezier(.25,.8,.25,1);
- padding: 0;
- display: flex;
- align-items: center;
- justify-content: center;
- -webkit-tap-highlight-color: transparent;
-}
-.circle-button:active {
- transform: scale(97%);
- transition: 0s;
-}
-
-@media screen and (max-width: 960px), screen and (max-height: 480px) {
- .menu-button {
- bottom: 24px;
- }
- div[z-field="menu_overlay"] {
- padding-bottom: 72px;
- }
-}
diff --git a/docs/lib/1.1/components/menu-overlay.html b/docs/lib/1.1/components/menu-overlay.html
deleted file mode 100644
index 4c10142..0000000
--- a/docs/lib/1.1/components/menu-overlay.html
+++ /dev/null
@@ -1,22 +0,0 @@
-
-
-
-
-
-
-
-
diff --git a/docs/lib/1.1/components/menu-overlay.js b/docs/lib/1.1/components/menu-overlay.js
deleted file mode 100644
index 4ed2ee4..0000000
--- a/docs/lib/1.1/components/menu-overlay.js
+++ /dev/null
@@ -1,271 +0,0 @@
-'use strict';
-
-/**
- * MenuOverlay class.
- *
- * @author Gene
- * @version 1.0.0 (2018-02-12)
- *
- * @constructor
- * @this {ContextController}
- */
-function MenuOverlay(cp) {
- let menuOverlayShowing = false;
- let menuButtonShowing = false;
- let menuButton;
- let menuButtonClose;
- let menuOverlay;
- let itemsWrapper;
- let menuItems;
- let scroller = null;
- let currentOffset = 0;
- let menuPosition = 'right';
-
- cp.create = function() {
- menuPosition = cp.options().position || cp.view().attr('data-o-position') || menuPosition;
- menuButton = cp.field('menu_button')
- .addClass(menuPosition).hide()
- .on('click', toggleMenu);
- menuButtonClose = cp.field('menu_button_close')
- .addClass(menuPosition).hide()
- .on('click', toggleMenu);
- menuOverlay = cp.field('menu_overlay')
- .addClass(menuPosition)
- .visibility('hidden')
- .on('click', toggleMenu);
- itemsWrapper = cp.field('items_wrapper')
- .addClass(menuPosition);
-
- const items = zuix.$(cp.model().items).children();
- items.each(function(i, el) {
- const wrapperDiv = zuix.$(document.createElement('div'))
- .addClass('menu-item')
- .append(el.observableTarget || el);
- itemsWrapper.append(wrapperDiv.get());
- });
- menuItems = itemsWrapper
- .find('div[class*="menu-item"]');
-
- // apply custom color to menu button
- const $view = cp.view();
- const buttonColor = cp.options().buttonColor || $view.attr('data-o-button-color'); // eg. header
- if (buttonColor != null) {
- $view.find('.circle-button').css({background: buttonColor});
- }
- const iconColor = cp.options().iconColor || $view.attr('data-o-icon-color'); // eg. header
- if (iconColor != null) {
- $view.find('.circle-button i').css({
- fill: iconColor,
- color: iconColor
- });
- }
-
- const scrollerName = $view.attr('data-o-scroller');
- if (scrollerName != null) {
- scroller = zuix.field(scrollerName);
- } else {
- scroller = zuix.$(window);
- }
- if (scroller != null) {
- let beforeElement = cp.options().before || $view.attr('data-o-before'); // eg. footer
- if (beforeElement) {
- beforeElement = zuix.field(beforeElement).get();
- }
- let afterElement = cp.options().after || $view.attr('data-o-after'); // eg. header
- if (afterElement) {
- afterElement = zuix.field(afterElement).get();
- }
- scroller.on('scroll', function(e) {
- const scrollTop = scroller.get() === window ? (document.documentElement.scrollTop || document.body.scrollTop) : scroller.get().scrollTop;
- if (menuButtonShowing) {
- if ((currentOffset - scrollTop) < -2) {
- if (afterElement == null || (scrollTop > afterElement.offsetTop + afterElement.offsetHeight - 56)) {
- setTimeout(hideButton, 100);
- }
- }
- } else if (!menuButtonShowing) {
- if ((currentOffset - scrollTop) > 2) {
- if (beforeElement == null || (scrollTop + window.innerHeight < beforeElement.offsetTop + 56)) {
- showButton();
- }
- }
- }
- currentOffset = scrollTop;
- if (menuOverlayShowing) {
- toggleMenu();
- }
- });
- }
-
- cp.expose({
- show: $view.show,
- hide: $view.hide,
- toggleButton,
- showButton,
- hideButton,
- showing: function() {
- return menuButtonShowing;
- }
- });
- initializeAnimations();
- // show floating action button
- setTimeout(function() {
- if (!menuButtonShowing) {
- showButton();
- }
- }, 1000);
- };
-
- function toggleButton() {
- if (menuButtonShowing) {
- hideButton();
- } else {
- showButton();
- }
- }
-
- function hideButton() {
- if (!menuButton.isPlaying()) {
- menuButtonShowing = false;
- menuButton.playTransition({
- classes: 'fadeIn fadeOutDown',
- onEnd: function() {
- this.hide();
- cp.trigger('hide');
- }
- });
- }
- }
-
- function showButton() {
- if (!menuButton.isPlaying()) {
- menuButtonShowing = true;
- menuButton.playTransition('fadeOutDown fadeIn');
- menuButton.show();
- cp.trigger('show');
- }
- }
-
- function toggleMenu() {
- if (menuOverlay.isPlaying()) {
- return;
- }
- const itemsRevealAnimation = 'fadeIn';
- let itemsHideAnimation = 'fadeOutDown';
- if (menuPosition === 'right') {
- itemsHideAnimation = 'fadeOutRight';
- } else if (menuPosition === 'left') {
- itemsHideAnimation = 'fadeOutLeft';
- }
- let speedFactor = 200 / menuItems.length();
- if (!menuOverlayShowing) {
- menuOverlayShowing = true;
- cp.trigger('open');
- menuButton.playTransition({
- classes: 'rotateIn rotateOutRight',
- onEnd: menuButton.hide
- });
- menuButtonClose.playTransition('rotateOutLeft rotateIn').show();
- let transitionDelay = 0;
- if (menuPosition === 'left' || menuPosition === 'right') {
- transitionDelay = speedFactor * menuItems.length();
- speedFactor *= -1;
- }
- menuOverlay.playTransition('fadeOut fadeIn').visibility('');
- menuItems.each(function(i, el) {
- transitionDelay += speedFactor;
- this.playTransition({
- classes: [itemsHideAnimation, itemsRevealAnimation],
- options: {
- duration: '200ms',
- delay: transitionDelay + 'ms'
- }
- }).show();
- });
- } else if (menuOverlayShowing) {
- menuOverlayShowing = false;
- cp.trigger('close');
- if (menuButtonShowing) {
- menuButtonClose.playTransition({
- classes: 'rotateIn rotateOutLeft',
- onEnd: menuButtonClose.hide
- });
- menuButton.playTransition('rotateOutRight rotateIn');
- } else {
- menuButtonClose.playTransition({
- classes: 'fadeIn fadeOutDown',
- onEnd: menuButtonClose.hide
- });
- }
- menuOverlay.playTransition({
- classes: 'fadeIn fadeOut',
- holdState: true,
- onEnd: function() {
- this.visibility('hidden');
- }
- });
- let transitionDelay = speedFactor * menuItems.length();
- if (menuPosition === 'left' || menuPosition === 'right') {
- transitionDelay = 0;
- speedFactor *= -1;
- }
- menuItems.each(function(i, item, $item) {
- transitionDelay -= speedFactor;
- $item.playTransition({
- classes: [itemsRevealAnimation, itemsHideAnimation],
- options: {
- duration: '200ms',
- delay: transitionDelay + 'ms'
- },
- onEnd: $item.hide
- }).show();
- });
- menuButton.show();
- }
- }
-
- function initializeAnimations() {
- const commonOptions = {
- duration: '0.25s',
- timingFunction: 'ease-in-out'
- };
- cp.addTransition( 'fadeIn', {
- transform: 'translateXY(0,0)',
- opacity: '1'
- }, commonOptions);
- cp.addTransition( 'fadeOut', {
- transform: 'translateXY(0,0)',
- opacity: '0'
- }, commonOptions);
- cp.addTransition( 'fadeOutUp', {
- transform: 'translateY(-200px)',
- opacity: '0'
- }, commonOptions);
- cp.addTransition( 'fadeOutDown', {
- transform: 'translateY(200px)',
- opacity: '0'
- }, commonOptions);
- cp.addTransition('fadeOutLeft', {
- transform: 'translateX(-200px)',
- opacity: 0
- }, commonOptions);
- cp.addTransition('fadeOutRight', {
- transform: 'translateX(200px)',
- opacity: 0
- }, commonOptions);
- cp.addTransition('rotateIn', {
- transform: 'rotate(0)',
- opacity: 1
- }, commonOptions);
- cp.addTransition('rotateOutRight', {
- transform: 'rotate(+135deg)',
- opacity: 0
- }, commonOptions);
- cp.addTransition('rotateOutLeft', {
- transform: 'rotate(-135deg)',
- opacity: 0
- }, commonOptions);
- }
-}
-
-module.exports = MenuOverlay;
diff --git a/docs/lib/1.1/controllers/drawer-layout.js b/docs/lib/1.1/controllers/drawer-layout.js
deleted file mode 100644
index 9302d03..0000000
--- a/docs/lib/1.1/controllers/drawer-layout.js
+++ /dev/null
@@ -1,317 +0,0 @@
-'use strict';
-
-/**
- * DrawerLayout class.
- *
- * @version 1.0.1 (2018-07-27)
- * @author Gene
- *
- * @version 1.0.0 (2018-07-09)
- * @author Gene
- *
- * @constructor
- * @this {ContextController}
- */
-function DrawerLayout() {
- let isDrawerOpen = true;
- let isDrawerLocked = false;
- let isSmallScreen = false;
- let isTransitionOn = false;
- let firstCheck = true;
-
- let overlay = null;
- let drawerLayout = null;
- let mainContent = null;
-
- let drawerWidth = 280;
- let autoHideWidth = 960;
- let forceFloating = false;
-
- let initialOffset = 0;
-
- const cp = this;
- cp.init = onInit;
- cp.create = onCreate;
-
- function onInit() {
- const view = cp.view();
- this.options().html = false;
- this.options().css = false;
- if (!isNaN(this.options().drawerWidth)) {
- drawerWidth = parseInt(this.options().drawerWidth);
- } else {
- const w = parseInt(view.attr('data-o-width'));
- if (!isNaN(w)) drawerWidth = w;
- }
- if (!isNaN(this.options().autoHideWidth)) {
- autoHideWidth = parseInt(this.options().autoHideWidth);
- } else {
- const w = parseInt(view.attr('data-o-hide-width'));
- if (!isNaN(w)) autoHideWidth = w;
- }
- }
-
- function onCreate() {
- drawerLayout = cp.view();
- mainContent = cp.options().mainContent;
- // add overlay for small screens when menu is open
- overlay = zuix.$(document.createElement('div'));
- overlay.css({
- 'position': 'fixed',
- 'top': 0,
- 'left': 0,
- 'bottom': 0,
- 'right': 0,
- 'z-index': 100,
- // '-ms-touch-action': 'none',
- // 'touch-action': 'none',
- 'background-color': 'rgba(0, 0, 0, 0.5)'
- }).on('click', function() {
- if (!isDrawerLocked) {
- closeDrawer();
- }
- }).hide();
- drawerLayout.parent().append(overlay.get());
-
- // set drawer style
- drawerLayout.css({
- 'position': 'fixed',
- 'overflow-y': 'auto',
- 'left': 0, 'width': drawerWidth + 'px', 'top': 0, 'bottom': 0,
- 'z-index': 101,
- // '-ms-touch-action': 'none',
- // 'touch-action': 'none',
- '-webkit-box-shadow': '8px 0 6px -6px rgba(0,0,0,0.25)',
- '-moz-box-shadow': '8px 0 6px -6px rgba(0,0,0,0.25)',
- 'box-shadow': '8px 0 6px -6px rgba(0,0,0,0.25)'
- }).attr('tabindex', 0);
-
- let isDragging = false;
- // handle gesture to open/close the drawer menu
- zuix.load('@lib/controllers/gesture-helper', {
- view: document.documentElement,
- on: {
- 'gesture:touch': function(e, tp) {
- if (isDrawerLocked) return;
- transitionOn();
- if (isDrawerOpen && tp.startX < drawerWidth) {
- initialOffset = drawerWidth - tp.startX;
- } else {
- initialOffset = 0;
- }
- },
- 'gesture:release': function(e, tp) {
- if (isDrawerLocked) return;
- if (isDragging) {
- isDragging = false;
- transitionOn();
- if (tp.velocity > 0) {
- openDrawer();
- } else {
- closeDrawer();
- }
- }
- },
- 'gesture:pan': function(e, tp) {
- // wait until horizontal scrolling gesture is detected (tp.scrollIntent() === 'horizontal')
- if (isDrawerLocked || tp.scrollIntent() !== 'horizontal') return;
- if ((isDragging || isDrawerOpen) && tp.x < drawerWidth || (!isDragging && tp.x < 50)) {
- if (!isDragging) {
- isDragging = true;
- }
- transitionOn();
- dragTo(tp);
- transitionOff();
- }
- }
- }
- });
-
- // public component methods
- cp.expose('toggle', function() {
- transitionOn();
- toggleDrawer();
- });
- cp.expose('open', function() {
- transitionOn();
- openDrawer();
- });
- cp.expose('close', function() {
- transitionOn();
- closeDrawer();
- });
- cp.expose('isOpen', isOpen);
- cp.expose('lock', function(locked) {
- if (locked == null) {
- return isDrawerLocked;
- }
- isDrawerLocked = locked;
- });
- cp.expose('float', function(floating) {
- if (floating == null) {
- return forceFloating;
- }
- forceFloating = floating;
- sizeCheck();
- });
-
- // close drawer if ESC key is pressed
- drawerLayout.on('keydown', function(evt) {
- evt = evt || window.event;
- if (evt.keyCode === 27) {
- closeDrawer();
- }
- });
-
- // detect screen size and set large/small layout
- sizeCheck();
- firstCheck = false;
-
- // listen to window resize event to make layout responsive
- window.addEventListener('resize', function() {
- sizeCheck();
- });
- }
-
- function openDrawer() {
- drawerLayout
- .visibility('initial')
- .css('left', 0)
- .get().focus();
- if (isSmallScreen) {
- drawerLayout.find('a').one('click', function() {
- closeDrawer();
- });
- overlay.css('opacity', 'initial');
- overlay.show();
- }
- if (!isDrawerOpen) {
- isDrawerOpen = true;
- cp.trigger('drawer:open', {smallScreen: isSmallScreen});
- }
- }
-
- function closeDrawer() {
- if (isSmallScreen) {
- transitionEnd(function() {
- if (!isDrawerOpen) {
- drawerLayout.visibility('hidden');
- }
- });
- drawerLayout.css('left', -drawerWidth + 'px');
- overlay.hide();
- if (isDrawerOpen) {
- isDrawerOpen = false;
- cp.trigger('drawer:close', {smallScreen: isSmallScreen});
- }
- }
- isDrawerOpen = false;
- drawerLayout.find('a').off('click');
- }
-
- function toggleDrawer() {
- if (isDrawerOpen) {
- closeDrawer();
- } else {
- openDrawer();
- }
- }
-
- function isOpen() {
- return isDrawerOpen;
- }
-
- function dragTo(tp) {
- let x = tp.x;
- if (x > 0 && x <= drawerWidth - initialOffset) {
- x = -drawerWidth + x + initialOffset;
- if (drawerLayout.visibility() === 'hidden') {
- drawerLayout.visibility('initial');
- }
- drawerLayout.css('left', x + 'px');
- if (overlay.display() === 'none') {
- overlay.show();
- }
- overlay.css('opacity', (drawerWidth + x) / drawerWidth);
- }
- }
-
- function sizeCheck() {
- const width = window.innerWidth || document.body.clientWidth;
- if (width < autoHideWidth || autoHideWidth === -1 || forceFloating) {
- if (!isSmallScreen || firstCheck) {
- isSmallScreen = true;
- isDrawerLocked = false;
- layoutChange();
- }
- closeDrawer();
- } else {
- if (isSmallScreen || firstCheck) {
- if (isSmallScreen) {
- overlay.hide();
- if (isDrawerOpen) {
- closeDrawer();
- }
- }
- isSmallScreen = false;
- isDrawerLocked = true;
- layoutChange();
- openDrawer();
- }
- }
- }
-
- function layoutChange() {
- if (!firstCheck) {
- transitionOn();
- }
- if (mainContent) {
- const leftPadding = parseFloat(getComputedStyle(mainContent.get(), null).getPropertyValue('padding-left'));
- if (!isSmallScreen) {
- mainContent.css({paddingLeft: (drawerWidth + leftPadding) + 'px'});
- } else {
- mainContent.css({paddingLeft: (leftPadding - drawerWidth) + 'px'});
- }
- }
- cp.trigger('layout:change', {
- smallScreen: isSmallScreen,
- drawerLocked: isDrawerLocked
- });
- }
-
- function transitionOn() {
- if (!isTransitionOn) {
- isTransitionOn = true;
- const transition = 'ease .15s';
- drawerLayout.css({
- 'transition-property': 'left',
- 'transition': transition
- });
- overlay.css({
- 'transition-property': 'opacity',
- 'transition': transition
- });
- }
- }
-
- function transitionOff() {
- if (isTransitionOn) {
- isTransitionOn = false;
- const transition = 'none';
- drawerLayout.css({
- 'transition': transition
- });
- overlay.css({
- 'transition': transition
- });
- }
- }
-
- function transitionEnd(callback) {
- drawerLayout.one('transitionend transitioncancel', function() {
- callback();
- });
- }
-}
-
-module.exports = DrawerLayout;
diff --git a/docs/lib/1.1/controllers/gesture-helper.js b/docs/lib/1.1/controllers/gesture-helper.js
deleted file mode 100644
index a79857e..0000000
--- a/docs/lib/1.1/controllers/gesture-helper.js
+++ /dev/null
@@ -1,290 +0,0 @@
-/**
- * zUIx - Gesture Controller
- *
- * @version 1.0.1 (2018-08-21)
- * @author Gene
- *
- * @version 1.0.0 (2018-03-11)
- * @author Gene
- *
- */
-
-'use strict';
-
-function GestureHelper() {
- const SCROLL_MODE_NONE = 0;
- const SCROLL_MODE_HORIZONTAL = 1;
- const SCROLL_MODE_VERTICAL = 2;
- const GESTURE_TAP_TIMEOUT = 750;
-
- let scrollMode = SCROLL_MODE_NONE;
- let touchPointer;
- let ignoreSession = false;
- let passiveMode = true;
- let startGap = -1;
- let currentGesture;
- let swipeDirection;
- let speedMeter;
- let mouseButtonDown = false;
- let lastTapTime = new Date().getTime();
-
- // Math.sign Polyfill
- Math.sign = Math.sign || function(x) {
- return ((x>0)-(x<0))||+x;
- };
-
- const cp = this;
- cp.init = function() {
- const options = cp.options();
- options.html = false;
- options.css = false;
- passiveMode = options.passive !== false && passiveMode;
- startGap = options.startGap || startGap;
- };
-
- cp.create = function() {
- // TODO: should use event "capturing" instead of "bubbling"
- const target = passiveMode ? zuix.$(window) : cp.view();
- target.on('dragstart', {
- handler: function(e) {
- if (!ignoreSession && !passiveMode) {
- e.preventDefault();
- }
- },
- passive: passiveMode
- }).on('mousedown', {
- handler: function(e) {
- const targetElement = zuix.$(e.target);
- ignoreSession = document.elementsFromPoint(e.x, e.y).indexOf(cp.view().get()) === -1;
- if (!ignoreSession && e.which === 1 && targetElement.parent('[class*="no-gesture"]').length() === 0 && e.x > startGap) {
- mouseButtonDown = true;
- ignoreSession = false;
- // targetElement.css('touch-action', 'none');
- // TODO: add 'cp.options().preventDrag'
- targetElement.get().draggable = false;
- touchStart(e, e.x, e.y);
- } else ignoreSession = true;
- },
- passive: passiveMode
- }).on('mousemove', {
- handler: function(e) {
- if (!ignoreSession && mouseButtonDown) {
- touchMove(e, e.x, e.y);
- }
- },
- passive: passiveMode
- }).on('mouseup', function(e) {
- if (e.which === 1 && !ignoreSession) {
- mouseButtonDown = false;
- touchStop(e);
- }
- }).on('touchstart', {
- handler: function(e) {
- const targetElement = zuix.$(e.target);
- ignoreSession = document.elementsFromPoint(e.touches[0].clientX, e.touches[0].clientY).indexOf(cp.view().get()) === -1;
- if (!ignoreSession && targetElement.parent('[class*="no-gesture"]').length() === 0 && e.touches[0].clientX > startGap) {
- ignoreSession = false;
- // targetElement.css('touch-action', 'none');
- targetElement.get().draggable = false;
- touchStart(e, e.touches[0].clientX, e.touches[0].clientY);
- } else ignoreSession = true;
- },
- passive: passiveMode
- }).on('touchmove', {
- handler: function(e) {
- if (!ignoreSession) {
- touchMove(e, e.touches[0].clientX, e.touches[0].clientY);
- }
- },
- passive: passiveMode
- }).on('touchend', function(e) {
- if (!ignoreSession) {
- touchStop(e);
- }
- });
- };
-
- function touchStart(e, x, y) {
- const timestamp = new Date().getTime();
- touchPointer = {
- // original event + cancel method
- event: e,
- cancel: function() {
- touchPointer.event.cancelBubble = true;
- if (!passiveMode) {
- touchPointer.event.preventDefault();
- }
- },
- // initial touch position
- startX: x,
- startY: y,
- startTime: timestamp,
- // relative movement
- shiftX: 0,
- shiftY: 0,
- endTime: 0,
- // relative movement at every step
- stepX: 0,
- stepY: 0,
- stepTime: timestamp,
- // actual position and speed
- velocity: 0,
- x: x,
- y: y,
- scrollIntent: function() {
- switch (scrollMode) {
- case SCROLL_MODE_HORIZONTAL:
- return 'horizontal';
- case SCROLL_MODE_VERTICAL:
- return 'vertical';
- }
- return false;
- }
- };
- speedMeter = speedObserver(touchPointer);
- cp.trigger('gesture:touch', touchPointer);
- }
- function touchMove(e, x, y) {
- if (touchPointer != null) {
- touchPointer.event = e;
- touchPointer.x = x;
- touchPointer.y = y;
- touchPointer.shiftX = (x - touchPointer.startX);
- touchPointer.shiftY = (y - touchPointer.startY);
- touchPointer.endTime = new Date().getTime();
- // detect actual gesture
- const gesture = detectGesture();
- if (gesture != null && currentGesture !== false) {
- if (swipeDirection != null && swipeDirection !== touchPointer.direction) {
- // stop gesture detection if not coherent
- currentGesture = false;
- swipeDirection = 'cancel';
- } else {
- currentGesture = gesture;
- swipeDirection = touchPointer.direction;
- }
- }
- cp.trigger('gesture:pan', touchPointer);
- }
- }
-
- function touchStop(e) {
- if (touchPointer != null) {
- speedMeter.update();
- touchPointer.event = e;
- if (currentGesture == null) {
- currentGesture = detectGesture();
- }
- if (currentGesture != null && currentGesture !== false) {
- cp.trigger(currentGesture, touchPointer);
- }
- }
- cp.trigger('gesture:release', touchPointer);
- scrollMode = SCROLL_MODE_NONE;
- swipeDirection = null;
- currentGesture = null;
- touchPointer = null;
- }
-
- function detectGesture() {
- let gesture = null;
- // update touchPointer.velocity data
- speedMeter.update();
- // update tap gesture and swipe direction
- const minStepDistance = 2; // <--- !!! this should not be greater than 2 for best performance
- const angle = Math.atan2(touchPointer.shiftY-touchPointer.stepY, touchPointer.shiftX-touchPointer.stepX) * 180 / Math.PI;
- if ((touchPointer.shiftX) === 0 && (touchPointer.shiftY) === 0 && touchPointer.startTime > lastTapTime+100 && touchPointer.stepTime < GESTURE_TAP_TIMEOUT) {
- // gesture TAP
- lastTapTime = new Date().getTime();
- gesture = 'gesture:tap';
- } else if ((scrollMode === SCROLL_MODE_NONE || scrollMode === SCROLL_MODE_HORIZONTAL) &&
- touchPointer.stepDistance > minStepDistance && ((angle >= 135 && angle <= 180) || (angle >= -180 && angle <= -135))) {
- // gesture swipe RIGHT
- touchPointer.direction = 'left';
- gesture = 'gesture:swipe';
- scrollMode = SCROLL_MODE_HORIZONTAL;
- } else if ((scrollMode === SCROLL_MODE_NONE || scrollMode === SCROLL_MODE_HORIZONTAL) &&
- touchPointer.stepDistance > minStepDistance && ((angle >= 0 && angle <= 45) || (angle >= -45 && angle < 0))) {
- // gesture swipe LEFT
- touchPointer.direction = 'right';
- gesture = 'gesture:swipe';
- scrollMode = SCROLL_MODE_HORIZONTAL;
- } else if ((scrollMode === SCROLL_MODE_NONE || scrollMode === SCROLL_MODE_VERTICAL) &&
- touchPointer.stepDistance > minStepDistance && (angle > 45 && angle < 135)) {
- // gesture swipe UP
- touchPointer.direction = 'down';
- gesture = 'gesture:swipe';
- scrollMode = SCROLL_MODE_VERTICAL;
- } else if ((scrollMode === SCROLL_MODE_NONE || scrollMode === SCROLL_MODE_VERTICAL) &&
- touchPointer.stepDistance > minStepDistance && (angle > -135 && angle < -45)) {
- // gesture swipe DOWN
- touchPointer.direction = 'up';
- gesture = 'gesture:swipe';
- scrollMode = SCROLL_MODE_VERTICAL;
- }
- // reset touch step data
- if (touchPointer.stepDistance > minStepDistance) {
- speedMeter.step();
- }
- return gesture;
- }
-
- function speedObserver(tp) {
- let direction;
- const startData = {
- time: 0,
- x: 0, y: 0
- };
- const stopData = {
- time: 0,
- x: 0, y: 0
- };
- const step = function() {
- tp.stepTime = tp.endTime;
- tp.stepX = tp.shiftX;
- tp.stepY = tp.shiftY;
- tp.stepSpeed = 0;
- tp.stepDistance = 0;
- };
- const reset = function() {
- // direction changed: reset
- direction = tp.direction;
- startData.time = new Date().getTime();
- startData.x = tp.x;
- startData.y = tp.y;
- tp.velocity = 0;
- tp.distance = 0;
- step();
- };
- reset();
- return {
- update: function() {
- stopData.time = new Date().getTime();
- stopData.x = tp.x;
- stopData.y = tp.y;
- if (direction != null && direction !== tp.direction) {
- reset();
- return;
- } else if (direction == null && tp.direction !== direction) {
- direction = tp.direction;
- }
- const elapsedTime = stopData.time - startData.time;
- let l = {x: (stopData.x - startData.x), y: (stopData.y - startData.y)};
- const d = Math.sqrt(l.x*l.x + l.y*l.y);
- tp.distance = d;
- // movement speed in px/ms
- const speed = (d / elapsedTime);
- // add the direction info
- tp.velocity = (tp.direction === 'left' || tp.direction === 'up') ? -speed : speed;
- // update "step" speed data
- tp.stepTime = (tp.endTime-tp.stepTime);
- l = {x: (tp.shiftX-tp.stepX), y: (tp.shiftY-tp.stepY)};
- tp.stepDistance = Math.sqrt(l.x*l.x+l.y*l.y);
- tp.stepSpeed = (tp.stepDistance / tp.stepTime);
- },
- step: step
- };
- }
-}
-
-module.exports = GestureHelper;
diff --git a/docs/lib/1.1/controllers/header-auto-hide.js b/docs/lib/1.1/controllers/header-auto-hide.js
deleted file mode 100644
index 8c09c33..0000000
--- a/docs/lib/1.1/controllers/header-auto-hide.js
+++ /dev/null
@@ -1,171 +0,0 @@
-/**
- * zUIx - Header Auto Hide (on scroll =))
- *
- * @version 1.2.0 (2022-03-21)
- * @author Gene
- *
- * @version 1.1.0 (2018-07-27)
- * @author Gene
- *
- * @version 1.0.0 (2018-07-25)
- * @author Gene
- *
- */
-
-'use strict';
-
-function HeaderAutoHide(cp) {
- let headerBar;
- let footerBar;
- let showEnd;
- let headerHeight = 0;
- let footerHeight = 0;
- let autoHideOffset = 0;
- let scrollHelper;
-
- cp.init = function() {
- cp.options().css = false;
- cp.options().html = false;
- };
-
- cp.create = function() {
- showEnd = cp.options().showEnd || cp.view().attr('data-o-show-end') === 'true';
- headerBar = cp.options().header || cp.view().attr('data-o-header');
- if (headerBar) {
- headerBar = zuix.field(headerBar);
- } else {
- throw new Error('Header element not specified.');
- }
- if (headerBar.length() === 0) {
- throw new Error('Header element not found: "' + headerBar + '".');
- }
- headerHeight = headerBar.position().rect.height;
- const hp = getComputedStyle(headerBar.get()).position;
- if (hp !== 'fixed' && hp !== 'absolute') {
- autoHideOffset = headerHeight;
- }
- const scrollerParent = cp.view();
- addHeaderStyle();
- // footer options parsing
- const footer = cp.options().footer || cp.view().attr('data-o-footer');
- if (footer != null) {
- footerBar = zuix.field(footer);
- footerBar.css({position: 'fixed', zIndex: 1});
- footerHeight = footerBar.position().rect.height;
- addFooterStyle();
- }
- zuix.load('@lib/controllers/scroll-helper', {
- view: scrollerParent,
- on: {
- 'scroll:change': function(e, data) {
- if (data.event === 'scroll' && data.info.viewport.y < -autoHideOffset) {
- if (data.info.shift.y < -4) {
- // scrolling up
- if (autoHideOffset > 0 && headerBar.css('position') !== 'fixed') {
- scrollerParent.css({paddingTop: headerHeight + 'px'});
- headerBar.hide().css({position: 'fixed', zIndex: 1});
- }
- hideBars();
- } else if (data.info.shift.y > 4) {
- // scrolling down
- headerBar.show();
- showBars();
- }
- } else if (data.event === 'hit-bottom' && showEnd) {
- headerBar.show();
- showBars();
- } else if (autoHideOffset > 0 && data.info.viewport.y === 0) {
- scrollerParent.css({paddingTop: null});
- headerBar.show().css({position: null, zIndex: null});
- }
- cp.trigger('page:scroll', data);
- }
- },
- ready: function(ctx) {
- scrollHelper = ctx;
- cp.expose('scroll', {get: function() {
- return scrollHelper;
- }});
- cp.trigger('scroll:ready', scrollHelper);
- }
- });
- cp.expose('show', showBars);
- cp.expose('hide', hideBars);
- };
-
- function showBars() {
- if (headerBar != null && headerBar.hasClass('header-collapse')) {
- headerBar.removeClass('header-collapse')
- .addClass('header-expand');
- }
- if (footerBar != null && footerBar.hasClass('footer-collapse')) {
- footerBar.removeClass('footer-collapse')
- .addClass('footer-expand');
- }
- if (scrollHelper) {
- scrollHelper.check();
- }
- }
-
- function hideBars() {
- if (!headerBar.hasClass('header-collapse')) {
- headerBar.removeClass('header-expand')
- .addClass('header-collapse');
- }
- if (footerBar != null && !footerBar.hasClass('footer-collapse')) {
- footerBar.removeClass('footer-expand')
- .addClass('footer-collapse');
- }
- }
-
- function addHeaderStyle() {
- zuix.$.appendCss('\n' +
- '/* Header bar shrink/expand */\n' +
- '@keyframes header-collapse-anim {\n' +
- ' from { top: 0; }\n' +
- ' to { top: -'+headerHeight+'px; }\n' +
- '}\n' +
- '@keyframes header-expand-anim {\n' +
- ' from { top: -'+headerHeight+'px; }\n' +
- ' to { top: 0; }\n' +
- '}\n' +
- '.header-collapse {\n' +
- ' animation-fill-mode: forwards;\n' +
- ' animation-name: header-collapse-anim;\n' +
- ' animation-duration: 0.5s;\n' +
- ' top: -'+headerHeight+'px;\n' +
- '}\n' +
- '.header-expand {\n' +
- ' animation-fill-mode: forwards;\n' +
- ' animation-name: header-expand-anim;\n' +
- ' animation-duration: 0.5s;\n' +
- ' top: 0px;\n' +
- '}\n', null, 'onscroll_header_hide_show');
- }
- function addFooterStyle() {
- zuix.$.appendCss('\n' +
- '/* Footer bar shrink/expand */\n' +
- '@keyframes footer-collapse-anim {\n' +
- ' from { bottom: 0; }\n' +
- ' to { bottom: -'+footerHeight+'px; }\n' +
- '}\n' +
- '@keyframes footer-expand-anim {\n' +
- ' from { bottom: -'+footerHeight+'px; }\n' +
- ' to { bottom: 0; }\n' +
- '}\n' +
- '.footer-collapse {\n' +
- ' animation-fill-mode: forwards;\n' +
- ' animation-name: footer-collapse-anim;\n' +
- ' animation-duration: 0.5s;\n' +
- ' bottom: -'+footerHeight+'px;\n' +
- '}\n' +
- '.footer-expand {\n' +
- ' animation-fill-mode: forwards;\n' +
- ' animation-name: footer-expand-anim;\n' +
- ' animation-duration: 0.5s;\n' +
- ' bottom: 0;\n' +
- '}\n', null, 'zkit_onscroll_hide_show');
- }
-}
-
-module.exports = HeaderAutoHide;
diff --git a/docs/lib/1.1/controllers/list-view.js b/docs/lib/1.1/controllers/list-view.js
deleted file mode 100644
index 460354f..0000000
--- a/docs/lib/1.1/controllers/list-view.js
+++ /dev/null
@@ -1,190 +0,0 @@
-/**
- * zUIx - ListView Component
- *
- * @version 1.0.3 (2017-06-11)
- * @author Gene
- *
- */
-
-zuix.controller(function(cp) {
- // Set list type: [ 'full', 'paged', 'incremental' ] (default: 'full')
- const MODE_FULL = 'full';
- const MODE_PAGED = 'paged';
- const MODE_INCREMENTAL = 'incremental';
- let listMode = MODE_FULL;
-
- // How many items per page to show/add (for 'paged' and 'incremental' modes) (default: 30)
- let itemsPerPage = 30;
-
- // Structure used to store component state info
- const statusInfo = {
- page: {
- current: 0,
- count: 0
- },
- items: {
- loaded: 0,
- count: 0
- }
- };
-
- // Objects data persistence
- const listItems = [];
-
- cp.init = function() {
- cp.options().html = false;
- cp.options().css = false;
- };
-
- // TODO: describe the model and options used by this component
- cp.create = function() {
- // exposed methods through this component context
- cp.expose('config', configure);
- cp.expose('page', setPage);
- cp.expose('status', triggerStatus);
- cp.expose('more', function() {
- statusInfo.page.current++;
- cp.update();
- });
- cp.expose('clear', clear);
- // init
- clear();
- };
-
- cp.destroy = function() {
- clear();
- };
-
- cp.update = function() {
- const modelList = cp.model().itemList;
- if (modelList == null) return;
-
- statusInfo.page.count = pageCount();
- statusInfo.items.count = modelList.length;
-
- const startItem = statusInfo.page.current*itemsPerPage;
- let i = 0;
- if (listMode === MODE_PAGED && startItem > 0) {
- i = startItem;
- }
-
- for ( ; i < modelList.length; i++) {
- const dataItem = cp.model().getItem(i, modelList[i]);
- const id = dataItem.itemId;
-
- if ((listMode === MODE_FULL) ||
- (listMode === MODE_PAGED && i >= startItem && i < startItem+itemsPerPage) ||
- (listMode === MODE_INCREMENTAL && i < startItem+itemsPerPage)) {
- if (typeof listItems[id] === 'undefined') {
- const container = document.createElement('div');
- zuix.loadComponent(container, dataItem.componentId, dataItem.type || 'view', dataItem.options);
- // use a responsive CSS class if provided
- if (dataItem.options.className != null) {
- // this class should set the min-height property
- container.classList.add(dataItem.options.className);
- } else {
- // set a temporary height for the container (for lazy load to work properly)
- container.style['min-height'] = dataItem.options.height || '48px';
- }
- // register a callback to know when the component is actually loaded
- const listener = function(itemIndex, el) {
- const l = function() {
- el.removeEventListener('component:ready', l);
- // trigger status update event
- statusInfo.items.loaded++;
- triggerStatus();
- // if all components have been loaded, then trigger 'complete' event
- if (itemIndex === modelList.length - 1) {
- cp.trigger('complete');
- }
- };
- container.addEventListener('component:ready', l);
- }(i, container);
- // keep track of already allocated items
- listItems[id] = container;
- // add item container to the list-view, the component will be lazy-loaded later as needed
- cp.view().insert(i-startItem, listItems[id]);
- } else if (!dataItem.options.static) {
- // update existing item model's data
- // TODO: should check if the data in the model has changed before calling this
- // TODO: should also call the `model` method in the `zuix.context` callback
- zuix.context(listItems[id]).model(dataItem.options.model);
- }
- }
-
- if (typeof listItems[id] !== 'undefined') {
- if ((listMode === MODE_PAGED && i < statusInfo.page.current * itemsPerPage) ||
- (listMode !== MODE_FULL && i > ((statusInfo.page.current + 1) * itemsPerPage - 1))) {
- listItems[id].style['display'] = 'none';
- } else {
- listItems[id].style['display'] = '';
- }
- }
-
- if ((listMode === MODE_PAGED || listMode === MODE_INCREMENTAL) && i > startItem+itemsPerPage) {
- break;
- }
- }
-
- // trigger status update event
- triggerStatus();
-
- // `componentize` is required to process lazy-loaded items
- zuix.componentize(cp.view());
- };
-
- function setPage(number) {
- if (!isNaN(number) && number >= 0 && number < pageCount()) {
- if (listMode == MODE_PAGED) {
- clearPage(statusInfo.page.current);
- }
- statusInfo.page.current = parseInt(number);
- cp.update();
- }
- return statusInfo.page.current;
- }
-
- function clearPage(number) {
- const modelList = cp.model().itemList;
- if (modelList == null) return;
- const startItem = number*itemsPerPage;
- for (let i = startItem; i < listItems.length && i < startItem+itemsPerPage; i++) {
- const dataItem = cp.model().getItem(i, modelList[i]);
- const id = dataItem.itemId;
- if (typeof listItems[id] !== 'undefined') {
- listItems[id].style['display'] = 'none';
- }
- }
- }
-
- function triggerStatus() {
- cp.trigger('status', statusInfo);
- }
-
- function pageCount() {
- return Math.ceil(cp.model().itemList.length / itemsPerPage);
- }
-
- function configure(options) {
- if (options.itemsPerPage != null) {
- itemsPerPage = options.itemsPerPage;
- }
- if (options.listMode != null) {
- listMode = options.listMode;
- }
- }
-
- function clear() {
- // dispose components
- for (let i = 0; i < listItems.length; i++) {
- zuix.unload(listItems[i]);
- }
- listItems.length = 0;
- statusInfo.page.current = 0;
- statusInfo.page.count = 0;
- statusInfo.items.loaded = 0;
- statusInfo.items.count = 0;
- // clear the view
- cp.view().html('');
- }
-});
diff --git a/docs/lib/1.1/controllers/mdl-button.js b/docs/lib/1.1/controllers/mdl-button.js
deleted file mode 100644
index 36e02f5..0000000
--- a/docs/lib/1.1/controllers/mdl-button.js
+++ /dev/null
@@ -1,38 +0,0 @@
-'use strict';
-
-/**
- * MdlButton class.
- *
- * @author Gene
- * @version 1.0.0 (2021-12-19)
- *
- * @constructor
- * @this {ContextController}
- */
-function MdlButton() {
- this.create = () => {
- const view = this.view();
- const options = this.options();
- const type = options.type || 'raised';
- view.addClass('mdl-button mdl-js-button mdl-button--' + type + ' mdl-js-ripple-effect');
- if (options.class) {
- const classes = options.class.split(' ');
- classes.forEach((c) => {
- view.addClass('mdl-button--' + c);
- });
- }
- initializeMdl(view);
- };
-
- function initializeMdl(view) {
- // initializes MDL component as soon as MDL library is available
- zuix.activeRefresh(view, view, null, ($view, $element, data, nextCallback) => {
- if (window['componentHandler']) {
- componentHandler.upgradeElements($view.get());
- } else {
- nextCallback(data, 100, true);
- }
- }).start();
- }
-}
-module.exports = MdlButton;
diff --git a/docs/lib/1.1/controllers/mdl-checkbox.js b/docs/lib/1.1/controllers/mdl-checkbox.js
deleted file mode 100644
index 7e354e1..0000000
--- a/docs/lib/1.1/controllers/mdl-checkbox.js
+++ /dev/null
@@ -1,90 +0,0 @@
-'use strict';
-
-/**
- * MdlCheckbox class.
- *
- * @author Gene
- * @version 1.0.0 (2021-12-19)
- *
- * @constructor
- * @this {ContextController}
- */
-function MdlCheckbox() {
- const cp = this;
- let view;
- cp.create = onCreate;
-
- function onCreate() {
- view = cp.view();
- view.addClass('mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect')
- .css({margin: '12px'});
- view.find('input').addClass('mdl-checkbox__input');
- let textNode;
- zuix.$.each(view.get().childNodes, (i, n) => {
- if (n.nodeType === 3 && n.nodeValue.trim().replace('\n', '').length > 0) {
- textNode = n;
- }
- return textNode == null; // continue iterating if textNode is null
- });
- if (textNode) {
- const text = textNode.nodeValue;
- view.get().removeChild(textNode);
- view.append('' + text + '');
- }
- // Exposes public methods
- cp.expose('checked', {
- get() {
- return checked();
- },
- set(v) {
- checked(v);
- }
- });
- cp.expose('disabled', {
- get() {
- return disabled();
- },
- set(v) {
- disabled(v);
- }
- });
- initializeMdl(view);
- }
-
- function checked(cv) {
- if (cv != null) {
- if (cv && !view.hasClass('is-checked')) {
- view.get().click();
- } else if (cv === false && view.hasClass('is-checked')) {
- view.get().click();
- }
- }
- return cp.view().hasClass('is-checked');
- }
-
- function disabled(cv) {
- if (cv != null) {
- if (cv) {
- view.addClass('is-disabled')
- .find('input').attr('disabled', '');
- } else {
- view.removeClass('is-disabled')
- .find('input').attr('disabled', null);
- }
- }
- return view.hasClass('is-disabled');
- }
-
- function initializeMdl(view) {
- // initializes MDL component as soon as MDL library is available
- zuix.activeRefresh(view, view, null, ($view, $element, data, nextCallback) => {
- if (window['componentHandler']) {
- componentHandler.upgradeElements($view.get());
- } else {
- nextCallback(data, 100, true);
- }
- }).start();
- }
-}
-
-module.exports = MdlCheckbox;
diff --git a/docs/lib/1.1/controllers/mdl-menu.js b/docs/lib/1.1/controllers/mdl-menu.js
deleted file mode 100644
index 86cbed0..0000000
--- a/docs/lib/1.1/controllers/mdl-menu.js
+++ /dev/null
@@ -1,136 +0,0 @@
-'use strict';
-
-/**
- * MdlMenu class.
- *
- * @author Gene
- * @version 1.0.0 (2021-12-19)
- *
- * @constructor
- * @this {ContextController}
- */
-function MdlMenu() {
- const cp = this;
- cp.init = onInit;
- cp.create = onCreate;
-
- function onInit() {
- this.options().css = 'ul{ margin:0 !important; padding:0 !important; } li{width:100%} li[disabled]{ pointer-events: none; } a{text-decoration: none;}';
- }
-
- function onCreate() {
- // position relative must be set on the container
- // in order to make MaterialMenu positioning work properly
- this.view().css('position', 'relative');
- const position = this.options().position || 'unaligned';
- // generate unique identifier for this instance
- const menuId = 'menu-' + this.context.contextId;
- // add required MDL classes to elements
- const ul = this.view('ul');
- ul.addClass('mdl-menu mdl-js-menu mdl-js-ripple-effect mdl-menu--' + position)
- .attr('for', menuId);
- ul.find('li').on('click', function(e, $li) {
- if (e.target === $li.get()) {
- this.find('a').each((i, el, $el) => {
- el.click();
- });
- }
- });
- this.view('li')
- .addClass('mdl-menu__item mdl-menu__item--full-bleed-divider')
- .on('click', function(e, $el) {
- // trigger a custom event when option is selected,
- // the 'action' attribute of the clicked element
- // is used to pass custom data
- cp.trigger('menu:select', {action: $el.attr('action'), $el});
- });
- let a = this.view('a');
- if (a.length() >= 1) {
- a = a.eq(a.length() - 1);
- a.attr('id', menuId)
- .addClass('mdl-button mdl-js-button mdl-js-ripple-effect')
- .on('click', function() {
- const menuPosition = guessPosition(cp.options(), this.position());
- if (menuPosition) {
- const positionClasses = 'mdl-menu--bottom-left mdl-menu--bottom-right mdl-menu--top-left mdl-menu--top-right mdl-menu--unaligned';
- ul.removeClass(positionClasses)
- .addClass(menuPosition);
- ul.prev().removeClass(positionClasses)
- .addClass(menuPosition);
- // reset container position as a work-around to MaterialMenu bug
- cp.view('div.mdl-menu__container').css({
- top: '', left: '', right: '', bottom: ''
- });
- }
- });
- } else {
- return false;
- }
-
- // Upgrade MDL elements
- zuix.activeRefresh(cp.view(), cp.view(), null, ($view, $element, data, nextCallback) => {
- if (window['componentHandler']) {
- // patch MaterialMenu to implement show/hide events
- if (MaterialMenu && !MaterialMenu.prototype._hide) {
- MaterialMenu.prototype._hide = MaterialMenu.prototype.hide;
- MaterialMenu.prototype.hide = function() {
- if (this.container_.classList.contains(this.CssClasses_.IS_VISIBLE)) {
- cp.trigger('menu:hide');
- this._hide();
- }
- };
- }
- if (MaterialMenu && !MaterialMenu.prototype._show) {
- MaterialMenu.prototype._show = MaterialMenu.prototype.show;
- MaterialMenu.prototype.show = function(p) {
- cp.trigger('menu:show');
- this._show(p);
- };
- }
- componentHandler.upgradeElements(ul.get());
- componentHandler.upgradeElements(a.get());
- // a little patch to FAB buttons
- if (a.attr('z-load')) {
- zuix.context(a, () => {
- const isMini = a.hasClass('mdl-button--mini-fab');
- const isIcon = a.hasClass('mdl-button--icon');
- a.find('.material-icons').css({
- transition: 'transform .2s ease-in-out',
- transform: 'translate(0,0)', WebkitTransform: 'translate(0,0)',
- marginTop: isMini ? '8px' : isIcon ? '0' : '16px',
- marginLeft: isMini || isIcon ? '1px' : '2px',
- position: 'initial'
- });
- });
- }
- } else {
- nextCallback(data, 100, true);
- }
- }).start();
- }
-
- /**
- * @param {ContextOptions|any} options
- * @param {ElementPosition} p
- */
- function guessPosition(options, p) {
- // Auto-position menu if no 'position' option was passed
- if (options.position == null) {
- // auto-positioning
- let menuPosition = 'mdl-menu--';
- if (p.frame.dy < 0.5) {
- menuPosition += 'bottom-';
- } else {
- menuPosition += 'top-';
- }
- if (p.frame.dx < 0.5) {
- menuPosition += 'left';
- } else {
- menuPosition += 'right';
- }
- return menuPosition;
- }
- }
-}
-
-module.exports = MdlMenu;
diff --git a/docs/lib/1.1/controllers/scroll-helper.js b/docs/lib/1.1/controllers/scroll-helper.js
deleted file mode 100644
index 9d8c0fc..0000000
--- a/docs/lib/1.1/controllers/scroll-helper.js
+++ /dev/null
@@ -1,242 +0,0 @@
-/**
- * ScrollHelper Controller class.
- *
- * @version 1.1.0 (2018-04-22)
- * @author Gene
- *
- * @version 1.0.1 (2017-06-16)
- * @author Gene
- *
- * @constructor
- * @this {ContextController}
- */
-function ScrollHelper() {
- const scrollInfo = {
- timestamp: 0,
- size: {
- width: 0,
- height: 0
- },
- viewport: {
- x: 0,
- y: 0,
- width: 0,
- height: 0
- }
- };
- let updateTimeout;
- let watchList;
- let watchCallback;
- let scrollToEndTs = 0;
- let frameSkipTs;
-
- const cp = this;
- cp.init = onInit;
- cp.create = onCreate;
-
- function onInit() {
- cp.options().html = false;
- cp.options().css = false;
- }
-
- function onCreate() {
- if (cp.view().get() === document.body) {
- if (cp.options().throttle > 0) {
- window.onscroll = throttle(scrollCheck, cp.options().throttle);
- } else {
- window.onscroll = scrollCheck;
- }
- } else {
- if (cp.options().throttle > 0) {
- cp.view().on('scroll', {
- handler: throttle(scrollCheck, cp.options().throttle),
- passive: true
- });
- } else {
- cp.view().on('scroll', {
- handler: scrollCheck,
- passive: true
- });
- }
- }
- cp.expose('watch', function(filter, callback) {
- setWatchList(filter, callback);
- return cp.context;
- });
- cp.expose('scrollStart', function(duration) {
- if (duration == null) duration = -1;
- scrollTo(0, duration);
- return cp.context;
- }).expose('scrollEnd', function(duration) {
- if (duration == null) duration = -1;
- scrollTo(scrollInfo.size.height, duration);
- return cp.context;
- }).expose('scrollTo', function(to, duration) {
- if (duration == null) duration = -1;
- scrollTo(to, duration);
- return cp.context;
- }).expose('info', function() {
- return scrollInfo;
- }).expose('check', scrollCheck);
- // TODO: that's a temp hack to force measure at start
- //scrollTo(5, -1);
- //scrollTo(0, 200);
- }
-
- function scrollCheck() {
- // TODO: implement code for horizontal scroll as well
-
- if (updateTimeout != null) {
- clearTimeout(updateTimeout);
- }
- const now = new Date().getTime();
- if (now - scrollInfo.timestamp > 100) {
- updateScrollInfo();
- } else {
- updateTimeout = setTimeout(function() {
- updateScrollInfo();
- }, 99);
- }
-
- if (now < scrollToEndTs && now-frameSkipTs < 66) {
- return;
- }
- frameSkipTs = now;
-
- const visibleClass = 'scroll-helper-visible';
- if (watchList != null && watchCallback != null) {
- watchList.each(function(i, el) {
- const position = this.position();
- if (!position.visible && this.hasClass(visibleClass)) {
- this.removeClass(visibleClass);
- position.event = 'exit';
- } else if (!position.visible) {
- position.event = 'off-scroll';
- } else if (position.visible) {
- if (!this.hasClass(visibleClass)) {
- position.event = 'enter';
- this.addClass(visibleClass);
- } else position.event = 'scroll';
- } else return;
- watchCallback(this, position);
- });
- }
- }
-
- function setWatchList(filter, callback) {
- if (filter != null) {
- watchList = cp.view(filter);
- watchCallback = callback;
- } else {
- watchList = null;
- watchCallback = null;
- }
- }
-
- function updateScrollInfo() {
- const scrollable = cp.view().get();
- const rect = scrollable.getBoundingClientRect();
- const vp = {
- top: rect.top,
- right: rect.right,
- bottom: rect.bottom,
- left: rect.left,
- width: rect.width,
- height: rect.height,
- x: rect.x,
- y: rect.y
- };
- vp.y = -cp.view().get().scrollTop || (vp.y ? vp.y : 0);
- vp.height = cp.view().get().scrollHeight || (vp.height ? vp.height : 0);
- scrollInfo.size.width = vp.width;
- scrollInfo.size.height = vp.height;
- if (scrollable === document.body) {
- scrollInfo.size.width = document.body.offsetWidth;
- scrollInfo.size.height = document.body.offsetHeight;
- scrollInfo.viewport.width = document.documentElement.clientWidth || scrollInfo.size.width;
- scrollInfo.viewport.height = document.documentElement.clientHeight || scrollInfo.size.height;
- } else {
- scrollInfo.viewport.width = scrollable.offsetWidth;
- scrollInfo.viewport.height = scrollable.offsetHeight;
- }
- scrollInfo.timestamp = new Date().getTime();
- scrollInfo.shift = {
- x: vp.x - scrollInfo.viewport.x,
- y: vp.y - scrollInfo.viewport.y
- };
- scrollInfo.viewport.x = vp.x;
- scrollInfo.viewport.y = vp.y;
- const endScroll = scrollInfo.size.height+vp.y-scrollInfo.viewport.height;
- if ((endScroll === 0 || vp.y === 0)) {
- cp.trigger('scroll:change', {event: vp.y === 0 ? 'hit-top' : 'hit-bottom', info: scrollInfo});
- } else {
- cp.trigger('scroll:change', {event: 'scroll', info: scrollInfo});
- }
- }
-
- function scrollTo(to, duration) {
- if (to instanceof Element || to instanceof zuix.$.ZxQuery) {
- to = zuix.$(to).position().y - scrollInfo.viewport.y;
- }
- if (duration === -1) {
- return setScroll(to);
- }
- const currentTs = Date.now();
- if (duration != null) {
- scrollToEndTs = currentTs + duration;
- }
- duration = scrollToEndTs-currentTs;
-
- const el = cp.view().get();
- let scrollTop = 0;
- if (el === document.body) {
- scrollTop = (window.pageYOffset !== undefined) ?
- window.pageYOffset :
- (document.documentElement || document.body.parentNode || document.body).scrollTop;
- } else scrollTop = el.scrollTop;
-
- const difference = to - scrollTop;
- if (duration <= 0 || difference === 0) {
- setScroll(to);
- scrollCheck();
- return;
- }
-
- const offset = scrollTop + (difference / duration * 33);
- requestAnimationFrame(function() {
- setScroll(offset);
- scrollTo(to);
- });
- }
-
- function setScroll(to) {
- const el = cp.view().get();
- if (el === document.body) {
- document.documentElement.scrollTop = to;
- document.body.scrollTop = to;
- } else el.scrollTop = to;
- }
-}
-
-function throttle(func, limit) {
- let lastFunc = void 0;
- let lastRan = void 0;
- return function() {
- const context = this;
- const args = arguments;
- if (!lastRan) {
- func.apply(context, args);
- lastRan = Date.now();
- } else {
- clearTimeout(lastFunc);
- lastFunc = setTimeout(function() {
- if (Date.now() - lastRan >= limit) {
- func.apply(context, args);
- lastRan = Date.now();
- }
- }, limit - (Date.now() - lastRan));
- }
- };
-}
-
-module.exports = ScrollHelper;
diff --git a/docs/lib/1.1/controllers/view-pager.js b/docs/lib/1.1/controllers/view-pager.js
deleted file mode 100644
index 5af3080..0000000
--- a/docs/lib/1.1/controllers/view-pager.js
+++ /dev/null
@@ -1,693 +0,0 @@
-/**
- * zUIx - ViewPager Component
- *
- * @version 1.0.6 (2018-08-24)
- * @author Gene
- *
- * @version 1.0.5 (2018-08-21)
- * @author Gene
- *
- * @version 1.0.4 (2018-06-29)
- * @author Gene
- *
- * @version 1.0.3 (2018-06-26)
- * @author Gene
- *
- * @version 1.0.1 (2018-02-12)
- * @author Gene
- *
- */
-
-'use strict';
-
-function ViewPager() {
- const DEFAULT_PAGE_TRANSITION = {duration: 0.3, easing: 'ease'};
- const BOUNDARY_HIT_EASING = 'cubic-bezier(0.0,0.1,0.35,1.1)';
- const DECELERATE_SCROLL_EASING = 'cubic-bezier(0.0,0.1,0.35,1.0)';
- const LAYOUT_HORIZONTAL = 'horizontal';
- const LAYOUT_VERTICAL = 'vertical';
- const SLIDE_DIRECTION_FORWARD = 1;
- const SLIDE_DIRECTION_BACKWARD = -1;
- // state vars
- let currentPage = -1;
- let oldPage = 0;
- let slideTimeout = null;
- let slideIntervalMs = 3000;
- let slideDirection = SLIDE_DIRECTION_FORWARD;
- let updateLayoutTimeout = null;
- let inputCaptured = false;
- // options
- let layoutType = LAYOUT_HORIZONTAL;
- let enableAutoSlide = false;
- let enablePaging = false;
- let holdTouch = false;
- let passiveMode = true;
- let startGap = 0;
- let hideOffViewElements = false;
- // status
- let isDragging = false;
- let wasVisible = false;
- let isLazyContainer = false;
- let isFlying = false;
- let actualViewSize = {
- width: 0,
- height: 0
- };
- // timers
- let componentizeInterval = null;
- let componentizeTimeout = null;
- /** @typedef {ZxQuery} */
- let pageList = null;
- // Create a mutation observer instance to watch for child add/remove
- const domObserver = new MutationObserver(function(a, b) {
- // update child list and re-layout
- pageList = cp.view().children();
- updateLayout();
- });
- const cp = this;
-
- cp.init = function() {
- const options = cp.options();
- const view = cp.view();
- options.html = false;
- options.css = false;
- enablePaging = (options.paging === true || enablePaging);
- enableAutoSlide = (options.autoSlide === true || enableAutoSlide);
- passiveMode = (options.passive !== false && passiveMode);
- holdTouch = (options.holdTouch === true || holdTouch);
- startGap = (options.startGap || startGap);
- if (options.verticalLayout === true) {
- layoutType = LAYOUT_VERTICAL;
- }
- if (options.slideInterval != null) {
- slideIntervalMs = (options.slideInterval || slideIntervalMs);
- }
- hideOffViewElements = (options.autoHide === true || hideOffViewElements);
- };
-
- cp.create = function() {
- // enable absolute positioning for items in this view
- const view = cp.view().css({
- 'position': 'relative',
- 'overflow': 'hidden'
- });
- // get child items (pages)
- pageList = view.children();
- // loading of images could change elements size, so layout update might be required
- view.find('img').each(function(i, el) {
- this.one('load', updateLayout);
- });
- // re-arrange view on layout changes
- zuix.$(window)
- .on('resize', function() {
- layoutElements(true);
- }).on('orientationchange', function() {
- layoutElements(true);
- });
- // Options for the observer (which mutations to observe)
- // Register DOM mutation observer callback
- domObserver.observe(view.get(), {
- attributes: false,
- childList: true,
- subtree: true,
- characterData: false
- });
- updateLayout();
- let tapTimeout = null;
- // gestures handling - load gesture-helper controller
- zuix.load('@lib/controllers/gesture-helper', {
- view,
- passive: passiveMode,
- startGap: startGap,
- on: {
- 'gesture:touch': function(e, tp) {
- if (!insideViewPager(tp)) return;
- inputCaptured = false;
- stopAutoSlide();
- dragStart();
- if (holdTouch) tp.cancel();
- },
- 'gesture:release': function(e, tp) {
- dragStop(tp);
- resetAutoSlide();
- },
- 'gesture:tap': function(e, tp) {
- if (!insideViewPager(tp)) return;
- if (tapTimeout != null) {
- clearTimeout(tapTimeout);
- }
- tapTimeout = setTimeout(function() {
- handleTap(e, tp);
- }, 50);
- },
- 'gesture:pan': handlePan,
- 'gesture:swipe': handleSwipe
- },
- ready: function() {
- layoutElements(true);
- // Set starting page
- setPage(0);
- }
- });
- // public component methods
- cp.expose('page', function(number) {
- if (number == null) {
- return parseInt(currentPage);
- } else setPage(number, DEFAULT_PAGE_TRANSITION);
- }).expose('get', function(number) {
- return number < pageList.length() && pageList.length() > 0 ? pageList.eq(number) : null;
- }).expose('slide', function(slideMs) {
- if (slideMs !== false) {
- enableAutoSlide = true;
- resetAutoSlide(slideMs !== true ? slideMs : slideIntervalMs);
- } else stopAutoSlide();
- }).expose('layout', function(mode) {
- if (mode == null) {
- return layoutType;
- } else if (mode === LAYOUT_VERTICAL) {
- layoutType = LAYOUT_VERTICAL;
- } else layoutType = LAYOUT_HORIZONTAL;
- updateLayout();
- }).expose('refresh', function() {
- layoutElements(true);
- }).expose('next', next)
- .expose('prev', prev)
- .expose('last', last)
- .expose('first', first);
- };
-
- cp.destroy = function() {
- if (domObserver != null) {
- domObserver.disconnect();
- }
- };
-
- function updateLayout() {
- if (updateLayoutTimeout != null) {
- clearTimeout(updateLayoutTimeout);
- }
- updateLayoutTimeout = setTimeout(layoutElements, 250);
- }
- function layoutElements(force) {
- if (!force && (isDragging || componentizeInterval != null)) {
- updateLayout();
- return;
- }
- // init elements
- pageList.each(function(i, el) {
- this.css({
- 'position': 'absolute',
- 'left': 0,
- 'top': 0
- });
- });
- // measure
- const viewSize = getSize(cp.view().get());
- if (viewSize.width === 0 || viewSize.height === 0) {
- if (viewSize.height === 0 && cp.view().position().visible) {
- let maxHeight = 0;
- // guess and set view-pager height
- pageList.each(function(i, el) {
- const size = getSize(el);
- if (size.height > maxHeight) {
- maxHeight = size.height;
- }
- });
- if (viewSize.height < maxHeight) {
- cp.view().css('height', maxHeight + 'px');
- }
- }
- // cannot measure view, try again later
- updateLayout();
- return;
- }
- actualViewSize = viewSize;
- // position elements
- let offset = 0;
- let isLazy = false;
- pageList.each(function(i, el) {
- const size = getSize(el);
- if (layoutType === LAYOUT_HORIZONTAL) {
- let centerY = (viewSize.height-size.height)/2;
- if (centerY < 0) centerY = 0; // TODO: centering with negative offset was not working
- transition(this, DEFAULT_PAGE_TRANSITION);
- position(this, offset, centerY);
- offset += size.width;
- } else {
- let centerX = (viewSize.width-size.width)/2;
- if (centerX < 0) centerX = 0; // TODO: centering with negative offset was not working
- transition(this, DEFAULT_PAGE_TRANSITION);
- position(this, centerX, offset);
- offset += size.height;
- }
- if (this.attr('z-lazy') === 'true' ||
- this.find('[z-lazy="true"]').length() > 0) {
- isLazy = true;
- }
- });
- isLazyContainer = isLazy;
-
- // focus to current page
- setPage(currentPage);
- // start automatic slide
- if (pageList.length() > 1) {
- resetAutoSlide();
- }
- }
-
- function next() {
- let isLast = false;
- let page = parseInt(currentPage)+1;
- if (page >= pageList.length()) {
- page = pageList.length()-1;
- isLast = true;
- }
- setPage(page, DEFAULT_PAGE_TRANSITION);
- return !isLast;
- }
- function prev() {
- let isFirst = false;
- let page = parseInt(currentPage)-1;
- if (page < 0) {
- page = 0;
- isFirst = true;
- }
- setPage(page, DEFAULT_PAGE_TRANSITION);
- return !isFirst;
- }
- function first() {
- setPage(0, DEFAULT_PAGE_TRANSITION);
- }
- function last() {
- setPage(pageList.length()-1, DEFAULT_PAGE_TRANSITION);
- }
-
- function slideNext() {
- if (cp.view().position().visible) {
- setPage(parseInt(currentPage) + slideDirection, DEFAULT_PAGE_TRANSITION);
- }
- resetAutoSlide();
- }
-
- function resetAutoSlide(slideInterval) {
- if (slideInterval) {
- slideIntervalMs = slideInterval;
- }
- stopAutoSlide();
- if (enableAutoSlide === true) {
- const visible = cp.view().position().visible;
- if (visible) {
- if (!wasVisible) {
- zuix.componentize(cp.view());
- }
- const delay = pageList.eq(currentPage).attr('slide-interval') || slideIntervalMs;
- slideTimeout = setTimeout(slideNext, delay);
- } else {
- slideTimeout = setTimeout(resetAutoSlide, 500);
- }
- wasVisible = visible;
- }
- }
- function stopAutoSlide() {
- if (slideTimeout != null) {
- clearTimeout(slideTimeout);
- }
- }
-
- function getItemIndexAt(x, y) {
- let focusedPage = 0;
- pageList.each(function(i, el) {
- const data = getData(this);
- focusedPage = i;
- const size = getSize(el);
- const rect = {
- x: data.position.x,
- y: data.position.y,
- w: size.width,
- h: size.height
- };
- if ((layoutType === LAYOUT_HORIZONTAL && (rect.x > x || rect.x+rect.w > x)) ||
- (layoutType === LAYOUT_VERTICAL && (rect.y > y || rect.y+rect.h > y))) {
- return false;
- }
- });
- return focusedPage;
- }
-
- function focusPageAt(tp, transition) {
- const vp = cp.view().position();
- const page = getItemIndexAt(tp.x-vp.x, tp.y-vp.y);
- setPage(page, transition != null ? transition : DEFAULT_PAGE_TRANSITION);
- }
-
- function setPage(n, transition) {
- oldPage = currentPage;
- if (n < 0) {
- slideDirection = SLIDE_DIRECTION_FORWARD;
- n = 0;
- } else if (n >= pageList.length()) {
- slideDirection = SLIDE_DIRECTION_BACKWARD;
- n = pageList.length() - 1;
- } else if (n !== currentPage) {
- slideDirection = (currentPage < n) ? SLIDE_DIRECTION_FORWARD : SLIDE_DIRECTION_BACKWARD;
- }
- currentPage = n;
- if (currentPage != oldPage) {
- pageList.eq(currentPage).css('z-index', 1);
- if (oldPage !== -1) {
- pageList.eq(oldPage).css('z-index', 0);
- }
- cp.trigger('page:change', {in: currentPage, out: oldPage});
- }
- const el = pageList.eq(n);
- const data = getData(el);
- const elSize = getSize(el.get());
- const focusPoint = {
- x: (actualViewSize.width - elSize.width) / 2 - data.position.x,
- y: (actualViewSize.height - elSize.height) / 2 - data.position.y
- };
- flyTo(focusPoint, transition);
- resetAutoSlide();
- }
-
- function flyTo(targetPoint, transition) {
- const spec = getFrameSpec();
- const firstData = getData(pageList.eq(0));
- const lastPage = pageList.eq(pageList.length() - 1);
- const lastData = getData(lastPage);
-
- pageList.each(function(i, el) {
- const data = getData(this);
- const frameSpec = getFrameSpec();
- data.dragStart = {
- x: frameSpec.marginLeft + data.position.x,
- y: frameSpec.marginTop + data.position.y
- };
- });
-
- if (layoutType === LAYOUT_HORIZONTAL) {
- let x = targetPoint.x;
- if (firstData.position.x + targetPoint.x > 0) {
- x = -firstData.position.x;
- } else {
- if (lastData.position.x + lastPage.get().offsetWidth + targetPoint.x < actualViewSize.width) {
- x = -spec.marginLeft*2 + actualViewSize.width - (lastData.position.x + lastPage.get().offsetWidth);
- }
- }
- // check if boundary was adjusted and adjust flying duration accordingly
- if (targetPoint.x-x !== 0 && transition != null) {
- transition = {
- duration: transition.duration * (x / targetPoint.x),
- easing: BOUNDARY_HIT_EASING
- };
- if (!isFinite(transition.duration) || transition.duration < 0) {
- transition.duration = 0.2;
- }
- }
- dragShift(x, 0, transition);
- } else {
- let y = targetPoint.y;
- if (firstData.position.y + targetPoint.y > 0) {
- y = -firstData.position.y;
- } else {
- if (lastData.position.y + lastPage.get().offsetHeight + targetPoint.y < actualViewSize.height) {
- y = -spec.marginTop*2 + actualViewSize.height - (lastData.position.y + lastPage.get().offsetHeight);
- }
- }
- // check if boundary was adjusted and adjust flying duration accordingly
- if (targetPoint.y-y !== 0 && transition != null) {
- transition = {
- duration: transition.duration * (y / targetPoint.y),
- easing: BOUNDARY_HIT_EASING
- };
- if (!isFinite(transition.duration) || transition.duration < 0) {
- transition.duration = 0.2;
- }
- }
- dragShift(0, y, transition);
- }
- isFlying = true;
- }
-
- function getSize(el) {
- const rect = el.getBoundingClientRect();
- const width = rect.width || el.offsetWidth;
- const height = el.offsetHeight || rect.height;
- return {width: width, height: height};
- }
-
- function getData(el) {
- const data = el.get().data = el.get().data || {};
- data.position = data.position || {x: 0, y: 0};
- return data;
- }
-
- function componentizeStart() {
- if (isLazyContainer) {
- componentizeStop();
- if (componentizeTimeout != null) {
- clearTimeout(componentizeTimeout);
- }
- if (componentizeInterval != null) {
- clearInterval(componentizeInterval);
- }
- componentizeInterval = setInterval(function() {
- if (hideOffViewElements) {
- pageList.each(function(i, el) {
- // hide elements if not inside the view-pager
- const computed = window.getComputedStyle(el, null);
- const size = {
- width: parseFloat(computed.width.replace('px', '')),
- height: parseFloat(computed.height.replace('px', ''))
- };
- const x = parseFloat(computed.left.replace('px', ''));
- const y = parseFloat(computed.top.replace('px', ''));
- if (size.width > 0 && size.height > 0) {
- el = zuix.$(el);
- // check if element is inside the view-pager
- const visibleArea = {
- left: -actualViewSize.width / 2,
- right: actualViewSize.width * 1.5,
- top: (-actualViewSize.height / 2),
- bottom: actualViewSize.height * 1.5
- };
- if (x + size.width < visibleArea.left || y + size.height < visibleArea.top || x > visibleArea.right || y > visibleArea.bottom) {
- if (el.visibility() !== 'hidden') {
- el.visibility('hidden');
- }
- } else if (el.visibility() !== 'visible') {
- el.visibility('visible');
- }
- }
- });
- }
- zuix.componentize(cp.view());
- }, 10);
- }
- }
-
- function componentizeStop() {
- if (isLazyContainer && componentizeTimeout == null) {
- clearInterval(componentizeInterval);
- }
- }
-
- function dragStart() {
- isDragging = true;
- isFlying = false;
- pageList.each(function(i, el) {
- const data = getData(this);
- const frameSpec = getFrameSpec();
- const computed = window.getComputedStyle(el, null);
- data.position.x = parseFloat(computed.left.replace('px', ''));
- data.position.y = parseFloat(computed.top.replace('px', ''));
- this.css('left', data.position.x+'px');
- this.css('top', data.position.y+'px');
- data.dragStart = {x: frameSpec.marginLeft+data.position.x, y: frameSpec.marginTop+data.position.y};
- });
- }
-
- function getFrameSpec() {
- const spec = {
- w: 0,
- h: 0,
- marginLeft: 0,
- marginTop: 0
- };
- pageList.each(function(i, el) {
- const size = getSize(el);
- spec.w += size.width;
- spec.h += size.height;
- });
- if (layoutType === LAYOUT_HORIZONTAL && spec.w < actualViewSize.width) {
- spec.marginLeft = (actualViewSize.width - spec.w) / 2;
- } else if (layoutType === LAYOUT_VERTICAL && spec.h < actualViewSize.height) {
- spec.marginTop = (actualViewSize.height - spec.h) / 2;
- }
- return spec;
- }
-
- function dragShift(x, y, tr) {
- if (tr != null) {
- componentizeStart();
- componentizeTimeout = setTimeout(function() {
- componentizeTimeout = null;
- componentizeStop();
- }, tr.duration*1000);
- tr = tr.duration+'s '+tr.easing;
- } else if (isLazyContainer) {
- zuix.componentize(cp.view());
- }
- pageList.each(function(i, el) {
- const data = getData(this);
- transition(this, tr);
- position(this, data.dragStart.x+x, data.dragStart.y+y);
- });
- }
-
- function dragStop(tp) {
- if (tp != null) {
- tp.done = true;
- // decelerate
- if (!isFlying && ((layoutType === LAYOUT_HORIZONTAL && tp.scrollIntent() === 'horizontal') || (layoutType === LAYOUT_VERTICAL && tp.scrollIntent() === 'vertical'))) {
- decelerate(null, tp);
- }
- }
- componentizeStop();
- isDragging = false;
- }
-
- // Gesture handling
-
- function handlePan(e, tp) {
- if (!isDragging || !tp.scrollIntent() || tp.done) {
- return;
- }
- if (inputCaptured ||
- ((tp.direction === 'left' || tp.direction === 'right') && layoutType === LAYOUT_HORIZONTAL) ||
- ((tp.direction === 'up' || tp.direction === 'down') && layoutType === LAYOUT_VERTICAL)) {
- // capture click event
- if (!inputCaptured && tp.event.touches == null) {
- cp.view().get().addEventListener('click', function(e) {
- if (inputCaptured) {
- inputCaptured = false;
- e.cancelBubble = true;
- // TODO: 'preventDefault' should not be used with passive listeners
- e.preventDefault();
- }
- // release mouse click capture
- cp.view().get().removeEventListener('click', this, true);
- }, true);
- }
- inputCaptured = true;
- tp.cancel();
- }
- const spec = getFrameSpec();
- if (layoutType === LAYOUT_HORIZONTAL && tp.scrollIntent() === 'horizontal') {
- dragShift(tp.shiftX-spec.marginLeft, 0);
- } else if (layoutType === LAYOUT_VERTICAL && tp.scrollIntent() === 'vertical') {
- dragShift(0, tp.shiftY-spec.marginTop);
- }
- }
-
- function handleTap(e, tp) {
- const vp = cp.view().position();
- const page = getItemIndexAt(tp.x-vp.x, tp.y-vp.y);
- cp.trigger('page:tap', page, tp);
- if (enablePaging) focusPageAt(tp);
- }
-
- function decelerate(e, tp) {
- const minSpeed = 0.01;
- const minStepSpeed = 1.25;
- const accelerationFactor = Math.exp(Math.abs(tp.velocity / (Math.abs(tp.velocity) <= minStepSpeed ? 5 : 2))+1);
- let friction = 0.990 + (accelerationFactor / 1000);
- if (friction > 0.999) {
- friction = 0.999;
- }
- const duration = Math.log(minSpeed / Math.abs(tp.velocity)) / Math.log(friction);
- const decelerateEasing = {
- duration: duration / 1000, // ms to s
- easing: DECELERATE_SCROLL_EASING
- };
- const fly = function(destination, shift) {
- if (enablePaging) {
- decelerateEasing.duration *= 0.5;
- if (layoutType === LAYOUT_HORIZONTAL) {
- focusPageAt({
- x: destination.x - shift.x,
- y: destination.y
- }, decelerateEasing);
- } else {
- focusPageAt({
- x: destination.x,
- y: destination.y - shift.y
- }, decelerateEasing);
- }
- } else {
- flyTo(shift, decelerateEasing);
- }
- };
- const flyingDistance = tp.stepSpeed < minStepSpeed ? 0 : accelerationFactor * tp.velocity * (1 - Math.pow(friction, duration + 1)) / (1 - friction);
- const ap = {
- x: flyingDistance,
- y: flyingDistance
- };
- if (willFly(tp) || e == null) fly(tp, ap);
- }
-
- function willFly(tp) {
- return (!enablePaging || Math.abs(tp.velocity) > 1.25);
- }
-
- function handleSwipe(e, tp) {
- if (!insideViewPager(tp)) return;
- if (willFly(tp)) {
- return;
- }
- switch (tp.direction) {
- case 'right':
- if (layoutType === LAYOUT_HORIZONTAL) prev();
- break;
- case 'left':
- if (layoutType === LAYOUT_HORIZONTAL) next();
- break;
- case 'down':
- if (layoutType === LAYOUT_VERTICAL) prev();
- break;
- case 'up':
- if (layoutType === LAYOUT_VERTICAL) next();
- break;
- }
- }
-
- function position(el, x, y) {
- const data = getData(el);
- if (!isNaN(x) && !isNaN(y)) {
- data.position = {'x': x, 'y': y};
- el.css({'left': data.position.x+'px', 'top': data.position.y+'px'});
- }
- return data;
- }
-
- function transition(el, transition) {
- if (transition == null) {
- transition = 'none';
- }
- el.css({
- 'transition': transition
- });
- }
-
- function insideViewPager(tp) {
- let elements = document.elementsFromPoint(tp.x, tp.y);
- if (elements.length > 0 && !cp.view().get().contains(elements[0])) {
- return false;
- }
- elements = elements.filter((el) => el.attributes['z-load'] &&
- el.attributes['z-load'].value === cp.view().attr('z-load'));
- return elements.length > 0 && elements[0] === cp.view().get();
- }
-}
-
-module.exports = ViewPager;
diff --git a/docs/lib/1.1/templates/mdl-card-image.css b/docs/lib/1.1/templates/mdl-card-image.css
deleted file mode 100644
index 72ed91a..0000000
--- a/docs/lib/1.1/templates/mdl-card-image.css
+++ /dev/null
@@ -1,45 +0,0 @@
-:host {
- font-family: "Roboto","Helvetica","Arial",sans-serif !important;
- transition: box-shadow 0.2s ease-in-out;
-}
-
-.mdl-card {
- width: 256px;
- height: 256px; /* 259 306 317 342 392 292 */
- background: url('data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
- background-repeat: no-repeat!important;
- background-position: center!important;
-}
-.mdl-card__actions {
- height: 52px;
- padding: 16px;
- border-top: solid 1px rgba(255,255,255, 0.4);
- background: rgba(0, 0, 0, 0.7);
-}
-.title {
- color: #fff;
- font-size: 120%;
- font-weight: 500;
- width: 220px;
- max-width: 100%;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-.mdl-ripple {
- background: #fff;
-}
-.mdl-card__title {
- align-items: start;
-}
-.mdl-card__title span {
- width: 100%;
- font-size: 95%;
- padding: 6px;
- background: rgba(255,255,255,0.85);
- border-radius: 3px;
-}
-
-[z-field="text"]:empty {
- display: none;
-}
diff --git a/docs/lib/1.1/templates/mdl-card-image.html b/docs/lib/1.1/templates/mdl-card-image.html
deleted file mode 100644
index 4697627..0000000
--- a/docs/lib/1.1/templates/mdl-card-image.html
+++ /dev/null
@@ -1,22 +0,0 @@
-
-
-
-
-
-
-
-
diff --git a/docs/lib/1.1/templates/mdl-card-square.css b/docs/lib/1.1/templates/mdl-card-square.css
deleted file mode 100644
index 79d88de..0000000
--- a/docs/lib/1.1/templates/mdl-card-square.css
+++ /dev/null
@@ -1,66 +0,0 @@
-:host {
- font-family: "Roboto","Helvetica","Arial",sans-serif !important;
- transition: box-shadow 0.2s ease-in-out;
-}
-
-.mdl-card {
- width: 320px;
- height: 320px;
- font-family: "Roboto","Helvetica","Arial",sans-serif !important;
-}
-.mdl-card__title {
- width: auto !important;
- height: 172px !important;
- position: relative !important;
- overflow: hidden !important;
- padding: 0 !important;
- margin: 0 !important;
-}
-.mdl-card__title img {
- position: absolute !important;
- left: 50% !important;
- top: 50% !important;
- height: 176px !important;
- width: auto !important;
- -webkit-transform: translate(-50%,-50%) !important;
- -ms-transform: translate(-50%,-50%) !important;
- transform: translate(-50%,-50%) !important;
-}
-.mdl-card__title img.portrait {
- background: linear-gradient(to bottom, #82addb66 0%,#ebb2b166 100%);
- width: 100% !important;
- /*height: auto !important;*/
-}
-h1 {
- padding: 16px !important;
- font-size: 160% !important;
- font-weight: 500 !important;
- margin: 0 !important;
- text-shadow:
- -.5px -.5px 0 #00000055,
- .5px -.5px 0 #00000055,
- -.5px .5px 0 #00000055,
- 1px 1px 0 #00000055 !important;
- z-index: 10 !important;
-}
-.mdl-button {
- font-weight: bold;
-}
-.mdl-card__supporting-text {
- color: black !important;
- font-size: 100% !important;
- line-height: 130% !important;
- width: 100% !important;
- padding: 0 !important;
- margin: 16px !important;
- display: block; text-overflow: ellipsis;
- max-lines: 3;
- display: -webkit-box;
- max-width: 296px;
- max-height: 90px;
- height: 64px;
- min-height: 64px;
- overflow: hidden !important;
- -webkit-line-clamp: 3;
- -webkit-box-orient: vertical;
-}
diff --git a/docs/lib/1.1/templates/mdl-card-square.html b/docs/lib/1.1/templates/mdl-card-square.html
deleted file mode 100644
index f9c0048..0000000
--- a/docs/lib/1.1/templates/mdl-card-square.html
+++ /dev/null
@@ -1,21 +0,0 @@
-
-
-
- 
- Update
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Aenan convallis.
-
-
-
- View Updates
-
-
-
-
-
diff --git a/docs/lib/1.1/templates/mdl-card.css b/docs/lib/1.1/templates/mdl-card.css
deleted file mode 100644
index 0010a28..0000000
--- a/docs/lib/1.1/templates/mdl-card.css
+++ /dev/null
@@ -1,65 +0,0 @@
-:host {
- font-family: "Roboto","Helvetica","Arial",sans-serif !important;
- transition: box-shadow 0.2s ease-in-out;
-}
-
-.mdl-card {
- padding: 0 !important;
- margin: 0 !important;
- width: 100%;
- max-width: 450px;
-}
-.mdl-card__title {
- width: auto !important;
- height: 172px !important;
- position: relative !important;
- overflow: hidden !important;
- padding: 0 !important;
- margin: 0 !important;
-}
-.mdl-card__title img {
- position: absolute !important;
- left: 50% !important;
- top: 50% !important;
- height: 100% !important;
- width: auto !important;
- -webkit-transform: translate(-50%,-50%) !important;
- -ms-transform: translate(-50%,-50%) !important;
- transform: translate(-50%,-50%) !important;
-}
-.mdl-card__title img.portrait {
- background: linear-gradient(to bottom, #82addb66 0%,#ebb2b166 100%);
- width: 100% !important;
- /*height: auto !important;*/
-}
-.mdl-card__supporting-text {
- color: black !important;
- font-size: 110% !important;
- line-height: 140% !important;
- width: 100% !important;
- padding: 0 !important;
- margin: 16px !important;
- display: block; text-overflow: ellipsis;
- max-lines: 3;
- display: -webkit-box;
- max-width: 394px;
- max-height: 106px;
- overflow: hidden !important;
- -webkit-line-clamp: 3;
- -webkit-box-orient: vertical;
-}
-h1 {
- font-size: 160% !important;
- font-weight: 500 !important;
- padding: 16px !important;
- margin: 0 !important;
- text-shadow:
- -1px -1px 0 #000,
- 1px -1px 0 #000,
- -1px 1px 0 #000,
- 1px 1px 0 #000 !important;
- z-index: 10 !important;
-}
-.mdl-button {
- font-weight: bold;
-}
diff --git a/docs/lib/1.1/templates/mdl-card.html b/docs/lib/1.1/templates/mdl-card.html
deleted file mode 100644
index 7243633..0000000
--- a/docs/lib/1.1/templates/mdl-card.html
+++ /dev/null
@@ -1,24 +0,0 @@
-
-
-
-
diff --git a/docs/lib/README.md b/docs/lib/README.md
deleted file mode 100644
index 198195e..0000000
--- a/docs/lib/README.md
+++ /dev/null
@@ -1,6 +0,0 @@
-# lib
-
-Place here reusable `zuix.js` components that can be used across different sites.
-
-Public component libraries:
-- [zKit](https://zuixjs.github.io/zkit/)
diff --git a/docs/search-index.json b/docs/search-index.json
index 5cad6dc..49b3cd3 100644
--- a/docs/search-index.json
+++ b/docs/search-index.json
@@ -1,2 +1,2 @@
-{"keys":[{"path":["title"],"id":"title","weight":1,"src":"title","getFn":null},{"path":["description"],"id":"description","weight":1,"src":"description","getFn":null},{"path":["content"],"id":"content","weight":1,"src":"content","getFn":null}],"records":[{"i":0,"$":{"0":{"v":"Page options","n":0.707},"1":{"v":"Front matter data, layout and other page options.","n":0.354},"2":{"v":"In addition to the `zuix-web-starer` base [options](https://zuixjs.github.io/zuix-web-starter/content/page-editing-and-options/), the following options are available. ## Front matter data ### `layout` Available layouts: - **`landing_page`** a simple splash screen used for the main page (`./source/index.liquid`) and that redirects to the home page (`./source/home.liquid`). - **`side_drawer`** a page with a responsive *navigation drawer* layout, like the one used by this very page. ### `options` - **`mdl`** use [Material Design Light](https://getmdl.io/components/index.html) styles. - **`highlig","n":0.12}}},{"i":1,"$":{"0":{"v":"Components short codes","n":0.577},"1":{"v":"Rendering zKit and custom components using zx short code","n":0.333},"2":{"v":"Using `zx`'s short code's tags it is possible to render components and fragments without writing any HTML or JavaScript code. ## Components tags ### `menu-overlay` This tag renders zKit's *Menu Overlay* component. It will show a floating menu button visible at the bottom of the page and that automatically shows/hides when the page is scrolled. The button can be positioned on the left, center or right using the `position` option. #### Example {% raw %} ```yaml {% zx 'menu-overlay' %} items: - title: Links - title: zKit link: https://zuixjs.github.io/zkit/content/components/m","n":0.106}}},{"i":2,"$":{"0":{"v":"Material Design components","n":0.577},"1":{"v":"Rendering Material Design components using zx short code","n":0.354},"2":{"v":"This web starter template includes [Material Design Lite](https://getmdl.io/components/) components, implemented using *zuix.js*, and that can be also rendered using `zx` short code tags. ## Material Design tags ### `button` Usage: {% raw %} ```liquid {% zx 'button' '' ['' ['']] %} {% endzx %} ``` {% endraw %} Where `''` can be one of the following: - `flat` - `raised` - `fab` and `''` can be one of the following values: - `colored` - `accent` - `primary` - `mini-fab` (can be added only if *type* is `fab`) #### Examples Basic button {% raw %} ```","n":0.103}}}]}
+{"keys":[{"path":["title"],"id":"title","weight":1,"src":"title","getFn":null},{"path":["description"],"id":"description","weight":1,"src":"description","getFn":null},{"path":["content"],"id":"content","weight":1,"src":"content","getFn":null}],"records":[{"i":0,"$":{"0":{"v":"Components short codes","n":0.577},"1":{"v":"Rendering zKit and custom components using zx short code","n":0.333},"2":{"v":"Using `zx`'s short code's tags it is possible to render components and fragments without writing any HTML or JavaScript code. ## Components tags ### `menu-overlay` This tag renders zKit's *Menu Overlay* component. It will show a floating menu button visible at the bottom of the page and that automatically shows/hides when the page is scrolled. The button can be positioned on the left, center or right using the `position` option. #### Example {% raw %} ```yaml {% zx 'menu-overlay' %} items: - title: Links - title: zKit link: https://zuixjs.github.io/zkit/content/components/m","n":0.106}}},{"i":1,"$":{"0":{"v":"Material Design components","n":0.577},"1":{"v":"Rendering Material Design components using zx short code","n":0.354},"2":{"v":"This web starter template includes [Material Design Lite](https://getmdl.io/components/) components, implemented using *zuix.js*, and that can be also rendered using `zx` short code tags. ## Material Design tags ### `button` Usage: {% raw %} ```liquid {% zx 'button' '' ['' ['']] %} {% endzx %} ``` {% endraw %} Where `''` can be one of the following: - `flat` - `raised` - `fab` and `''` can be one of the following values: - `colored` - `accent` - `primary` - `mini-fab` (can be added only if *type* is `fab`) #### Examples Basic button {% raw %} ```","n":0.103}}},{"i":2,"$":{"0":{"v":"Page options","n":0.707},"1":{"v":"Front matter data, layout and other page options.","n":0.354},"2":{"v":"In addition to the `zuix-web-starer` base [options](https://zuixjs.github.io/zuix-web-starter/content/page-editing-and-options/), the following options are available. ## Front matter data ### `layout` Available layouts: - **`landing_page`** a simple splash screen used for the main page (`./source/index.liquid`) and that redirects to the home page (`./source/home.liquid`). - **`side_drawer`** a page with a responsive *navigation drawer* layout, like the one used by this very page. ### `options` - **`mdl`** use [Material Design Light](https://getmdl.io/components/index.html) styles. - **`highlig","n":0.12}}}]}
diff --git a/docs/search-list.json b/docs/search-list.json
index 3d6f9ba..5806039 100644
--- a/docs/search-list.json
+++ b/docs/search-list.json
@@ -1 +1 @@
-[{"url":"/web-app/content/docs/page-options/","date":"2022-03-07T09:34:14.000Z","title":"Page options","description":"Front matter data, layout and other page options.","image":"https://picsum.photos/seed/docs=03/256/256","content":"In addition to the `zuix-web-starer` base [options](https://zuixjs.github.io/zuix-web-starter/content/page-editing-and-options/), the following options are available. ## Front matter data ### `layout` Available layouts: - **`landing_page`** a simple splash screen used for the main page (`./source/index.liquid`) and that redirects to the home page (`./source/home.liquid`). - **`side_drawer`** a page with a responsive *navigation drawer* layout, like the one used by this very page. ### `options` - **`mdl`** use [Material Design Light](https://getmdl.io/components/index.html) styles. - **`highlig"},{"url":"/web-app/content/docs/zkit-components-tags/","date":"2022-04-05T04:01:41.000Z","title":"Components short codes","description":"Rendering zKit and custom components using zx short code","image":"https://picsum.photos/seed/docs!zx-tags/256/256","content":"Using `zx`'s short code's tags it is possible to render components and fragments without writing any HTML or JavaScript code. ## Components tags ### `menu-overlay` This tag renders zKit's *Menu Overlay* component. It will show a floating menu button visible at the bottom of the page and that automatically shows/hides when the page is scrolled. The button can be positioned on the left, center or right using the `position` option. #### Example {% raw %} ```yaml {% zx 'menu-overlay' %} items: - title: Links - title: zKit link: https://zuixjs.github.io/zkit/content/components/m"},{"url":"/web-app/content/docs/material-design-tags/","title":"Material Design components","description":"Rendering Material Design components using zx short code","image":"https://picsum.photos/seed/docs=74/256/256","content":"This web starter template includes [Material Design Lite](https://getmdl.io/components/) components, implemented using *zuix.js*, and that can be also rendered using `zx` short code tags. ## Material Design tags ### `button` Usage: {% raw %} ```liquid {% zx 'button' '' ['' ['']] %} {% endzx %} ``` {% endraw %} Where `''` can be one of the following: - `flat` - `raised` - `fab` and `''` can be one of the following values: - `colored` - `accent` - `primary` - `mini-fab` (can be added only if *type* is `fab`) #### Examples Basic button {% raw %} ```"}]
\ No newline at end of file
+[{"url":"/web-app/content/docs/zkit-components-tags/","date":"2022-04-05T04:01:41.000Z","title":"Components short codes","description":"Rendering zKit and custom components using zx short code","image":"https://picsum.photos/seed/docs!zx-tags/256/256","content":"Using `zx`'s short code's tags it is possible to render components and fragments without writing any HTML or JavaScript code. ## Components tags ### `menu-overlay` This tag renders zKit's *Menu Overlay* component. It will show a floating menu button visible at the bottom of the page and that automatically shows/hides when the page is scrolled. The button can be positioned on the left, center or right using the `position` option. #### Example {% raw %} ```yaml {% zx 'menu-overlay' %} items: - title: Links - title: zKit link: https://zuixjs.github.io/zkit/content/components/m"},{"url":"/web-app/content/docs/material-design-tags/","title":"Material Design components","description":"Rendering Material Design components using zx short code","image":"https://picsum.photos/seed/docs=74/256/256","content":"This web starter template includes [Material Design Lite](https://getmdl.io/components/) components, implemented using *zuix.js*, and that can be also rendered using `zx` short code tags. ## Material Design tags ### `button` Usage: {% raw %} ```liquid {% zx 'button' '' ['' ['']] %} {% endzx %} ``` {% endraw %} Where `''` can be one of the following: - `flat` - `raised` - `fab` and `''` can be one of the following values: - `colored` - `accent` - `primary` - `mini-fab` (can be added only if *type* is `fab`) #### Examples Basic button {% raw %} ```"},{"url":"/web-app/content/docs/page-options/","date":"2022-03-07T09:34:14.000Z","title":"Page options","description":"Front matter data, layout and other page options.","image":"https://picsum.photos/seed/docs=03/256/256","content":"In addition to the `zuix-web-starer` base [options](https://zuixjs.github.io/zuix-web-starter/content/page-editing-and-options/), the following options are available. ## Front matter data ### `layout` Available layouts: - **`landing_page`** a simple splash screen used for the main page (`./source/index.liquid`) and that redirects to the home page (`./source/home.liquid`). - **`side_drawer`** a page with a responsive *navigation drawer* layout, like the one used by this very page. ### `options` - **`mdl`** use [Material Design Light](https://getmdl.io/components/index.html) styles. - **`highlig"}]
\ No newline at end of file
diff --git a/docs/search/index.bundle.ext.js b/docs/search/index.bundle.ext.js
index 251990f..a968040 100644
--- a/docs/search/index.bundle.ext.js
+++ b/docs/search/index.bundle.ext.js
@@ -1 +1 @@
-!function(){"use strict";function s(s,t){var e,i;s&&(t.element_.classList.contains(t.CssClasses_.MDL_JS_RIPPLE_EFFECT)&&((e=document.createElement("span")).classList.add(t.CssClasses_.MDL_RIPPLE_CONTAINER),e.classList.add(t.CssClasses_.MDL_JS_RIPPLE_EFFECT),(i=document.createElement("span")).classList.add(t.CssClasses_.MDL_RIPPLE),e.appendChild(i),s.appendChild(e)),s.addEventListener("click",function(e){"#"===s.getAttribute("href").charAt(0)&&(e.preventDefault(),e=s.href.split("#")[1],e=t.element_.querySelector("#"+e),t.resetTabState_(),t.resetPanelState_(),s.classList.add(t.CssClasses_.ACTIVE_CLASS),e.classList.add(t.CssClasses_.ACTIVE_CLASS))}))}function c(s,t,i,n){function a(){var e=s.href.split("#")[1],e=n.content_.querySelector("#"+e);n.resetTabState_(t),n.resetPanelState_(i),s.classList.add(n.CssClasses_.IS_ACTIVE),e.classList.add(n.CssClasses_.IS_ACTIVE)}var e,l;n.tabBar_.classList.contains(n.CssClasses_.JS_RIPPLE_EFFECT)&&((e=document.createElement("span")).classList.add(n.CssClasses_.RIPPLE_CONTAINER),e.classList.add(n.CssClasses_.JS_RIPPLE_EFFECT),(l=document.createElement("span")).classList.add(n.CssClasses_.RIPPLE),e.appendChild(l),s.appendChild(e)),n.tabBar_.classList.contains(n.CssClasses_.TAB_MANUAL_SWITCH)||s.addEventListener("click",function(e){"#"===s.getAttribute("href").charAt(0)&&(e.preventDefault(),a())}),s.show=a}var p,C,u,n={upgradeDom:function(e,s){},upgradeElement:function(e,s){},upgradeElements:function(e){},upgradeAllRegistered:function(){},registerUpgradedCallback:function(e,s){},register:function(e){},downgradeElements:function(e){}};function E(e,s){for(var t=0;tt+1?s[t+1]:s[0]).focus()):e.keyCode===this.Keycodes_.SPACE||e.keyCode===this.Keycodes_.ENTER?(e.preventDefault(),t=new MouseEvent("mousedown"),e.target.dispatchEvent(t),t=new MouseEvent("mouseup"),e.target.dispatchEvent(t),e.target.click()):e.keyCode===this.Keycodes_.ESCAPE&&(e.preventDefault(),this.hide())))},f.prototype.handleItemClick_=function(e){e.target.hasAttribute("disabled")?e.stopPropagation():(this.closing_=!0,window.setTimeout(function(e){this.hide(),this.closing_=!1}.bind(this),this.Constant_.CLOSE_TIMEOUT))},f.prototype.applyClip_=function(e,s){this.element_.classList.contains(this.CssClasses_.UNALIGNED)?this.element_.style.clip="":this.element_.classList.contains(this.CssClasses_.BOTTOM_RIGHT)?this.element_.style.clip="rect(0 "+s+"px 0 "+s+"px)":this.element_.classList.contains(this.CssClasses_.TOP_LEFT)?this.element_.style.clip="rect("+e+"px 0 "+e+"px 0)":this.element_.classList.contains(this.CssClasses_.TOP_RIGHT)?this.element_.style.clip="rect("+e+"px "+s+"px "+e+"px "+s+"px)":this.element_.style.clip=""},f.prototype.removeAnimationEndListener_=function(e){e.target.classList.remove(f.prototype.CssClasses_.IS_ANIMATING)},f.prototype.addAnimationEndListener_=function(){this.element_.addEventListener("transitionend",this.removeAnimationEndListener_),this.element_.addEventListener("webkitTransitionEnd",this.removeAnimationEndListener_)},f.prototype.show=function(s){if(this.element_&&this.container_&&this.outline_){var e=this.element_.getBoundingClientRect().height,t=this.element_.getBoundingClientRect().width;this.container_.style.width=t+"px",this.container_.style.height=e+"px",this.outline_.style.width=t+"px",this.outline_.style.height=e+"px";for(var i=this.Constant_.TRANSITION_DURATION_SECONDS*this.Constant_.TRANSITION_DURATION_FRACTION,n=this.element_.querySelectorAll("."+this.CssClasses_.ITEM),a=0;a=this.maxRows&&e.preventDefault()},N.prototype.onFocus_=function(e){this.element_.classList.add(this.CssClasses_.IS_FOCUSED)},N.prototype.onBlur_=function(e){this.element_.classList.remove(this.CssClasses_.IS_FOCUSED)},N.prototype.onReset_=function(e){this.updateClasses_()},N.prototype.updateClasses_=function(){this.checkDisabled(),this.checkValidity(),this.checkDirty(),this.checkFocus()},N.prototype.checkDisabled=function(){this.input_.disabled?this.element_.classList.add(this.CssClasses_.IS_DISABLED):this.element_.classList.remove(this.CssClasses_.IS_DISABLED)},N.prototype.checkFocus=function(){Boolean(this.element_.querySelector(":focus"))?this.element_.classList.add(this.CssClasses_.IS_FOCUSED):this.element_.classList.remove(this.CssClasses_.IS_FOCUSED)},N.prototype.checkValidity=function(){this.input_.validity&&(this.input_.validity.valid?this.element_.classList.remove(this.CssClasses_.IS_INVALID):this.element_.classList.add(this.CssClasses_.IS_INVALID))},N.prototype.checkDirty=function(){this.input_.value&&0{navigator.serviceWorker.register("/web-app/service-worker.js")});
\ No newline at end of file
+!function(){"use strict";function s(s,t){var e,i;s&&(t.element_.classList.contains(t.CssClasses_.MDL_JS_RIPPLE_EFFECT)&&((e=document.createElement("span")).classList.add(t.CssClasses_.MDL_RIPPLE_CONTAINER),e.classList.add(t.CssClasses_.MDL_JS_RIPPLE_EFFECT),(i=document.createElement("span")).classList.add(t.CssClasses_.MDL_RIPPLE),e.appendChild(i),s.appendChild(e)),s.addEventListener("click",function(e){"#"===s.getAttribute("href").charAt(0)&&(e.preventDefault(),e=s.href.split("#")[1],e=t.element_.querySelector("#"+e),t.resetTabState_(),t.resetPanelState_(),s.classList.add(t.CssClasses_.ACTIVE_CLASS),e.classList.add(t.CssClasses_.ACTIVE_CLASS))}))}function c(s,t,i,n){function a(){var e=s.href.split("#")[1],e=n.content_.querySelector("#"+e);n.resetTabState_(t),n.resetPanelState_(i),s.classList.add(n.CssClasses_.IS_ACTIVE),e.classList.add(n.CssClasses_.IS_ACTIVE)}var e,l;n.tabBar_.classList.contains(n.CssClasses_.JS_RIPPLE_EFFECT)&&((e=document.createElement("span")).classList.add(n.CssClasses_.RIPPLE_CONTAINER),e.classList.add(n.CssClasses_.JS_RIPPLE_EFFECT),(l=document.createElement("span")).classList.add(n.CssClasses_.RIPPLE),e.appendChild(l),s.appendChild(e)),n.tabBar_.classList.contains(n.CssClasses_.TAB_MANUAL_SWITCH)||s.addEventListener("click",function(e){"#"===s.getAttribute("href").charAt(0)&&(e.preventDefault(),a())}),s.show=a}var p,C,u,n={upgradeDom:function(e,s){},upgradeElement:function(e,s){},upgradeElements:function(e){},upgradeAllRegistered:function(){},registerUpgradedCallback:function(e,s){},register:function(e){},downgradeElements:function(e){}};function E(e,s){for(var t=0;tt+1?s[t+1]:s[0]).focus()):e.keyCode===this.Keycodes_.SPACE||e.keyCode===this.Keycodes_.ENTER?(e.preventDefault(),t=new MouseEvent("mousedown"),e.target.dispatchEvent(t),t=new MouseEvent("mouseup"),e.target.dispatchEvent(t),e.target.click()):e.keyCode===this.Keycodes_.ESCAPE&&(e.preventDefault(),this.hide())))},f.prototype.handleItemClick_=function(e){e.target.hasAttribute("disabled")?e.stopPropagation():(this.closing_=!0,window.setTimeout(function(e){this.hide(),this.closing_=!1}.bind(this),this.Constant_.CLOSE_TIMEOUT))},f.prototype.applyClip_=function(e,s){this.element_.classList.contains(this.CssClasses_.UNALIGNED)?this.element_.style.clip="":this.element_.classList.contains(this.CssClasses_.BOTTOM_RIGHT)?this.element_.style.clip="rect(0 "+s+"px 0 "+s+"px)":this.element_.classList.contains(this.CssClasses_.TOP_LEFT)?this.element_.style.clip="rect("+e+"px 0 "+e+"px 0)":this.element_.classList.contains(this.CssClasses_.TOP_RIGHT)?this.element_.style.clip="rect("+e+"px "+s+"px "+e+"px "+s+"px)":this.element_.style.clip=""},f.prototype.removeAnimationEndListener_=function(e){e.target.classList.remove(f.prototype.CssClasses_.IS_ANIMATING)},f.prototype.addAnimationEndListener_=function(){this.element_.addEventListener("transitionend",this.removeAnimationEndListener_),this.element_.addEventListener("webkitTransitionEnd",this.removeAnimationEndListener_)},f.prototype.show=function(s){if(this.element_&&this.container_&&this.outline_){var e=this.element_.getBoundingClientRect().height,t=this.element_.getBoundingClientRect().width;this.container_.style.width=t+"px",this.container_.style.height=e+"px",this.outline_.style.width=t+"px",this.outline_.style.height=e+"px";for(var i=this.Constant_.TRANSITION_DURATION_SECONDS*this.Constant_.TRANSITION_DURATION_FRACTION,n=this.element_.querySelectorAll("."+this.CssClasses_.ITEM),a=0;a=this.maxRows&&e.preventDefault()},N.prototype.onFocus_=function(e){this.element_.classList.add(this.CssClasses_.IS_FOCUSED)},N.prototype.onBlur_=function(e){this.element_.classList.remove(this.CssClasses_.IS_FOCUSED)},N.prototype.onReset_=function(e){this.updateClasses_()},N.prototype.updateClasses_=function(){this.checkDisabled(),this.checkValidity(),this.checkDirty(),this.checkFocus()},N.prototype.checkDisabled=function(){this.input_.disabled?this.element_.classList.add(this.CssClasses_.IS_DISABLED):this.element_.classList.remove(this.CssClasses_.IS_DISABLED)},N.prototype.checkFocus=function(){Boolean(this.element_.querySelector(":focus"))?this.element_.classList.add(this.CssClasses_.IS_FOCUSED):this.element_.classList.remove(this.CssClasses_.IS_FOCUSED)},N.prototype.checkValidity=function(){this.input_.validity&&(this.input_.validity.valid?this.element_.classList.remove(this.CssClasses_.IS_INVALID):this.element_.classList.add(this.CssClasses_.IS_INVALID))},N.prototype.checkDirty=function(){this.input_.value&&0{navigator.serviceWorker.register("/web-app/service-worker.js")});
\ No newline at end of file
diff --git a/docs/search/index.bundle.js b/docs/search/index.bundle.js
index a17bef6..8e4d913 100644
--- a/docs/search/index.bundle.js
+++ b/docs/search/index.bundle.js
@@ -1 +1,45 @@
-zuix.setComponentCache([{componentId:"/web-app/lib/1.1/controllers/header-auto-hide",controller:function(){"use strict";let e={};return e.exports=function(o){let i,t,s,r,l,a=0,c;function p(){null!=i&&i.hasClass("header-collapse")&&i.removeClass("header-collapse").addClass("header-expand"),null!=t&&t.hasClass("footer-collapse")&&t.removeClass("footer-collapse").addClass("footer-expand"),c&&c.check()}function u(){i.hasClass("header-collapse")||i.removeClass("header-expand").addClass("header-collapse"),null==t||t.hasClass("footer-collapse")||t.removeClass("footer-expand").addClass("footer-collapse")}o.init=function(){o.options().css=!1,o.options().html=!1},o.create=function(){if(s=o.options().showEnd||"true"===o.view().attr("data-o-show-end"),!(i=o.options().header||o.view().attr("data-o-header")))throw new Error("Header element not specified.");if(0===(i=zuix.field(i)).length())throw new Error('Header element not found: "'+i+'".');r=i.position().rect.height;var e=getComputedStyle(i.get()).position;"fixed"!==e&&"absolute"!==e&&(a=r);const n=o.view();zuix.$.appendCss("\n/* Header bar shrink/expand */\n@keyframes header-collapse-anim {\n from { top: 0; }\n to { top: -"+r+"px; }\n}\n@keyframes header-expand-anim {\n from { top: -"+r+"px; }\n to { top: 0; }\n}\n.header-collapse {\n animation-fill-mode: forwards;\n animation-name: header-collapse-anim;\n animation-duration: 0.5s;\n top: -"+r+"px;\n}\n.header-expand {\n animation-fill-mode: forwards;\n animation-name: header-expand-anim;\n animation-duration: 0.5s;\n top: 0px;\n}\n",null,"onscroll_header_hide_show");e=o.options().footer||o.view().attr("data-o-footer");null!=e&&((t=zuix.field(e)).css({position:"fixed",zIndex:1}),l=t.position().rect.height,zuix.$.appendCss("\n/* Footer bar shrink/expand */\n@keyframes footer-collapse-anim {\n from { bottom: 0; }\n to { bottom: -"+l+"px; }\n}\n@keyframes footer-expand-anim {\n from { bottom: -"+l+"px; }\n to { bottom: 0; }\n}\n.footer-collapse {\n animation-fill-mode: forwards;\n animation-name: footer-collapse-anim;\n animation-duration: 0.5s;\n bottom: -"+l+"px;\n}\n.footer-expand {\n animation-fill-mode: forwards;\n animation-name: footer-expand-anim;\n animation-duration: 0.5s;\n bottom: 0;\n}\n",null,"zkit_onscroll_hide_show")),zuix.load("@lib/controllers/scroll-helper",{view:n,on:{"scroll:change":function(e,t){"scroll"===t.event&&t.info.viewport.y<-a?t.info.shift.y<-4?(0=o&&(n.apply(e,t),s=Date.now())},o-(Date.now()-s))):(n.apply(e,t),s=Date.now())}}return e.exports=function(){const s={timestamp:0,size:{width:0,height:0},viewport:{x:0,y:0,width:0,height:0}};let t,n,i,r=0,l;const a=this;function c(){null!=t&&clearTimeout(t);var e=(new Date).getTime();if(100=t&&e(d.page.current+1)*u-1?h[i].style.display="none":h[i].style.display=""),(p===a||p===c)&&e>t+u)break}f(),zuix.componentize(r.view())}}}},{componentId:"/web-app/lib/1.1/controllers/drawer-layout",controller:function(){"use strict";let e={};return e.exports=function(){let o=!0,i=!1,t=!1,s=!1,r=!0,l=null,a=null,c=null,p=280,n=960,u=!1,d=0;const h=this;function f(){a.visibility("initial").css("left",0).get().focus(),t&&(a.find("a").one("click",function(){m()}),l.css("opacity","initial"),l.show()),o||(o=!0,h.trigger("drawer:open",{smallScreen:t}))}function m(){var e;t&&(e=function(){o||a.visibility("hidden")},a.one("transitionend transitioncancel",function(){e()}),a.css("left",-p+"px"),l.hide(),o&&(o=!1,h.trigger("drawer:close",{smallScreen:t}))),o=!1,a.find("a").off("click")}function e(){return o}function g(){(window.innerWidth||document.body.clientWidth)m+100&&l.stepTimep?(f=!0,a=!1,t.get().draggable=!1,x(e,e.x,e.y)):a=!0},passive:c}).on("mousemove",{handler:function(e){!a&&f&&t(e,e.x,e.y)},passive:c}).on("mouseup",function(e){1!==e.which||a||(f=!1,w(e))}).on("touchstart",{handler:function(e){const t=zuix.$(e.target);!(a=-1===document.elementsFromPoint(e.touches[0].clientX,e.touches[0].clientY).indexOf(g.view().get()))&&0===t.parent('[class*="no-gesture"]').length()&&e.touches[0].clientX>p?(a=!1,t.get().draggable=!1,x(e,e.touches[0].clientX,e.touches[0].clientY)):a=!0},passive:c}).on("touchmove",{handler:function(e){a||t(e,e.touches[0].clientX,e.touches[0].clientY)},passive:c}).on("touchend",function(e){a||w(e)})}},e.exports}()}]);
\ No newline at end of file
+zuix.setComponentCache([{componentId:"https://zuixjs.github.io/zkit/lib/1.2/controllers/header-auto-hide",controller:function(){"use strict";let e={};return e.exports=function(r){let l,t,a,c,u,p=0,d;function h(){null!=l&&l.hasClass("header-collapse")&&l.removeClass("header-collapse").addClass("header-expand"),null!=t&&t.hasClass("footer-collapse")&&t.removeClass("footer-collapse").addClass("footer-expand"),d&&d.check()}function f(){l.hasClass("header-collapse")||l.removeClass("header-expand").addClass("header-collapse"),null==t||t.hasClass("footer-collapse")||t.removeClass("footer-expand").addClass("footer-collapse")}r.init=function(){r.options().css=!1,r.options().html=!1},r.create=function(){a=r.options().showEnd,l=r.options().header;const n=r.options().zIndex||10;if(!l)throw new Error("Header element not specified.");if(0===(l=zuix.field(l)).length())throw new Error('Header element not found: "'+l+'".');const o=getComputedStyle(l.get());zuix.$.appendCss(`
+/* Header bar shrink/expand */
+@keyframes header-collapse-anim {
+ from { top: 0; }
+ to { top: var(--header-height); }
+}
+@keyframes header-expand-anim {
+ from { top: var(--header-height); }
+ to { top: 0; }
+}
+.header-collapse {
+ animation-fill-mode: forwards;
+ animation-name: header-collapse-anim;
+ animation-duration: 0.5s;
+ top: var(--header-height);
+}
+.header-expand {
+ animation-fill-mode: forwards;
+ animation-name: header-expand-anim;
+ animation-duration: 0.5s;
+ top: 0px;
+}
+`,null,"zkit_header_auto_hide");var e=r.options().footer;let i=null;null!=e&&((t=zuix.field(e)).css({position:"fixed",zIndex:n}),i=getComputedStyle(t.get()),zuix.$.appendCss(`
+/* Footer bar shrink/expand */
+@keyframes footer-collapse-anim {
+ from { bottom: 0; }
+ to { bottom: var(--footer-height); }
+}
+@keyframes footer-expand-anim {
+ from { bottom: var(--footer-height); }
+ to { bottom: 0; }
+}
+.footer-collapse {
+ animation-fill-mode: forwards;
+ animation-name: footer-collapse-anim;
+ animation-duration: 0.5s;
+ bottom: var(--footer-height);
+}
+.footer-expand {
+ animation-fill-mode: forwards;
+ animation-name: footer-expand-anim;
+ animation-duration: 0.5s;
+ bottom: 0;
+}
+`,null,"zkit_header_auto_hide"));const s=r.options().scrollHost||r.view();zuix.load("@lib/controllers/scroll-helper",{view:s,on:{"scroll:change":function(e,t){c=parseFloat(o.height),"fixed"!==o.position&&"absolute"!==o.position&&(p=c),document.documentElement.style.setProperty("--header-height",-c+"px"),i&&(u=parseFloat(i.height),document.documentElement.style.setProperty("--footer-height",-u+"px")),"scroll"===t.event&&t.info.viewport.y<-p?t.info.shift.y<-4?(0=o&&(n.apply(e,t),s=Date.now())},o-(Date.now()-s))):(n.apply(e,t),s=Date.now())}}return e.exports=function(){const s={timestamp:0,size:{width:0,height:0},viewport:{x:0,y:0,width:0,height:0}};let t,n,i,r=0,l;const a=this;function c(){null!=t&&clearTimeout(t);var e=(new Date).getTime();if(100=t&&e{t.one({"component:ready":()=>{d.items.loaded++,(d.items.current=e)===n.length-1?r.trigger("list:end"):e+1===(d.page.current+1)*p&&u===c&&g(d.page.current+1),r.trigger("list:update",d)}})})(e,s),zuix.loadComponent(s,o.componentId,o.type,o.options),f[e]=s,r.view().insert(t+e,f[e])}if(void 0!==f[e]&&(u===a&&e(d.page.current+1)*p-1?f[e].hide():f[e].show()),(u===a||u===c)&&e>t+p)break}r.trigger("list:ready"),zuix.componentize(r.view())}else x()}function g(e){if(!isNaN(e)&&0<=e&&e{o(),r.trigger("page:change",d)})}function x(e){r.trigger("list:busy"),setTimeout(()=>{f.forEach(e=>zuix.unload(e)),f.length=0,e&&e(),r.trigger("list:ready")}),d.page.current=0,d.page.count=0,d.items.loaded=0,d.items.count=0,r.view().html("")}r.create=()=>{r.expose({config:e,page:g,prev:()=>g(d.page.current-1),next:()=>g(d.page.current+1),more:()=>{d.page.current++,o()},clear:x}),r.options().itemsPerPage=r.options().itemsPerPage||p,r.options().listMode=r.options().listMode||u,e(r.options())},r.update=()=>o(),r.destroy=()=>x()},e.exports}()},{componentId:"https://zuixjs.github.io/zkit/lib/1.2/controllers/drawer-layout",controller:function(){"use strict";let e={};return e.exports=function(){let o=!0,i=!1,t=!1,s=!1,r=!0,l=null,a=null,c=null,u=280,e=960,p=!1,d=0;const h=this;function f(){a.visibility("initial").css("left",0).get().focus(),t&&(a.find("a").one("click",function(){g()}),l.css("opacity","initial"),l.show()),o||(o=!0,h.trigger("drawer:open",{smallScreen:t}))}function g(){var e;t&&(e=function(){o||a.visibility("hidden")},a.one("transitionend transitioncancel",function(){e()}),a.css("left",-u+"px"),l.hide(),o&&(o=!1,h.trigger("drawer:close",{smallScreen:t}))),o=!1,a.find("a").off("click")}function m(){return o}function x(){(window.innerWidth||document.body.clientWidth)g+100&&l.stepTimeu?(f=!0,a=!1,t.get().draggable=!1,x(e,e.x,e.y)):a=!0},passive:c}).on("mousemove",{handler:function(e){!a&&f&&t(e,e.x,e.y)},passive:c}).on("mouseup",function(e){1!==e.which||a||(f=!1,w(e))}).on("touchstart",{handler:function(e){const t=zuix.$(e.target);!(a=-1===document.elementsFromPoint(e.touches[0].clientX,e.touches[0].clientY).indexOf(m.view().get()))&&0===t.parent('[class*="no-gesture"]').length()&&e.touches[0].clientX>u?(a=!1,t.get().draggable=!1,x(e,e.touches[0].clientX,e.touches[0].clientY)):a=!0},passive:c}).on("touchmove",{handler:function(e){a||t(e,e.touches[0].clientX,e.touches[0].clientY)},passive:c}).on("touchend",function(e){a||w(e)})}},e.exports}()}]);
\ No newline at end of file
diff --git a/docs/search/index.html b/docs/search/index.html
index 9ffe22e..966cd4f 100644
--- a/docs/search/index.html
+++ b/docs/search/index.html
@@ -731,7 +731,7 @@
}
.theme-dark [z-load*="/components/menu-overlay"] div[z-field="menu_overlay"] {
background: radial-gradient(circle at bottom, black, #000000dd, #00000077, transparent)!important;
-}
diff --git a/source/app/cms/zuix-editor/dialogs/create-component.js b/source/app/cms/zuix-editor/dialogs/create-component.js
index 9bfc9f3..bd5b4e8 100644
--- a/source/app/cms/zuix-editor/dialogs/create-component.js
+++ b/source/app/cms/zuix-editor/dialogs/create-component.js
@@ -65,7 +65,7 @@ function createComponentDialog(cp) {
function createComponent() {
const view = cp.field('type-view').checked();
const ctrl = cp.field('type-ctrl').checked();
- const name = zuix.utils.camelCaseToHyphens(cp.field('component-name').value().replace(/[^a-z0-9/\s]/gi, '_'));
+ const name = cp.field('component-name').value();
let result;
if (_browserSync) {
result = _browserSync.socket.emit('zuix:addComponent', {
diff --git a/source/content/docs/page-options/index.md b/source/content/docs/page-options/index.md
index 1e4082c..32a590e 100644
--- a/source/content/docs/page-options/index.md
+++ b/source/content/docs/page-options/index.md
@@ -86,12 +86,12 @@ Template engine folders:
./source/_data # data folder
./source/_filters # filters
./source/_inc # includes and layouts
+./templates/tags/ # user-defined components liquid tags
```
*zuix.js* components folders:
```
./source/app # user-defined components
-./source/lib # copy of zKit components
```
Global asset files and folders:
diff --git a/source/lib/1.1/components/context-menu.css b/source/lib/1.1/components/context-menu.css
deleted file mode 100644
index a52e592..0000000
--- a/source/lib/1.1/components/context-menu.css
+++ /dev/null
@@ -1,50 +0,0 @@
-.container {
- position: fixed;
- bottom:0;
- left:0;
- right: 0;
- top: 0;
- -ms-touch-action: none;
- touch-action: none;
- background: rgba(0,0,0,0.5);
- z-index: 200;
- transition: opacity 0.2s ease-in;
-}
-.menu {
- outline: none !important;
- margin-left: auto;
- margin-right: auto;
- left: 50%;
- transform: translateX(-50%);
- position: absolute;
- width: 100%;
- max-width: 420px;
- background: white;
- border: solid 1px rgba(0,0,0,0.1);
- border-radius: 16px 16px 0 0;
- box-shadow: 0 -5px 5px -5px #333;
- transition: bottom 0.3s ease-in-out;
-}
-button {
- width: 100%;
- height:48px;
- padding: 16px;
- background: none!important;
- border: none;
-}
-button span {
- font-family: sans-serif, Helvetica;
- font-size: 120%;
- margin-left: 24px;
-}
-button i {
- color: dimgray;
- font-size: 24px;
- margin-left: 8px;
-}
-button:hover {
- background: rgba(0,0,0,0.1);
-}
-.no-transition {
- transition: none;
-}
diff --git a/source/lib/1.1/components/context-menu.html b/source/lib/1.1/components/context-menu.html
deleted file mode 100644
index 4382f8a..0000000
--- a/source/lib/1.1/components/context-menu.html
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
-
diff --git a/source/lib/1.1/components/context-menu.js b/source/lib/1.1/components/context-menu.js
deleted file mode 100644
index 8507b58..0000000
--- a/source/lib/1.1/components/context-menu.js
+++ /dev/null
@@ -1,82 +0,0 @@
-'use strict';
-
-/**
- * MenuOverlay class.
- *
- * @author Gene
- * @version 1.0.0 (2018-04-20)
- *
- * @constructor
- * @this {ContextController}
- */
-function ContextMenu() {
- let menuOpenTimeout;
- let menu;
- let container;
- let view;
- const cp = this;
-
- cp.create = function() {
- menu = cp.field('menu');
- menu.css('bottom', -(menu.position().rect.height)+'px');
- view = cp.view();
- container = view.hide().find('.container').css('opacity', 0)
- .on('click', function() {
- hideMenu();
- })
- .on('keydown', function(evt) {
- evt = evt || window.event;
- if (evt.keyCode === 27) {
- hideMenu();
- }
- });
- zuix.load('@lib/controllers/gesture-helper', {
- view: view,
- on: {
- 'gesture:pan': function(e, tp) {
- if (!menu.hasClass('no-transition')) {
- menu.addClass('no-transition');
- }
- if (tp.shiftY > 0) {
- menu.css('bottom', -tp.shiftY + 'px');
- }
- },
- 'gesture:release': function(e, tp) {
- menu.removeClass('no-transition');
- if (tp.velocity <= 0 && tp.direction === 'up') {
- menu.css('bottom', 0);
- } else if (tp.direction === 'down') {
- hideMenu();
- }
- }
- }
- });
- cp.expose('show', showMenu);
- cp.expose('hide', hideMenu);
- };
-
- function showMenu() {
- view.show();
- // animation will not work without this delay =/
- clearTimeout(menuOpenTimeout);
- menuOpenTimeout = setTimeout(function() {
- container.css('opacity', 1);
- menu.css('bottom', 0)
- .get().focus();
- cp.trigger('open');
- }, 10);
- }
-
- function hideMenu() {
- menu.one('transitionend', function() {
- container.one('transitionend', function() {
- view.hide();
- cp.trigger('close');
- });
- });
- container.css('opacity', 0);
- menu.css('bottom', -(menu.position().rect.height)+'px');
- }
-}
-
-module.exports = ContextMenu;
diff --git a/source/lib/1.1/components/hamburger-icon.css b/source/lib/1.1/components/hamburger-icon.css
deleted file mode 100644
index 37a2880..0000000
--- a/source/lib/1.1/components/hamburger-icon.css
+++ /dev/null
@@ -1,704 +0,0 @@
-. {
- position: relative;
-}
-
-/*!
- * Hamburgers
- * @description Tasty CSS-animated hamburgers
- * @author Jonathan Suh @jonsuh
- * @site https://jonsuh.com/hamburgers
- * @link https://github.com/jonsuh/hamburgers
- */
-.hamburger {
- padding: 15px 15px;
- display: inline-block;
- cursor: pointer;
- transition-property: opacity, filter;
- transition-duration: 0.15s;
- transition-timing-function: linear;
- font: inherit;
- color: inherit;
- text-transform: none;
- background-color: transparent;
- border: 0;
- margin: 0;
- overflow: visible; }
-.hamburger:hover {
- opacity: 0.7; }
-
-.hamburger-box {
- width: 40px;
- height: 24px;
- display: inline-block;
- position: relative; }
-
-.hamburger-inner {
- display: block;
- top: 50%;
- margin-top: -2px; }
-.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
- width: 40px;
- height: 4px;
- background-color: #000;
- border-radius: 4px;
- position: absolute;
- transition-property: transform;
- transition-duration: 0.15s;
- transition-timing-function: ease; }
-.hamburger-inner::before, .hamburger-inner::after {
- content: "";
- display: block; }
-.hamburger-inner::before {
- top: -10px; }
-.hamburger-inner::after {
- bottom: -10px; }
-
-/*
- * 3DX
- */
-.hamburger--3dx .hamburger-box {
- perspective: 80px; }
-
-.hamburger--3dx .hamburger-inner {
- transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
-.hamburger--3dx .hamburger-inner::before, .hamburger--3dx .hamburger-inner::after {
- transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
-
-.hamburger--3dx.is-active .hamburger-inner {
- background-color: transparent;
- transform: rotateY(180deg); }
-.hamburger--3dx.is-active .hamburger-inner::before {
- transform: translate3d(0, 10px, 0) rotate(45deg); }
-.hamburger--3dx.is-active .hamburger-inner::after {
- transform: translate3d(0, -10px, 0) rotate(-45deg); }
-
-/*
- * 3DX Reverse
- */
-.hamburger--3dx-r .hamburger-box {
- perspective: 80px; }
-
-.hamburger--3dx-r .hamburger-inner {
- transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
-.hamburger--3dx-r .hamburger-inner::before, .hamburger--3dx-r .hamburger-inner::after {
- transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
-
-.hamburger--3dx-r.is-active .hamburger-inner {
- background-color: transparent;
- transform: rotateY(-180deg); }
-.hamburger--3dx-r.is-active .hamburger-inner::before {
- transform: translate3d(0, 10px, 0) rotate(45deg); }
-.hamburger--3dx-r.is-active .hamburger-inner::after {
- transform: translate3d(0, -10px, 0) rotate(-45deg); }
-
-/*
- * 3DY
- */
-.hamburger--3dy .hamburger-box {
- perspective: 80px; }
-
-.hamburger--3dy .hamburger-inner {
- transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
-.hamburger--3dy .hamburger-inner::before, .hamburger--3dy .hamburger-inner::after {
- transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
-
-.hamburger--3dy.is-active .hamburger-inner {
- background-color: transparent;
- transform: rotateX(-180deg); }
-.hamburger--3dy.is-active .hamburger-inner::before {
- transform: translate3d(0, 10px, 0) rotate(45deg); }
-.hamburger--3dy.is-active .hamburger-inner::after {
- transform: translate3d(0, -10px, 0) rotate(-45deg); }
-
-/*
- * 3DY Reverse
- */
-.hamburger--3dy-r .hamburger-box {
- perspective: 80px; }
-
-.hamburger--3dy-r .hamburger-inner {
- transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
-.hamburger--3dy-r .hamburger-inner::before, .hamburger--3dy-r .hamburger-inner::after {
- transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
-
-.hamburger--3dy-r.is-active .hamburger-inner {
- background-color: transparent;
- transform: rotateX(180deg); }
-.hamburger--3dy-r.is-active .hamburger-inner::before {
- transform: translate3d(0, 10px, 0) rotate(45deg); }
-.hamburger--3dy-r.is-active .hamburger-inner::after {
- transform: translate3d(0, -10px, 0) rotate(-45deg); }
-
-/*
- * 3DXY
- */
-.hamburger--3dxy .hamburger-box {
- perspective: 80px; }
-
-.hamburger--3dxy .hamburger-inner {
- transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
-.hamburger--3dxy .hamburger-inner::before, .hamburger--3dxy .hamburger-inner::after {
- transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
-
-.hamburger--3dxy.is-active .hamburger-inner {
- background-color: transparent;
- transform: rotateX(180deg) rotateY(180deg); }
-.hamburger--3dxy.is-active .hamburger-inner::before {
- transform: translate3d(0, 10px, 0) rotate(45deg); }
-.hamburger--3dxy.is-active .hamburger-inner::after {
- transform: translate3d(0, -10px, 0) rotate(-45deg); }
-
-/*
- * 3DXY Reverse
- */
-.hamburger--3dxy-r .hamburger-box {
- perspective: 80px; }
-
-.hamburger--3dxy-r .hamburger-inner {
- transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
-.hamburger--3dxy-r .hamburger-inner::before, .hamburger--3dxy-r .hamburger-inner::after {
- transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
-
-.hamburger--3dxy-r.is-active .hamburger-inner {
- background-color: transparent;
- transform: rotateX(180deg) rotateY(180deg) rotateZ(-180deg); }
-.hamburger--3dxy-r.is-active .hamburger-inner::before {
- transform: translate3d(0, 10px, 0) rotate(45deg); }
-.hamburger--3dxy-r.is-active .hamburger-inner::after {
- transform: translate3d(0, -10px, 0) rotate(-45deg); }
-
-/*
- * Arrow
- */
-.hamburger--arrow.is-active .hamburger-inner::before {
- transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1); }
-
-.hamburger--arrow.is-active .hamburger-inner::after {
- transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1); }
-
-/*
- * Arrow Right
- */
-.hamburger--arrow-r.is-active .hamburger-inner::before {
- transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1); }
-
-.hamburger--arrow-r.is-active .hamburger-inner::after {
- transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1); }
-
-/*
- * Arrow Alt
- */
-.hamburger--arrowalt .hamburger-inner::before {
- transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); }
-
-.hamburger--arrowalt .hamburger-inner::after {
- transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); }
-
-.hamburger--arrowalt.is-active .hamburger-inner::before {
- top: 0;
- transform: translate3d(-8px, -10px, 0) rotate(-45deg) scale(0.7, 1);
- transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); }
-
-.hamburger--arrowalt.is-active .hamburger-inner::after {
- bottom: 0;
- transform: translate3d(-8px, 10px, 0) rotate(45deg) scale(0.7, 1);
- transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); }
-
-/*
- * Arrow Alt Right
- */
-.hamburger--arrowalt-r .hamburger-inner::before {
- transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); }
-
-.hamburger--arrowalt-r .hamburger-inner::after {
- transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); }
-
-.hamburger--arrowalt-r.is-active .hamburger-inner::before {
- top: 0;
- transform: translate3d(8px, -10px, 0) rotate(45deg) scale(0.7, 1);
- transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); }
-
-.hamburger--arrowalt-r.is-active .hamburger-inner::after {
- bottom: 0;
- transform: translate3d(8px, 10px, 0) rotate(-45deg) scale(0.7, 1);
- transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); }
-
-/*
- * Arrow Turn
- */
-.hamburger--arrowturn.is-active .hamburger-inner {
- transform: rotate(-180deg); }
-.hamburger--arrowturn.is-active .hamburger-inner::before {
- transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1); }
-.hamburger--arrowturn.is-active .hamburger-inner::after {
- transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1); }
-
-/*
- * Arrow Turn Right
- */
-.hamburger--arrowturn-r.is-active .hamburger-inner {
- transform: rotate(-180deg); }
-.hamburger--arrowturn-r.is-active .hamburger-inner::before {
- transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1); }
-.hamburger--arrowturn-r.is-active .hamburger-inner::after {
- transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1); }
-
-/*
- * Boring
- */
-.hamburger--boring .hamburger-inner, .hamburger--boring .hamburger-inner::before, .hamburger--boring .hamburger-inner::after {
- transition-property: none; }
-
-.hamburger--boring.is-active .hamburger-inner {
- transform: rotate(45deg); }
-.hamburger--boring.is-active .hamburger-inner::before {
- top: 0;
- opacity: 0; }
-.hamburger--boring.is-active .hamburger-inner::after {
- bottom: 0;
- transform: rotate(-90deg); }
-
-/*
- * Collapse
- */
-.hamburger--collapse .hamburger-inner {
- top: auto;
- bottom: 0;
- transition-duration: 0.13s;
- transition-delay: 0.13s;
- transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
-.hamburger--collapse .hamburger-inner::after {
- top: -20px;
- transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; }
-.hamburger--collapse .hamburger-inner::before {
- transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
-
-.hamburger--collapse.is-active .hamburger-inner {
- transform: translate3d(0, -10px, 0) rotate(-45deg);
- transition-delay: 0.22s;
- transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
-.hamburger--collapse.is-active .hamburger-inner::after {
- top: 0;
- opacity: 0;
- transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; }
-.hamburger--collapse.is-active .hamburger-inner::before {
- top: 0;
- transform: rotate(-90deg);
- transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); }
-
-/*
- * Collapse Reverse
- */
-.hamburger--collapse-r .hamburger-inner {
- top: auto;
- bottom: 0;
- transition-duration: 0.13s;
- transition-delay: 0.13s;
- transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
-.hamburger--collapse-r .hamburger-inner::after {
- top: -20px;
- transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; }
-.hamburger--collapse-r .hamburger-inner::before {
- transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
-
-.hamburger--collapse-r.is-active .hamburger-inner {
- transform: translate3d(0, -10px, 0) rotate(45deg);
- transition-delay: 0.22s;
- transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
-.hamburger--collapse-r.is-active .hamburger-inner::after {
- top: 0;
- opacity: 0;
- transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; }
-.hamburger--collapse-r.is-active .hamburger-inner::before {
- top: 0;
- transform: rotate(90deg);
- transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); }
-
-/*
- * Elastic
- */
-.hamburger--elastic .hamburger-inner {
- top: 2px;
- transition-duration: 0.275s;
- transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }
-.hamburger--elastic .hamburger-inner::before {
- top: 10px;
- transition: opacity 0.125s 0.275s ease; }
-.hamburger--elastic .hamburger-inner::after {
- top: 20px;
- transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
-
-.hamburger--elastic.is-active .hamburger-inner {
- transform: translate3d(0, 10px, 0) rotate(135deg);
- transition-delay: 0.075s; }
-.hamburger--elastic.is-active .hamburger-inner::before {
- transition-delay: 0s;
- opacity: 0; }
-.hamburger--elastic.is-active .hamburger-inner::after {
- transform: translate3d(0, -20px, 0) rotate(-270deg);
- transition-delay: 0.075s; }
-
-/*
- * Elastic Reverse
- */
-.hamburger--elastic-r .hamburger-inner {
- top: 2px;
- transition-duration: 0.275s;
- transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }
-.hamburger--elastic-r .hamburger-inner::before {
- top: 10px;
- transition: opacity 0.125s 0.275s ease; }
-.hamburger--elastic-r .hamburger-inner::after {
- top: 20px;
- transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
-
-.hamburger--elastic-r.is-active .hamburger-inner {
- transform: translate3d(0, 10px, 0) rotate(-135deg);
- transition-delay: 0.075s; }
-.hamburger--elastic-r.is-active .hamburger-inner::before {
- transition-delay: 0s;
- opacity: 0; }
-.hamburger--elastic-r.is-active .hamburger-inner::after {
- transform: translate3d(0, -20px, 0) rotate(270deg);
- transition-delay: 0.075s; }
-
-/*
- * Emphatic
- */
-.hamburger--emphatic {
- overflow: hidden; }
-.hamburger--emphatic .hamburger-inner {
- transition: background-color 0.125s 0.175s ease-in; }
-.hamburger--emphatic .hamburger-inner::before {
- left: 0;
- transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in; }
-.hamburger--emphatic .hamburger-inner::after {
- top: 10px;
- right: 0;
- transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in; }
-.hamburger--emphatic.is-active .hamburger-inner {
- transition-delay: 0s;
- transition-timing-function: ease-out;
- background-color: transparent; }
-.hamburger--emphatic.is-active .hamburger-inner::before {
- left: -80px;
- top: -80px;
- transform: translate3d(80px, 80px, 0) rotate(45deg);
- transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); }
-.hamburger--emphatic.is-active .hamburger-inner::after {
- right: -80px;
- top: -80px;
- transform: translate3d(-80px, 80px, 0) rotate(-45deg);
- transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); }
-
-/*
- * Emphatic Reverse
- */
-.hamburger--emphatic-r {
- overflow: hidden; }
-.hamburger--emphatic-r .hamburger-inner {
- transition: background-color 0.125s 0.175s ease-in; }
-.hamburger--emphatic-r .hamburger-inner::before {
- left: 0;
- transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in; }
-.hamburger--emphatic-r .hamburger-inner::after {
- top: 10px;
- right: 0;
- transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in; }
-.hamburger--emphatic-r.is-active .hamburger-inner {
- transition-delay: 0s;
- transition-timing-function: ease-out;
- background-color: transparent; }
-.hamburger--emphatic-r.is-active .hamburger-inner::before {
- left: -80px;
- top: 80px;
- transform: translate3d(80px, -80px, 0) rotate(-45deg);
- transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); }
-.hamburger--emphatic-r.is-active .hamburger-inner::after {
- right: -80px;
- top: 80px;
- transform: translate3d(-80px, -80px, 0) rotate(45deg);
- transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); }
-
-/*
- * Minus
- */
-.hamburger--minus .hamburger-inner::before, .hamburger--minus .hamburger-inner::after {
- transition: bottom 0.08s 0s ease-out, top 0.08s 0s ease-out, opacity 0s linear; }
-
-.hamburger--minus.is-active .hamburger-inner::before, .hamburger--minus.is-active .hamburger-inner::after {
- opacity: 0;
- transition: bottom 0.08s ease-out, top 0.08s ease-out, opacity 0s 0.08s linear; }
-
-.hamburger--minus.is-active .hamburger-inner::before {
- top: 0; }
-
-.hamburger--minus.is-active .hamburger-inner::after {
- bottom: 0; }
-
-/*
- * Slider
- */
-.hamburger--slider .hamburger-inner {
- top: 2px; }
-.hamburger--slider .hamburger-inner::before {
- top: 10px;
- transition-property: transform, opacity;
- transition-timing-function: ease;
- transition-duration: 0.15s; }
-.hamburger--slider .hamburger-inner::after {
- top: 20px; }
-
-.hamburger--slider.is-active .hamburger-inner {
- transform: translate3d(0, 10px, 0) rotate(45deg); }
-.hamburger--slider.is-active .hamburger-inner::before {
- transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
- opacity: 0; }
-.hamburger--slider.is-active .hamburger-inner::after {
- transform: translate3d(0, -20px, 0) rotate(-90deg); }
-
-/*
- * Slider Reverse
- */
-.hamburger--slider-r .hamburger-inner {
- top: 2px; }
-.hamburger--slider-r .hamburger-inner::before {
- top: 10px;
- transition-property: transform, opacity;
- transition-timing-function: ease;
- transition-duration: 0.15s; }
-.hamburger--slider-r .hamburger-inner::after {
- top: 20px; }
-
-.hamburger--slider-r.is-active .hamburger-inner {
- transform: translate3d(0, 10px, 0) rotate(-45deg); }
-.hamburger--slider-r.is-active .hamburger-inner::before {
- transform: rotate(45deg) translate3d(5.71429px, -6px, 0);
- opacity: 0; }
-.hamburger--slider-r.is-active .hamburger-inner::after {
- transform: translate3d(0, -20px, 0) rotate(90deg); }
-
-/*
- * Spin
- */
-.hamburger--spin .hamburger-inner {
- transition-duration: 0.22s;
- transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
-.hamburger--spin .hamburger-inner::before {
- transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; }
-.hamburger--spin .hamburger-inner::after {
- transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
-
-.hamburger--spin.is-active .hamburger-inner {
- transform: rotate(225deg);
- transition-delay: 0.12s;
- transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
-.hamburger--spin.is-active .hamburger-inner::before {
- top: 0;
- opacity: 0;
- transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; }
-.hamburger--spin.is-active .hamburger-inner::after {
- bottom: 0;
- transform: rotate(-90deg);
- transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }
-
-/*
- * Spin Reverse
- */
-.hamburger--spin-r .hamburger-inner {
- transition-duration: 0.22s;
- transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
-.hamburger--spin-r .hamburger-inner::before {
- transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; }
-.hamburger--spin-r .hamburger-inner::after {
- transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
-
-.hamburger--spin-r.is-active .hamburger-inner {
- transform: rotate(-225deg);
- transition-delay: 0.12s;
- transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
-.hamburger--spin-r.is-active .hamburger-inner::before {
- top: 0;
- opacity: 0;
- transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; }
-.hamburger--spin-r.is-active .hamburger-inner::after {
- bottom: 0;
- transform: rotate(90deg);
- transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }
-
-/*
- * Spring
- */
-.hamburger--spring .hamburger-inner {
- top: 2px;
- transition: background-color 0s 0.13s linear; }
-.hamburger--spring .hamburger-inner::before {
- top: 10px;
- transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
-.hamburger--spring .hamburger-inner::after {
- top: 20px;
- transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
-
-.hamburger--spring.is-active .hamburger-inner {
- transition-delay: 0.22s;
- background-color: transparent; }
-.hamburger--spring.is-active .hamburger-inner::before {
- top: 0;
- transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
- transform: translate3d(0, 10px, 0) rotate(45deg); }
-.hamburger--spring.is-active .hamburger-inner::after {
- top: 0;
- transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
- transform: translate3d(0, 10px, 0) rotate(-45deg); }
-
-/*
- * Spring Reverse
- */
-.hamburger--spring-r .hamburger-inner {
- top: auto;
- bottom: 0;
- transition-duration: 0.13s;
- transition-delay: 0s;
- transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
-.hamburger--spring-r .hamburger-inner::after {
- top: -20px;
- transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0s linear; }
-.hamburger--spring-r .hamburger-inner::before {
- transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
-
-.hamburger--spring-r.is-active .hamburger-inner {
- transform: translate3d(0, -10px, 0) rotate(-45deg);
- transition-delay: 0.22s;
- transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
-.hamburger--spring-r.is-active .hamburger-inner::after {
- top: 0;
- opacity: 0;
- transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0s 0.22s linear; }
-.hamburger--spring-r.is-active .hamburger-inner::before {
- top: 0;
- transform: rotate(90deg);
- transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); }
-
-/*
- * Stand
- */
-.hamburger--stand .hamburger-inner {
- transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear; }
-.hamburger--stand .hamburger-inner::before {
- transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
-.hamburger--stand .hamburger-inner::after {
- transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
-
-.hamburger--stand.is-active .hamburger-inner {
- transform: rotate(90deg);
- background-color: transparent;
- transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear; }
-.hamburger--stand.is-active .hamburger-inner::before {
- top: 0;
- transform: rotate(-45deg);
- transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); }
-.hamburger--stand.is-active .hamburger-inner::after {
- bottom: 0;
- transform: rotate(45deg);
- transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); }
-
-/*
- * Stand Reverse
- */
-.hamburger--stand-r .hamburger-inner {
- transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear; }
-.hamburger--stand-r .hamburger-inner::before {
- transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
-.hamburger--stand-r .hamburger-inner::after {
- transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
-
-.hamburger--stand-r.is-active .hamburger-inner {
- transform: rotate(-90deg);
- background-color: transparent;
- transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear; }
-.hamburger--stand-r.is-active .hamburger-inner::before {
- top: 0;
- transform: rotate(-45deg);
- transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); }
-.hamburger--stand-r.is-active .hamburger-inner::after {
- bottom: 0;
- transform: rotate(45deg);
- transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); }
-
-/*
- * Squeeze
- */
-.hamburger--squeeze .hamburger-inner {
- transition-duration: 0.075s;
- transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
-.hamburger--squeeze .hamburger-inner::before {
- transition: top 0.075s 0.12s ease, opacity 0.075s ease; }
-.hamburger--squeeze .hamburger-inner::after {
- transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
-
-.hamburger--squeeze.is-active .hamburger-inner {
- transform: rotate(45deg);
- transition-delay: 0.12s;
- transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
-.hamburger--squeeze.is-active .hamburger-inner::before {
- top: 0;
- opacity: 0;
- transition: top 0.075s ease, opacity 0.075s 0.12s ease; }
-.hamburger--squeeze.is-active .hamburger-inner::after {
- bottom: 0;
- transform: rotate(-90deg);
- transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }
-
-/*
- * Vortex
- */
-.hamburger--vortex .hamburger-inner {
- transition-duration: 0.2s;
- transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
-.hamburger--vortex .hamburger-inner::before, .hamburger--vortex .hamburger-inner::after {
- transition-duration: 0s;
- transition-delay: 0.1s;
- transition-timing-function: linear; }
-.hamburger--vortex .hamburger-inner::before {
- transition-property: top, opacity; }
-.hamburger--vortex .hamburger-inner::after {
- transition-property: bottom, transform; }
-
-.hamburger--vortex.is-active .hamburger-inner {
- transform: rotate(765deg);
- transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
-.hamburger--vortex.is-active .hamburger-inner::before, .hamburger--vortex.is-active .hamburger-inner::after {
- transition-delay: 0s; }
-.hamburger--vortex.is-active .hamburger-inner::before {
- top: 0;
- opacity: 0; }
-.hamburger--vortex.is-active .hamburger-inner::after {
- bottom: 0;
- transform: rotate(90deg); }
-
-/*
- * Vortex Reverse
- */
-.hamburger--vortex-r .hamburger-inner {
- transition-duration: 0.2s;
- transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
-.hamburger--vortex-r .hamburger-inner::before, .hamburger--vortex-r .hamburger-inner::after {
- transition-duration: 0s;
- transition-delay: 0.1s;
- transition-timing-function: linear; }
-.hamburger--vortex-r .hamburger-inner::before {
- transition-property: top, opacity; }
-.hamburger--vortex-r .hamburger-inner::after {
- transition-property: bottom, transform; }
-
-.hamburger--vortex-r.is-active .hamburger-inner {
- transform: rotate(-765deg);
- transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
-.hamburger--vortex-r.is-active .hamburger-inner::before, .hamburger--vortex-r.is-active .hamburger-inner::after {
- transition-delay: 0s; }
-.hamburger--vortex-r.is-active .hamburger-inner::before {
- top: 0;
- opacity: 0; }
-.hamburger--vortex-r.is-active .hamburger-inner::after {
- bottom: 0;
- transform: rotate(-90deg); }
diff --git a/source/lib/1.1/components/hamburger-icon.html b/source/lib/1.1/components/hamburger-icon.html
deleted file mode 100644
index 896817c..0000000
--- a/source/lib/1.1/components/hamburger-icon.html
+++ /dev/null
@@ -1,5 +0,0 @@
-
diff --git a/source/lib/1.1/components/hamburger-icon.js b/source/lib/1.1/components/hamburger-icon.js
deleted file mode 100644
index bad5ea1..0000000
--- a/source/lib/1.1/components/hamburger-icon.js
+++ /dev/null
@@ -1,45 +0,0 @@
-function HamburgerIcon(cp) {
- let icon;
-
- cp.create = function() {
- const view = cp.view();
- icon = view.children().eq(0);
- // Set the icon type
- let type = cp.options().type || view.attr('data-o-type');
- if (type == null) type = 'spin';
- icon.addClass('hamburger--' + type);
- icon.find('.hamburger-inner').addClass(cp.context.contextId);
- // Add CSS rule for custom color (if set)
- const color = cp.options().color || view.attr('data-o-color');
- if (color != null) {
- let cssRule = '.hamburger-inner.%,.hamburger-inner.%::after,.hamburger-inner.%::before'
- .replace(/%/g, cp.context.contextId);
- cssRule += ' {background-color: '+color+' !important;}';
- const sheet = document.createElement('style');
- sheet.innerHTML = cssRule;
- document.body.appendChild(sheet);
- }
- // Set click event handler
- icon.on('click', function() {
- if (icon.hasClass('is-active')) {
- closeMenu();
- } else {
- openMenu();
- }
- });
- // Public available methods
- cp.expose('open', openMenu)
- .expose('close', closeMenu);
- };
-
- function openMenu() {
- icon.addClass('is-active');
- cp.trigger('menu:open');
- }
- function closeMenu() {
- icon.removeClass('is-active');
- cp.trigger('menu:close');
- }
-}
-
-module.exports = HamburgerIcon;
diff --git a/source/lib/1.1/components/media-browser.css b/source/lib/1.1/components/media-browser.css
deleted file mode 100644
index 65640d3..0000000
--- a/source/lib/1.1/components/media-browser.css
+++ /dev/null
@@ -1,163 +0,0 @@
-:host {
- -webkit-touch-callout: none; /* iOS Safari */
- -webkit-user-select: none; /* Safari */
- -khtml-user-select: none; /* Konqueror HTML */
- -moz-user-select: none; /* Firefox */
- -ms-user-select: none; /* Internet Explorer/Edge */
- user-select: none; /* Non-prefixed version, currently
- supported by Chrome and Opera */
- overflow: hidden;
- position: relative;
- width: 100%;
-}
-:host.fullscreen {
- position: fixed;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
- z-index: 10000;
-}
-
-.container {
- position: absolute;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
- z-index: 20;
- display: -webkit-box;
- display: -webkit-flex;
- display: -moz-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-flex-align: stretch;
- -ms-flex-align: stretch;
- -webkit-align-items: stretch;
- align-items: stretch;
- justify-content: center;
- background: black;
-}
-
-[z-field="media"] article {
- width: 100%;
- height: 100%;
-}
-
-[z-field="media"] article:not([z-loaded]) > * {
- display: none;
-}
-
-[z-field="carousel"] {
- overflow: visible !important;
- height: 100%!important;
-}
-
-[z-field="preview"] {
- padding: 0 4px;
- border-top: solid 4px transparent;
- border-bottom: solid 4px transparent;
- position: relative;
- width: auto;
- height: 90%;
- transition: all 0.2s ease-in;
- opacity: 1.0;
- transform: scale(1.0);
-}
-
-[z-field="controls"] {
- position: absolute;
- bottom: 0;
- left: 0;
- right: 0;
- height: 140px;
- max-height: 20%;
- z-index: 1001;
- padding-left: 6px;
- padding-right: 6px;
- background-color: rgba(0,0,0,0.75);
-}
-
-[z-field*="nav"] {
- z-index: 10;
- background-color: rgba(1,1,1,0.75);
- border-radius: 12px;
-}
-
-[z-field="navPrev"] {
- position: absolute;
- left: 12px;
- bottom: calc(50% - 24px);
- border: solid 1px white;
- border-radius: 48px;
-}
-[z-field="navNext"] {
- position: absolute;
- right: 12px;
- bottom: calc(50% - 24px);
- border: solid 1px white;
- border-radius: 48px;
-}
-[z-field="navClose"] {
- position: absolute;
- right: 12px;
- top: 12px;
-}
-[z-field="navFullscreen"] {
- position: absolute;
- right: 12px;
- top: 12px;
-}
-[z-field="navFullscreen-exit"] {
- position: absolute;
- right: 12px;
- top: 12px;
-}
-
-svg {
- vertical-align: middle!important;
- fill: white!important;
- cursor: pointer!important;
-}
-
-.media-list {
- width: 100%;
- height: 100%;
-}
-
-.page-active {
- /*box-shadow: 0 0 16px 4px rgb(0 0 255 / 100%);*/
- border-radius: 4px;
- border-top: solid 4px greenyellow!important;
- border-bottom: solid 4px greenyellow!important;
- transform: scale(1.0) !important;
- opacity: 1.0;
- padding: 0 4px;
-}
-
-@media only screen and (max-width: 820px) {
- [z-field="controls"] {
- height: 104px;
- }
- [z-field="preview"] img {
- max-height: 80px;
- }
- [z-field="navPrev"] {
- left: 6px;
- }
- [z-field="navNext"] {
- right: 6px;
- }
- [z-field="navClose"] {
- right: 6px;
- top: 6px;
- }
- [z-field="navFullscreen"] {
- right: 6px;
- top: 6px;
- }
- [z-field="navFullscreenExit"] {
- right: 6px;
- top: 6px;
- }
-}
diff --git a/source/lib/1.1/components/media-browser.html b/source/lib/1.1/components/media-browser.html
deleted file mode 100644
index 612771b..0000000
--- a/source/lib/1.1/components/media-browser.html
+++ /dev/null
@@ -1,119 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/source/lib/1.1/components/media-browser.js b/source/lib/1.1/components/media-browser.js
deleted file mode 100644
index 8b8ed6e..0000000
--- a/source/lib/1.1/components/media-browser.js
+++ /dev/null
@@ -1,338 +0,0 @@
-'use strict';
-
-/**
- * MenuOverlay class.
- *
- * @author Gene
- * @version 1.1.1 (2022-03-30)
- *
- * @author Gene
- * @version 1.1.0 (2022-03-25)
- *
- * @author Gene
- * @version 1.0.0 (2018-02-12)
- *
- * @constructor
- * @this {ContextController}
- */
-function MediaBrowser(cp) {
- // state vars
- let currentPage = 0;
- let inlineMode = false;
- let showingControls = false;
- let showingFullscreen = true;
-
- // view-pager views
- let fullView;
- let listView;
-
- // UI control buttons
- /** @type ZxQuery */
- let imageList;
-
- cp.create = function() {
- // export public component methods
- cp.expose({
- open: openBrowser,
- close: closeBrowser,
- current: setCurrent,
- showControls,
- hideControls,
- toggleControls,
- refresh: refreshViewPagers,
- fullScreen: function(fullScreen) {
- fullScreen ? enterFullscreen() : exitFullscreen();
- },
- next: function() {
- fullView.next();
- },
- prev: function() {
- fullView.prev();
- }
- });
-
- // UI state
- cp.expose('ui', {get: function() {
- return {
- currentPage,
- isFirstPage: function() {
- return currentPage === 0;
- },
- isLastPage: function() {
- return !imageList || currentPage === imageList.length() - 1;
- },
- inlineMode,
- showingFullscreen
- };
- }});
-
- // Carousel ViewPager component
- const carousel = cp.field('carousel');
- zuix.context(carousel, function() {
- listView = this;
- listView
- .on('page:change', pageChanged)
- .on('page:tap', function(e, page) {
- fullView.page(page);
- });
- // highlight initial page
- setTimeout(() => {
- const firstPage = listView.get(0);
- firstPage && firstPage.addClass('page-active');
- });
- });
-
- // Main ViewPager component
- const mediaList = cp.field('media');
- zuix.context(mediaList, function() {
- fullView = this;
- fullView.on({
- 'page:tap': function() {
- toggleControls();
- cp.view().get().focus();
- },
- 'page:change': function(e, page) {
- listView.page(page.in);
- cp.trigger('page:change', page);
- }
- });
- // sets list of media with thumbnails and full size items
- // with temporary preview background
- imageList = mediaList.children().each(function(i, el, $el) {
- let preview = this.find('[z-field="preview"]');
- // TODO: the following 4 lines were added for backward compatibility with 1.0.0
- if (preview.get() && preview.get().tagName !== 'IMG') {
- preview.attr('z-field', null);
- preview = preview.find('IMG').attr('z-field', 'preview');
- }
- // refresh the viewpager when images are loaded
- preview.on('load error', function() {
- if (listView) listView.refresh();
- });
- if (preview.length() > 0) {
- this.css({
- background: 'url("'+preview.attr('src')+'") scroll no-repeat center/contain'
- });
- carousel.append(preview.detach().get());
- } else {
- // TODO: add a button or something if preview thumbnail not specified
- carousel.append(document.createElement('div'));
- }
- $el.addClass('visible-on-ready');
- // creates lazy loaded components to host full sized media
- let type = this.attr('data-type');
- if (type == null) type = 'image'; // default type
- this.attr({
- 'z-load': cp.context.componentId + '/' + type,
- 'z-lazy': true,
- 'data-index': i
- });
- zuix.context(el, function() {
- this.host(cp.view());
- });
- });
- // set auto-slide option
- const autoSlide = cp.options().slide;
- fullView.slide(autoSlide != null ? +autoSlide : false);
- // final initialization steps
- initializeAnimations();
- preventImageDrag();
- // setup complete, open media-browser
- showControls();
- if (inlineMode) {
- openBrowser();
- }
- });
-
- // Keyboard navigation handling
- cp.view().attr('tabindex', 0);
- document.body.addEventListener('keydown', function(e) {
- if (cp.view().get() !== document.activeElement) {
- return;
- }
- switch (e.code) {
- case 'Escape':
- closeBrowser();
- e.preventDefault();
- break;
- case 'Space':
- toggleControls();
- e.preventDefault();
- break;
- case 'ArrowLeft':
- fullView.prev();
- e.preventDefault();
- break;
- case 'ArrowUp':
- showControls();
- e.preventDefault();
- break;
- case 'ArrowRight':
- fullView.next();
- e.preventDefault();
- break;
- case 'ArrowDown':
- hideControls();
- e.preventDefault();
- break;
- }
- });
-
- // if not inlineMode mode === true, the media-browser will be hidden
- // and show only fullscreen after the `open()` method is called
- inlineMode = cp.options().inline;
- if (!inlineMode) {
- cp.view().hide();
- showingFullscreen = false;
- const buttonName = cp.options().button;
- const button = zuix.field(buttonName);
- button.on('click', openBrowser);
- } else {
- // without this timeout the component sometimes starts "hidden"
- setTimeout(exitFullscreen, 100);
- }
- };
-
- function pageChanged(e, page) {
- currentPage = +page.in;
- const pageIn = listView.get(currentPage);
- if (pageIn) {
- pageIn.addClass('page-active');
- }
- const pageOut = listView.get(+page.out);
- if (pageOut) {
- pageOut.removeClass('page-active');
- }
- }
-
- function setCurrent(current) {
- return fullView.page(current);
- }
-
- function openBrowser() {
- if (!inlineMode) {
- enterFullscreen();
- }
- cp.view().show();
- cp.trigger('open');
- }
- function closeBrowser() {
- exitFullscreen();
- if (!inlineMode) {
- cp.trigger('close');
- }
- }
-
- function enterFullscreen() {
- if (!showingFullscreen) {
- showingFullscreen = true;
- cp.view().addClass('fullscreen').css({
- height: null,
- maxHeight: null,
- aspectRatio: null
- });
- refreshViewPagers();
- cp.trigger('fullscreen:open');
- }
- }
- function exitFullscreen() {
- if (showingFullscreen) {
- showingFullscreen = false;
- if (inlineMode) {
- cp.view().removeClass('fullscreen');
- const style = getComputedStyle(cp.view().get());
- const actualWidth = parseInt(style.width);
- const actualHeight = parseInt(style.height);
- if (actualHeight === 0) {
- const computedHeight = (actualWidth / 16 * 9 );
- cp.view().css({
- height: computedHeight + 'px',
- maxHeight: computedHeight + 'px',
- aspectRatio: '16 / 9'
- });
- }
- refreshViewPagers();
- }
- cp.trigger('fullscreen:close');
- }
- }
-
- function toggleControls() {
- if (showingControls) {
- hideControls();
- } else {
- showControls();
- }
- }
- function hideControls() {
- showingControls = false;
- cp.trigger('controls:hide');
- }
- function showControls() {
- showingControls = true;
- if (listView != null && fullView != null) {
- listView.page(fullView.page());
- }
- cp.trigger('controls:show');
- }
-
- function refreshViewPagers() {
- setTimeout(function() {
- if (listView) listView.refresh();
- if (fullView) fullView.refresh();
- }, 10);
- }
-
- function preventImageDrag() {
- // prevent default dragging on image elements
- cp.view().on('dragstart', {
- handler: function(e) {
- if (e.target.nodeName.toUpperCase() === 'IMG') {
- e.preventDefault();
- }
- },
- passive: false
- });
- }
-
- function initializeAnimations() {
- const commonOptions = {
- duration: '0.5s',
- timingFunction: 'ease-in-out'
- };
- cp.addTransition( 'fadeIn', {
- transform: 'translateXY(0,0)',
- opacity: '1'
- }, commonOptions);
- cp.addTransition( 'fadeOutUp', {
- transform: 'translateY(-200px)',
- opacity: '0'
- }, commonOptions);
- cp.addTransition( 'fadeOutDown', {
- transform: 'translateY(200px)',
- opacity: '0'
- }, commonOptions);
- cp.addTransition('fadeOutLeft', {
- transform: 'translateX(-100px)',
- opacity: 0
- }, commonOptions);
- cp.addTransition('fadeOutRight', {
- transform: 'translateX(100px)',
- opacity: 0
- }, commonOptions);
- cp.addTransition('zoomIn', {
- transform: 'scale(1)'
- }, {
- duration: '250ms',
- timingFunction: 'ease-in-out'
- });
- cp.addTransition('zoomOut', {
- transform: 'scale(0)'
- }, {
- duration: '250ms',
- timingFunction: 'ease-in-out'
- });
- }
-}
-
-module.exports = MediaBrowser;
diff --git a/source/lib/1.1/components/media-browser/article.css b/source/lib/1.1/components/media-browser/article.css
deleted file mode 100644
index b078fb9..0000000
--- a/source/lib/1.1/components/media-browser/article.css
+++ /dev/null
@@ -1,17 +0,0 @@
-:host {
- position: relative;
- top:0;
- left: 0;
- bottom: 0;
- right: 0;
-}
-
-.page {
- color: white;
- position: absolute;
- left:0;
- right:0; bottom:120px;
- height:auto;
- padding: 24px;
- overflow-y: auto;
-}
diff --git a/source/lib/1.1/components/media-browser/article.html b/source/lib/1.1/components/media-browser/article.html
deleted file mode 100644
index 9af6f89..0000000
--- a/source/lib/1.1/components/media-browser/article.html
+++ /dev/null
@@ -1,15 +0,0 @@
-![]()
-
- Article title
-
- And this is a subtitle where a quick brown fox
- jumped over the lazy dog.
-
-
- "On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains."
- "On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains."
- "On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains."
- "On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains."
- "On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains."
-
-
diff --git a/source/lib/1.1/components/media-browser/image.css b/source/lib/1.1/components/media-browser/image.css
deleted file mode 100644
index 8b8e471..0000000
--- a/source/lib/1.1/components/media-browser/image.css
+++ /dev/null
@@ -1,158 +0,0 @@
-:host {
- position: relative;
- top:0;
- left: 0;
- bottom: 0;
- right: 0;
-}
-
-.info-container {
- width: 100%;
- top:0;
- position: absolute;
- padding: 12px 62px;
- display: flex;
- align-items: start;
- justify-content: center;
-}
-.info-box {
- background: rgba(255,255,255,0.85);
- border: solid 1px rgba(255,255,255,0.25);
- border-radius: 6px;
- max-width: 100%;
- height:auto;
- padding: 6px;
- overflow: hidden;
-}
-
-.cover {
- position: relative;
- width: 100%;
- height: 100%;
- overflow-y: auto;
-}
-
-img {
- position: absolute;
- margin: auto;
- top: 0; bottom: 0;
- left: 0; right: 0;
- max-width: 100%;
- max-height: 100%;
-}
-
-[z-field="title"] {
- font-weight: 500;
- color: #073669;
- font-size: 120%!important;
- margin: 0!important;
- padding: 0!important;
-}
-[z-field="description"] {
- color: #0c5aaf;
- font-weight: 400;
- font-size: 100%!important;
- line-height: 120%;
- margin: 0;
- padding: 0;
-}
-[z-field="url"] {
- display: none;
-}
-
-@media only screen and (max-width: 820px) {
- .info-container {
- padding-top: 6px;
- }
-}
-
-
-/* spin anim */
-div.loader {
- position: absolute;
- margin: auto;
- left: 0;
- top: 0;
- right: 0;
- bottom: 0;
-}
-.loader {
- color: #ffffff;
- font-size: 300%;
- text-indent: -9999em;
- overflow: hidden;
- width: 1em;
- height: 1em;
- border-radius: 50%;
- margin: 72px auto;
- position: relative;
- -webkit-transform: translateZ(0);
- -ms-transform: translateZ(0);
- transform: translateZ(0);
- -webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease;
- animation: load6 1.7s infinite ease, round 1.7s infinite ease;
-}
-@-webkit-keyframes load6 {
- 0% {
- box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
- }
- 5%,
- 95% {
- box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
- }
- 10%,
- 59% {
- box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
- }
- 20% {
- box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
- }
- 38% {
- box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
- }
- 100% {
- box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
- }
-}
-@keyframes load6 {
- 0% {
- box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
- }
- 5%,
- 95% {
- box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
- }
- 10%,
- 59% {
- box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
- }
- 20% {
- box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
- }
- 38% {
- box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
- }
- 100% {
- box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
- }
-}
-@-webkit-keyframes round {
- 0% {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- 100% {
- -webkit-transform: rotate(360deg);
- transform: rotate(360deg);
- }
-}
-@keyframes round {
- 0% {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- 100% {
- -webkit-transform: rotate(360deg);
- transform: rotate(360deg);
- }
-}
diff --git a/source/lib/1.1/components/media-browser/image.html b/source/lib/1.1/components/media-browser/image.html
deleted file mode 100644
index ad5a87f..0000000
--- a/source/lib/1.1/components/media-browser/image.html
+++ /dev/null
@@ -1,14 +0,0 @@
-
- ![]()
-
-
-
-
-
- The quick brown fox jumped over the lazy dog.
-
-
-
-
diff --git a/source/lib/1.1/components/media-browser/image.js b/source/lib/1.1/components/media-browser/image.js
deleted file mode 100644
index 9047895..0000000
--- a/source/lib/1.1/components/media-browser/image.js
+++ /dev/null
@@ -1,50 +0,0 @@
-'use strict';
-
-/**
- * ImageItem class.
- *
- * @author Gene
- * @version 1.0.0 (2018-02-12)
- *
- * @constructor
- * @this {ContextController}
- */
-function ImageItem() {
- let mediaBrowser;
- let infoBox;
-
- const cp = this;
-
- cp.create = function() {
- cp.expose('host', setHost);
- cp.field('full-image').on('load', function() {
- cp.view().css({background: null});
- cp.view('.loader').hide();
- }).attr('src', cp.field('url').attr('href') || cp.field('url').html());
- infoBox = cp.view('.info-container')
- .addClass('fadeIn');
- };
-
- function setHost(h) {
- mediaBrowser = zuix.context(h);
- const showTitleBox = cp.field('title').html().length > 0;
- if (showTitleBox) {
- h.on('controls:hide', function() {
- infoBox.addClass('fadeOutUp').removeClass('fadeIn');
- }).on('controls:show', function() {
- infoBox.removeClass('fadeOutUp').addClass('fadeIn');
- }).on('page:change', function(e, page) {
- if (mediaBrowser.current() === +cp.view().attr('data-index')) {
- infoBox.removeClass('fadeOutUp').addClass('fadeIn');
-// mediaBrowser.showControls();
- } else if (infoBox.position().visible) {
- infoBox.addClass('fadeOutUp').removeClass('fadeIn');
- }
- });
- } else {
- infoBox.hide();
- }
- }
-}
-
-module.exports = ImageItem;
diff --git a/source/lib/1.1/components/media-browser/video-yt.css b/source/lib/1.1/components/media-browser/video-yt.css
deleted file mode 100644
index bcb5676..0000000
--- a/source/lib/1.1/components/media-browser/video-yt.css
+++ /dev/null
@@ -1,34 +0,0 @@
-:host {
- width: 100%;
- height: 100%;
-}
-[z-field="overlay"] {
- background: rgba(255,255,255,0);
- left: 0; right: 0;
- bottom: 56px; top: 0;
- position: absolute;
-}
-[z-field="player-controls"] {
- background-color: rgba(255,255,255,0);
- padding: 12px;
-}
-[z-field*="nav-"] {
- width: 48px;
-}
-[z-field="video"] {
- display: none;
-}
-
-iframe {
- position: absolute;
- left:0;
- right: 0;
- top:0;
- bottom: 0;
-}
-
-@media only screen and (max-width: 820px) {
- [z-field="player-controls"] {
- padding: 6px;
- }
-}
diff --git a/source/lib/1.1/components/media-browser/video-yt.html b/source/lib/1.1/components/media-browser/video-yt.html
deleted file mode 100644
index d6d893d..0000000
--- a/source/lib/1.1/components/media-browser/video-yt.html
+++ /dev/null
@@ -1,34 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/source/lib/1.1/components/media-browser/video-yt.js b/source/lib/1.1/components/media-browser/video-yt.js
deleted file mode 100644
index 47a94e4..0000000
--- a/source/lib/1.1/components/media-browser/video-yt.js
+++ /dev/null
@@ -1,154 +0,0 @@
-'use strict';
-
-/**
- * YouTubeVideoItem class.
- *
- * @author Gene
- * @version 1.1.0 (2022-03-27)
- *
- * @author Gene
- * @version 1.0.0 (2018-02-12)
- *
- * @constructor
- * @this {ContextController}
- */
-function YouTubeVideoItem(cp) {
- let mediaBrowser;
- let player;
- let controlsHideTimeout;
- let pageIndex = -1;
-
- cp.create = function() {
- pageIndex = +cp.view().attr('data-index');
- // expose public methods
- cp.expose('host', setHost);
- cp.expose('setup', setPlayer);
- cp.expose('play', play);
- cp.expose('pause', pause);
- cp.expose('stop', stop);
- cp.expose('active', isActive);
- // set initial controls state
- cp.field('nav-pause').hide();
- // load YouTube API if not already loaded
- const ytApiSrc = 'https://www.youtube.com/iframe_api';
- if (zuix.$.find('script[src="' + ytApiSrc + '"]').length() === 0) {
- const tag = document.createElement('script');
- tag.src = ytApiSrc;
- const firstScriptTag = zuix.$.find('script').get();
- firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
- }
- };
-
- function setHost(view) {
- mediaBrowser = zuix.context(view);
- const controls = cp.field('player-controls');
- mediaBrowser.on({
- 'open': function() {
- if (isActive()) {
- play();
- }
- },
- 'close': pause,
- 'controls:show': function() {
- controls.playTransition({classes: 'fadeOutUp fadeIn', holdState: true});
- },
- 'controls:hide': function() {
- controls.playTransition({classes: 'fadeIn fadeOutUp', holdState: true});
- },
- 'page:change': pageChanged,
- 'refresh:inactive': function() {
- const ps = player.getPlayerState();
- if (isActive() && (ps === 1 || ps === 3)) {
- pause();
- }
- },
- 'refresh:active': function() {
- const ps = player.getPlayerState();
- if (isActive() && ps !== 1 && ps !== 3) {
- play();
- }
- }
- });
- if (mediaBrowser.current() === pageIndex) {
- play();
- }
- }
-
- function isActive() {
- return mediaBrowser && mediaBrowser.current() === pageIndex;
- }
-
- function pageChanged(e) {
- const page = e.detail;
- if (+page.out === pageIndex) {
- pause();
- } else if (+page.in === pageIndex) {
- play();
- }
- }
-
- // YouTube Player API
-
- function setPlayer() {
- const videoUrl = cp.field('url').attr('href') || cp.field('url').html();
- player = new YT.Player(cp.field('player').get(), {
- height: '100%',
- width: '100%',
- playerVars: {controls: 1, disablekb: 1, fs: 0, modestbranding: 0, rel: 0, showinfo: 0, ecver: 2},
- videoId: parseVideoId(videoUrl),
- events: {
- 'onReady': onPlayerReady,
- 'onStateChange': onPlayerStateChange
- }
- });
- return player;
- }
-
- function onPlayerReady(event) {
- // not used
- }
- function onPlayerStateChange(event) {
- /** Yourube API
- -1 (unstarted)
- 0 (ended)
- 1 (playing)
- 2 (paused)
- 3 (buffering)
- 5 (video cued)
- **/
- if (controlsHideTimeout !== null) {
- clearTimeout(controlsHideTimeout);
- }
- if (event.data === 0) {
- mediaBrowser.showControls();
- } else if (event.data === 1) {
- cp.field('nav-play').hide();
- cp.field('nav-pause').show();
- controlsHideTimeout = setTimeout(function() {
- mediaBrowser.hideControls();
- }, 2500);
- } else if (event.data === 2) {
- cp.field('nav-play').show();
- cp.field('nav-pause').hide();
- }
- }
-
- function play() {
- player.playVideo();
- }
- function pause() {
- player.pauseVideo();
- }
- function stop() {
- player.stopVideo();
- }
-
- // https://stackoverflow.com/questions/3452546/how-do-i-get-the-youtube-video-id-from-a-url
- function parseVideoId(url) {
- const regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
- const match = url.match(regExp);
- return (match && match[7].length === 11) ? match[7] : url;
- }
-}
-
-module.exports = YouTubeVideoItem;
diff --git a/source/lib/1.1/components/media-browser/video.css b/source/lib/1.1/components/media-browser/video.css
deleted file mode 100644
index 905c613..0000000
--- a/source/lib/1.1/components/media-browser/video.css
+++ /dev/null
@@ -1,22 +0,0 @@
-[z-field="overlay"] {
- background: rgba(255,255,255,0);
- left: 0; right: 0;
- bottom: 56px; top: 0;
- position: absolute;
-}
-[z-field="player-controls"] {
- background-color: rgba(255,255,255,0);
- padding: 12px;
-}
-[z-field*="nav-"] {
- width: 48px;
-}
-[z-field="preview"], [z-field="url"] {
- display: none;
-}
-
-@media only screen and (max-width: 820px) {
- [z-field="player-controls"] {
- padding: 6px;
- }
-}
diff --git a/source/lib/1.1/components/media-browser/video.html b/source/lib/1.1/components/media-browser/video.html
deleted file mode 100644
index a73417a..0000000
--- a/source/lib/1.1/components/media-browser/video.html
+++ /dev/null
@@ -1,23 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/source/lib/1.1/components/media-browser/video.js b/source/lib/1.1/components/media-browser/video.js
deleted file mode 100644
index 24c096b..0000000
--- a/source/lib/1.1/components/media-browser/video.js
+++ /dev/null
@@ -1,111 +0,0 @@
-'use strict';
-
-/**
- * VideoItem class.
- *
- * @author Gene
- * @version 1.0.0 (2022-03-30)
- *
- * @constructor
- * @this {ContextController}
- */
-function VideoItem(cp) {
- let mediaBrowser;
- let player;
- let controlsHideTimeout;
- let pageIndex = -1;
-
- cp.create = function() {
- pageIndex = +cp.view().attr('data-index');
- // expose public methods
- cp.expose('host', setHost);
- cp.expose('play', play);
- cp.expose('pause', pause);
- // set initial controls state
- cp.field('nav-pause').hide();
- // get reference to the video player instance
- player = cp.view('video').get();
- player.src = cp.field('url').attr('href') || cp.field('url').html();
- player.poster = cp.field('preview').html();
- zuix.$(player).on('pause playing', playerStateChanged);
- };
-
- function setHost(view) {
- const controls = cp.field('player-controls');
- mediaBrowser = zuix.context(view);
- mediaBrowser.on({
- 'open': function() {
- if (isActive()) {
- play();
- }
- },
- 'close': pause,
- 'controls:show': function() {
- controls.playTransition({classes: 'fadeOutUp fadeIn', holdState: true});
- },
- 'controls:hide': function() {
- controls.playTransition({classes: 'fadeIn fadeOutUp', holdState: true});
- },
- 'page:change': pageChanged,
- 'refresh:inactive': function() {
- if (mediaBrowser.ui.inlineMode && isActive() && !player.paused) {
- pause();
- }
- },
- 'refresh:active': function() {
- if (mediaBrowser.ui.inlineMode && isActive() && player.paused) {
- play();
- }
- }
- });
- player.onplaying = playerStateChanged;
- if (mediaBrowser.current() === pageIndex) {
- play();
- }
- }
-
- function isActive() {
- return mediaBrowser && mediaBrowser.current() === pageIndex;
- }
-
- function pageChanged(e) {
- const page = e.detail;
- if (+page.out === pageIndex) {
- pause();
- } else if (+page.in === pageIndex) {
- play();
- }
- }
-
- function playerStateChanged(e) {
- if (controlsHideTimeout !== null) {
- clearTimeout(controlsHideTimeout);
- }
- if (e.type === 'playing') {
- cp.field('nav-play').hide();
- cp.field('nav-pause').show();
- controlsHideTimeout = setTimeout(function() {
- mediaBrowser.hideControls();
- }, 2500);
- } else if (e.type === 'pause') {
- cp.field('nav-play').show();
- cp.field('nav-pause').hide();
- }
- }
-
- function play() {
- try {
- player.play();
- } catch (e) {
- console.log(e);
- }
- }
- function pause() {
- player.pause();
- }
- function stop() {
- player.stop();
- }
-}
-
-module.exports = VideoItem;
diff --git a/source/lib/1.1/components/menu-overlay.css b/source/lib/1.1/components/menu-overlay.css
deleted file mode 100644
index 5ddde13..0000000
--- a/source/lib/1.1/components/menu-overlay.css
+++ /dev/null
@@ -1,100 +0,0 @@
-button, .button {
- background: transparent;
- outline: transparent;
- border: none;
- color: inherit;
- font-weight: bold;
- display: inline-flex;
- align-items: center;
- gap: 12px;
- justify-content: center;
- padding-right: 12px;
- padding-left: 12px;
- margin-right: 0;
- margin-left: 0;
- height: 42px;
-}
-.item-title {
- font-size: 150%;
- padding: 16px;
- opacity: 0.7;
-}
-.menu-button {
- z-index: 100; /* topmost */
- position: fixed;
- right: calc(50% - 28px);
- left: calc(50% - 28px);
- bottom: 24px;
-}
-.menu-button.left {
- left: 24px;
- right: unset!important;
-}
-.menu-button.right {
- right: 24px;
- left: unset!important;
-}
-div[z-field="menu_overlay"] {
- z-index: 100; /* topmost */
- position: fixed;
- left: 0;
- top: 0;
- right: 0;
- bottom: 0;
- padding-top: 80px;
- padding-bottom: 80px;
- background: radial-gradient(circle at bottom, white, #ffffffee, #ffffff88, transparent);
- display: flex;
- justify-content: space-between;
- flex-direction: column-reverse;
-}
-div[z-field="menu_overlay"].left {
- background: linear-gradient(230deg, transparent, #ffffff88, #ffffffee, white);
-}
-div[z-field="menu_overlay"].right {
- background: linear-gradient(130deg, transparent, #ffffff88, #ffffffee, white);
-}
-div[z-field="items_wrapper"] {
- text-align: center;
- margin-top: auto;
- margin-bottom: 24px;
-}
-div[z-field="items_wrapper"].left {
- padding-left: 24px;
- text-align: left;
-}
-div[z-field="items_wrapper"].right {
- padding-right: 24px;
- text-align: right;
-}
-
-.circle-button {
- cursor: pointer;
- border-radius: 50%;
- width: 56px;
- height: 56px;
- background: deeppink;
- fill: white;
- color: white;
- box-shadow: 0 0 10px rgb(0 0 0 / 25%), 0 0 4px rgb(0 0 0 / 25%);
- font-size: 0;
- transition: all 0.1s cubic-bezier(.25,.8,.25,1);
- padding: 0;
- display: flex;
- align-items: center;
- justify-content: center;
- -webkit-tap-highlight-color: transparent;
-}
-.circle-button:active {
- transform: scale(97%);
- transition: 0s;
-}
-
-@media screen and (max-width: 960px), screen and (max-height: 480px) {
- .menu-button {
- bottom: 24px;
- }
- div[z-field="menu_overlay"] {
- padding-bottom: 72px;
- }
-}
diff --git a/source/lib/1.1/components/menu-overlay.html b/source/lib/1.1/components/menu-overlay.html
deleted file mode 100644
index 4c10142..0000000
--- a/source/lib/1.1/components/menu-overlay.html
+++ /dev/null
@@ -1,22 +0,0 @@
-
-
-
-
-
-
-
-
diff --git a/source/lib/1.1/components/menu-overlay.js b/source/lib/1.1/components/menu-overlay.js
deleted file mode 100644
index 4ed2ee4..0000000
--- a/source/lib/1.1/components/menu-overlay.js
+++ /dev/null
@@ -1,271 +0,0 @@
-'use strict';
-
-/**
- * MenuOverlay class.
- *
- * @author Gene
- * @version 1.0.0 (2018-02-12)
- *
- * @constructor
- * @this {ContextController}
- */
-function MenuOverlay(cp) {
- let menuOverlayShowing = false;
- let menuButtonShowing = false;
- let menuButton;
- let menuButtonClose;
- let menuOverlay;
- let itemsWrapper;
- let menuItems;
- let scroller = null;
- let currentOffset = 0;
- let menuPosition = 'right';
-
- cp.create = function() {
- menuPosition = cp.options().position || cp.view().attr('data-o-position') || menuPosition;
- menuButton = cp.field('menu_button')
- .addClass(menuPosition).hide()
- .on('click', toggleMenu);
- menuButtonClose = cp.field('menu_button_close')
- .addClass(menuPosition).hide()
- .on('click', toggleMenu);
- menuOverlay = cp.field('menu_overlay')
- .addClass(menuPosition)
- .visibility('hidden')
- .on('click', toggleMenu);
- itemsWrapper = cp.field('items_wrapper')
- .addClass(menuPosition);
-
- const items = zuix.$(cp.model().items).children();
- items.each(function(i, el) {
- const wrapperDiv = zuix.$(document.createElement('div'))
- .addClass('menu-item')
- .append(el.observableTarget || el);
- itemsWrapper.append(wrapperDiv.get());
- });
- menuItems = itemsWrapper
- .find('div[class*="menu-item"]');
-
- // apply custom color to menu button
- const $view = cp.view();
- const buttonColor = cp.options().buttonColor || $view.attr('data-o-button-color'); // eg. header
- if (buttonColor != null) {
- $view.find('.circle-button').css({background: buttonColor});
- }
- const iconColor = cp.options().iconColor || $view.attr('data-o-icon-color'); // eg. header
- if (iconColor != null) {
- $view.find('.circle-button i').css({
- fill: iconColor,
- color: iconColor
- });
- }
-
- const scrollerName = $view.attr('data-o-scroller');
- if (scrollerName != null) {
- scroller = zuix.field(scrollerName);
- } else {
- scroller = zuix.$(window);
- }
- if (scroller != null) {
- let beforeElement = cp.options().before || $view.attr('data-o-before'); // eg. footer
- if (beforeElement) {
- beforeElement = zuix.field(beforeElement).get();
- }
- let afterElement = cp.options().after || $view.attr('data-o-after'); // eg. header
- if (afterElement) {
- afterElement = zuix.field(afterElement).get();
- }
- scroller.on('scroll', function(e) {
- const scrollTop = scroller.get() === window ? (document.documentElement.scrollTop || document.body.scrollTop) : scroller.get().scrollTop;
- if (menuButtonShowing) {
- if ((currentOffset - scrollTop) < -2) {
- if (afterElement == null || (scrollTop > afterElement.offsetTop + afterElement.offsetHeight - 56)) {
- setTimeout(hideButton, 100);
- }
- }
- } else if (!menuButtonShowing) {
- if ((currentOffset - scrollTop) > 2) {
- if (beforeElement == null || (scrollTop + window.innerHeight < beforeElement.offsetTop + 56)) {
- showButton();
- }
- }
- }
- currentOffset = scrollTop;
- if (menuOverlayShowing) {
- toggleMenu();
- }
- });
- }
-
- cp.expose({
- show: $view.show,
- hide: $view.hide,
- toggleButton,
- showButton,
- hideButton,
- showing: function() {
- return menuButtonShowing;
- }
- });
- initializeAnimations();
- // show floating action button
- setTimeout(function() {
- if (!menuButtonShowing) {
- showButton();
- }
- }, 1000);
- };
-
- function toggleButton() {
- if (menuButtonShowing) {
- hideButton();
- } else {
- showButton();
- }
- }
-
- function hideButton() {
- if (!menuButton.isPlaying()) {
- menuButtonShowing = false;
- menuButton.playTransition({
- classes: 'fadeIn fadeOutDown',
- onEnd: function() {
- this.hide();
- cp.trigger('hide');
- }
- });
- }
- }
-
- function showButton() {
- if (!menuButton.isPlaying()) {
- menuButtonShowing = true;
- menuButton.playTransition('fadeOutDown fadeIn');
- menuButton.show();
- cp.trigger('show');
- }
- }
-
- function toggleMenu() {
- if (menuOverlay.isPlaying()) {
- return;
- }
- const itemsRevealAnimation = 'fadeIn';
- let itemsHideAnimation = 'fadeOutDown';
- if (menuPosition === 'right') {
- itemsHideAnimation = 'fadeOutRight';
- } else if (menuPosition === 'left') {
- itemsHideAnimation = 'fadeOutLeft';
- }
- let speedFactor = 200 / menuItems.length();
- if (!menuOverlayShowing) {
- menuOverlayShowing = true;
- cp.trigger('open');
- menuButton.playTransition({
- classes: 'rotateIn rotateOutRight',
- onEnd: menuButton.hide
- });
- menuButtonClose.playTransition('rotateOutLeft rotateIn').show();
- let transitionDelay = 0;
- if (menuPosition === 'left' || menuPosition === 'right') {
- transitionDelay = speedFactor * menuItems.length();
- speedFactor *= -1;
- }
- menuOverlay.playTransition('fadeOut fadeIn').visibility('');
- menuItems.each(function(i, el) {
- transitionDelay += speedFactor;
- this.playTransition({
- classes: [itemsHideAnimation, itemsRevealAnimation],
- options: {
- duration: '200ms',
- delay: transitionDelay + 'ms'
- }
- }).show();
- });
- } else if (menuOverlayShowing) {
- menuOverlayShowing = false;
- cp.trigger('close');
- if (menuButtonShowing) {
- menuButtonClose.playTransition({
- classes: 'rotateIn rotateOutLeft',
- onEnd: menuButtonClose.hide
- });
- menuButton.playTransition('rotateOutRight rotateIn');
- } else {
- menuButtonClose.playTransition({
- classes: 'fadeIn fadeOutDown',
- onEnd: menuButtonClose.hide
- });
- }
- menuOverlay.playTransition({
- classes: 'fadeIn fadeOut',
- holdState: true,
- onEnd: function() {
- this.visibility('hidden');
- }
- });
- let transitionDelay = speedFactor * menuItems.length();
- if (menuPosition === 'left' || menuPosition === 'right') {
- transitionDelay = 0;
- speedFactor *= -1;
- }
- menuItems.each(function(i, item, $item) {
- transitionDelay -= speedFactor;
- $item.playTransition({
- classes: [itemsRevealAnimation, itemsHideAnimation],
- options: {
- duration: '200ms',
- delay: transitionDelay + 'ms'
- },
- onEnd: $item.hide
- }).show();
- });
- menuButton.show();
- }
- }
-
- function initializeAnimations() {
- const commonOptions = {
- duration: '0.25s',
- timingFunction: 'ease-in-out'
- };
- cp.addTransition( 'fadeIn', {
- transform: 'translateXY(0,0)',
- opacity: '1'
- }, commonOptions);
- cp.addTransition( 'fadeOut', {
- transform: 'translateXY(0,0)',
- opacity: '0'
- }, commonOptions);
- cp.addTransition( 'fadeOutUp', {
- transform: 'translateY(-200px)',
- opacity: '0'
- }, commonOptions);
- cp.addTransition( 'fadeOutDown', {
- transform: 'translateY(200px)',
- opacity: '0'
- }, commonOptions);
- cp.addTransition('fadeOutLeft', {
- transform: 'translateX(-200px)',
- opacity: 0
- }, commonOptions);
- cp.addTransition('fadeOutRight', {
- transform: 'translateX(200px)',
- opacity: 0
- }, commonOptions);
- cp.addTransition('rotateIn', {
- transform: 'rotate(0)',
- opacity: 1
- }, commonOptions);
- cp.addTransition('rotateOutRight', {
- transform: 'rotate(+135deg)',
- opacity: 0
- }, commonOptions);
- cp.addTransition('rotateOutLeft', {
- transform: 'rotate(-135deg)',
- opacity: 0
- }, commonOptions);
- }
-}
-
-module.exports = MenuOverlay;
diff --git a/source/lib/1.1/controllers/drawer-layout.js b/source/lib/1.1/controllers/drawer-layout.js
deleted file mode 100644
index 9302d03..0000000
--- a/source/lib/1.1/controllers/drawer-layout.js
+++ /dev/null
@@ -1,317 +0,0 @@
-'use strict';
-
-/**
- * DrawerLayout class.
- *
- * @version 1.0.1 (2018-07-27)
- * @author Gene
- *
- * @version 1.0.0 (2018-07-09)
- * @author Gene
- *
- * @constructor
- * @this {ContextController}
- */
-function DrawerLayout() {
- let isDrawerOpen = true;
- let isDrawerLocked = false;
- let isSmallScreen = false;
- let isTransitionOn = false;
- let firstCheck = true;
-
- let overlay = null;
- let drawerLayout = null;
- let mainContent = null;
-
- let drawerWidth = 280;
- let autoHideWidth = 960;
- let forceFloating = false;
-
- let initialOffset = 0;
-
- const cp = this;
- cp.init = onInit;
- cp.create = onCreate;
-
- function onInit() {
- const view = cp.view();
- this.options().html = false;
- this.options().css = false;
- if (!isNaN(this.options().drawerWidth)) {
- drawerWidth = parseInt(this.options().drawerWidth);
- } else {
- const w = parseInt(view.attr('data-o-width'));
- if (!isNaN(w)) drawerWidth = w;
- }
- if (!isNaN(this.options().autoHideWidth)) {
- autoHideWidth = parseInt(this.options().autoHideWidth);
- } else {
- const w = parseInt(view.attr('data-o-hide-width'));
- if (!isNaN(w)) autoHideWidth = w;
- }
- }
-
- function onCreate() {
- drawerLayout = cp.view();
- mainContent = cp.options().mainContent;
- // add overlay for small screens when menu is open
- overlay = zuix.$(document.createElement('div'));
- overlay.css({
- 'position': 'fixed',
- 'top': 0,
- 'left': 0,
- 'bottom': 0,
- 'right': 0,
- 'z-index': 100,
- // '-ms-touch-action': 'none',
- // 'touch-action': 'none',
- 'background-color': 'rgba(0, 0, 0, 0.5)'
- }).on('click', function() {
- if (!isDrawerLocked) {
- closeDrawer();
- }
- }).hide();
- drawerLayout.parent().append(overlay.get());
-
- // set drawer style
- drawerLayout.css({
- 'position': 'fixed',
- 'overflow-y': 'auto',
- 'left': 0, 'width': drawerWidth + 'px', 'top': 0, 'bottom': 0,
- 'z-index': 101,
- // '-ms-touch-action': 'none',
- // 'touch-action': 'none',
- '-webkit-box-shadow': '8px 0 6px -6px rgba(0,0,0,0.25)',
- '-moz-box-shadow': '8px 0 6px -6px rgba(0,0,0,0.25)',
- 'box-shadow': '8px 0 6px -6px rgba(0,0,0,0.25)'
- }).attr('tabindex', 0);
-
- let isDragging = false;
- // handle gesture to open/close the drawer menu
- zuix.load('@lib/controllers/gesture-helper', {
- view: document.documentElement,
- on: {
- 'gesture:touch': function(e, tp) {
- if (isDrawerLocked) return;
- transitionOn();
- if (isDrawerOpen && tp.startX < drawerWidth) {
- initialOffset = drawerWidth - tp.startX;
- } else {
- initialOffset = 0;
- }
- },
- 'gesture:release': function(e, tp) {
- if (isDrawerLocked) return;
- if (isDragging) {
- isDragging = false;
- transitionOn();
- if (tp.velocity > 0) {
- openDrawer();
- } else {
- closeDrawer();
- }
- }
- },
- 'gesture:pan': function(e, tp) {
- // wait until horizontal scrolling gesture is detected (tp.scrollIntent() === 'horizontal')
- if (isDrawerLocked || tp.scrollIntent() !== 'horizontal') return;
- if ((isDragging || isDrawerOpen) && tp.x < drawerWidth || (!isDragging && tp.x < 50)) {
- if (!isDragging) {
- isDragging = true;
- }
- transitionOn();
- dragTo(tp);
- transitionOff();
- }
- }
- }
- });
-
- // public component methods
- cp.expose('toggle', function() {
- transitionOn();
- toggleDrawer();
- });
- cp.expose('open', function() {
- transitionOn();
- openDrawer();
- });
- cp.expose('close', function() {
- transitionOn();
- closeDrawer();
- });
- cp.expose('isOpen', isOpen);
- cp.expose('lock', function(locked) {
- if (locked == null) {
- return isDrawerLocked;
- }
- isDrawerLocked = locked;
- });
- cp.expose('float', function(floating) {
- if (floating == null) {
- return forceFloating;
- }
- forceFloating = floating;
- sizeCheck();
- });
-
- // close drawer if ESC key is pressed
- drawerLayout.on('keydown', function(evt) {
- evt = evt || window.event;
- if (evt.keyCode === 27) {
- closeDrawer();
- }
- });
-
- // detect screen size and set large/small layout
- sizeCheck();
- firstCheck = false;
-
- // listen to window resize event to make layout responsive
- window.addEventListener('resize', function() {
- sizeCheck();
- });
- }
-
- function openDrawer() {
- drawerLayout
- .visibility('initial')
- .css('left', 0)
- .get().focus();
- if (isSmallScreen) {
- drawerLayout.find('a').one('click', function() {
- closeDrawer();
- });
- overlay.css('opacity', 'initial');
- overlay.show();
- }
- if (!isDrawerOpen) {
- isDrawerOpen = true;
- cp.trigger('drawer:open', {smallScreen: isSmallScreen});
- }
- }
-
- function closeDrawer() {
- if (isSmallScreen) {
- transitionEnd(function() {
- if (!isDrawerOpen) {
- drawerLayout.visibility('hidden');
- }
- });
- drawerLayout.css('left', -drawerWidth + 'px');
- overlay.hide();
- if (isDrawerOpen) {
- isDrawerOpen = false;
- cp.trigger('drawer:close', {smallScreen: isSmallScreen});
- }
- }
- isDrawerOpen = false;
- drawerLayout.find('a').off('click');
- }
-
- function toggleDrawer() {
- if (isDrawerOpen) {
- closeDrawer();
- } else {
- openDrawer();
- }
- }
-
- function isOpen() {
- return isDrawerOpen;
- }
-
- function dragTo(tp) {
- let x = tp.x;
- if (x > 0 && x <= drawerWidth - initialOffset) {
- x = -drawerWidth + x + initialOffset;
- if (drawerLayout.visibility() === 'hidden') {
- drawerLayout.visibility('initial');
- }
- drawerLayout.css('left', x + 'px');
- if (overlay.display() === 'none') {
- overlay.show();
- }
- overlay.css('opacity', (drawerWidth + x) / drawerWidth);
- }
- }
-
- function sizeCheck() {
- const width = window.innerWidth || document.body.clientWidth;
- if (width < autoHideWidth || autoHideWidth === -1 || forceFloating) {
- if (!isSmallScreen || firstCheck) {
- isSmallScreen = true;
- isDrawerLocked = false;
- layoutChange();
- }
- closeDrawer();
- } else {
- if (isSmallScreen || firstCheck) {
- if (isSmallScreen) {
- overlay.hide();
- if (isDrawerOpen) {
- closeDrawer();
- }
- }
- isSmallScreen = false;
- isDrawerLocked = true;
- layoutChange();
- openDrawer();
- }
- }
- }
-
- function layoutChange() {
- if (!firstCheck) {
- transitionOn();
- }
- if (mainContent) {
- const leftPadding = parseFloat(getComputedStyle(mainContent.get(), null).getPropertyValue('padding-left'));
- if (!isSmallScreen) {
- mainContent.css({paddingLeft: (drawerWidth + leftPadding) + 'px'});
- } else {
- mainContent.css({paddingLeft: (leftPadding - drawerWidth) + 'px'});
- }
- }
- cp.trigger('layout:change', {
- smallScreen: isSmallScreen,
- drawerLocked: isDrawerLocked
- });
- }
-
- function transitionOn() {
- if (!isTransitionOn) {
- isTransitionOn = true;
- const transition = 'ease .15s';
- drawerLayout.css({
- 'transition-property': 'left',
- 'transition': transition
- });
- overlay.css({
- 'transition-property': 'opacity',
- 'transition': transition
- });
- }
- }
-
- function transitionOff() {
- if (isTransitionOn) {
- isTransitionOn = false;
- const transition = 'none';
- drawerLayout.css({
- 'transition': transition
- });
- overlay.css({
- 'transition': transition
- });
- }
- }
-
- function transitionEnd(callback) {
- drawerLayout.one('transitionend transitioncancel', function() {
- callback();
- });
- }
-}
-
-module.exports = DrawerLayout;
diff --git a/source/lib/1.1/controllers/gesture-helper.js b/source/lib/1.1/controllers/gesture-helper.js
deleted file mode 100644
index a79857e..0000000
--- a/source/lib/1.1/controllers/gesture-helper.js
+++ /dev/null
@@ -1,290 +0,0 @@
-/**
- * zUIx - Gesture Controller
- *
- * @version 1.0.1 (2018-08-21)
- * @author Gene
- *
- * @version 1.0.0 (2018-03-11)
- * @author Gene
- *
- */
-
-'use strict';
-
-function GestureHelper() {
- const SCROLL_MODE_NONE = 0;
- const SCROLL_MODE_HORIZONTAL = 1;
- const SCROLL_MODE_VERTICAL = 2;
- const GESTURE_TAP_TIMEOUT = 750;
-
- let scrollMode = SCROLL_MODE_NONE;
- let touchPointer;
- let ignoreSession = false;
- let passiveMode = true;
- let startGap = -1;
- let currentGesture;
- let swipeDirection;
- let speedMeter;
- let mouseButtonDown = false;
- let lastTapTime = new Date().getTime();
-
- // Math.sign Polyfill
- Math.sign = Math.sign || function(x) {
- return ((x>0)-(x<0))||+x;
- };
-
- const cp = this;
- cp.init = function() {
- const options = cp.options();
- options.html = false;
- options.css = false;
- passiveMode = options.passive !== false && passiveMode;
- startGap = options.startGap || startGap;
- };
-
- cp.create = function() {
- // TODO: should use event "capturing" instead of "bubbling"
- const target = passiveMode ? zuix.$(window) : cp.view();
- target.on('dragstart', {
- handler: function(e) {
- if (!ignoreSession && !passiveMode) {
- e.preventDefault();
- }
- },
- passive: passiveMode
- }).on('mousedown', {
- handler: function(e) {
- const targetElement = zuix.$(e.target);
- ignoreSession = document.elementsFromPoint(e.x, e.y).indexOf(cp.view().get()) === -1;
- if (!ignoreSession && e.which === 1 && targetElement.parent('[class*="no-gesture"]').length() === 0 && e.x > startGap) {
- mouseButtonDown = true;
- ignoreSession = false;
- // targetElement.css('touch-action', 'none');
- // TODO: add 'cp.options().preventDrag'
- targetElement.get().draggable = false;
- touchStart(e, e.x, e.y);
- } else ignoreSession = true;
- },
- passive: passiveMode
- }).on('mousemove', {
- handler: function(e) {
- if (!ignoreSession && mouseButtonDown) {
- touchMove(e, e.x, e.y);
- }
- },
- passive: passiveMode
- }).on('mouseup', function(e) {
- if (e.which === 1 && !ignoreSession) {
- mouseButtonDown = false;
- touchStop(e);
- }
- }).on('touchstart', {
- handler: function(e) {
- const targetElement = zuix.$(e.target);
- ignoreSession = document.elementsFromPoint(e.touches[0].clientX, e.touches[0].clientY).indexOf(cp.view().get()) === -1;
- if (!ignoreSession && targetElement.parent('[class*="no-gesture"]').length() === 0 && e.touches[0].clientX > startGap) {
- ignoreSession = false;
- // targetElement.css('touch-action', 'none');
- targetElement.get().draggable = false;
- touchStart(e, e.touches[0].clientX, e.touches[0].clientY);
- } else ignoreSession = true;
- },
- passive: passiveMode
- }).on('touchmove', {
- handler: function(e) {
- if (!ignoreSession) {
- touchMove(e, e.touches[0].clientX, e.touches[0].clientY);
- }
- },
- passive: passiveMode
- }).on('touchend', function(e) {
- if (!ignoreSession) {
- touchStop(e);
- }
- });
- };
-
- function touchStart(e, x, y) {
- const timestamp = new Date().getTime();
- touchPointer = {
- // original event + cancel method
- event: e,
- cancel: function() {
- touchPointer.event.cancelBubble = true;
- if (!passiveMode) {
- touchPointer.event.preventDefault();
- }
- },
- // initial touch position
- startX: x,
- startY: y,
- startTime: timestamp,
- // relative movement
- shiftX: 0,
- shiftY: 0,
- endTime: 0,
- // relative movement at every step
- stepX: 0,
- stepY: 0,
- stepTime: timestamp,
- // actual position and speed
- velocity: 0,
- x: x,
- y: y,
- scrollIntent: function() {
- switch (scrollMode) {
- case SCROLL_MODE_HORIZONTAL:
- return 'horizontal';
- case SCROLL_MODE_VERTICAL:
- return 'vertical';
- }
- return false;
- }
- };
- speedMeter = speedObserver(touchPointer);
- cp.trigger('gesture:touch', touchPointer);
- }
- function touchMove(e, x, y) {
- if (touchPointer != null) {
- touchPointer.event = e;
- touchPointer.x = x;
- touchPointer.y = y;
- touchPointer.shiftX = (x - touchPointer.startX);
- touchPointer.shiftY = (y - touchPointer.startY);
- touchPointer.endTime = new Date().getTime();
- // detect actual gesture
- const gesture = detectGesture();
- if (gesture != null && currentGesture !== false) {
- if (swipeDirection != null && swipeDirection !== touchPointer.direction) {
- // stop gesture detection if not coherent
- currentGesture = false;
- swipeDirection = 'cancel';
- } else {
- currentGesture = gesture;
- swipeDirection = touchPointer.direction;
- }
- }
- cp.trigger('gesture:pan', touchPointer);
- }
- }
-
- function touchStop(e) {
- if (touchPointer != null) {
- speedMeter.update();
- touchPointer.event = e;
- if (currentGesture == null) {
- currentGesture = detectGesture();
- }
- if (currentGesture != null && currentGesture !== false) {
- cp.trigger(currentGesture, touchPointer);
- }
- }
- cp.trigger('gesture:release', touchPointer);
- scrollMode = SCROLL_MODE_NONE;
- swipeDirection = null;
- currentGesture = null;
- touchPointer = null;
- }
-
- function detectGesture() {
- let gesture = null;
- // update touchPointer.velocity data
- speedMeter.update();
- // update tap gesture and swipe direction
- const minStepDistance = 2; // <--- !!! this should not be greater than 2 for best performance
- const angle = Math.atan2(touchPointer.shiftY-touchPointer.stepY, touchPointer.shiftX-touchPointer.stepX) * 180 / Math.PI;
- if ((touchPointer.shiftX) === 0 && (touchPointer.shiftY) === 0 && touchPointer.startTime > lastTapTime+100 && touchPointer.stepTime < GESTURE_TAP_TIMEOUT) {
- // gesture TAP
- lastTapTime = new Date().getTime();
- gesture = 'gesture:tap';
- } else if ((scrollMode === SCROLL_MODE_NONE || scrollMode === SCROLL_MODE_HORIZONTAL) &&
- touchPointer.stepDistance > minStepDistance && ((angle >= 135 && angle <= 180) || (angle >= -180 && angle <= -135))) {
- // gesture swipe RIGHT
- touchPointer.direction = 'left';
- gesture = 'gesture:swipe';
- scrollMode = SCROLL_MODE_HORIZONTAL;
- } else if ((scrollMode === SCROLL_MODE_NONE || scrollMode === SCROLL_MODE_HORIZONTAL) &&
- touchPointer.stepDistance > minStepDistance && ((angle >= 0 && angle <= 45) || (angle >= -45 && angle < 0))) {
- // gesture swipe LEFT
- touchPointer.direction = 'right';
- gesture = 'gesture:swipe';
- scrollMode = SCROLL_MODE_HORIZONTAL;
- } else if ((scrollMode === SCROLL_MODE_NONE || scrollMode === SCROLL_MODE_VERTICAL) &&
- touchPointer.stepDistance > minStepDistance && (angle > 45 && angle < 135)) {
- // gesture swipe UP
- touchPointer.direction = 'down';
- gesture = 'gesture:swipe';
- scrollMode = SCROLL_MODE_VERTICAL;
- } else if ((scrollMode === SCROLL_MODE_NONE || scrollMode === SCROLL_MODE_VERTICAL) &&
- touchPointer.stepDistance > minStepDistance && (angle > -135 && angle < -45)) {
- // gesture swipe DOWN
- touchPointer.direction = 'up';
- gesture = 'gesture:swipe';
- scrollMode = SCROLL_MODE_VERTICAL;
- }
- // reset touch step data
- if (touchPointer.stepDistance > minStepDistance) {
- speedMeter.step();
- }
- return gesture;
- }
-
- function speedObserver(tp) {
- let direction;
- const startData = {
- time: 0,
- x: 0, y: 0
- };
- const stopData = {
- time: 0,
- x: 0, y: 0
- };
- const step = function() {
- tp.stepTime = tp.endTime;
- tp.stepX = tp.shiftX;
- tp.stepY = tp.shiftY;
- tp.stepSpeed = 0;
- tp.stepDistance = 0;
- };
- const reset = function() {
- // direction changed: reset
- direction = tp.direction;
- startData.time = new Date().getTime();
- startData.x = tp.x;
- startData.y = tp.y;
- tp.velocity = 0;
- tp.distance = 0;
- step();
- };
- reset();
- return {
- update: function() {
- stopData.time = new Date().getTime();
- stopData.x = tp.x;
- stopData.y = tp.y;
- if (direction != null && direction !== tp.direction) {
- reset();
- return;
- } else if (direction == null && tp.direction !== direction) {
- direction = tp.direction;
- }
- const elapsedTime = stopData.time - startData.time;
- let l = {x: (stopData.x - startData.x), y: (stopData.y - startData.y)};
- const d = Math.sqrt(l.x*l.x + l.y*l.y);
- tp.distance = d;
- // movement speed in px/ms
- const speed = (d / elapsedTime);
- // add the direction info
- tp.velocity = (tp.direction === 'left' || tp.direction === 'up') ? -speed : speed;
- // update "step" speed data
- tp.stepTime = (tp.endTime-tp.stepTime);
- l = {x: (tp.shiftX-tp.stepX), y: (tp.shiftY-tp.stepY)};
- tp.stepDistance = Math.sqrt(l.x*l.x+l.y*l.y);
- tp.stepSpeed = (tp.stepDistance / tp.stepTime);
- },
- step: step
- };
- }
-}
-
-module.exports = GestureHelper;
diff --git a/source/lib/1.1/controllers/header-auto-hide.js b/source/lib/1.1/controllers/header-auto-hide.js
deleted file mode 100644
index 8c09c33..0000000
--- a/source/lib/1.1/controllers/header-auto-hide.js
+++ /dev/null
@@ -1,171 +0,0 @@
-/**
- * zUIx - Header Auto Hide (on scroll =))
- *
- * @version 1.2.0 (2022-03-21)
- * @author Gene
- *
- * @version 1.1.0 (2018-07-27)
- * @author Gene
- *
- * @version 1.0.0 (2018-07-25)
- * @author Gene
- *
- */
-
-'use strict';
-
-function HeaderAutoHide(cp) {
- let headerBar;
- let footerBar;
- let showEnd;
- let headerHeight = 0;
- let footerHeight = 0;
- let autoHideOffset = 0;
- let scrollHelper;
-
- cp.init = function() {
- cp.options().css = false;
- cp.options().html = false;
- };
-
- cp.create = function() {
- showEnd = cp.options().showEnd || cp.view().attr('data-o-show-end') === 'true';
- headerBar = cp.options().header || cp.view().attr('data-o-header');
- if (headerBar) {
- headerBar = zuix.field(headerBar);
- } else {
- throw new Error('Header element not specified.');
- }
- if (headerBar.length() === 0) {
- throw new Error('Header element not found: "' + headerBar + '".');
- }
- headerHeight = headerBar.position().rect.height;
- const hp = getComputedStyle(headerBar.get()).position;
- if (hp !== 'fixed' && hp !== 'absolute') {
- autoHideOffset = headerHeight;
- }
- const scrollerParent = cp.view();
- addHeaderStyle();
- // footer options parsing
- const footer = cp.options().footer || cp.view().attr('data-o-footer');
- if (footer != null) {
- footerBar = zuix.field(footer);
- footerBar.css({position: 'fixed', zIndex: 1});
- footerHeight = footerBar.position().rect.height;
- addFooterStyle();
- }
- zuix.load('@lib/controllers/scroll-helper', {
- view: scrollerParent,
- on: {
- 'scroll:change': function(e, data) {
- if (data.event === 'scroll' && data.info.viewport.y < -autoHideOffset) {
- if (data.info.shift.y < -4) {
- // scrolling up
- if (autoHideOffset > 0 && headerBar.css('position') !== 'fixed') {
- scrollerParent.css({paddingTop: headerHeight + 'px'});
- headerBar.hide().css({position: 'fixed', zIndex: 1});
- }
- hideBars();
- } else if (data.info.shift.y > 4) {
- // scrolling down
- headerBar.show();
- showBars();
- }
- } else if (data.event === 'hit-bottom' && showEnd) {
- headerBar.show();
- showBars();
- } else if (autoHideOffset > 0 && data.info.viewport.y === 0) {
- scrollerParent.css({paddingTop: null});
- headerBar.show().css({position: null, zIndex: null});
- }
- cp.trigger('page:scroll', data);
- }
- },
- ready: function(ctx) {
- scrollHelper = ctx;
- cp.expose('scroll', {get: function() {
- return scrollHelper;
- }});
- cp.trigger('scroll:ready', scrollHelper);
- }
- });
- cp.expose('show', showBars);
- cp.expose('hide', hideBars);
- };
-
- function showBars() {
- if (headerBar != null && headerBar.hasClass('header-collapse')) {
- headerBar.removeClass('header-collapse')
- .addClass('header-expand');
- }
- if (footerBar != null && footerBar.hasClass('footer-collapse')) {
- footerBar.removeClass('footer-collapse')
- .addClass('footer-expand');
- }
- if (scrollHelper) {
- scrollHelper.check();
- }
- }
-
- function hideBars() {
- if (!headerBar.hasClass('header-collapse')) {
- headerBar.removeClass('header-expand')
- .addClass('header-collapse');
- }
- if (footerBar != null && !footerBar.hasClass('footer-collapse')) {
- footerBar.removeClass('footer-expand')
- .addClass('footer-collapse');
- }
- }
-
- function addHeaderStyle() {
- zuix.$.appendCss('\n' +
- '/* Header bar shrink/expand */\n' +
- '@keyframes header-collapse-anim {\n' +
- ' from { top: 0; }\n' +
- ' to { top: -'+headerHeight+'px; }\n' +
- '}\n' +
- '@keyframes header-expand-anim {\n' +
- ' from { top: -'+headerHeight+'px; }\n' +
- ' to { top: 0; }\n' +
- '}\n' +
- '.header-collapse {\n' +
- ' animation-fill-mode: forwards;\n' +
- ' animation-name: header-collapse-anim;\n' +
- ' animation-duration: 0.5s;\n' +
- ' top: -'+headerHeight+'px;\n' +
- '}\n' +
- '.header-expand {\n' +
- ' animation-fill-mode: forwards;\n' +
- ' animation-name: header-expand-anim;\n' +
- ' animation-duration: 0.5s;\n' +
- ' top: 0px;\n' +
- '}\n', null, 'onscroll_header_hide_show');
- }
- function addFooterStyle() {
- zuix.$.appendCss('\n' +
- '/* Footer bar shrink/expand */\n' +
- '@keyframes footer-collapse-anim {\n' +
- ' from { bottom: 0; }\n' +
- ' to { bottom: -'+footerHeight+'px; }\n' +
- '}\n' +
- '@keyframes footer-expand-anim {\n' +
- ' from { bottom: -'+footerHeight+'px; }\n' +
- ' to { bottom: 0; }\n' +
- '}\n' +
- '.footer-collapse {\n' +
- ' animation-fill-mode: forwards;\n' +
- ' animation-name: footer-collapse-anim;\n' +
- ' animation-duration: 0.5s;\n' +
- ' bottom: -'+footerHeight+'px;\n' +
- '}\n' +
- '.footer-expand {\n' +
- ' animation-fill-mode: forwards;\n' +
- ' animation-name: footer-expand-anim;\n' +
- ' animation-duration: 0.5s;\n' +
- ' bottom: 0;\n' +
- '}\n', null, 'zkit_onscroll_hide_show');
- }
-}
-
-module.exports = HeaderAutoHide;
diff --git a/source/lib/1.1/controllers/list-view.js b/source/lib/1.1/controllers/list-view.js
deleted file mode 100644
index 460354f..0000000
--- a/source/lib/1.1/controllers/list-view.js
+++ /dev/null
@@ -1,190 +0,0 @@
-/**
- * zUIx - ListView Component
- *
- * @version 1.0.3 (2017-06-11)
- * @author Gene
- *
- */
-
-zuix.controller(function(cp) {
- // Set list type: [ 'full', 'paged', 'incremental' ] (default: 'full')
- const MODE_FULL = 'full';
- const MODE_PAGED = 'paged';
- const MODE_INCREMENTAL = 'incremental';
- let listMode = MODE_FULL;
-
- // How many items per page to show/add (for 'paged' and 'incremental' modes) (default: 30)
- let itemsPerPage = 30;
-
- // Structure used to store component state info
- const statusInfo = {
- page: {
- current: 0,
- count: 0
- },
- items: {
- loaded: 0,
- count: 0
- }
- };
-
- // Objects data persistence
- const listItems = [];
-
- cp.init = function() {
- cp.options().html = false;
- cp.options().css = false;
- };
-
- // TODO: describe the model and options used by this component
- cp.create = function() {
- // exposed methods through this component context
- cp.expose('config', configure);
- cp.expose('page', setPage);
- cp.expose('status', triggerStatus);
- cp.expose('more', function() {
- statusInfo.page.current++;
- cp.update();
- });
- cp.expose('clear', clear);
- // init
- clear();
- };
-
- cp.destroy = function() {
- clear();
- };
-
- cp.update = function() {
- const modelList = cp.model().itemList;
- if (modelList == null) return;
-
- statusInfo.page.count = pageCount();
- statusInfo.items.count = modelList.length;
-
- const startItem = statusInfo.page.current*itemsPerPage;
- let i = 0;
- if (listMode === MODE_PAGED && startItem > 0) {
- i = startItem;
- }
-
- for ( ; i < modelList.length; i++) {
- const dataItem = cp.model().getItem(i, modelList[i]);
- const id = dataItem.itemId;
-
- if ((listMode === MODE_FULL) ||
- (listMode === MODE_PAGED && i >= startItem && i < startItem+itemsPerPage) ||
- (listMode === MODE_INCREMENTAL && i < startItem+itemsPerPage)) {
- if (typeof listItems[id] === 'undefined') {
- const container = document.createElement('div');
- zuix.loadComponent(container, dataItem.componentId, dataItem.type || 'view', dataItem.options);
- // use a responsive CSS class if provided
- if (dataItem.options.className != null) {
- // this class should set the min-height property
- container.classList.add(dataItem.options.className);
- } else {
- // set a temporary height for the container (for lazy load to work properly)
- container.style['min-height'] = dataItem.options.height || '48px';
- }
- // register a callback to know when the component is actually loaded
- const listener = function(itemIndex, el) {
- const l = function() {
- el.removeEventListener('component:ready', l);
- // trigger status update event
- statusInfo.items.loaded++;
- triggerStatus();
- // if all components have been loaded, then trigger 'complete' event
- if (itemIndex === modelList.length - 1) {
- cp.trigger('complete');
- }
- };
- container.addEventListener('component:ready', l);
- }(i, container);
- // keep track of already allocated items
- listItems[id] = container;
- // add item container to the list-view, the component will be lazy-loaded later as needed
- cp.view().insert(i-startItem, listItems[id]);
- } else if (!dataItem.options.static) {
- // update existing item model's data
- // TODO: should check if the data in the model has changed before calling this
- // TODO: should also call the `model` method in the `zuix.context` callback
- zuix.context(listItems[id]).model(dataItem.options.model);
- }
- }
-
- if (typeof listItems[id] !== 'undefined') {
- if ((listMode === MODE_PAGED && i < statusInfo.page.current * itemsPerPage) ||
- (listMode !== MODE_FULL && i > ((statusInfo.page.current + 1) * itemsPerPage - 1))) {
- listItems[id].style['display'] = 'none';
- } else {
- listItems[id].style['display'] = '';
- }
- }
-
- if ((listMode === MODE_PAGED || listMode === MODE_INCREMENTAL) && i > startItem+itemsPerPage) {
- break;
- }
- }
-
- // trigger status update event
- triggerStatus();
-
- // `componentize` is required to process lazy-loaded items
- zuix.componentize(cp.view());
- };
-
- function setPage(number) {
- if (!isNaN(number) && number >= 0 && number < pageCount()) {
- if (listMode == MODE_PAGED) {
- clearPage(statusInfo.page.current);
- }
- statusInfo.page.current = parseInt(number);
- cp.update();
- }
- return statusInfo.page.current;
- }
-
- function clearPage(number) {
- const modelList = cp.model().itemList;
- if (modelList == null) return;
- const startItem = number*itemsPerPage;
- for (let i = startItem; i < listItems.length && i < startItem+itemsPerPage; i++) {
- const dataItem = cp.model().getItem(i, modelList[i]);
- const id = dataItem.itemId;
- if (typeof listItems[id] !== 'undefined') {
- listItems[id].style['display'] = 'none';
- }
- }
- }
-
- function triggerStatus() {
- cp.trigger('status', statusInfo);
- }
-
- function pageCount() {
- return Math.ceil(cp.model().itemList.length / itemsPerPage);
- }
-
- function configure(options) {
- if (options.itemsPerPage != null) {
- itemsPerPage = options.itemsPerPage;
- }
- if (options.listMode != null) {
- listMode = options.listMode;
- }
- }
-
- function clear() {
- // dispose components
- for (let i = 0; i < listItems.length; i++) {
- zuix.unload(listItems[i]);
- }
- listItems.length = 0;
- statusInfo.page.current = 0;
- statusInfo.page.count = 0;
- statusInfo.items.loaded = 0;
- statusInfo.items.count = 0;
- // clear the view
- cp.view().html('');
- }
-});
diff --git a/source/lib/1.1/controllers/mdl-button.js b/source/lib/1.1/controllers/mdl-button.js
deleted file mode 100644
index 36e02f5..0000000
--- a/source/lib/1.1/controllers/mdl-button.js
+++ /dev/null
@@ -1,38 +0,0 @@
-'use strict';
-
-/**
- * MdlButton class.
- *
- * @author Gene
- * @version 1.0.0 (2021-12-19)
- *
- * @constructor
- * @this {ContextController}
- */
-function MdlButton() {
- this.create = () => {
- const view = this.view();
- const options = this.options();
- const type = options.type || 'raised';
- view.addClass('mdl-button mdl-js-button mdl-button--' + type + ' mdl-js-ripple-effect');
- if (options.class) {
- const classes = options.class.split(' ');
- classes.forEach((c) => {
- view.addClass('mdl-button--' + c);
- });
- }
- initializeMdl(view);
- };
-
- function initializeMdl(view) {
- // initializes MDL component as soon as MDL library is available
- zuix.activeRefresh(view, view, null, ($view, $element, data, nextCallback) => {
- if (window['componentHandler']) {
- componentHandler.upgradeElements($view.get());
- } else {
- nextCallback(data, 100, true);
- }
- }).start();
- }
-}
-module.exports = MdlButton;
diff --git a/source/lib/1.1/controllers/mdl-checkbox.js b/source/lib/1.1/controllers/mdl-checkbox.js
deleted file mode 100644
index 7e354e1..0000000
--- a/source/lib/1.1/controllers/mdl-checkbox.js
+++ /dev/null
@@ -1,90 +0,0 @@
-'use strict';
-
-/**
- * MdlCheckbox class.
- *
- * @author Gene
- * @version 1.0.0 (2021-12-19)
- *
- * @constructor
- * @this {ContextController}
- */
-function MdlCheckbox() {
- const cp = this;
- let view;
- cp.create = onCreate;
-
- function onCreate() {
- view = cp.view();
- view.addClass('mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect')
- .css({margin: '12px'});
- view.find('input').addClass('mdl-checkbox__input');
- let textNode;
- zuix.$.each(view.get().childNodes, (i, n) => {
- if (n.nodeType === 3 && n.nodeValue.trim().replace('\n', '').length > 0) {
- textNode = n;
- }
- return textNode == null; // continue iterating if textNode is null
- });
- if (textNode) {
- const text = textNode.nodeValue;
- view.get().removeChild(textNode);
- view.append('' + text + '');
- }
- // Exposes public methods
- cp.expose('checked', {
- get() {
- return checked();
- },
- set(v) {
- checked(v);
- }
- });
- cp.expose('disabled', {
- get() {
- return disabled();
- },
- set(v) {
- disabled(v);
- }
- });
- initializeMdl(view);
- }
-
- function checked(cv) {
- if (cv != null) {
- if (cv && !view.hasClass('is-checked')) {
- view.get().click();
- } else if (cv === false && view.hasClass('is-checked')) {
- view.get().click();
- }
- }
- return cp.view().hasClass('is-checked');
- }
-
- function disabled(cv) {
- if (cv != null) {
- if (cv) {
- view.addClass('is-disabled')
- .find('input').attr('disabled', '');
- } else {
- view.removeClass('is-disabled')
- .find('input').attr('disabled', null);
- }
- }
- return view.hasClass('is-disabled');
- }
-
- function initializeMdl(view) {
- // initializes MDL component as soon as MDL library is available
- zuix.activeRefresh(view, view, null, ($view, $element, data, nextCallback) => {
- if (window['componentHandler']) {
- componentHandler.upgradeElements($view.get());
- } else {
- nextCallback(data, 100, true);
- }
- }).start();
- }
-}
-
-module.exports = MdlCheckbox;
diff --git a/source/lib/1.1/controllers/mdl-menu.js b/source/lib/1.1/controllers/mdl-menu.js
deleted file mode 100644
index 86cbed0..0000000
--- a/source/lib/1.1/controllers/mdl-menu.js
+++ /dev/null
@@ -1,136 +0,0 @@
-'use strict';
-
-/**
- * MdlMenu class.
- *
- * @author Gene
- * @version 1.0.0 (2021-12-19)
- *
- * @constructor
- * @this {ContextController}
- */
-function MdlMenu() {
- const cp = this;
- cp.init = onInit;
- cp.create = onCreate;
-
- function onInit() {
- this.options().css = 'ul{ margin:0 !important; padding:0 !important; } li{width:100%} li[disabled]{ pointer-events: none; } a{text-decoration: none;}';
- }
-
- function onCreate() {
- // position relative must be set on the container
- // in order to make MaterialMenu positioning work properly
- this.view().css('position', 'relative');
- const position = this.options().position || 'unaligned';
- // generate unique identifier for this instance
- const menuId = 'menu-' + this.context.contextId;
- // add required MDL classes to elements
- const ul = this.view('ul');
- ul.addClass('mdl-menu mdl-js-menu mdl-js-ripple-effect mdl-menu--' + position)
- .attr('for', menuId);
- ul.find('li').on('click', function(e, $li) {
- if (e.target === $li.get()) {
- this.find('a').each((i, el, $el) => {
- el.click();
- });
- }
- });
- this.view('li')
- .addClass('mdl-menu__item mdl-menu__item--full-bleed-divider')
- .on('click', function(e, $el) {
- // trigger a custom event when option is selected,
- // the 'action' attribute of the clicked element
- // is used to pass custom data
- cp.trigger('menu:select', {action: $el.attr('action'), $el});
- });
- let a = this.view('a');
- if (a.length() >= 1) {
- a = a.eq(a.length() - 1);
- a.attr('id', menuId)
- .addClass('mdl-button mdl-js-button mdl-js-ripple-effect')
- .on('click', function() {
- const menuPosition = guessPosition(cp.options(), this.position());
- if (menuPosition) {
- const positionClasses = 'mdl-menu--bottom-left mdl-menu--bottom-right mdl-menu--top-left mdl-menu--top-right mdl-menu--unaligned';
- ul.removeClass(positionClasses)
- .addClass(menuPosition);
- ul.prev().removeClass(positionClasses)
- .addClass(menuPosition);
- // reset container position as a work-around to MaterialMenu bug
- cp.view('div.mdl-menu__container').css({
- top: '', left: '', right: '', bottom: ''
- });
- }
- });
- } else {
- return false;
- }
-
- // Upgrade MDL elements
- zuix.activeRefresh(cp.view(), cp.view(), null, ($view, $element, data, nextCallback) => {
- if (window['componentHandler']) {
- // patch MaterialMenu to implement show/hide events
- if (MaterialMenu && !MaterialMenu.prototype._hide) {
- MaterialMenu.prototype._hide = MaterialMenu.prototype.hide;
- MaterialMenu.prototype.hide = function() {
- if (this.container_.classList.contains(this.CssClasses_.IS_VISIBLE)) {
- cp.trigger('menu:hide');
- this._hide();
- }
- };
- }
- if (MaterialMenu && !MaterialMenu.prototype._show) {
- MaterialMenu.prototype._show = MaterialMenu.prototype.show;
- MaterialMenu.prototype.show = function(p) {
- cp.trigger('menu:show');
- this._show(p);
- };
- }
- componentHandler.upgradeElements(ul.get());
- componentHandler.upgradeElements(a.get());
- // a little patch to FAB buttons
- if (a.attr('z-load')) {
- zuix.context(a, () => {
- const isMini = a.hasClass('mdl-button--mini-fab');
- const isIcon = a.hasClass('mdl-button--icon');
- a.find('.material-icons').css({
- transition: 'transform .2s ease-in-out',
- transform: 'translate(0,0)', WebkitTransform: 'translate(0,0)',
- marginTop: isMini ? '8px' : isIcon ? '0' : '16px',
- marginLeft: isMini || isIcon ? '1px' : '2px',
- position: 'initial'
- });
- });
- }
- } else {
- nextCallback(data, 100, true);
- }
- }).start();
- }
-
- /**
- * @param {ContextOptions|any} options
- * @param {ElementPosition} p
- */
- function guessPosition(options, p) {
- // Auto-position menu if no 'position' option was passed
- if (options.position == null) {
- // auto-positioning
- let menuPosition = 'mdl-menu--';
- if (p.frame.dy < 0.5) {
- menuPosition += 'bottom-';
- } else {
- menuPosition += 'top-';
- }
- if (p.frame.dx < 0.5) {
- menuPosition += 'left';
- } else {
- menuPosition += 'right';
- }
- return menuPosition;
- }
- }
-}
-
-module.exports = MdlMenu;
diff --git a/source/lib/1.1/controllers/scroll-helper.js b/source/lib/1.1/controllers/scroll-helper.js
deleted file mode 100644
index 9d8c0fc..0000000
--- a/source/lib/1.1/controllers/scroll-helper.js
+++ /dev/null
@@ -1,242 +0,0 @@
-/**
- * ScrollHelper Controller class.
- *
- * @version 1.1.0 (2018-04-22)
- * @author Gene
- *
- * @version 1.0.1 (2017-06-16)
- * @author Gene
- *
- * @constructor
- * @this {ContextController}
- */
-function ScrollHelper() {
- const scrollInfo = {
- timestamp: 0,
- size: {
- width: 0,
- height: 0
- },
- viewport: {
- x: 0,
- y: 0,
- width: 0,
- height: 0
- }
- };
- let updateTimeout;
- let watchList;
- let watchCallback;
- let scrollToEndTs = 0;
- let frameSkipTs;
-
- const cp = this;
- cp.init = onInit;
- cp.create = onCreate;
-
- function onInit() {
- cp.options().html = false;
- cp.options().css = false;
- }
-
- function onCreate() {
- if (cp.view().get() === document.body) {
- if (cp.options().throttle > 0) {
- window.onscroll = throttle(scrollCheck, cp.options().throttle);
- } else {
- window.onscroll = scrollCheck;
- }
- } else {
- if (cp.options().throttle > 0) {
- cp.view().on('scroll', {
- handler: throttle(scrollCheck, cp.options().throttle),
- passive: true
- });
- } else {
- cp.view().on('scroll', {
- handler: scrollCheck,
- passive: true
- });
- }
- }
- cp.expose('watch', function(filter, callback) {
- setWatchList(filter, callback);
- return cp.context;
- });
- cp.expose('scrollStart', function(duration) {
- if (duration == null) duration = -1;
- scrollTo(0, duration);
- return cp.context;
- }).expose('scrollEnd', function(duration) {
- if (duration == null) duration = -1;
- scrollTo(scrollInfo.size.height, duration);
- return cp.context;
- }).expose('scrollTo', function(to, duration) {
- if (duration == null) duration = -1;
- scrollTo(to, duration);
- return cp.context;
- }).expose('info', function() {
- return scrollInfo;
- }).expose('check', scrollCheck);
- // TODO: that's a temp hack to force measure at start
- //scrollTo(5, -1);
- //scrollTo(0, 200);
- }
-
- function scrollCheck() {
- // TODO: implement code for horizontal scroll as well
-
- if (updateTimeout != null) {
- clearTimeout(updateTimeout);
- }
- const now = new Date().getTime();
- if (now - scrollInfo.timestamp > 100) {
- updateScrollInfo();
- } else {
- updateTimeout = setTimeout(function() {
- updateScrollInfo();
- }, 99);
- }
-
- if (now < scrollToEndTs && now-frameSkipTs < 66) {
- return;
- }
- frameSkipTs = now;
-
- const visibleClass = 'scroll-helper-visible';
- if (watchList != null && watchCallback != null) {
- watchList.each(function(i, el) {
- const position = this.position();
- if (!position.visible && this.hasClass(visibleClass)) {
- this.removeClass(visibleClass);
- position.event = 'exit';
- } else if (!position.visible) {
- position.event = 'off-scroll';
- } else if (position.visible) {
- if (!this.hasClass(visibleClass)) {
- position.event = 'enter';
- this.addClass(visibleClass);
- } else position.event = 'scroll';
- } else return;
- watchCallback(this, position);
- });
- }
- }
-
- function setWatchList(filter, callback) {
- if (filter != null) {
- watchList = cp.view(filter);
- watchCallback = callback;
- } else {
- watchList = null;
- watchCallback = null;
- }
- }
-
- function updateScrollInfo() {
- const scrollable = cp.view().get();
- const rect = scrollable.getBoundingClientRect();
- const vp = {
- top: rect.top,
- right: rect.right,
- bottom: rect.bottom,
- left: rect.left,
- width: rect.width,
- height: rect.height,
- x: rect.x,
- y: rect.y
- };
- vp.y = -cp.view().get().scrollTop || (vp.y ? vp.y : 0);
- vp.height = cp.view().get().scrollHeight || (vp.height ? vp.height : 0);
- scrollInfo.size.width = vp.width;
- scrollInfo.size.height = vp.height;
- if (scrollable === document.body) {
- scrollInfo.size.width = document.body.offsetWidth;
- scrollInfo.size.height = document.body.offsetHeight;
- scrollInfo.viewport.width = document.documentElement.clientWidth || scrollInfo.size.width;
- scrollInfo.viewport.height = document.documentElement.clientHeight || scrollInfo.size.height;
- } else {
- scrollInfo.viewport.width = scrollable.offsetWidth;
- scrollInfo.viewport.height = scrollable.offsetHeight;
- }
- scrollInfo.timestamp = new Date().getTime();
- scrollInfo.shift = {
- x: vp.x - scrollInfo.viewport.x,
- y: vp.y - scrollInfo.viewport.y
- };
- scrollInfo.viewport.x = vp.x;
- scrollInfo.viewport.y = vp.y;
- const endScroll = scrollInfo.size.height+vp.y-scrollInfo.viewport.height;
- if ((endScroll === 0 || vp.y === 0)) {
- cp.trigger('scroll:change', {event: vp.y === 0 ? 'hit-top' : 'hit-bottom', info: scrollInfo});
- } else {
- cp.trigger('scroll:change', {event: 'scroll', info: scrollInfo});
- }
- }
-
- function scrollTo(to, duration) {
- if (to instanceof Element || to instanceof zuix.$.ZxQuery) {
- to = zuix.$(to).position().y - scrollInfo.viewport.y;
- }
- if (duration === -1) {
- return setScroll(to);
- }
- const currentTs = Date.now();
- if (duration != null) {
- scrollToEndTs = currentTs + duration;
- }
- duration = scrollToEndTs-currentTs;
-
- const el = cp.view().get();
- let scrollTop = 0;
- if (el === document.body) {
- scrollTop = (window.pageYOffset !== undefined) ?
- window.pageYOffset :
- (document.documentElement || document.body.parentNode || document.body).scrollTop;
- } else scrollTop = el.scrollTop;
-
- const difference = to - scrollTop;
- if (duration <= 0 || difference === 0) {
- setScroll(to);
- scrollCheck();
- return;
- }
-
- const offset = scrollTop + (difference / duration * 33);
- requestAnimationFrame(function() {
- setScroll(offset);
- scrollTo(to);
- });
- }
-
- function setScroll(to) {
- const el = cp.view().get();
- if (el === document.body) {
- document.documentElement.scrollTop = to;
- document.body.scrollTop = to;
- } else el.scrollTop = to;
- }
-}
-
-function throttle(func, limit) {
- let lastFunc = void 0;
- let lastRan = void 0;
- return function() {
- const context = this;
- const args = arguments;
- if (!lastRan) {
- func.apply(context, args);
- lastRan = Date.now();
- } else {
- clearTimeout(lastFunc);
- lastFunc = setTimeout(function() {
- if (Date.now() - lastRan >= limit) {
- func.apply(context, args);
- lastRan = Date.now();
- }
- }, limit - (Date.now() - lastRan));
- }
- };
-}
-
-module.exports = ScrollHelper;
diff --git a/source/lib/1.1/controllers/view-pager.js b/source/lib/1.1/controllers/view-pager.js
deleted file mode 100644
index 5af3080..0000000
--- a/source/lib/1.1/controllers/view-pager.js
+++ /dev/null
@@ -1,693 +0,0 @@
-/**
- * zUIx - ViewPager Component
- *
- * @version 1.0.6 (2018-08-24)
- * @author Gene
- *
- * @version 1.0.5 (2018-08-21)
- * @author Gene
- *
- * @version 1.0.4 (2018-06-29)
- * @author Gene
- *
- * @version 1.0.3 (2018-06-26)
- * @author Gene
- *
- * @version 1.0.1 (2018-02-12)
- * @author Gene
- *
- */
-
-'use strict';
-
-function ViewPager() {
- const DEFAULT_PAGE_TRANSITION = {duration: 0.3, easing: 'ease'};
- const BOUNDARY_HIT_EASING = 'cubic-bezier(0.0,0.1,0.35,1.1)';
- const DECELERATE_SCROLL_EASING = 'cubic-bezier(0.0,0.1,0.35,1.0)';
- const LAYOUT_HORIZONTAL = 'horizontal';
- const LAYOUT_VERTICAL = 'vertical';
- const SLIDE_DIRECTION_FORWARD = 1;
- const SLIDE_DIRECTION_BACKWARD = -1;
- // state vars
- let currentPage = -1;
- let oldPage = 0;
- let slideTimeout = null;
- let slideIntervalMs = 3000;
- let slideDirection = SLIDE_DIRECTION_FORWARD;
- let updateLayoutTimeout = null;
- let inputCaptured = false;
- // options
- let layoutType = LAYOUT_HORIZONTAL;
- let enableAutoSlide = false;
- let enablePaging = false;
- let holdTouch = false;
- let passiveMode = true;
- let startGap = 0;
- let hideOffViewElements = false;
- // status
- let isDragging = false;
- let wasVisible = false;
- let isLazyContainer = false;
- let isFlying = false;
- let actualViewSize = {
- width: 0,
- height: 0
- };
- // timers
- let componentizeInterval = null;
- let componentizeTimeout = null;
- /** @typedef {ZxQuery} */
- let pageList = null;
- // Create a mutation observer instance to watch for child add/remove
- const domObserver = new MutationObserver(function(a, b) {
- // update child list and re-layout
- pageList = cp.view().children();
- updateLayout();
- });
- const cp = this;
-
- cp.init = function() {
- const options = cp.options();
- const view = cp.view();
- options.html = false;
- options.css = false;
- enablePaging = (options.paging === true || enablePaging);
- enableAutoSlide = (options.autoSlide === true || enableAutoSlide);
- passiveMode = (options.passive !== false && passiveMode);
- holdTouch = (options.holdTouch === true || holdTouch);
- startGap = (options.startGap || startGap);
- if (options.verticalLayout === true) {
- layoutType = LAYOUT_VERTICAL;
- }
- if (options.slideInterval != null) {
- slideIntervalMs = (options.slideInterval || slideIntervalMs);
- }
- hideOffViewElements = (options.autoHide === true || hideOffViewElements);
- };
-
- cp.create = function() {
- // enable absolute positioning for items in this view
- const view = cp.view().css({
- 'position': 'relative',
- 'overflow': 'hidden'
- });
- // get child items (pages)
- pageList = view.children();
- // loading of images could change elements size, so layout update might be required
- view.find('img').each(function(i, el) {
- this.one('load', updateLayout);
- });
- // re-arrange view on layout changes
- zuix.$(window)
- .on('resize', function() {
- layoutElements(true);
- }).on('orientationchange', function() {
- layoutElements(true);
- });
- // Options for the observer (which mutations to observe)
- // Register DOM mutation observer callback
- domObserver.observe(view.get(), {
- attributes: false,
- childList: true,
- subtree: true,
- characterData: false
- });
- updateLayout();
- let tapTimeout = null;
- // gestures handling - load gesture-helper controller
- zuix.load('@lib/controllers/gesture-helper', {
- view,
- passive: passiveMode,
- startGap: startGap,
- on: {
- 'gesture:touch': function(e, tp) {
- if (!insideViewPager(tp)) return;
- inputCaptured = false;
- stopAutoSlide();
- dragStart();
- if (holdTouch) tp.cancel();
- },
- 'gesture:release': function(e, tp) {
- dragStop(tp);
- resetAutoSlide();
- },
- 'gesture:tap': function(e, tp) {
- if (!insideViewPager(tp)) return;
- if (tapTimeout != null) {
- clearTimeout(tapTimeout);
- }
- tapTimeout = setTimeout(function() {
- handleTap(e, tp);
- }, 50);
- },
- 'gesture:pan': handlePan,
- 'gesture:swipe': handleSwipe
- },
- ready: function() {
- layoutElements(true);
- // Set starting page
- setPage(0);
- }
- });
- // public component methods
- cp.expose('page', function(number) {
- if (number == null) {
- return parseInt(currentPage);
- } else setPage(number, DEFAULT_PAGE_TRANSITION);
- }).expose('get', function(number) {
- return number < pageList.length() && pageList.length() > 0 ? pageList.eq(number) : null;
- }).expose('slide', function(slideMs) {
- if (slideMs !== false) {
- enableAutoSlide = true;
- resetAutoSlide(slideMs !== true ? slideMs : slideIntervalMs);
- } else stopAutoSlide();
- }).expose('layout', function(mode) {
- if (mode == null) {
- return layoutType;
- } else if (mode === LAYOUT_VERTICAL) {
- layoutType = LAYOUT_VERTICAL;
- } else layoutType = LAYOUT_HORIZONTAL;
- updateLayout();
- }).expose('refresh', function() {
- layoutElements(true);
- }).expose('next', next)
- .expose('prev', prev)
- .expose('last', last)
- .expose('first', first);
- };
-
- cp.destroy = function() {
- if (domObserver != null) {
- domObserver.disconnect();
- }
- };
-
- function updateLayout() {
- if (updateLayoutTimeout != null) {
- clearTimeout(updateLayoutTimeout);
- }
- updateLayoutTimeout = setTimeout(layoutElements, 250);
- }
- function layoutElements(force) {
- if (!force && (isDragging || componentizeInterval != null)) {
- updateLayout();
- return;
- }
- // init elements
- pageList.each(function(i, el) {
- this.css({
- 'position': 'absolute',
- 'left': 0,
- 'top': 0
- });
- });
- // measure
- const viewSize = getSize(cp.view().get());
- if (viewSize.width === 0 || viewSize.height === 0) {
- if (viewSize.height === 0 && cp.view().position().visible) {
- let maxHeight = 0;
- // guess and set view-pager height
- pageList.each(function(i, el) {
- const size = getSize(el);
- if (size.height > maxHeight) {
- maxHeight = size.height;
- }
- });
- if (viewSize.height < maxHeight) {
- cp.view().css('height', maxHeight + 'px');
- }
- }
- // cannot measure view, try again later
- updateLayout();
- return;
- }
- actualViewSize = viewSize;
- // position elements
- let offset = 0;
- let isLazy = false;
- pageList.each(function(i, el) {
- const size = getSize(el);
- if (layoutType === LAYOUT_HORIZONTAL) {
- let centerY = (viewSize.height-size.height)/2;
- if (centerY < 0) centerY = 0; // TODO: centering with negative offset was not working
- transition(this, DEFAULT_PAGE_TRANSITION);
- position(this, offset, centerY);
- offset += size.width;
- } else {
- let centerX = (viewSize.width-size.width)/2;
- if (centerX < 0) centerX = 0; // TODO: centering with negative offset was not working
- transition(this, DEFAULT_PAGE_TRANSITION);
- position(this, centerX, offset);
- offset += size.height;
- }
- if (this.attr('z-lazy') === 'true' ||
- this.find('[z-lazy="true"]').length() > 0) {
- isLazy = true;
- }
- });
- isLazyContainer = isLazy;
-
- // focus to current page
- setPage(currentPage);
- // start automatic slide
- if (pageList.length() > 1) {
- resetAutoSlide();
- }
- }
-
- function next() {
- let isLast = false;
- let page = parseInt(currentPage)+1;
- if (page >= pageList.length()) {
- page = pageList.length()-1;
- isLast = true;
- }
- setPage(page, DEFAULT_PAGE_TRANSITION);
- return !isLast;
- }
- function prev() {
- let isFirst = false;
- let page = parseInt(currentPage)-1;
- if (page < 0) {
- page = 0;
- isFirst = true;
- }
- setPage(page, DEFAULT_PAGE_TRANSITION);
- return !isFirst;
- }
- function first() {
- setPage(0, DEFAULT_PAGE_TRANSITION);
- }
- function last() {
- setPage(pageList.length()-1, DEFAULT_PAGE_TRANSITION);
- }
-
- function slideNext() {
- if (cp.view().position().visible) {
- setPage(parseInt(currentPage) + slideDirection, DEFAULT_PAGE_TRANSITION);
- }
- resetAutoSlide();
- }
-
- function resetAutoSlide(slideInterval) {
- if (slideInterval) {
- slideIntervalMs = slideInterval;
- }
- stopAutoSlide();
- if (enableAutoSlide === true) {
- const visible = cp.view().position().visible;
- if (visible) {
- if (!wasVisible) {
- zuix.componentize(cp.view());
- }
- const delay = pageList.eq(currentPage).attr('slide-interval') || slideIntervalMs;
- slideTimeout = setTimeout(slideNext, delay);
- } else {
- slideTimeout = setTimeout(resetAutoSlide, 500);
- }
- wasVisible = visible;
- }
- }
- function stopAutoSlide() {
- if (slideTimeout != null) {
- clearTimeout(slideTimeout);
- }
- }
-
- function getItemIndexAt(x, y) {
- let focusedPage = 0;
- pageList.each(function(i, el) {
- const data = getData(this);
- focusedPage = i;
- const size = getSize(el);
- const rect = {
- x: data.position.x,
- y: data.position.y,
- w: size.width,
- h: size.height
- };
- if ((layoutType === LAYOUT_HORIZONTAL && (rect.x > x || rect.x+rect.w > x)) ||
- (layoutType === LAYOUT_VERTICAL && (rect.y > y || rect.y+rect.h > y))) {
- return false;
- }
- });
- return focusedPage;
- }
-
- function focusPageAt(tp, transition) {
- const vp = cp.view().position();
- const page = getItemIndexAt(tp.x-vp.x, tp.y-vp.y);
- setPage(page, transition != null ? transition : DEFAULT_PAGE_TRANSITION);
- }
-
- function setPage(n, transition) {
- oldPage = currentPage;
- if (n < 0) {
- slideDirection = SLIDE_DIRECTION_FORWARD;
- n = 0;
- } else if (n >= pageList.length()) {
- slideDirection = SLIDE_DIRECTION_BACKWARD;
- n = pageList.length() - 1;
- } else if (n !== currentPage) {
- slideDirection = (currentPage < n) ? SLIDE_DIRECTION_FORWARD : SLIDE_DIRECTION_BACKWARD;
- }
- currentPage = n;
- if (currentPage != oldPage) {
- pageList.eq(currentPage).css('z-index', 1);
- if (oldPage !== -1) {
- pageList.eq(oldPage).css('z-index', 0);
- }
- cp.trigger('page:change', {in: currentPage, out: oldPage});
- }
- const el = pageList.eq(n);
- const data = getData(el);
- const elSize = getSize(el.get());
- const focusPoint = {
- x: (actualViewSize.width - elSize.width) / 2 - data.position.x,
- y: (actualViewSize.height - elSize.height) / 2 - data.position.y
- };
- flyTo(focusPoint, transition);
- resetAutoSlide();
- }
-
- function flyTo(targetPoint, transition) {
- const spec = getFrameSpec();
- const firstData = getData(pageList.eq(0));
- const lastPage = pageList.eq(pageList.length() - 1);
- const lastData = getData(lastPage);
-
- pageList.each(function(i, el) {
- const data = getData(this);
- const frameSpec = getFrameSpec();
- data.dragStart = {
- x: frameSpec.marginLeft + data.position.x,
- y: frameSpec.marginTop + data.position.y
- };
- });
-
- if (layoutType === LAYOUT_HORIZONTAL) {
- let x = targetPoint.x;
- if (firstData.position.x + targetPoint.x > 0) {
- x = -firstData.position.x;
- } else {
- if (lastData.position.x + lastPage.get().offsetWidth + targetPoint.x < actualViewSize.width) {
- x = -spec.marginLeft*2 + actualViewSize.width - (lastData.position.x + lastPage.get().offsetWidth);
- }
- }
- // check if boundary was adjusted and adjust flying duration accordingly
- if (targetPoint.x-x !== 0 && transition != null) {
- transition = {
- duration: transition.duration * (x / targetPoint.x),
- easing: BOUNDARY_HIT_EASING
- };
- if (!isFinite(transition.duration) || transition.duration < 0) {
- transition.duration = 0.2;
- }
- }
- dragShift(x, 0, transition);
- } else {
- let y = targetPoint.y;
- if (firstData.position.y + targetPoint.y > 0) {
- y = -firstData.position.y;
- } else {
- if (lastData.position.y + lastPage.get().offsetHeight + targetPoint.y < actualViewSize.height) {
- y = -spec.marginTop*2 + actualViewSize.height - (lastData.position.y + lastPage.get().offsetHeight);
- }
- }
- // check if boundary was adjusted and adjust flying duration accordingly
- if (targetPoint.y-y !== 0 && transition != null) {
- transition = {
- duration: transition.duration * (y / targetPoint.y),
- easing: BOUNDARY_HIT_EASING
- };
- if (!isFinite(transition.duration) || transition.duration < 0) {
- transition.duration = 0.2;
- }
- }
- dragShift(0, y, transition);
- }
- isFlying = true;
- }
-
- function getSize(el) {
- const rect = el.getBoundingClientRect();
- const width = rect.width || el.offsetWidth;
- const height = el.offsetHeight || rect.height;
- return {width: width, height: height};
- }
-
- function getData(el) {
- const data = el.get().data = el.get().data || {};
- data.position = data.position || {x: 0, y: 0};
- return data;
- }
-
- function componentizeStart() {
- if (isLazyContainer) {
- componentizeStop();
- if (componentizeTimeout != null) {
- clearTimeout(componentizeTimeout);
- }
- if (componentizeInterval != null) {
- clearInterval(componentizeInterval);
- }
- componentizeInterval = setInterval(function() {
- if (hideOffViewElements) {
- pageList.each(function(i, el) {
- // hide elements if not inside the view-pager
- const computed = window.getComputedStyle(el, null);
- const size = {
- width: parseFloat(computed.width.replace('px', '')),
- height: parseFloat(computed.height.replace('px', ''))
- };
- const x = parseFloat(computed.left.replace('px', ''));
- const y = parseFloat(computed.top.replace('px', ''));
- if (size.width > 0 && size.height > 0) {
- el = zuix.$(el);
- // check if element is inside the view-pager
- const visibleArea = {
- left: -actualViewSize.width / 2,
- right: actualViewSize.width * 1.5,
- top: (-actualViewSize.height / 2),
- bottom: actualViewSize.height * 1.5
- };
- if (x + size.width < visibleArea.left || y + size.height < visibleArea.top || x > visibleArea.right || y > visibleArea.bottom) {
- if (el.visibility() !== 'hidden') {
- el.visibility('hidden');
- }
- } else if (el.visibility() !== 'visible') {
- el.visibility('visible');
- }
- }
- });
- }
- zuix.componentize(cp.view());
- }, 10);
- }
- }
-
- function componentizeStop() {
- if (isLazyContainer && componentizeTimeout == null) {
- clearInterval(componentizeInterval);
- }
- }
-
- function dragStart() {
- isDragging = true;
- isFlying = false;
- pageList.each(function(i, el) {
- const data = getData(this);
- const frameSpec = getFrameSpec();
- const computed = window.getComputedStyle(el, null);
- data.position.x = parseFloat(computed.left.replace('px', ''));
- data.position.y = parseFloat(computed.top.replace('px', ''));
- this.css('left', data.position.x+'px');
- this.css('top', data.position.y+'px');
- data.dragStart = {x: frameSpec.marginLeft+data.position.x, y: frameSpec.marginTop+data.position.y};
- });
- }
-
- function getFrameSpec() {
- const spec = {
- w: 0,
- h: 0,
- marginLeft: 0,
- marginTop: 0
- };
- pageList.each(function(i, el) {
- const size = getSize(el);
- spec.w += size.width;
- spec.h += size.height;
- });
- if (layoutType === LAYOUT_HORIZONTAL && spec.w < actualViewSize.width) {
- spec.marginLeft = (actualViewSize.width - spec.w) / 2;
- } else if (layoutType === LAYOUT_VERTICAL && spec.h < actualViewSize.height) {
- spec.marginTop = (actualViewSize.height - spec.h) / 2;
- }
- return spec;
- }
-
- function dragShift(x, y, tr) {
- if (tr != null) {
- componentizeStart();
- componentizeTimeout = setTimeout(function() {
- componentizeTimeout = null;
- componentizeStop();
- }, tr.duration*1000);
- tr = tr.duration+'s '+tr.easing;
- } else if (isLazyContainer) {
- zuix.componentize(cp.view());
- }
- pageList.each(function(i, el) {
- const data = getData(this);
- transition(this, tr);
- position(this, data.dragStart.x+x, data.dragStart.y+y);
- });
- }
-
- function dragStop(tp) {
- if (tp != null) {
- tp.done = true;
- // decelerate
- if (!isFlying && ((layoutType === LAYOUT_HORIZONTAL && tp.scrollIntent() === 'horizontal') || (layoutType === LAYOUT_VERTICAL && tp.scrollIntent() === 'vertical'))) {
- decelerate(null, tp);
- }
- }
- componentizeStop();
- isDragging = false;
- }
-
- // Gesture handling
-
- function handlePan(e, tp) {
- if (!isDragging || !tp.scrollIntent() || tp.done) {
- return;
- }
- if (inputCaptured ||
- ((tp.direction === 'left' || tp.direction === 'right') && layoutType === LAYOUT_HORIZONTAL) ||
- ((tp.direction === 'up' || tp.direction === 'down') && layoutType === LAYOUT_VERTICAL)) {
- // capture click event
- if (!inputCaptured && tp.event.touches == null) {
- cp.view().get().addEventListener('click', function(e) {
- if (inputCaptured) {
- inputCaptured = false;
- e.cancelBubble = true;
- // TODO: 'preventDefault' should not be used with passive listeners
- e.preventDefault();
- }
- // release mouse click capture
- cp.view().get().removeEventListener('click', this, true);
- }, true);
- }
- inputCaptured = true;
- tp.cancel();
- }
- const spec = getFrameSpec();
- if (layoutType === LAYOUT_HORIZONTAL && tp.scrollIntent() === 'horizontal') {
- dragShift(tp.shiftX-spec.marginLeft, 0);
- } else if (layoutType === LAYOUT_VERTICAL && tp.scrollIntent() === 'vertical') {
- dragShift(0, tp.shiftY-spec.marginTop);
- }
- }
-
- function handleTap(e, tp) {
- const vp = cp.view().position();
- const page = getItemIndexAt(tp.x-vp.x, tp.y-vp.y);
- cp.trigger('page:tap', page, tp);
- if (enablePaging) focusPageAt(tp);
- }
-
- function decelerate(e, tp) {
- const minSpeed = 0.01;
- const minStepSpeed = 1.25;
- const accelerationFactor = Math.exp(Math.abs(tp.velocity / (Math.abs(tp.velocity) <= minStepSpeed ? 5 : 2))+1);
- let friction = 0.990 + (accelerationFactor / 1000);
- if (friction > 0.999) {
- friction = 0.999;
- }
- const duration = Math.log(minSpeed / Math.abs(tp.velocity)) / Math.log(friction);
- const decelerateEasing = {
- duration: duration / 1000, // ms to s
- easing: DECELERATE_SCROLL_EASING
- };
- const fly = function(destination, shift) {
- if (enablePaging) {
- decelerateEasing.duration *= 0.5;
- if (layoutType === LAYOUT_HORIZONTAL) {
- focusPageAt({
- x: destination.x - shift.x,
- y: destination.y
- }, decelerateEasing);
- } else {
- focusPageAt({
- x: destination.x,
- y: destination.y - shift.y
- }, decelerateEasing);
- }
- } else {
- flyTo(shift, decelerateEasing);
- }
- };
- const flyingDistance = tp.stepSpeed < minStepSpeed ? 0 : accelerationFactor * tp.velocity * (1 - Math.pow(friction, duration + 1)) / (1 - friction);
- const ap = {
- x: flyingDistance,
- y: flyingDistance
- };
- if (willFly(tp) || e == null) fly(tp, ap);
- }
-
- function willFly(tp) {
- return (!enablePaging || Math.abs(tp.velocity) > 1.25);
- }
-
- function handleSwipe(e, tp) {
- if (!insideViewPager(tp)) return;
- if (willFly(tp)) {
- return;
- }
- switch (tp.direction) {
- case 'right':
- if (layoutType === LAYOUT_HORIZONTAL) prev();
- break;
- case 'left':
- if (layoutType === LAYOUT_HORIZONTAL) next();
- break;
- case 'down':
- if (layoutType === LAYOUT_VERTICAL) prev();
- break;
- case 'up':
- if (layoutType === LAYOUT_VERTICAL) next();
- break;
- }
- }
-
- function position(el, x, y) {
- const data = getData(el);
- if (!isNaN(x) && !isNaN(y)) {
- data.position = {'x': x, 'y': y};
- el.css({'left': data.position.x+'px', 'top': data.position.y+'px'});
- }
- return data;
- }
-
- function transition(el, transition) {
- if (transition == null) {
- transition = 'none';
- }
- el.css({
- 'transition': transition
- });
- }
-
- function insideViewPager(tp) {
- let elements = document.elementsFromPoint(tp.x, tp.y);
- if (elements.length > 0 && !cp.view().get().contains(elements[0])) {
- return false;
- }
- elements = elements.filter((el) => el.attributes['z-load'] &&
- el.attributes['z-load'].value === cp.view().attr('z-load'));
- return elements.length > 0 && elements[0] === cp.view().get();
- }
-}
-
-module.exports = ViewPager;
diff --git a/source/lib/1.1/templates/mdl-card-image.css b/source/lib/1.1/templates/mdl-card-image.css
deleted file mode 100644
index 72ed91a..0000000
--- a/source/lib/1.1/templates/mdl-card-image.css
+++ /dev/null
@@ -1,45 +0,0 @@
-:host {
- font-family: "Roboto","Helvetica","Arial",sans-serif !important;
- transition: box-shadow 0.2s ease-in-out;
-}
-
-.mdl-card {
- width: 256px;
- height: 256px; /* 259 306 317 342 392 292 */
- background: url('data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
- background-repeat: no-repeat!important;
- background-position: center!important;
-}
-.mdl-card__actions {
- height: 52px;
- padding: 16px;
- border-top: solid 1px rgba(255,255,255, 0.4);
- background: rgba(0, 0, 0, 0.7);
-}
-.title {
- color: #fff;
- font-size: 120%;
- font-weight: 500;
- width: 220px;
- max-width: 100%;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-.mdl-ripple {
- background: #fff;
-}
-.mdl-card__title {
- align-items: start;
-}
-.mdl-card__title span {
- width: 100%;
- font-size: 95%;
- padding: 6px;
- background: rgba(255,255,255,0.85);
- border-radius: 3px;
-}
-
-[z-field="text"]:empty {
- display: none;
-}
diff --git a/source/lib/1.1/templates/mdl-card-image.html b/source/lib/1.1/templates/mdl-card-image.html
deleted file mode 100644
index 4697627..0000000
--- a/source/lib/1.1/templates/mdl-card-image.html
+++ /dev/null
@@ -1,22 +0,0 @@
-
-
-
-
-
-
-
-
diff --git a/source/lib/1.1/templates/mdl-card-square.css b/source/lib/1.1/templates/mdl-card-square.css
deleted file mode 100644
index 79d88de..0000000
--- a/source/lib/1.1/templates/mdl-card-square.css
+++ /dev/null
@@ -1,66 +0,0 @@
-:host {
- font-family: "Roboto","Helvetica","Arial",sans-serif !important;
- transition: box-shadow 0.2s ease-in-out;
-}
-
-.mdl-card {
- width: 320px;
- height: 320px;
- font-family: "Roboto","Helvetica","Arial",sans-serif !important;
-}
-.mdl-card__title {
- width: auto !important;
- height: 172px !important;
- position: relative !important;
- overflow: hidden !important;
- padding: 0 !important;
- margin: 0 !important;
-}
-.mdl-card__title img {
- position: absolute !important;
- left: 50% !important;
- top: 50% !important;
- height: 176px !important;
- width: auto !important;
- -webkit-transform: translate(-50%,-50%) !important;
- -ms-transform: translate(-50%,-50%) !important;
- transform: translate(-50%,-50%) !important;
-}
-.mdl-card__title img.portrait {
- background: linear-gradient(to bottom, #82addb66 0%,#ebb2b166 100%);
- width: 100% !important;
- /*height: auto !important;*/
-}
-h1 {
- padding: 16px !important;
- font-size: 160% !important;
- font-weight: 500 !important;
- margin: 0 !important;
- text-shadow:
- -.5px -.5px 0 #00000055,
- .5px -.5px 0 #00000055,
- -.5px .5px 0 #00000055,
- 1px 1px 0 #00000055 !important;
- z-index: 10 !important;
-}
-.mdl-button {
- font-weight: bold;
-}
-.mdl-card__supporting-text {
- color: black !important;
- font-size: 100% !important;
- line-height: 130% !important;
- width: 100% !important;
- padding: 0 !important;
- margin: 16px !important;
- display: block; text-overflow: ellipsis;
- max-lines: 3;
- display: -webkit-box;
- max-width: 296px;
- max-height: 90px;
- height: 64px;
- min-height: 64px;
- overflow: hidden !important;
- -webkit-line-clamp: 3;
- -webkit-box-orient: vertical;
-}
diff --git a/source/lib/1.1/templates/mdl-card-square.html b/source/lib/1.1/templates/mdl-card-square.html
deleted file mode 100644
index f9c0048..0000000
--- a/source/lib/1.1/templates/mdl-card-square.html
+++ /dev/null
@@ -1,21 +0,0 @@
-
-
-
-
- Update
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Aenan convallis.
-
-
-
- View Updates
-
-
-
-
-
diff --git a/source/lib/1.1/templates/mdl-card.css b/source/lib/1.1/templates/mdl-card.css
deleted file mode 100644
index 0010a28..0000000
--- a/source/lib/1.1/templates/mdl-card.css
+++ /dev/null
@@ -1,65 +0,0 @@
-:host {
- font-family: "Roboto","Helvetica","Arial",sans-serif !important;
- transition: box-shadow 0.2s ease-in-out;
-}
-
-.mdl-card {
- padding: 0 !important;
- margin: 0 !important;
- width: 100%;
- max-width: 450px;
-}
-.mdl-card__title {
- width: auto !important;
- height: 172px !important;
- position: relative !important;
- overflow: hidden !important;
- padding: 0 !important;
- margin: 0 !important;
-}
-.mdl-card__title img {
- position: absolute !important;
- left: 50% !important;
- top: 50% !important;
- height: 100% !important;
- width: auto !important;
- -webkit-transform: translate(-50%,-50%) !important;
- -ms-transform: translate(-50%,-50%) !important;
- transform: translate(-50%,-50%) !important;
-}
-.mdl-card__title img.portrait {
- background: linear-gradient(to bottom, #82addb66 0%,#ebb2b166 100%);
- width: 100% !important;
- /*height: auto !important;*/
-}
-.mdl-card__supporting-text {
- color: black !important;
- font-size: 110% !important;
- line-height: 140% !important;
- width: 100% !important;
- padding: 0 !important;
- margin: 16px !important;
- display: block; text-overflow: ellipsis;
- max-lines: 3;
- display: -webkit-box;
- max-width: 394px;
- max-height: 106px;
- overflow: hidden !important;
- -webkit-line-clamp: 3;
- -webkit-box-orient: vertical;
-}
-h1 {
- font-size: 160% !important;
- font-weight: 500 !important;
- padding: 16px !important;
- margin: 0 !important;
- text-shadow:
- -1px -1px 0 #000,
- 1px -1px 0 #000,
- -1px 1px 0 #000,
- 1px 1px 0 #000 !important;
- z-index: 10 !important;
-}
-.mdl-button {
- font-weight: bold;
-}
diff --git a/source/lib/1.1/templates/mdl-card.html b/source/lib/1.1/templates/mdl-card.html
deleted file mode 100644
index 7243633..0000000
--- a/source/lib/1.1/templates/mdl-card.html
+++ /dev/null
@@ -1,24 +0,0 @@
-
-
diff --git a/source/lib/README.md b/source/lib/README.md
deleted file mode 100644
index 198195e..0000000
--- a/source/lib/README.md
+++ /dev/null
@@ -1,6 +0,0 @@
-# lib
-
-Place here reusable `zuix.js` components that can be used across different sites.
-
-Public component libraries:
-- [zKit](https://zuixjs.github.io/zkit/)
diff --git a/source/search.liquid b/source/search.liquid
index 1cf222c..6b3c712 100644
--- a/source/search.liquid
+++ b/source/search.liquid
@@ -23,8 +23,9 @@ description: Search this website
-
-
+
+