1 /*
  2   JWL - The JavaScript Widget Library version 0.8.7
  3   Copyright (c) 2016 - 2020 The Zonebuilder <zone.builder@gmx.com>
  4   http://sourceforge.net/projects/jwl-library/
  5   Licenses: GNU GPL2 or later; GNU LGPLv3 or later (http://sourceforge.net/p/jwl-library/wiki/License/)
  6  */
  7 /**
  8   @fileOverview  JWL.components.frameplayer configuration
  9 */
 10 /* jshint browser: true, curly: true, eqeqeq: true, expr: true, funcscope: true, immed: true, latedef: true, loopfunc: true,  
 11   onevar: true, newcap: true, noarg: true, node: true, strict: true, trailing: true, undef: true, unused: vars, wsh: true */
 12 /* globals JUL */
 13 
 14 (function(global, module) {
 15 'use strict';
 16 if (module && module.exports && typeof require === 'function') { require('jul'); }
 17 var jul = new JUL.Instance({nsRoot: module && module.exports ? {JWL: module.exports} : global || null});
 18 var JWL = jul.ns('JWL');
 19 
 20 /* generated by JCS version 1.5.8 */
 21 
 22 /**
 23   A player that displays a sequence of pictures
 24   @namespace  JWL.components.frameplayer namespace
 25   @name  JWL.components.frameplayer
 26 */
 27 jul.ns('JWL.components.frameplayer');
 28 
 29 jul.apply(jul.get('JWL.components.frameplayer'), /** @lends JWL.components.frameplayer */ {
 30   /**
 31     Component UI
 32     @type  Object
 33   */
 34   ui: {
 35     tag: 'div', cid: '.frameplayer', css: 'frameplayer', children: [
 36       {tag: 'div', children: [
 37         {tag: 'img', cid: '.frameplayer-image', alt: 'frame', css: 'frameplayer-image', height: '135', src: 'frame.jpg',
 38          width: '240'}
 39       ]},
 40       {tag: 'div', css: 'left', title: 'JWL Frameplayer', children: [
 41         {xclass: 'svg', tag: 'svg', height: '32', include: 'JWL.resources.svglogo.ui', width: '32', parserConfig: {
 42           defaultClass: 'svg'
 43         }}
 44       ]},
 45       {tag: 'span', css: 'center', children: [
 46         {tag: 'playerbar', cid: '.frameplayer-playerbar'}
 47       ]},
 48       {tag: 'div', css: 'right', children: [
 49         {tag: 'jsonoptions', cid: '.frameplayer-jsonoptions'}
 50       ]},
 51       {tag: 'div', css: 'clear'}
 52     ]
 53   },
 54   /**
 55     Component logic
 56     @type  Object
 57   */
 58   logic: {
 59     '.frameplayer': {
 60       listeners: {
 61         gotoend: function () {
 62           this.gotoEnd();
 63         },
 64         gotostart: function () {
 65           this.gotoStart();
 66         },
 67         optionschanged: function () {
 68           this.stop();
 69         },
 70         pause: function () {
 71           this.pause();
 72         },
 73         play: function () {
 74           this.play();
 75         },
 76         stepbackward: function () {
 77           this.stepBackward();
 78         },
 79         stepforward: function () {
 80           this.stepForward();
 81         },
 82         stop: function () {
 83           this.stop();
 84         }
 85       }
 86     }
 87   },
 88   /**
 89     Component pre-creation callback
 90     @param  {Object}  oConfig  Runtime configuration
 91     @param  {Object}  oParser  Current parser
 92   */
 93   preCreate: function(oConfig, oParser) {
 94     var oMap = {
 95       'data-image-width': '.frameplayer-image.width',
 96       'data-image-height': '.frameplayer-image.height',
 97       'data-image-src': '.frameplayer-image.src',
 98       'data-image-alt': '.frameplayer-image.alt',
 99       'data-options': '.frameplayer-jsonoptions.data-options'
100     };
101     var sItem;
102     // gather options for custom HTML elements
103     var oHost = this ? this.host || this : null;
104     if (oHost && oHost._componentName) {
105       for (sItem in oMap) {
106         if (oMap.hasOwnProperty(sItem)) { oConfig[sItem] = oHost.getAttribute(sItem); }
107       }
108     }
109     // pass the appropriate options to descendants
110     for (sItem in oMap) {
111       if (oMap.hasOwnProperty(sItem) && oConfig[sItem]) {
112         oConfig[oMap[sItem]] = oConfig[sItem];
113       }
114     }
115   },
116   /**
117     Component prototype members
118     @type  Object
119   */
120   prototype: {
121     /**
122       Timer instance
123       @type  Object
124     */
125     cron: null,
126      /**
127       Current frame
128       @type  Number
129     */
130     current: -1,
131      /**
132       Goes to the last frame
133     */
134     gotoEnd: function() {
135       this.current = 1e9;
136       this.play();
137       this.pause();
138       this.showStop();
139     },
140     /**
141       Goes to the first frame
142     */
143     gotoStart: function() {
144       this.current = -1;
145       this.play();
146       this.pause();
147       this.showStop();
148     },
149     /**
150       Pauses the playback
151     */
152     pause: function() {
153       if (this.cron) { clearTimeout(this.cron); }
154       this.cron = null;
155     },
156     /**
157       Plays the sequence starting from the current frame
158     */
159     play: function() {
160       var oOpts = JWL.get(this).querySelector('.jwl-jsonoptions').getAttribute('data-options') || '';
161       try { oOpts = JSON.parse(oOpts); } catch (e) {}
162       oOpts = JUL.apply({
163         template: 'frame.jpg',
164         range: [0, 0],
165         interval: 1000
166       }, oOpts || {});
167       if (this.current < oOpts.range[0]) { this.current = oOpts.range[0]; }
168       if (this.current > oOpts.range[1]) { this.current = oOpts.range[1]; }
169       var nVal = oOpts.zeropad ? (parseFloat('1e' + oOpts.range[1].toString().length) + this.current).toString().substr(1) : this.current;
170       var oImg = JWL.get(this).querySelector('.frameplayer-image' );
171       var sSrc = oOpts.template.replace('{n}', nVal);
172       oImg.setAttribute('src', sSrc);
173       oImg.setAttribute('alt', sSrc.split('/').pop().split('.')[0]);
174       this.current++;
175       var oThis = this;
176       if (this.cron) { clearTimeout(this.cron); }
177       this.cron = setTimeout(this.current > oOpts.range[1] ? 
178         function() { oThis.stop(); } : function() { oThis.play(); }, oOpts.interval);
179     },
180     /**
181       Syncs the display of the player with the stop state
182     */
183     showStop: function() {
184       JWL.get(this).querySelector('.jwl-playerbar').showPlay();
185     },
186     /**
187       Displays the previous frame
188     */
189     stepBackward: function() {
190       this.current -= 2;
191       this.play();
192       this.pause();
193       this.showStop();
194     },
195     /**
196       Displays the next frame
197     */
198     stepForward: function() {
199       this.play();
200       this.pause();
201       this.showStop();
202     },
203     /**
204       Stops the playback
205     */
206     stop: function() {
207       this.pause();
208       this.current = -1;
209       this.showStop();
210       var oImg = JWL.get(this).querySelector('.frameplayer-image');
211       oImg.setAttribute('src', this.getAttribute('data-image-src'));
212       oImg.setAttribute('alt', this.getAttribute('data-image-alt'));
213     }
214   },
215   /**
216     Array of internal/external CSS for registering the custom element
217     @type  Array|String
218   */
219   css: 'lib/jwl/css/frameplayer.css?v=0.8.5'
220 });
221 
222 })(typeof global !== 'undefined' ? global : window, typeof module !== 'undefined' ? module : null);
223 
224 /* end JWL.components.frameplayer.js */
225