Skip to content

Instantly share code, notes, and snippets.

@asanocorp
Last active August 29, 2015 14:18
Show Gist options
  • Save asanocorp/bcb051ee30816d367ae5 to your computer and use it in GitHub Desktop.
Save asanocorp/bcb051ee30816d367ae5 to your computer and use it in GitHub Desktop.

what follows is an introduction to a 'hello world' html5 game with phaser.js.

here briefly a hacker's statement providing some explanation as to why's and wherefore's:

  • making use of tools and practices in ways they weren't intended to be used and
  • keeping in mind it's all for the lulz

as previously mentioned this hello-world app brings together awesome html5 game dev framework phaser.js  phaser.js

by means of step by step follow up to

joseph labrecque's informative and casual html5 game dev with phaser

published by lynda.com

as always the process will involve some additional and somewhat unrelated tech exercises. currently on our plate we have manipulation and edits of svg graphics so this will serve as the main theme.

<iframe height='350' scrolling='no' src='//codepen.io/rafszul/embed/ogyyJK/' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen SVG Mask (Experiment) by @rafszul (@rafszul) on CodePen. </iframe>

as side-note we aim at establishing set of workarounds for integration of more complex graphical compositions beefed up by batch processing and hooked to the browser with web standards.

###so... let's do it!

at first since bunnies seem somewhat inadequately dramatic and our preferred backdrop to the game would most definitely strive to get closer to the edges of reality even if not exactly by use of super advanced mechanics and tech but at least in terms of atmosphere and ... vocabulary? ...theme?

anyway the upshot was getting rid of the bunnies ans creation/adaptation of whole new set of assets which we paired up with insanely twisted tales provided by @tala703 @tala703 which she bravely based on her own experiences of reality with all the surprising adventures of everyday life as they would appear to every robot with drained, damaged or otherwise malfunctioning battery or any other energy source.

read more about the story and rules of the game or jump straight in:

play the game

<!DOCTYPE html>
<html><head data-gwd-animation-mode="quickMode"><meta name="GCD" content="YTk3ODQ3ZWZhN2I4NzZmMzBkNTEwYjJl426315dbff549e166edd1c24ef47ba69"/>
<script data-source="custom.elements.min.js" type="text/javascript">/**
* @license
* Copyright (c) 2012 The Polymer Authors. All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are
* met:
*
* * Redistributions of source code must retain the above copyright
* notice, this list of conditions and the following disclaimer.
* * Redistributions in binary form must reproduce the above
* copyright notice, this list of conditions and the following disclaimer
* in the documentation and/or other materials provided with the
* distribution.
* * Neither the name of Google Inc. nor the names of its
* contributors may be used to endorse or promote products derived from
* this software without specific prior written permission.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
* "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
* LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
* A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
* OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
* SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
* LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
* DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
* THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
// @version v0.0.20140401
"undefined"==typeof WeakMap&&!function(){var a=Object.defineProperty,b=Date.now()%1e9,c=function(){this.name="__st"+(1e9*Math.random()>>>0)+(b++ +"__")};c.prototype={set:function(b,c){var d=b[this.name];d&&d[0]===b?d[1]=c:a(b,this.name,{value:[b,c],writable:!0})},get:function(a){var b;return(b=a[this.name])&&b[0]===a?b[1]:void 0},"delete":function(a){this.set(a,void 0)}},window.WeakMap=c}(),function(a){function b(a){u.push(a),t||(t=!0,q(d))}function c(a){return window.ShadowDOMPolyfill&&window.ShadowDOMPolyfill.wrapIfNeeded(a)||a}function d(){t=!1;var a=u;u=[],a.sort(function(a,b){return a.uid_-b.uid_});var b=!1;a.forEach(function(a){var c=a.takeRecords();e(a),c.length&&(a.callback_(c,a),b=!0)}),b&&d()}function e(a){a.nodes_.forEach(function(b){var c=p.get(b);c&&c.forEach(function(b){b.observer===a&&b.removeTransientObservers()})})}function f(a,b){for(var c=a;c;c=c.parentNode){var d=p.get(c);if(d)for(var e=0;e<d.length;e++){var f=d[e],g=f.options;if(c===a||g.subtree){var h=b(g);h&&f.enqueue(h)}}}}function g(a){this.callback_=a,this.nodes_=[],this.records_=[],this.uid_=++v}function h(a,b){this.type=a,this.target=b,this.addedNodes=[],this.removedNodes=[],this.previousSibling=null,this.nextSibling=null,this.attributeName=null,this.attributeNamespace=null,this.oldValue=null}function i(a){var b=new h(a.type,a.target);return b.addedNodes=a.addedNodes.slice(),b.removedNodes=a.removedNodes.slice(),b.previousSibling=a.previousSibling,b.nextSibling=a.nextSibling,b.attributeName=a.attributeName,b.attributeNamespace=a.attributeNamespace,b.oldValue=a.oldValue,b}function j(a,b){return w=new h(a,b)}function k(a){return x?x:(x=i(w),x.oldValue=a,x)}function l(){w=x=void 0}function m(a){return a===x||a===w}function n(a,b){return a===b?a:x&&m(a)?x:null}function o(a,b,c){this.observer=a,this.target=b,this.options=c,this.transientObservedNodes=[]}var p=new WeakMap,q=window.msSetImmediate;if(!q){var r=[],s=String(Math.random());window.addEventListener("message",function(a){if(a.data===s){var b=r;r=[],b.forEach(function(a){a()})}}),q=function(a){r.push(a),window.postMessage(s,"*")}}var t=!1,u=[],v=0;g.prototype={observe:function(a,b){if(a=c(a),!b.childList&&!b.attributes&&!b.characterData||b.attributeOldValue&&!b.attributes||b.attributeFilter&&b.attributeFilter.length&&!b.attributes||b.characterDataOldValue&&!b.characterData)throw new SyntaxError;var d=p.get(a);d||p.set(a,d=[]);for(var e,f=0;f<d.length;f++)if(d[f].observer===this){e=d[f],e.removeListeners(),e.options=b;break}e||(e=new o(this,a,b),d.push(e),this.nodes_.push(a)),e.addListeners()},disconnect:function(){this.nodes_.forEach(function(a){for(var b=p.get(a),c=0;c<b.length;c++){var d=b[c];if(d.observer===this){d.removeListeners(),b.splice(c,1);break}}},this),this.records_=[]},takeRecords:function(){var a=this.records_;return this.records_=[],a}};var w,x;o.prototype={enqueue:function(a){var c=this.observer.records_,d=c.length;if(c.length>0){var e=c[d-1],f=n(e,a);if(f)return void(c[d-1]=f)}else b(this.observer);c[d]=a},addListeners:function(){this.addListeners_(this.target)},addListeners_:function(a){var b=this.options;b.attributes&&a.addEventListener("DOMAttrModified",this,!0),b.characterData&&a.addEventListener("DOMCharacterDataModified",this,!0),b.childList&&a.addEventListener("DOMNodeInserted",this,!0),(b.childList||b.subtree)&&a.addEventListener("DOMNodeRemoved",this,!0)},removeListeners:function(){this.removeListeners_(this.target)},removeListeners_:function(a){var b=this.options;b.attributes&&a.removeEventListener("DOMAttrModified",this,!0),b.characterData&&a.removeEventListener("DOMCharacterDataModified",this,!0),b.childList&&a.removeEventListener("DOMNodeInserted",this,!0),(b.childList||b.subtree)&&a.removeEventListener("DOMNodeRemoved",this,!0)},addTransientObserver:function(a){if(a!==this.target){this.addListeners_(a),this.transientObservedNodes.push(a);var b=p.get(a);b||p.set(a,b=[]),b.push(this)}},removeTransientObservers:function(){var a=this.transientObservedNodes;this.transientObservedNodes=[],a.forEach(function(a){this.removeListeners_(a);for(var b=p.get(a),c=0;c<b.length;c++)if(b[c]===this){b.splice(c,1);break}},this)},handleEvent:function(a){switch(a.stopImmediatePropagation(),a.type){case"DOMAttrModified":var b=a.attrName,c=a.relatedNode.namespaceURI,d=a.target,e=new j("attributes",d);e.attributeName=b,e.attributeNamespace=c;var g=a.attrChange===MutationEvent.ADDITION?null:a.prevValue;f(d,function(a){return!a.attributes||a.attributeFilter&&a.attributeFilter.length&&-1===a.attributeFilter.indexOf(b)&&-1===a.attributeFilter.indexOf(c)?void 0:a.attributeOldValue?k(g):e});break;case"DOMCharacterDataModified":var d=a.target,e=j("characterData",d),g=a.prevValue;f(d,function(a){return a.characterData?a.characterDataOldValue?k(g):e:void 0});break;case"DOMNodeRemoved":this.addTransientObserver(a.target);case"DOMNodeInserted":var h,i,d=a.relatedNode,m=a.target;"DOMNodeInserted"===a.type?(h=[m],i=[]):(h=[],i=[m]);var n=m.previousSibling,o=m.nextSibling,e=j("childList",d);e.addedNodes=h,e.removedNodes=i,e.previousSibling=n,e.nextSibling=o,f(d,function(a){return a.childList?e:void 0})}l()}},a.JsMutationObserver=g,a.MutationObserver||(a.MutationObserver=g)}(this),window.CustomElements=window.CustomElements||{flags:{}},function(a){function b(a,c,d){var e=a.firstElementChild;if(!e)for(e=a.firstChild;e&&e.nodeType!==Node.ELEMENT_NODE;)e=e.nextSibling;for(;e;)c(e,d)!==!0&&b(e,c,d),e=e.nextElementSibling;return null}function c(a,b){for(var c=a.shadowRoot;c;)d(c,b),c=c.olderShadowRoot}function d(a,d){b(a,function(a){return d(a)?!0:void c(a,d)}),c(a,d)}function e(a){return h(a)?(i(a),!0):void l(a)}function f(a){d(a,function(a){return e(a)?!0:void 0})}function g(a){return e(a)||f(a)}function h(b){if(!b.__upgraded__&&b.nodeType===Node.ELEMENT_NODE){var c=b.getAttribute("is")||b.localName,d=a.registry[c];if(d)return A.dom&&console.group("upgrade:",b.localName),a.upgrade(b),A.dom&&console.groupEnd(),!0}}function i(a){l(a),r(a)&&d(a,function(a){l(a)})}function j(a){if(E.push(a),!D){D=!0;var b=window.Platform&&window.Platform.endOfMicrotask||setTimeout;b(k)}}function k(){D=!1;for(var a,b=E,c=0,d=b.length;d>c&&(a=b[c]);c++)a();E=[]}function l(a){C?j(function(){m(a)}):m(a)}function m(a){(a.attachedCallback||a.detachedCallback||a.__upgraded__&&A.dom)&&(A.dom&&console.group("inserted:",a.localName),r(a)&&(a.__inserted=(a.__inserted||0)+1,a.__inserted<1&&(a.__inserted=1),a.__inserted>1?A.dom&&console.warn("inserted:",a.localName,"insert/remove count:",a.__inserted):a.attachedCallback&&(A.dom&&console.log("inserted:",a.localName),a.attachedCallback())),A.dom&&console.groupEnd())}function n(a){o(a),d(a,function(a){o(a)})}function o(a){C?j(function(){p(a)}):p(a)}function p(a){(a.attachedCallback||a.detachedCallback||a.__upgraded__&&A.dom)&&(A.dom&&console.group("removed:",a.localName),r(a)||(a.__inserted=(a.__inserted||0)-1,a.__inserted>0&&(a.__inserted=0),a.__inserted<0?A.dom&&console.warn("removed:",a.localName,"insert/remove count:",a.__inserted):a.detachedCallback&&a.detachedCallback()),A.dom&&console.groupEnd())}function q(a){return window.ShadowDOMPolyfill?ShadowDOMPolyfill.wrapIfNeeded(a):a}function r(a){for(var b=a,c=q(document);b;){if(b==c)return!0;b=b.parentNode||b.host}}function s(a){if(a.shadowRoot&&!a.shadowRoot.__watched){A.dom&&console.log("watching shadow-root for: ",a.localName);for(var b=a.shadowRoot;b;)t(b),b=b.olderShadowRoot}}function t(a){a.__watched||(w(a),a.__watched=!0)}function u(a){if(A.dom){var b=a[0];if(b&&"childList"===b.type&&b.addedNodes&&b.addedNodes){for(var c=b.addedNodes[0];c&&c!==document&&!c.host;)c=c.parentNode;var d=c&&(c.URL||c._URL||c.host&&c.host.localName)||"";d=d.split("/?").shift().split("/").pop()}console.group("mutations (%d) [%s]",a.length,d||"")}a.forEach(function(a){"childList"===a.type&&(G(a.addedNodes,function(a){a.localName&&g(a)}),G(a.removedNodes,function(a){a.localName&&n(a)}))}),A.dom&&console.groupEnd()}function v(){u(F.takeRecords()),k()}function w(a){F.observe(a,{childList:!0,subtree:!0})}function x(a){w(a)}function y(a){A.dom&&console.group("upgradeDocument: ",a.baseURI.split("/").pop()),g(a),A.dom&&console.groupEnd()}function z(a){a=q(a);for(var b,c=a.querySelectorAll("link[rel="+B+"]"),d=0,e=c.length;e>d&&(b=c[d]);d++)b.import&&b.import.__parsed&&z(b.import);y(a)}var A=window.logFlags||{},B=window.HTMLImports?HTMLImports.IMPORT_LINK_TYPE:"none",C=!window.MutationObserver||window.MutationObserver===window.JsMutationObserver;a.hasPolyfillMutations=C;var D=!1,E=[],F=new MutationObserver(u),G=Array.prototype.forEach.call.bind(Array.prototype.forEach);a.IMPORT_LINK_TYPE=B,a.watchShadow=s,a.upgradeDocumentTree=z,a.upgradeAll=g,a.upgradeSubtree=f,a.insertedNode=i,a.observeDocument=x,a.upgradeDocument=y,a.takeRecords=v}(window.CustomElements),function(a){function b(b,g){var h=g||{};if(!b)throw new Error("document.registerElement: first argument `name` must not be empty");if(b.indexOf("-")<0)throw new Error("document.registerElement: first argument ('name') must contain a dash ('-'). Argument provided was '"+String(b)+"'.");if(c(b))throw new Error("Failed to execute 'registerElement' on 'Document': Registration failed for type '"+String(b)+"'. The type name is invalid.");if(n(b))throw new Error("DuplicateDefinitionError: a type with name '"+String(b)+"' is already registered");if(!h.prototype)throw new Error("Options missing required prototype property");return h.__name=b.toLowerCase(),h.lifecycle=h.lifecycle||{},h.ancestry=d(h.extends),e(h),f(h),l(h.prototype),o(h.__name,h),h.ctor=p(h),h.ctor.prototype=h.prototype,h.prototype.constructor=h.ctor,a.ready&&a.upgradeDocumentTree(document),h.ctor}function c(a){for(var b=0;b<y.length;b++)if(a===y[b])return!0}function d(a){var b=n(a);return b?d(b.extends).concat([b]):[]}function e(a){for(var b,c=a.extends,d=0;b=a.ancestry[d];d++)c=b.is&&b.tag;a.tag=c||a.__name,c&&(a.is=a.__name)}function f(a){if(!Object.__proto__){var b=HTMLElement.prototype;if(a.is){var c=document.createElement(a.tag);b=Object.getPrototypeOf(c)}for(var d,e=a.prototype;e&&e!==b;){var d=Object.getPrototypeOf(e);e.__proto__=d,e=d}}a.native=b}function g(a){return h(B(a.tag),a)}function h(b,c){return c.is&&b.setAttribute("is",c.is),b.removeAttribute("unresolved"),i(b,c),b.__upgraded__=!0,k(b),a.insertedNode(b),a.upgradeSubtree(b),b}function i(a,b){Object.__proto__?a.__proto__=b.prototype:(j(a,b.prototype,b.native),a.__proto__=b.prototype)}function j(a,b,c){for(var d={},e=b;e!==c&&e!==HTMLElement.prototype;){for(var f,g=Object.getOwnPropertyNames(e),h=0;f=g[h];h++)d[f]||(Object.defineProperty(a,f,Object.getOwnPropertyDescriptor(e,f)),d[f]=1);e=Object.getPrototypeOf(e)}}function k(a){a.createdCallback&&a.createdCallback()}function l(a){if(!a.setAttribute._polyfilled){var b=a.setAttribute;a.setAttribute=function(a,c){m.call(this,a,c,b)};var c=a.removeAttribute;a.removeAttribute=function(a){m.call(this,a,null,c)},a.setAttribute._polyfilled=!0}}function m(a,b,c){var d=this.getAttribute(a);c.apply(this,arguments);var e=this.getAttribute(a);this.attributeChangedCallback&&e!==d&&this.attributeChangedCallback(a,d,e)}function n(a){return a?z[a.toLowerCase()]:void 0}function o(a,b){z[a]=b}function p(a){return function(){return g(a)}}function q(a,b,c){return a===A?r(b,c):C(a,b)}function r(a,b){var c=n(b||a);if(c){if(a==c.tag&&b==c.is)return new c.ctor;if(!b&&!c.is)return new c.ctor}if(b){var d=r(a);return d.setAttribute("is",b),d}var d=B(a);return a.indexOf("-")>=0&&i(d,HTMLElement),d}function s(a){if(!a.__upgraded__&&a.nodeType===Node.ELEMENT_NODE){var b=a.getAttribute("is"),c=n(b||a.localName);if(c){if(b&&c.tag==a.localName)return h(a,c);if(!b&&!c.extends)return h(a,c)}}}function t(b){var c=D.call(this,b);return a.upgradeAll(c),c}a||(a=window.CustomElements={flags:{}});var u=a.flags,v=Boolean(document.registerElement),w=!u.register&&v&&!window.ShadowDOMPolyfill;if(w){var x=function(){};a.registry={},a.upgradeElement=x,a.watchShadow=x,a.upgrade=x,a.upgradeAll=x,a.upgradeSubtree=x,a.observeDocument=x,a.upgradeDocument=x,a.upgradeDocumentTree=x,a.takeRecords=x,a.reservedTagList=[]}else{var y=["annotation-xml","color-profile","font-face","font-face-src","font-face-uri","font-face-format","font-face-name","missing-glyph"],z={},A="http://www.w3.org/1999/xhtml",B=document.createElement.bind(document),C=document.createElementNS.bind(document),D=Node.prototype.cloneNode;document.registerElement=b,document.createElement=r,document.createElementNS=q,Node.prototype.cloneNode=t,a.registry=z,a.upgrade=s}var E;E=Object.__proto__||w?function(a,b){return a instanceof b}:function(a,b){for(var c=a;c;){if(c===b.prototype)return!0;c=c.__proto__}return!1},a.instanceof=E,a.reservedTagList=y,document.register=document.registerElement,a.hasNative=v,a.useNative=w}(window.CustomElements),function(a){function b(a){return"link"===a.localName&&a.getAttribute("rel")===c}var c=a.IMPORT_LINK_TYPE,d={selectors:["link[rel="+c+"]"],map:{link:"parseLink"},parse:function(a){if(!a.__parsed){a.__parsed=!0;var b=a.querySelectorAll(d.selectors);e(b,function(a){d[d.map[a.localName]](a)}),CustomElements.upgradeDocument(a),CustomElements.observeDocument(a)}},parseLink:function(a){b(a)&&this.parseImport(a)},parseImport:function(a){a.import&&d.parse(a.import)}},e=Array.prototype.forEach.call.bind(Array.prototype.forEach);a.parser=d,a.IMPORT_LINK_TYPE=c}(window.CustomElements),function(a){function b(){CustomElements.parser.parse(document),CustomElements.upgradeDocument(document);var a=window.Platform&&Platform.endOfMicrotask?Platform.endOfMicrotask:setTimeout;a(function(){CustomElements.ready=!0,CustomElements.readyTime=Date.now(),window.HTMLImports&&(CustomElements.elapsed=CustomElements.readyTime-HTMLImports.readyTime),document.dispatchEvent(new CustomEvent("WebComponentsReady",{bubbles:!0})),window.HTMLImports&&(HTMLImports.__importsParsingHook=function(a){CustomElements.parser.parse(a.import)})})}if("function"!=typeof window.CustomEvent&&(window.CustomEvent=function(a){var b=document.createEvent("HTMLEvents");return b.initEvent(a,!0,!0),b}),"complete"===document.readyState||a.flags.eager)b();else if("interactive"!==document.readyState||window.attachEvent||window.HTMLImports&&!window.HTMLImports.ready){var c=window.HTMLImports&&!HTMLImports.ready?"HTMLImportsLoaded":"DOMContentLoaded";window.addEventListener(c,b)}else b()}(window.CustomElements);
</script>
<title>nothing-wrapper-001</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="generator" content="Google Web Designer 1.2.1.0121">
<style type="text/css">html,body{width:100%;height:100%;margin:0px}body{-webkit-transform:matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);-moz-transform:matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);-webkit-perspective:1400px;-moz-perspective:1400px;perspective:1400px;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;background-color:transparent}.gwd-swipegallery-f5jf{position:absolute;left:0px;top:0px;width:350px;height:100%}</style><style data-exports-type="gwd-gesture" data-gwd-node="true" type="text/css">gwd-gesture{display:block;background-color:rgba(0,0,0,0)}</style><style data-exports-type="gwd-image" data-gwd-node="true" type="text/css">img[is=gwd-image].scaled-proportionally{background-repeat:no-repeat;background-position:center}</style><style data-exports-type="gwd-gallerynavigation" data-gwd-node="true" type="text/css">gwd-gallerynavigation{display:block;overflow:hidden;color:#26a9e0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}gwd-gallerynavigation .button-container{text-align:center;display:block;list-style:none;margin:0;z-index:0}gwd-gallerynavigation .button-container .button{display:inline-block;height:24px;position:relative;cursor:pointer;z-index:0;opacity:0.6;transition:opacity .25s}gwd-gallerynavigation .button-container .button:hover,gwd-gallerynavigation .button-container .button:active{opacity:1}gwd-gallerynavigation .button-container .button.active{z-index:5}gwd-gallerynavigation .button-container .button .frame-thumbnail{display:inline-block;position:relative;width:24px;height:24px;background-position:center;background-size:cover;background-repeat:no-repeat;transition:box-shadow .25s,border .25s;border:2px solid rgba(0,0,0,0)}gwd-gallerynavigation .button-container .button.active .frame-thumbnail{border:2px solid currentColor;box-shadow:0 0 6px currentColor}gwd-gallerynavigation .button-container .button .frame-dot{display:inline-block;width:12px;height:12px;margin:6px;border-radius:100%;background-color:white;box-shadow:0 0 6px rgba(0,0,0,0.6);transition:background-color .25s,box-shadow .25s}gwd-gallerynavigation .button-container .button:hover .frame-dot,gwd-gallerynavigation .button-container .button:active .frame-dot{box-shadow:0 0 6px #000}gwd-gallerynavigation .button-container .button.active .frame-dot{background-color:currentColor}</style><style data-exports-type="gwd-swipegallery" data-gwd-node="true" type="text/css">gwd-swipegallery{display:block;overflow:hidden;position:relative;-webkit-transform:translateZ(0)}gwd-swipegallery>.container{position:absolute;background-color:#000}gwd-swipegallery>.gesture{position:absolute;height:auto;top:0;bottom:0;width:100%}gwd-swipegallery>.container>.frame{position:absolute}gwd-swipegallery.has-navigation>.gesture{bottom:32px}gwd-swipegallery>gwd-gallerynavigation{position:absolute;height:28px;bottom:0;width:100%}</style>
<script data-source="gwdgesture_min.js" data-version="1" data-exports-type="gwd-gesture" type="text/javascript">(function(){"use strict";var f=function(a,b,c){var d;c?(d=document.createEvent("CustomEvent"),d.initCustomEvent(a,!0,!0,c)):(d=document.createEvent("Event"),d.initEvent(a,!0,!0));b.dispatchEvent(d);return d};var g=["auto","none","pan-x","pan-y"],l=2,m=null,n=!1,p=null,q=null,r=[],w=function(a,b){var c=b.changedTouches[0];null==m&&(m=c.identifier,p=c.clientX,q=c.clientY,n=!1);u(b);v(a,"pointerover",b);v(a,"pointerdown",b)},x=function(a,b,c){if(!n){var d;if(d=1!=a&&null!=p){var e=c.touches[0];d=Math.abs(e.clientX-p);e=Math.abs(e.clientY-q);d=2==a?d>e:e>d}d?(v(b,"pointercancel",c),n=!0,m=null):(v(b,"pointermove",c),c.preventDefault());q=p=null}},z=function(a,b){n||(u(b),y(b),v(a,"pointerup",b),v(a,"pointerout",
b))},y=function(a){null!=m&&A(a,function(a){m==a.identifier&&(q=p=m=null)})},u=function(a){a=a.changedTouches[0];m==a.identifier&&(a={k:a.clientX,l:a.clientY,m:a.screenX,n:a.screenY},r.push(a),setTimeout(function(a){a=r.indexOf(a);-1<a&&r.splice(a,1)}.bind(null,a),2500))},B=function(a,b,c,d){b=Math.abs(b-d);return 25>=Math.abs(a-c)&&25>=b},C=function(a,b,c,d){var e=document.createEvent("Event");e.initEvent(a,!0,!0);e.clientX=c.clientX;e.clientY=c.clientY;e.pointerId=b;e.isPrimary=d;return e},D={},
E=function(a){a=""+a.identifier;D[a]||(D[a]=l++);return D[a]},F=function(a,b,c){c.preventDefault();var d;t:{for(d=0;d<r.length;d++)if(B(c.clientX,c.clientY,r[d].k,r[d].l)||B(c.screenX,c.screenY,r[d].m,r[d].n)){d=!0;break t}d=!1}d||a.dispatchEvent(C(b,1,c,!0))},G=function(a,b,c){a.dispatchEvent(C(b,c.pointerId,c,c.isPrimary))},v=function(a,b,c){A(c,function(c){a.dispatchEvent(C(b,E(c),c,m==c.identifier))})},A=function(a,b){for(var c=a.changedTouches,d=0,e=c.length;d<e;++d)b(c[d])};var H=function(a){var b=document.createEvent("Event");b.initEvent("tap",!0,!0);b.clientX=a.clientX;b.clientY=a.clientY;return b},J=function(a,b,c){return I(a,c.clientX,c.clientY,c.clientX-b.downX,c.clientY-b.downY,c.clientX-b.lastX,c.clientY-b.lastY)},I=function(a,b,c,d,e,k,t){var h=document.createEvent("Event");h.initEvent(a,!0,!0);h.clientX=b;h.clientY=c;h.dx=d;h.dy=e;h.ddx=k;h.ddy=t;return h};var K=function(a,b){return Math.abs(a)>=Math.abs(b)?0<a?"swiperight":"swipeleft":0<b?"swipedown":"swipeup"};document.registerElement&&document.registerElement("gwd-gesture",{prototype:Object.create(HTMLElement.prototype,{createdCallback:{value:function(){this.a={};this.b=!1;this.g=f.bind(null,"hover",this);this.d=this.down_.bind(this);this.e=this.move_.bind(this);this.h=this.up_.bind(this);this.f=this.out_.bind(this);this.c=this.cancel_.bind(this);this.j=this.hasAttribute("swipe-velocity")?parseFloat(this.getAttribute("swipe-velocity")):.5;this.i=this.hasAttribute("swipe-distance")?parseFloat(this.getAttribute("swipe-distance")):
.1;var a=1;switch(this.getAttribute("touch-action")){case "auto":a=0;break;case "pan-x":a=2;break;case "pan-y":a=3}var a=a||0,b=g[a];this.setAttribute("touch-action",b);this.style.touchAction=b;this.style.msTouchAction=b;navigator.pointerEnabled||(navigator.msPointerEnabled?(this.addEventListener("MSPointerOver",G.bind(null,this,"pointerover"),!1),this.addEventListener("MSPointerDown",G.bind(null,this,"pointerdown"),!1),this.addEventListener("MSPointerMove",G.bind(null,this,"pointermove"),!1),this.addEventListener("MSPointerUp",
G.bind(null,this,"pointerup"),!1),this.addEventListener("MSPointerOut",G.bind(null,this,"pointerout"),!1),this.addEventListener("MSPointerCancel",G.bind(null,this,"pointercancel"),!1)):(this.addEventListener("mouseover",F.bind(null,this,"pointerover"),!1),this.addEventListener("mousedown",F.bind(null,this,"pointerdown"),!1),this.addEventListener("mousemove",F.bind(null,this,"pointermove"),!1),this.addEventListener("mouseup",F.bind(null,this,"pointerup"),!1),this.addEventListener("mouseout",F.bind(null,
this,"pointerout"),!1),void 0!==window.ontouchstart&&(this.addEventListener("touchstart",w.bind(null,this),!1),0!=a&&this.addEventListener("touchmove",x.bind(null,a,this),!1),this.addEventListener("touchend",z.bind(null,this),!1))))},enumerable:!0},attachedCallback:{value:function(){this.addEventListener("pointerover",this.g,!1);this.addEventListener("pointerdown",this.d,!1);this.addEventListener("pointermove",this.e,!1);this.addEventListener("pointerup",this.h,!1);this.addEventListener("pointerout",
this.f,!1);this.addEventListener("pointercancel",this.c,!1)},enumerable:!0},detachedCallback:{value:function(){this.removeEventListener("pointerover",this.g,!1);this.removeEventListener("pointerdown",this.d,!1);this.removeEventListener("pointermove",this.e,!1);this.removeEventListener("pointerup",this.h,!1);this.removeEventListener("pointerout",this.f,!1);this.removeEventListener("pointercancel",this.c,!1)},enumerable:!0},down_:{value:function(a){a.isPrimary&&(this.addPointer_(a),this.b=!1)},enumerable:!1},
move_:{value:function(a){var b=this.a[""+a.pointerId];if(b){if(10<Math.abs(b.downX-a.clientX)||10<Math.abs(b.downY-a.clientY))this.b=!0;b.tracking||(this.dispatchEvent(I("trackstart",b.downX,b.downY,0,0,0,0)),b.tracking=!0);this.dispatchEvent(J("track",b,a));b.lastX=a.clientX;b.lastY=a.clientY}},enumerable:!1},up_:{value:function(a){this.upOut_(a)&&(this.b||this.dispatchEvent(H(a)))},enumerable:!1},out_:{value:function(a){this.upOut_(a);f("hoverend",this)},enumerable:!1},upOut_:{value:function(a){var b=
this.a[""+a.pointerId];b&&(b.tracking&&(this.dispatchEvent(J("trackend",b,a)),this.maybeDispatchSwipe_(b,a)),this.removePointer_(a));return b},enumerable:!1},cancel_:{value:function(a){this.removePointer_(a);this.b=!0},enumerable:!1},removePointer_:{value:function(a){a=""+a.pointerId;this.a[a]&&delete this.a[a]},enumerable:!1},addPointer_:{value:function(a){var b=""+a.pointerId;this.a[b]||(this.a[b]={downX:a.clientX,downY:a.clientY,downTime:a.timeStamp,lastX:a.clientX,lastY:a.clientY,tracking:!1})},
enumerable:!1},maybeDispatchSwipe_:{value:function(a,b){var c=b.clientX-a.downX,d=b.clientY-a.downY,e;t:{var k=b.timeStamp-a.downTime;e=this.i;var t=c/k,k=d/k;if(Math.abs(Math.sqrt(t*t+k*k))<this.j)e=!1;else switch(K(c,d)){case "swipeup":case "swipedown":e=.92<Math.abs(d/Math.sqrt(d*d+c*c))&&Math.abs(d)>=this.clientHeight*e;break t;case "swipeleft":case "swiperight":e=.92<Math.abs(c/Math.sqrt(c*c+d*d))&&Math.abs(c)>=this.clientWidth*e;break t;default:e=!1}}e&&f(K(c,d),this)}}})});})()
</script>
<script data-source="gwdimage_min.js" data-version="1.1" data-exports-type="gwd-image" type="text/javascript">(function(){"use strict";var d=function(a){return"gwd-page"==a.tagName.toLowerCase()||"gwd-page"==a.getAttribute("is")},e=function(a){if(d(a))return a;for(;a&&9!=a.nodeType;)if((a=a.parentElement)&&d(a))return a;return null};var f=function(a,b){var c;c=document.createEvent("Event");c.initEvent(a,!0,!0);b.dispatchEvent(c)};document.registerElement&&document.registerElement("gwd-image",{prototype:Object.create(HTMLImageElement.prototype,{createdCallback:{value:function(){this.b=this.handleLoad_.bind(this);this.a=0;var a=this.getAttribute("src");a&&(this.setAttribute("source",a),this.removeAttribute("src"))},enumerable:!0},attachedCallback:{value:function(){this.addEventListener("load",this.b,!1);this.addEventListener("error",this.b,!1);if("function"==typeof this.gwdLoad){var a=e(this),b="function"==typeof this.gwdIsLoaded,
c=a&&"function"==typeof a.gwdIsLoaded;if(!a||c&&a.gwdIsLoaded())b&&this.gwdIsLoaded()||this.gwdLoad()}},enumerable:!0},detachedCallback:{value:function(){this.removeEventListener("ready",this.b,!1);this.removeEventListener("error",this.b,!1)},enumerable:!0},gwdIsLoaded:{value:function(){return 2==this.a||3==this.a}},gwdLoad:{value:function(){var a=this.getAttribute("source");a?(this.a=1,this.setAttribute("src",a)):f("load",this)},enumerable:!0},handleLoad_:{value:function(a){this.a=a&&"error"==a.type?
3:2;this.applyScaling_();f("ready",this)},enumerable:!1},applyScaling_:{value:function(){var a=this.getAttribute("source"),b=this.getAttribute("scaling")||"stretch";a&&("stretch"!=b?(this.classList.add("scaled-proportionally"),this.style.backgroundImage="url("+JSON.stringify(a)+")",this.style.backgroundSize="none"!=b?b:"auto",this.gwdIsLoaded()&&this.setAttribute("src","data:image/gif;base64,R0lGODlhAQABAPAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==")):(this.classList.remove("scaled-proportionally"),
this.style.backgroundImage="",this.gwdIsLoaded()&&this.setAttribute("src",a)))}},attributeChangedCallback:{value:function(a){"source"==a&&0!==this.a&&this.gwdLoad();"scaling"==a&&this.applyScaling_()},enumerable:!0}}),"extends":"img"});})()
</script>
<script data-source="gwdpage_min.js" data-version="1.1" data-exports-type="gwd-page" type="text/javascript">(function(){"use strict";var b=function(a){setTimeout(a,0)};var d=function(a,e){var c;c=document.createEvent("Event");c.initEvent(a,!0,!0);e.dispatchEvent(c)};document.register&&document.registerElement("gwd-page",{prototype:Object.create(HTMLDivElement.prototype,{createdCallback:{value:function(){this.d=this.handleReadyEvent_.bind(this);this.a=[];this.c=this.b=!1;var a=parseInt(this.getAttribute("data-gwd-width"),10)||this.clientWidth;this.e=(parseInt(this.getAttribute("data-gwd-height"),10)||this.clientHeight)>=a},enumerable:!0},attachedCallback:{value:function(){this.addEventListener("ready",this.d,!1);b(function(){this.a=Array.prototype.slice.call(this.querySelectorAll("*")).filter(function(a){return"function"!=
typeof a.gwdLoad||"function"!=typeof a.gwdIsLoaded||a.gwdIsLoaded()?!1:!0},this);this.c=!0;0<this.a.length?(this.style.visibility="hidden",this.b=!1):this.firePageReadyEvent_();d("attached",this)}.bind(this))},enumerable:!0},detachedCallback:{value:function(){this.removeEventListener("ready",this.d,!1);this.classList.remove("gwd-play-animation");d("detached",this)},enumerable:!0},gwdIsLoaded:{value:function(){return this.c&&0==this.a.length},enumerable:!0},gwdLoad:{value:function(){if(this.gwdIsLoaded())this.firePageReadyEvent_();
else for(var a=this.a.length-1;0<=a;a--)this.a[a].gwdLoad()},enumerable:!0},handleReadyEvent_:{value:function(a){a=this.a.indexOf(a.target);0<=a&&(this.a.splice(a,1),0==this.a.length&&this.firePageReadyEvent_())},enumerable:!1},firePageReadyEvent_:{value:function(){this.style.visibility="";this.b||(d("ready",this),d("pageload",this));this.b=!0},enumerable:!1},gwdPresent:{value:function(){d("pagepresenting",this);this.classList.add("gwd-play-animation")},enumerable:!0},isPortrait:{value:function(){return this.e}}}),
"extends":"div"});})()
</script>
<script data-source="gwdgallerynavigation_min.js" data-version="1.2" data-exports-type="gwd-gallerynavigation" type="text/javascript">(function(){"use strict";var f=function(a){return"gwd-page"==a.tagName.toLowerCase()||"gwd-page"==a.getAttribute("is")},g=function(a){if(f(a))return a;for(;a&&9!=a.nodeType;)if((a=a.parentElement)&&f(a))return a;return null};document.registerElement&&(window.g=document.registerElement("gwd-gallerynavigation",{prototype:Object.create(HTMLElement.prototype,{createdCallback:{value:function(){this.a=null;this.f=this.onGalleryReady_.bind(this);this.e=this.onGalleryFrameActivated_.bind(this);this.d=!1;this.b=document.createElement("div");this.b.classList.add("button-container");this.appendChild(this.b);this.b.addEventListener("click",this.onButtonContainerClicked_.bind(this),!0);this.c=[]},enumerable:!0},getElementByIdOrPseudoId_:{value:function(a){for(var b=
document.getElementById(a),c=!1,d=this.parentNode;!b&&d&&!c;d=d.parentNode)if((c="body"==d.tagName.toLowerCase())||d.hasAttribute("data-gwd-group"))b=d.querySelector('[data-gwd-grp-id="'+a+'"]');return b}},updateBinding_:{value:function(){this.clearGalleryHandlers_();var a=this.getAttribute("for"),b=null;a&&(b=this.getElementByIdOrPseudoId_(a));t:if(b){for(var a="currentIndex frameCount frameSnapInterval getFrame goToFrame goForwards goBackwards rotateOnce".split(" "),c=0;c<a.length;++c)if(!(a[c]in
b)){a=!1;break t}a=!0}else a=!1;a&&(this.a=b,b.addEventListener("frameactivated",this.e),b.gwdIsLoaded()?this.updateButtons_():b.addEventListener("ready",this.f))}},clearGalleryHandlers_:{value:function(){this.a&&(this.a.removeEventListener("ready",this.f),this.a.removeEventListener("frameactivated",this.e))}},onGalleryReady_:{value:function(a){a.target==this.a&&this.updateButtons_()}},onGalleryFrameActivated_:{value:function(a){a.target==this.a&&this.updateActiveButtons_(a.detail.id)}},onButtonContainerClicked_:{value:function(a){for(a=
a.target;a&&a!=this;a=a.parentNode)if(a.gwdTargetFrameNum){this.a.goToFrame(a.gwdTargetFrameNum);break}}},updateButtons_:{value:function(){var a=this.getAttribute("highlight");this.style.color=a||"";this.d=this.hasAttribute("use-thumbnails");for(this.c=[];this.b.firstChild;)this.b.removeChild(this.b.firstChild);if(this.a){for(a=0;a<this.a.frameCount;a+=this.a.frameSnapInterval){var b=document.createElement("span");b.classList.add("button");for(var c=this.d?this.a.frameSnapInterval:1,d=0;d<c;++d){var e=
this.a.getFrame(a+d+1);if(!e)break;e=this.createFrameVisual_(e);b.appendChild(e)}b.gwdTargetFrameNum=a+1;this.c.push(b);this.b.appendChild(b)}this.updateActiveButtons_()}}},createFrameVisual_:{value:function(a){var b=document.createElement("span");if(this.d){b.classList.add("frame-thumbnail");var c;("img"==a.tagName.toLowerCase()&&"gwd-image"==a.getAttribute("is")?a:a.querySelector("img[is=gwd-image]"))&&(c=a.getAttribute("source"));b.style.backgroundImage=c?"url("+JSON.stringify(c)+")":"url(data:image/gif;base64,R0lGODlhAQABAPAAAGZmZgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==)"}else b.classList.add("frame-dot");
return b}},updateActiveButtons_:{value:function(a){a=void 0!=a?a-1:this.a.currentIndex-1;a=Math.floor(a/this.a.frameSnapInterval);for(var b=0;b<this.c.length;b++)this.c[b].classList.remove("active");(a=this.c[a])&&a.classList.add("active")}},attachedCallback:{value:function(){this.updateBinding_();if("function"==typeof this.gwdLoad){var a=g(this),b="function"==typeof this.gwdIsLoaded,c=a&&"function"==typeof a.gwdIsLoaded;if(!a||c&&a.gwdIsLoaded())b&&this.gwdIsLoaded()||this.gwdLoad()}},enumerable:!0},
detachedCallback:{value:function(){this.clearGalleryHandlers_()},enumerable:!0},attributeChangedCallback:{value:function(a){"for"==a?this.updateBinding_():this.updateButtons_()},enumerable:!0}})}));})()
</script>
<script data-source="gwdswipegallery_min.js" data-version="1.2" data-exports-type="gwd-swipegallery" type="text/javascript">(function(){"use strict";var g=function(a){return"gwd-page"==a.tagName.toLowerCase()||"gwd-page"==a.getAttribute("is")},l=function(a){if(g(a))return a;for(;a&&9!=a.nodeType;)if((a=a.parentElement)&&g(a))return a;return null},p=function(a,b,c){a=parseInt(a.getAttribute(b),10);isNaN(a)&&(a=c);return a},q=function(a,b,c){a=parseFloat(a.getAttribute(b));isFinite(a)||(a=c);return a},r=function(a,b,c,d){d=d||b;a.hasAttribute(b)?(a=a.getAttribute(b),c.setAttribute(d,a)):c.removeAttribute(d)};var t=function(a,b){return setInterval(a,b)};var u=["-ms-","-moz-","-webkit-",""],v=function(a,b,c){for(var d,e,f=0;f<u.length;++f)d=u[f]+b,e=""+c,a.style.setProperty(d,e)};var w=function(a,b,c){var d;c?(d=document.createEvent("CustomEvent"),d.initCustomEvent(a,!0,!0,c)):(d=document.createEvent("Event"),d.initEvent(a,!0,!0));b.dispatchEvent(d);return d},x=function(a,b){var c=function(d){a.removeEventListener("attached",c);b(d)};a.addEventListener("attached",c)};var y=function(a){a=a.trim();return window.Enabler?Enabler.getUrl(a):a};var z=function(a){var b=document.createElement("img","gwd-image");b.setAttribute("source",a);return b},A=function(a){var b=[];if(a){a=a.split(",");for(var c=0;c<a.length;++c)b.push(z(y(a[c])))}return b},B=function(a,b){for(var c=0,d=a.length;c<d;c++){var e=a[c];"img"==e.tagName.toLowerCase()&&"gwd-image"==e.getAttribute("is")&&(null!=b?e.setAttribute("scaling",b):e.removeAttribute("scaling"))}},C=function(a,b){for(var c=b.length,d=b.splice(0,c),e,f=0;f<c;f++)e=d[f],"frameshown"==e?w(e,a,{id:a.currentIndex}):
w(e,a)};document.registerElement&&document.registerElement("gwd-swipegallery",{prototype:Object.create(HTMLElement.prototype,{createdCallback:{value:function(){this.v=!1;this.e=null;this.f=[];this.b=null;this.K=this.hasAttribute("images");this.k=0;var a=document.createElement("gwd-gesture");a.className="gesture";this.g=a;this.I=this.onTrack_.bind(this);this.H=this.onTrackEnd_.bind(this);this.G=this.onTap_.bind(this);this.J=this.onFramesLoad_.bind(this);this.w=w.bind(null,"firstinteraction",this);this.F=!1;
this.s=[];this.i=C.bind(null,this,this.s);this.C=this.B=this.r=0;this.j=null;this.a=0;this.q=1;this.t=[];this.u=0;this.d=1;this.L=.7;this.l=0;this.m=!1;this.n=this.A=0;this.c=null;this.D=[];this.o=this.p=-1},enumerable:!0},attachedCallback:{value:function(){this.g.addEventListener("track",this.I,!1);this.g.addEventListener("trackend",this.H,!1);this.g.addEventListener("tap",this.G,!1);this.addEventListener("transitionend",this.i,!1);this.addEventListener("webkitTransitionEnd",this.i,!1);if("function"==
typeof this.gwdLoad){var a=l(this),b="function"==typeof this.gwdIsLoaded,c=a&&"function"==typeof a.gwdIsLoaded;if(!a||c&&a.gwdIsLoaded())b&&this.gwdIsLoaded()||this.gwdLoad()}},enumerable:!0},detachedCallback:{value:function(){this.g.removeEventListener("track",this.I,!1);this.g.removeEventListener("trackend",this.H,!1);this.g.removeEventListener("tap",this.G,!1);this.removeEventListener("transitionend",this.i);this.removeEventListener("webkitTransitionEnd",this.i)},enumerable:!0},attributeChangedCallback:{value:function(a){switch(a){case "images":this.f=
A(this.getAttribute("images"));this.loadFrames_();this.styleAndStart_();break;case "scaling":B(this.f,this.getAttribute("scaling"));break;case "has-navigation":case "navigation-highlight":case "navigation-thumbnails":this.updateNavigationElement_();this.styleAndStart_();break;case "frame-snap-interval":case "transition-duration":case "exit-urls":this.updateSettings_();break;case "frame-width":case "frame-height":case "num-frames-to-display":this.updateSettings_();this.styleAndStart_();break;case "offset":case "start-frame":case "swipe-threshold-ratio":case "swipe-committed-threshold-ratio":this.styleAndStart_()}},
enumerable:!0},updateSettings_:{value:function(){var a=p(this,"num-frames-to-display",1),b=p(this,"frame-snap-interval",1),c=p(this,"transition-duration",600),d=p(this,"frame-width",-1),e=p(this,"frame-height",-1),f;f=this.hasAttribute("exit-urls")?this.getAttribute("exit-urls"):"";-1!=d?a=-1:0<a&&b>a&&(b=a);f=f.split(/,/g);this.h=a;this.d=b;this.r=c;this.D=f;this.p=d;this.o=e}},styleAndStart_:{value:function(){var a=this.clientWidth,b=this.clientHeight;this.c&&(b-=36);var c=p(this,"offset",0),d=
q(this,"swipe-threshold-ratio",.1),e=q(this,"swipe-committed-threshold-ratio",.5),f=-1==this.p?a:this.p,h=-1==this.o?b:this.o,k=1;0<this.h&&(f=(a-(this.h-1)*c)/this.h,k=1+Math.ceil(this.h/2-1));var k=p(this,"start-frame",k),m=f+c,n=1+2*Math.floor((a-f)/(2*m));if(1>n||!isFinite(n))n=1;a=(a-f)/2;b=(b-h)/2;0<this.h&&0==this.h%2&&(a-=(f+c)/2,n+=1);this.N=f;this.M=h;this.A=a;this.n=b;this.q=n;this.l=m;this.B=f*d;this.C=f*e;for(e=c=0;e<this.a;e++)d=this.f[e].style,d.left=c+"px",d.top=b+"px",d.width=f+"px",
d.height=h+"px",c+=m;this.k=0;this.e&&(this.animate_(0,0),this.e.style.left=a+"px");this.b=null;this.goToFrame(k,"none")},enumerable:!1},gwdIsLoaded:{value:function(){return this.v},enumerable:!0},gwdLoad:{value:function(){if(!this.v&&!this.e){var a;if(this.K)a=A(this.getAttribute("images"));else{a=this.childNodes;for(var b=[],c=0,d=a.length;c<d;c++){var e=a[c];e.nodeType==Node.ELEMENT_NODE&&b.push(e)}a=b}this.f=a;this.loadFrames_()}},enumerable:!0},goToFrame:{value:function(a,b){if(0!=this.a){a>
this.a?a=this.a:1>a&&(a=1);var c=a-1,c=c-c%this.d,c=c+Math.floor((this.d-1)/2);c>=this.a&&(c=this.a-1);var d=this.b;this.b=c;c=-this.l*this.b;this.animate_("none"!=b?this.r:0,c);this.k=c;this.markViewedFrames_();d!=this.b&&(this.maybeActivateFrame_(this.b+1),this.s.push("frameshown"));this.F||this.i()}},enumerable:!0},markViewedFrames_:{value:function(){if(this.u)for(var a=Math.floor((this.q-1)/2),b=0;b<this.q;b++){var c=this.b-a+b;if(!(0>c||c>=this.a||this.t[c]||(this.t[c]=!0,--this.u))){this.s.push("allframesviewed");
break}}}},animate_:{value:function(a,b){this.F=0<a;v(this.e,"transition","all "+a+"ms");v(this.e,"transform","translate3d("+b+"px,0,0)")},enumerable:!1},loadFrames_:{value:function(){for(;this.firstChild;)this.removeChild(this.firstChild);this.c=null;this.e&&this.e.removeEventListener("pageload",this.J,!1);for(var a=this.f,b=document.createElement("div","gwd-page"),c,d=0;d<a.length;++d)c=a[d],v(c,"user-select","none"),c.classList.add("frame"),b.appendChild(c);x(b,b.gwdLoad.bind(b));this.e=b;b.className=
"container";this.e.addEventListener("pageload",this.J,!1);B(this.f,this.getAttribute("scaling"));this.a=this.f.length;this.appendChild(b);this.appendChild(this.g)},enumerable:!1},onFramesLoad_:{value:function(a){a.target===this.e&&(this.v=!0,this.u=this.a,this.t=[],this.updateSettings_(),this.updateNavigationElement_(),this.styleAndStart_(),w("allframesloaded",this),this.hasAttribute("autoplay")&&(a=parseInt(this.getAttribute("autoplay-duration"),10)||3E3,setTimeout(this.rotateOnce.bind(this,a),0)),
w("ready",this))},enumerable:!1},rotateOnce:{value:function(a,b){if(this.a&&!this.j){for(var c=a||this.r,d=b||"forwards",e=Math.ceil(this.a/this.d),f=Math.floor(this.b/this.d),h=[],k=1;k<e;k++)h.push((e+("forwards"==d?f+k:f-k))%e*this.d);h.push(this.b);var m=0;this.j=t(function(){this.goToFrame(h[m++]+1);m>=h.length&&this.stopRotation_()}.bind(this),c/h.length)}},enumerable:!0},currentIndex:{get:function(){return 0<this.a?this.b+1:void 0},enumerable:!0},getFrame:{value:function(a){return this.f[a-
1]},enumerable:!0},goForwards:{value:function(a){null!=this.b&&this.goToFrame(this.b+1+this.d,a||"slide")},enumerable:!0},goBackwards:{value:function(a){null!=this.b&&this.goToFrame(this.b+1-this.d,a||"slide")},enumerable:!0},stopRotation_:{value:function(){this.j&&(clearInterval(this.j),this.j=null)},enumerable:!1},indicateCurrentSwipe_:{value:function(a){if(0<a&&0===this.b||0>a&&this.b===this.a-1)a-=a*this.L;this.animate_(0,this.k+a)}},completeCommittedMove_:{value:function(a){var b=this.a;if(b){var c=
this.b;a=this.getNewFrameIndex_(a);this.goToFrame(a+1);c!=a&&(0==a?w("reachleftend",this):a==b-1&&w("reachrightend",this))}}},updateNavigationElement_:{value:function(){var a=this.hasAttribute("has-navigation"),b=!!this.c;a&&!b?(a=this.id||this.getAttribute("data-gwd-grp-id"),this.c=document.createElement("gwd-gallerynavigation"),this.c.setAttribute("for",a),this.classList.add("has-navigation"),this.appendChild(this.c)):!a&&b&&(this.classList.remove("has-navigation"),this.removeChild(this.c),this.c=
null);this.c&&(r(this,"navigation-highlight",this.c,"highlight"),r(this,"navigation-thumbnails",this.c,"use-thumbnails"))}},getNewFrameIndex_:{value:function(a){var b=this.b;Math.abs(a)>this.B&&(b=0>a?b+this.d:b-this.d);0>b?b=0:b>=this.a&&(b=this.a-1);return b}},maybeActivateFrame_:{value:function(a){this.O!=a&&(this.O=a,w("frameactivated",this,{id:a||this.currentIndex}))}},onTrack_:{value:function(a){this.w&&(this.w(),this.w=null);this.m||(this.stopRotation_(),a=a.dx,this.maybeActivateFrame_(this.getNewFrameIndex_(a)+
1),Math.abs(a)>this.C?(this.completeCommittedMove_(a),this.m=!0):this.indicateCurrentSwipe_(a))},enumerable:!1},onTrackEnd_:{value:function(a){this.m?this.m=!1:this.completeCommittedMove_(a.dx)},enumerable:!1},onTap_:{value:function(a){this.stopRotation_();var b=this.getBoundingClientRect(),c=a.clientX-b.left;a=a.clientY-b.top;a<this.n||a>this.n+this.M||(a=c-this.k-this.A,c=Math.floor(a/this.l),a%=this.l,0>c||c>=this.a||a>this.N||((a=this.D[c])&&!w("frameexit",this,{url:a}).detail.handled&&window.open(a),
w("frametap",this,{id:c+1})))},enumerable:!1},frameSnapInterval:{get:function(){return this.d}},frameCount:{get:function(){return this.a}}})});})()
</script>
</head>
<body>
<gwd-swipegallery id="nothing-wrapper-001" scaling="contain" class="gwd-swipegallery-f5jf" data-gwd-name="nothing-gallery-wrapper" images="gallery-holder_artboard-001-clean_1.svg,gallery-holder_artboard-002-clean_1.svg,gallery-holder_artboard-003-clean_1.svg" start-frame="2"></gwd-swipegallery>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment