@crispcode/shimmer 5.0.0

package/scripts/controls.js

@@ -0,0 +1,95 @@
+'use strict'
+
+export class Controls {
+  /**
+    * The pixi application renderer
+    * @param {Renderer} renderer
+    */
+  constructor ( renderer ) {
+    this.__renderer = renderer
+    this.__listeners = []
+  }
+
+  /**
+   * Returns the custom event names
+   * @param {String} name The base event name
+   * @returns {String}
+   */
+  __getEventName ( name ) {
+    return name // 'shimmer' + name.charAt( 0 ).toUpperCase() + name.slice( 1 )
+  }
+
+  /**
+   * Returns the pixi element at position { x,y }
+   * @param {Integer} x The x coordonate on the renderer
+   * @param {Integer} y The y coordonate on the renderer
+   * @returns {DisplayObject}
+   */
+  __getTarget ( x, y ) {
+    let target = this.__renderer.plugins.interaction.hitTest( { x: x, y: y } )
+    if ( target && target.interactive ) {
+      return target
+    }
+    return null
+  }
+
+  /**
+   * Enables mouse wheel event on elements
+   */
+  enableWheel () {
+    let onPush = ( e ) => {
+      let target = this.__getTarget( e.offsetX, e.offsetY )
+      if ( target && target.interactive ) {
+        target.emit( this.__getEventName( 'wheel' ), e )
+      }
+    }
+
+    this.__renderer.view.addEventListener( 'wheel', onPush, { passive: false } )
+    this.__listeners.push( () => {
+      this.__renderer.view.removeEventListener( 'wheel', onPush, { passive: false } )
+    } )
+  }
+
+  /**
+   * Enables long taps ( long clicks ) event on elements
+   */
+  enableLongtap () {
+    let onPush = ( e ) => {
+      let target = this.__getTarget( e.offsetX, e.offsetY )
+      let timeout = null
+      if ( target && target.interactive ) {
+        timeout = setTimeout( () => {
+          target.emit( this.__getEventName( 'longtap' ), e )
+        }, 700 )
+      }
+
+      let onRelease = () => {
+        clearTimeout( timeout )
+      }
+
+      this.__renderer.view.addEventListener( 'touchend', onRelease, { once: true } )
+      this.__renderer.view.addEventListener( 'mouseup', onRelease, { once: true } )
+    }
+
+    this.__renderer.view.addEventListener( 'touchstart', onPush, { passive: false } )
+    this.__listeners.push( () => {
+      this.__renderer.view.removeEventListener( 'touchstart', onPush )
+    } )
+
+    this.__renderer.view.addEventListener( 'mousedown', onPush, { passive: false } )
+    this.__listeners.push( () => {
+      this.__renderer.view.removeEventListener( 'mousedown', onPush )
+    } )
+  }
+
+  /**
+   * Destroys all listeners
+   */
+  destroy () {
+    this.__listeners.map( ( removeListener ) => {
+      removeListener()
+      return true
+    } )
+    this.__listeners = []
+  }
+}

package/scripts/element.js

@@ -0,0 +1,154 @@
+'use strict'
+
+import { loop, uid } from '@crispcode/modux'
+
+import { Container } from '@pixi/display'
+
+import { Tween } from './tween.js'
+
+/**
+ * This class is used to create elements for shimmer
+ */
+export class Element extends Container {
+  /**
+   * Creates an instance of Element
+   */
+  constructor () {
+    super()
+
+    /**
+     * Stores the current horizontal position of the Element
+     * @type {Number}
+     */
+    this.x = 0
+
+    /**
+     * Stores the current vertical position of the Element
+     * @type {Number}
+     */
+    this.y = 0
+
+    /**
+     * Stores the current alpha value for the Element
+     * @type {Number}
+     */
+    this.alpha = 1
+
+    /**
+     * Holds all the Tween instances for the Element
+     * @type {Object}
+     * @private
+     */
+    this.__tweens = {}
+
+    /**
+     * Holds all the sub elements of the Element
+     * @type {Object}
+     * @private
+     */
+    this.__children = {}
+  }
+
+  /**
+   * Creates a new tween for the Element
+   * @param {Number} from The start point for the Tween
+   * @param {Number} to The end point for the Tween
+   * @param {Number} step The step value for the Tween
+   * @param {Function} oneach A listener which gets called on each Tween step
+   * @param {String} id An specific identifier to use in this element. If not defined, a random unique one will be used.
+   * @return {Promise} The promise is resolved on tween end
+   */
+  createTween ( from, to, step, oneach, id ) {
+    return new Promise( ( resolve ) => {
+      id = id || uid()
+      let tween = new Tween( from, to, step )
+      tween.end( () => {
+        delete this.__tweens[ id ]
+        resolve()
+      } )
+      if ( typeof oneach === 'function' ) {
+        tween.each( oneach )
+      }
+      this.__tweens[ id ] = tween
+    } )
+  }
+
+  /**
+   * Removes a tween from the element
+   * @param {String} id An specific identifier to used remove tweens from the element
+   */
+  removeTween ( id ) {
+    if ( id ) {
+      delete this.__tweens[ id ]
+    } else {
+      this.__tweens = {}
+    }
+  }
+
+  /**
+   * Adds a sub element. An element child
+   * @param {String} id An identifier for the added child
+   * @param {Element} element An instance of the Element class
+   * @return {Element} The current instance
+   */
+  addElementChild ( id, element ) {
+    super.addChild( element )
+    this.__children[ id ] = element
+    return this
+  }
+
+  /**
+   * Removes a sub element. An element child
+   * @param {String} id An identifier used to find the child
+   * @return {Element} The current instance
+   */
+  removeElementChild ( id ) {
+    let element = this.__children[ id ]
+    super.removeChild( element )
+    delete this.__children[ id ]
+    return this
+  }
+
+  /**
+   * Returns a child or all child Elements
+   * @param {String} [name=null] If provided, will return the child with this identifier
+   * @return {Object} An object containing all the child Elements
+   */
+  getElementChild ( name ) {
+    if ( name ) {
+      return this.__children[ name ]
+    }
+    return this.__children
+  }
+
+  /**
+   * Sets element visibility to true
+   * @return {Promise} A promise wich is resolved once the method is fully executed
+   */
+  show () {
+    this.alpha = 1
+    return Promise.resolve()
+  }
+
+  /**
+   * Sets element visibility to false
+   * @return {Promise} A promise wich is resolved once the method is fully executed
+   */
+  hide () {
+    this.alpha = 0
+    return Promise.resolve()
+  }
+
+  /**
+   * A method called by the renderer on each animation frame
+   * @param {Number} delta The delta time between cycles
+   */
+  tick ( delta ) {
+    loop( this.__tweens, ( tween ) => {
+      tween.next( delta )
+    } )
+    loop( this.getElementChild(), ( element ) => {
+      element.tick( delta )
+    } )
+  }
+}

package/scripts/index.js

@@ -0,0 +1,28 @@
+'use strict'
+
+import { Shimmer } from './shimmer.js'
+
+import { Button } from './button.js'
+import { Element } from './element.js'
+import { Tween } from './tween.js'
+
+import { Sprite } from '@pixi/sprite'
+import { AnimatedSprite } from '@pixi/sprite-animated'
+import { Text } from '@pixi/text'
+import { Graphics } from '@pixi/graphics'
+import { BaseTexture, Texture } from '@pixi/core'
+
+export {
+  Shimmer,
+
+  Button,
+  Element,
+  Tween,
+
+  Sprite,
+  AnimatedSprite,
+  Text,
+  Texture,
+  BaseTexture,
+  Graphics
+}

package/scripts/shimmer.js

@@ -0,0 +1,195 @@
+/* globals window */
+
+'use strict'
+
+import { Component, extend, loop, logger } from '@crispcode/modux'
+
+import { autoDetectRenderer, Renderer, BatchRenderer } from '@pixi/core'
+import { Loader } from '@pixi/loaders'
+import { Ticker } from '@pixi/ticker'
+import { InteractionManager } from '@pixi/interaction'
+import { skipHello, isWebGLSupported } from '@pixi/utils'
+
+// Canvas support
+import '@pixi/canvas-display'
+import { CanvasExtract } from '@pixi/canvas-extract'
+import { CanvasGraphicsRenderer } from '@pixi/canvas-graphics'
+import { CanvasMeshRenderer } from '@pixi/canvas-mesh'
+import '@pixi/canvas-particle-container'
+import { CanvasPrepare } from '@pixi/canvas-prepare'
+import { CanvasRenderer } from '@pixi/canvas-renderer'
+import '@pixi/canvas-sprite-tiling'
+import { CanvasSpriteRenderer } from '@pixi/canvas-sprite'
+import '@pixi/canvas-text'
+
+import { Element } from './element.js'
+import { Controls } from './controls.js'
+
+Renderer.registerPlugin( 'interaction', InteractionManager )
+Renderer.registerPlugin( 'batch', BatchRenderer )
+
+CanvasRenderer.registerPlugin( 'interaction', InteractionManager )
+CanvasRenderer.registerPlugin( 'extract', CanvasExtract )
+CanvasRenderer.registerPlugin( 'graphics', CanvasGraphicsRenderer )
+CanvasRenderer.registerPlugin( 'mesh', CanvasMeshRenderer )
+CanvasRenderer.registerPlugin( 'prepare', CanvasPrepare )
+CanvasRenderer.registerPlugin( 'sprite', CanvasSpriteRenderer )
+
+/**
+ * This class is used to create the shimmer component
+ */
+export class Shimmer extends Component {
+  /**
+   * The html string that becomes the view for this component
+   * @type {String}
+   */
+  get template () {
+    return '<canvas style="display: block; width: 100%; height: 100%;"></canvas>'
+  }
+
+  /**
+   * The initialization options for shimmer
+   * @type {Object}
+   */
+  get settings () {
+    return {}
+  }
+
+  /**
+   * The method gets called whenever the container is resized
+   * @param {Number} width The width of the container
+   * @param {Number} height The height of the container
+   */
+  onResize ( width, height ) {
+
+  }
+
+  /**
+   * This method preloads a colection of assets
+   * @param {Object} assets A collection of assets
+   * @return {Promise} A promise which is resolved upon loading the assets. It resolves the loaded resources.
+   */
+  preload ( assets ) {
+    let loader = new Loader()
+    return new Promise( ( resolve ) => {
+      loop( assets, ( data, name ) => {
+        loader.add( name, data )
+      } )
+      loader.load( ( loader, resources ) => {
+        resolve( resources )
+      } )
+    } )
+  }
+
+  /**
+   * Creates an instance of Shimmer
+   * @param {HTMLElement} parent The parent wrapper
+   * @param {Module} module The parent module instance
+   * @param {Store} store An instance of @crispcode/pushstore, see https://www.npmjs.com/package/@crispcode/pushstore
+   */
+  constructor ( parent, module, store ) {
+    super( parent, module, store )
+
+    skipHello()
+
+    /**
+     * Stores the parent Element
+     * @type {Element}
+     */
+    this.stage = new Element()
+
+    /**
+     * Holds the previous width and height of the element
+     * @type {Object}
+     * @private
+     */
+    let previousElementSize = {}
+    /**
+     * Determines if the component watches for resize changes in parent dimensions
+     * @type {Boolean}
+     * @private
+     */
+    this.__resizeWatcher = true
+    /**
+     * This function checks for element size changes every 100ms as long as the component exists
+     * @type {Function}
+     * @private
+     */
+    const parentResizeCheck = () => {
+      setTimeout( () => {
+        if ( this.__resizeWatcher ) {
+          if ( previousElementSize.width !== this.element.clientWidth || previousElementSize.height !== this.element.clientHeight ) {
+            previousElementSize.width = this.element.clientWidth
+            previousElementSize.height = this.element.clientHeight
+            this.onResize( previousElementSize.width, previousElementSize.height )
+          }
+          parentResizeCheck()
+        }
+      }, 100 )
+    }
+    parentResizeCheck()
+
+    /**
+     * Stores the main ticker, which handles animation frames
+     * @type {Ticker}
+     */
+    this.ticker = new Ticker()
+    this.ticker.add( ( delta ) => {
+      this.stage.tick( delta )
+      this.renderer.render( this.stage )
+    } )
+
+    /**
+     * Renderer initialization settings
+     * @type {Object}
+     * @private
+     */
+    const rendererSettings = extend( {
+      view: this.element,
+      autoDensity: false,
+      backgroundAlpha: 0,
+      backgroundColor: 0x000000,
+      antialias: true,
+      resolution: window.devicePixelRatio || 1
+    }, {
+      autoDensity: this.settings.autoDensity,
+      backgroundAlpha: this.settings.backgroundAlpha,
+      backgroundColor: this.settings.backgroundColor,
+      antialias: this.settings.antialias,
+      resolution: this.settings.resolution
+    } )
+
+    /**
+     * Stores the renderer
+     * @type {Renderer}
+     */
+    this.renderer = ( isWebGLSupported() && !this.settings.forceCanvas ) ? autoDetectRenderer( rendererSettings ) : new CanvasRenderer( rendererSettings )
+
+    this.renderer.resize( this.element.clientWidth, this.element.clientHeight )
+
+    this.renderer.plugins.interaction.autoPreventDefault = false
+
+    if ( !isWebGLSupported() ) {
+      logger.warn( 'WebGL is not supported. Using Canvas fallback.' )
+    }
+
+    /**
+     * Stores the controls class, responsible with implementing special gestures
+     */
+    this.controls = new Controls( this.renderer )
+    this.controls.enableWheel()
+    this.controls.enableLongtap()
+  }
+
+  /**
+   * The method gets called when the component is destroyed
+   */
+  __destroy () {
+    super.__destroy()
+    this.controls.destroy()
+    this.__resizeWatcher = false
+    if ( this.ticker.started ) {
+      this.ticker.stop()
+    }
+  }
+}

package/scripts/tween.js

@@ -0,0 +1,147 @@
+'use strict'
+
+import { approx, loop } from '@crispcode/modux'
+
+/**
+ * This class is used to create a tween
+ */
+export class Tween {
+  /**
+   * Creates an instance of Shimmer
+   * @param {Number} from The start number
+   * @param {Number} to The end number
+   * @param {Number} step The value to increment by on each render
+   */
+  constructor ( from, to, step ) {
+    /**
+     * Stores all event handlers attached
+     * @type {Object}
+     * @private
+     */
+    this.__eventHandlers = {}
+
+    /**
+     * Stores the starting point for the loop
+     * @type {Number}
+     */
+    this.from = from || 0
+
+    /**
+     * Stores the end point for the loop
+     * @type {Number}
+     */
+    this.to = to || 0
+
+    /**
+     * Stores the step value for the loop
+     * @type {Number}
+     */
+    this.step = step || 0
+
+    /**
+     * Stores the current frame in the tween
+     * @type {Number}
+     * @private
+     */
+    this.__current = this.from
+  }
+
+  /**
+   * Method to attach an event listener to tween
+   * @param {String} ev The event name
+   * @param {Function} handler The event handler to be attached to the tween
+   * @return {Tween} Returns the instance of the class
+   */
+  on ( ev, handler ) {
+    this.__eventHandlers[ ev ] = this.__eventHandlers[ ev ] || []
+    if ( typeof handler !== 'function' ) {
+      throw new Error( 'Tween expects an event handler ( function ) ' + ( typeof handler ) + ' given' )
+    }
+    this.__eventHandlers[ ev ].push( handler )
+    return this
+  }
+
+  // Shorthand event handlers
+
+  /**
+   * Short hand for the onEach event listener to attach
+   * @param {Function} handler The event handler to be attached to the tween
+   * @return {Tween} Returns the instance of the class
+   */
+  each ( handler ) {
+    return this.on( 'each', handler )
+  }
+  /**
+   * Short hand for the onEnd event listener to attach
+   * @param {Function} handler The event handler to be attached to the tween
+   * @return {Tween} Returns the instance of the class
+   */
+  end ( handler ) {
+    return this.on( 'end', handler )
+  }
+
+  /**
+   * Calls every event listener attached to the class
+   * @param {String} name The event name
+   * @param {Number} value The value to be sent to each handler
+   * @private
+   */
+  __triggerEvent ( name, value ) {
+    let events = this.__eventHandlers[ name ] || []
+    loop( events, ( event ) => {
+      event.call( this, value )
+    } )
+  }
+
+  /**
+   * Moves to a specific position in the tween
+   * @param {Number} frame The numeric position to move to in the tween
+   * @return {Tween} Returns the instance of the class
+   */
+  goto ( frame ) {
+    if ( frame ) {
+      this.__current = frame
+    } else {
+      this.__current = this.from
+    }
+    return this
+  }
+
+  /**
+   * Method moves forward in the tween based on the detal
+   * @param {Number} delta The time interval caused by FPS
+   */
+  next ( delta ) {
+    this.__current = approx( this.__current + approx( this.step * delta, 6 ), 6 )
+
+    if (
+      ( ( this.from <= this.to ) && ( this.__current >= this.to ) ) ||
+      ( ( this.from >= this.to ) && ( this.__current <= this.to ) )
+    ) {
+      // End
+      this.__triggerEvent( 'end' )
+      this.__current = this.to
+    }
+
+    this.__triggerEvent( 'each', this.__current )
+  }
+
+  /**
+   * Method moves backwards in the tween based on the detal
+   * @param {Number} delta The time interval caused by FPS
+   */
+  prev ( delta ) {
+    this.__current = approx( this.__current - approx( this.step * delta, 6 ), 6 )
+
+    if (
+      ( ( this.from <= this.to ) && ( this.__current <= this.from ) ) ||
+      ( ( this.from >= this.to ) && ( this.__current >= this.from ) )
+    ) {
+      // End
+      this.__triggerEvent( 'end' )
+      this.__current = this.from
+    }
+
+    this.__triggerEvent( 'each', this.__current )
+  }
+}

package/test/app.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<head>
+    <title> Shimmer </title>
+
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="format-detection" content="telephone=no">
+    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no">
+    
+    <meta name="HandheldFriendly" content="true" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+    <meta name="apple-mobile-web-app-title" content="Open the Box">
+
+    <script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?flags=gated&features=default%2CMutationObserver%2CString.prototype.padStart%2Cconsole.info"></script>    
+
+    <base href="/" />
+        
+    <link rel="stylesheet" href="app.min.css" />
+
+    <script>
+        var config = {
+            debug: true
+        }
+    </script>
+</head>
+<body>
+    <script src="app.min.js"></script>
+</body>
+</html>

package/test/app.js

@@ -0,0 +1,4 @@
+'use strict'
+
+require( './styles/index.scss' )
+require( './scripts/index.js' )

package/test/modux.config.js

@@ -0,0 +1,8 @@
+'use strict'
+
+module.exports = ( config ) => {
+  // Enable logging in webpack
+  config.stats = 'normal'
+
+  return config
+}

package/test/scripts/components/layout/index.js

@@ -0,0 +1,9 @@
+'use strict'
+
+import { Component } from '@crispcode/modux'
+
+export class LayoutComponent extends Component {
+  get template () {
+    return require( './template.html' )
+  }
+}

package/test/scripts/components/layout/template.html

@@ -0,0 +1,3 @@
+<section class="layout">
+    <section data-modux-component="shimmer"></section>
+</section>