markusjs/lib/markus.es.js

The framework for creating declarative interfaces based on pixi.js

/*!
 * markusjs - v0.2.0
 * Compiled Sun, 18 Nov 2018 21:16:52 UTC
 *
 * Writed by Andrey Zhevlakov <azbangwtf@ya.ru>
 * markusjs is licensed under the MIT License.
 * http://www.opensource.org/licenses/mit-license
 */
var Parser=function(t){void 0===t&&(t="ajax"),this.loadType=t};function Element(t){return void 0===t&&(t=function(){return function(){}}()),function(t){function e(e,r){t.call(this,r),this.mark=e.view,this.element=e.element,this.presets=e.presets,this.id=e.id,this.tags=e.tags.slice(0),this.parentElement=e.parent||e.view,this.childList=[],this.ticks=[],this.props=e.props,this._bindToParentNode()}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype._bindToParentNode=function(){this.parentElement.childList.push(this),this instanceof PIXI.DisplayObject&&(this.parentElement instanceof PIXI.DisplayObject?this.parentElement.addChild(this):this.parentElement.stage.addChild(this))},e.prototype.addTag=function(t){-1===this.tags.indexOf(t)&&this.tags.push(t)},e.prototype.removeTag=function(t){var e=this.tags.indexOf(t);-1!==e&&this.tags.splice(e,1)},e.prototype.setProps=function(t){var e=this,r=function(r){if("function"==typeof t[r])t[r].call(e);else if("on"===r&&"object"==typeof t[r]){var i=function(i){e.on(i,function(){e.setProps(t[r][i])})};for(var n in t[r])i(n)}else Array.isArray(e[r])?e[r]=e[r].concat(t[r]):"object"==typeof e[r]&&null!=e[r]&&e[r].set?"object"==typeof t[r]?(e[r].x=t[r].x,e[r].y=t[r].y):e[r].set(t[r]):"object"==typeof e[r]&&null!=e[r]&&"object"==typeof t[r]?Object.assign(e[r],t[r]):e[r]=t[r]};for(var i in t)r(i)},e.prototype.addTick=function(t){this.ticks.push(t)},e.prototype.tick=function(t){for(var e=0;e<this.ticks.length;e++)this.ticks[e](t)},e}(t)}Parser.prototype.parseMarkfile=function(t){var e=this;return new Promise(function(r){e.imports([t]).then(function(t){var i=t[0].data,n=e.getImports(i);e.imports(n).then(function(t){for(var n=0;n<t.length;n++){if(e.getImports(t[n].data).length)throw Error("Imports are possible only in the entry file.");i=i.replace("import "+t[n].path,t[n].data)}var o=e.parsePresets(i.split("\n"));r(e.generateTree(o))})})})},Parser.prototype.imports=function(t){for(var e=this,r=[],i=function(i){"ajax"===e.loadType&&r.push(fetch(t[i]).then(function(e){if(404===e.status)throw Error('Markus module "'+t[i]+'" is not found');return e.text()}).then(function(e){return{name:t[i].split("/").slice(-1)[0],path:t[i],data:e}}))},n=0;n<t.length;n++)i(n);return Promise.all(r)},Parser.prototype.generateTree=function(t){for(var e,r,i,n,o,s=[],a=t.length-1;a>=0;a--)if(0!==t[a].depth){for(var p=a-1;p>=0;p--)if(t[p].depth<t[a].depth){var h=t[p],c=t[a];if("valueNode"===c.type)if("elementNode"===h.type)h.value=c.value+(h.value?"\n"+h.value:"");else{if("propNode"!==h.type)throw Error("valueNode cannot be a child of a "+h.type);!0===h.value&&(h.value=""),h.value=c.value+(h.value?"\n"+h.value:"")}else if("propNode"===c.type)if("propNode"===h.type)"string"==typeof h.value?(h.directory=h.value,h.value=((r={})[h.value]=((e={})[c.name]=c.value,e),r)):h.directory?Object.assign(h.value[h.directory],((i={})[c.name]=c.value,i)):"object"==typeof h.value&&null!=h.value?Object.assign(h.value,((n={})[c.name]=c.value,n)):h.value=((o={value:h.value})[c.name]=c.value,o);else{if("elementNode"!==h.type)throw Error("propNode cannot be a child of a "+h.type);Array.isArray(h.props[c.name])?h.props[c.name].push(c.value):"object"==typeof h.props[c.name]?Object.assign(h.props[c.name],c.value):h.props[c.name]?h.props[c.name]=[h.props[c.name],c.value]:h.props[c.name]=c.value}else if("elementNode"===c.type){if("elementNode"!==h.type)throw Error("elementNode cannot be a child of a "+h.type);h.presets.unshift(c)}break}}else s.push(t[a]);return s},Parser.prototype.parsePresets=function(t){for(var e=[],r=0;r<t.length;r++){var i=this.parsePreset(t[r]);null!=i&&e.push(i)}return e},Parser.prototype.parsePreset=function(t){t=this.removeComment(t);var e="elementNode",r=this.getDepth(t),i=this.getAttr(t);if(i)return{type:"propNode",depth:r,name:i[1],value:i[2],typeAttr:i[0]};var n=this.getElement(t),o=this.getTags(t),s=this.getValue(t),a=this.getId(t),p=[];if(null==n)if(o.length||a)n="";else{if(!s)return;e="valueNode"}return"valueNode"!==e&&(p=this.getInlineAttrs(t)),{type:e,element:n,value:s,props:p,tags:o,id:a,depth:r,presets:[]}},Parser.prototype.parseValue=function(t){return"on"===t||"yes"===t||"true"===t||"off"!==t&&"no"!==t&&"false"!==t&&(/^[-\.\+]?[0-9]+\.?([0-9]+)?$/.test(t)?Number(t):t)},Parser.prototype.removeComment=function(t){return t.replace(/\/\/.+/,"")},Parser.prototype.getImports=function(t){return(t.match(/import .+/g)||[]).map(function(t){return t.split(" ")[1]})},Parser.prototype.getComment=function(t){return(t.match(/\/\/.+/)||[""])[0]},Parser.prototype.getDepth=function(t){return(t.match(/^[\t ]+/)||[""])[0].length/2},Parser.prototype.parseQuery=function(t){var e=(t.match(/\.\w+/g)||[]).map(function(t){return t.slice(1)}),r=(t.match(/\#\w+/)||[""])[0].slice(1);return{element:(t.match(/^\w+/)||[])[0],id:r,tags:e}},Parser.prototype.getElement=function(t){return(t.match(/^[\t ]*(\w+)/)||[])[1]},Parser.prototype.getTags=function(t){return(t.replace(/\(.+\)/,"").match(/\.\w+/g)||[]).map(function(t){return t.slice(1)})},Parser.prototype.getId=function(t){return(t.replace(/\(.+\)/,"").match(/#\w+/)||[""])[0].slice(1)},Parser.prototype.getValue=function(t){return(t.match(/\| *(.+)/)||[])[1]||""},Parser.prototype.getAttr=function(t){var e=this,r=t.match(/^[\t ]*\@(\w+)\((.+)?\)/);if(r){var i=null!=r[2]?r[2].split(/,\s+/).map(function(t){return e.parseValue(t)}):[];return["method",r[1],function(){this[r[1]].apply(this,i)}]}var n=t.match(/^[\t ]*\@(\w+)(\s(.+))?/);if(n)return["prop",n[1],null==n[3]||this.parseValue(n[3])]},Parser.prototype.getInlineAttrs=function(t){var e={},r=t.match(/\((.+)\)/g);if(null==r)return{};var i=r[0].split(/,\s+/);for(var n in i)for(var o=i[n].replace("(","").replace(")","").split("="),s=o[0].split("."),a=e,p=0;p<s.length;p++)s[p+1]?a=a[s[p]]={}:a[s[p]]=null==o[1]||this.parseValue(o[1]);return e};var App=function(t){function e(e){var r=this;t.call(this,e,{width:window.innerWidth,height:window.innerHeight,sharedTicker:!1,sharedLoader:!1}),this.resolution=null,this.width=1920,this.height=1080,document.body.appendChild(this.view),document.body.style="padding: 0; margin: 0; overflow: hidden; background: #000;",window.addEventListener("resize",function(){return r._resize(r)})}t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e;var r={color:{configurable:!0},smooth:{configurable:!0},width:{configurable:!0},height:{configurable:!0}};return r.color.set=function(t){this.renderer.backgroundColor=+t},r.color.get=function(){return this.renderer.backgroundColor},r.smooth.get=function(){return PIXI.settings.SCALE_MODE!==PIXI.SCALE_MODES.NEAREST},r.smooth.set=function(t){PIXI.settings.SCALE_MODE=t?PIXI.SCALE_MODES.LINEAR:PIXI.SCALE_MODES.NEAREST},r.width.set=function(t){this._width=t,this._resize()},r.width.get=function(){return this._width},r.height.set=function(t){this._height=t,this._resize()},r.height.get=function(){return this._height},e.prototype._resize=function(){this.resolution=window.innerWidth/this.width,this.renderer.resize(window.innerWidth,this.height*this.resolution),this.view.style.marginTop=window.innerHeight/2-this.height*this.resolution/2+"px",this.stage.scale.set(this.resolution)},e.prototype.init=function(){this.mark.add(this.presets,this)},Object.defineProperties(e.prototype,r),e}(Element(PIXI.Application)),Resources=function(t){function e(e){for(var r in t.call(this,e),this.props)this.add(r,this.props[r]);this.props={}}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e}(Element(PIXI.loaders.Loader)),Mixins=function(t){function e(e){t.call(this,e),this.mixins=this.presets}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.merge=function(t,e){void 0===e&&(e={});for(var r={},i=0;i<this.mixins.length;i++)if(this.mark.isSelectorOfElement(this.mixins[i],t))for(var n in this.mixins[i].props)Array.isArray(e[n])?r[n]=e[n].concat(this.mixins[i].props[n]):r[n]=this.mixins[i].props[n];return Object.assign({},e,r)},e.prototype.set=function(t,e){this.mixins[t]=e},e}(Element()),Store=function(t){function e(e){for(var r in t.call(this,e),this.props)this.set(r,this.props[r]);this.props={}}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.set=function(t,e){localStorage.setItem(t,JSON.stringify(e))},e.prototype.get=function(t){return JSON.parse(localStorage.getItem(t))},e}(Element()),Scenes=function(t){function e(e){t.call(this,e),this.scenes=this.presets}t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e;var r={scene:{configurable:!0}};return r.scene.set=function(t){for(var e=0;e<this.scenes.length;e++)this.scenes[e].id===t&&(this._scene&&this.mark.remove(this._scene,this),this._scene=this.mark.add(this.scenes[e],this))},r.scene.get=function(){return this._scene},Object.defineProperties(e.prototype,r),e}(Element(PIXI.Container));function Display(t){return function(t){function e(e,r){var i=this;t.call(this,e,r),this.app=this.mark.get("app"),this.contentW=this.app.width,this.contentH=this.app.height,this.addTick(function(){return i._computedPosition()})}t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e;var r={angle:{configurable:!0},w:{configurable:!0},h:{configurable:!0},left:{configurable:!0},right:{configurable:!0},centerX:{configurable:!0},centerXY:{configurable:!0},top:{configurable:!0},bottom:{configurable:!0},centerY:{configurable:!0}};return r.angle.set=function(t){this.rotation=t*PIXI.DEG_TO_RAD},r.angle.get=function(){return this.rotation*PIXI.RAD_TO_DEG},r.w.set=function(t){this.width=t},r.h.set=function(t){this.height=t},r.left.set=function(t){this._right=null,this._centerX=null,this._left=!0===t?0:!1===t?null:t},r.left.get=function(){return this._left},r.right.set=function(t){this._left=null,this._centerX=null,this._right=!0===t?0:!1===t?null:t},r.right.get=function(){return this._right},r.centerX.set=function(t){this._left=null,this._right=null,this._centerX=!0===t?0:!1===t?null:t},r.centerX.get=function(){return this._centerX},r.centerXY.get=function(){return this._centerX===this._centerY?this._centerX:null},r.centerXY.set=function(t){this.centerX=t,this.centerY=t},r.top.set=function(t){this._bottom=null,this._centerY=null,this._top=!0===t?0:!1===t?null:t},r.top.get=function(){return this._top},r.bottom.set=function(t){this._top=null,this._centerY=null,this._bottom=!0===t?0:!1===t?null:t},r.bottom.get=function(){return this._bottom},r.centerY.set=function(t){this._top=null,this._bottom=null,this._centerY=!0===t?0:!1===t?null:t},r.centerY.get=function(){return this._centerY},e.prototype._computedPosition=function(){var t=this.parentElement.contentW||this.app.width,e=this.parentElement.contentH||this.app.height;null!=this.left?this.x=this.left:null!=this.centerX?this.x=t/2+this.centerX:null!=this.right&&(this.x=t-this.right),null!=this.top?this.y=this.top:null!=this.centerY?this.y=e/2+this.centerY:null!=this.bottom&&(this.y=e-this.bottom),this.parentElement.anchor&&(this.x=this.x-t*this.parentElement.anchor.x,this.y=this.y-e*this.parentElement.anchor.y)},Object.defineProperties(e.prototype,r),e}(Element(t))}var Sprite=function(t){function e(e){t.call(this,e,PIXI.Texture.WHITE),this.contentW=this.width,this.contentH=this.height,this.mark.add(this.presets,this)}t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e;var r={src:{configurable:!0}};return r.src.get=function(){return this._src},r.src.set=function(t){null!=t&&(this._src=t,this.texture=PIXI.Texture.fromImage(t))},Object.defineProperties(e.prototype,r),e}(Display(PIXI.Sprite)),Button=function(t){function e(e){var r=this;t.call(this,e),this.toScene=null,this.activeSrc=this.src,this.inactiveSrc=this.src,this.enable=!0,this.on("pointertap",function(){r.toScene&&(r.mark.get("scenes").scene=r.toScene)})}t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e;var r={enable:{configurable:!0}};return r.enable.set=function(t){this.interactive=t,this.buttonMode=t,this.src=(t?this.activeSrc:this.inactiveSrc)||this.src},r.enable.get=function(){return this.interactive},Object.defineProperties(e.prototype,r),e}(Sprite),Block=function(t){function e(e){var r=this;t.call(this,e),this.inlineItems=!1,this.itemsMarginX=0,this.itemsMarginY=0,this.anchorX=0,this.anchorY=0,this.mark.add(this.presets,this),this.addTick(function(){return r._computedBlock()})}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype._computedBlock=function(){if(this.x=this.x-this.contentW*this.anchorX,this.y=this.y-this.contentH*this.anchorY,this.inlineItems)for(var t=0,e=0,r=0,i=0;i<this.children.length;i++){var n=this.children[i],o=n.anchor?n.anchor.x:n.anchorX,s=n.anchor?n.anchor.y:n.anchorY;n.x=t+n.width*o,t+=n.width+this.itemsMarginX,r=Math.max(r,n.height),t>this.contentW&&(n.x=n.width*o,t=n.width+this.itemsMarginX,e+=r+this.itemsMarginY),n.y=e+n.height*s}},e}(Display(PIXI.Container)),Text=function(t){function e(e){t.call(this,e,e.value)}t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e;var r={size:{configurable:!0},color:{configurable:!0},font:{configurable:!0}};return r.size.get=function(){return this.style.fontSize},r.size.set=function(t){this.style.fontSize=t},r.color.get=function(){return this.style.fill},r.color.set=function(t){this.style.fill=t},r.font.get=function(){return this.style.fontFamily},r.font.set=function(t){this.style.fontFamily=t},Object.defineProperties(e.prototype,r),e}(Display(PIXI.Text)),elements={App:App,Resources:Resources,Mixins:Mixins,Store:Store,Scenes:Scenes,Button:Button,Block:Block,Sprite:Sprite,Text:Text},index={Element:Element,Display:Display};function fullsize(t,e,r){"appW"===r[e]?r[e]=t.mark.get("app").width:"appH"===r[e]&&(r[e]=t.mark.get("app").height)}function print(t,e,r){if("consolelog"===e)return window.console.log(r[e]),!0}var propPlugins={fullsize:fullsize,print:print};function isSubsetArray(t,e){for(var r=0;r<e.length;r++){for(var i=!1,n=0;n<t.length;n++)if(t[n]===e[r]){i=!0;break}if(!i)return!1}return!0}var utils={isSubsetArray:isSubsetArray};function registerElements(t){Object.assign(elements,t)}function registerPropPlugins(t){Object.assign(propPlugins,t)}var View=function(t,e){var r=this;this.childList=[],this.parser=new Parser("ajax"),t&&this.parser.parseMarkfile(t).then(function(t){r.add(t),e&&e(r)}),this.ticker=new PIXI.ticker.Ticker,this.ticker.add(function(t){return r.updateElements(t)}),this.ticker.start()};View.prototype.updateElements=function(t,e){void 0===e&&(e=this.childList);for(var r=0;r<e.length;r++)e[r].tick&&e[r].tick(t),this.updateElements(t,e[r].childList)},View.prototype.add=function(t,e){if(void 0===e&&(e=this),!Array.isArray(t))return this.addPreset(t,e);for(var r=[],i=0;i<t.length;i++){var n=t[i];"string"==typeof n&&(n=this.parser.parsePreset(n)),r.push(this.addPreset(n,e))}return r},View.prototype.addPreset=function(t,e){if(void 0===t&&(t={}),void 0===e&&(e=this),"elementNode"!==t.type)throw Error("Preset cannot be activate. His type is not elementNode");var r=t.element.slice(0,1).toUpperCase()+t.element.slice(1),i=elements[r]||elements[t.element];if(!i)throw Error('Element "'+t.element+'" is not defined');var n=t.props;this.get("mixins")&&(n=this.get("mixins").merge(t,t.props));var o=new i(Object.assign(t,{parent:e,view:this,props:n}));return o.setProps(o.props),o},View.prototype.remove=function(t,e){if(void 0===e&&(e=this),!Array.isArray(t))return this.removeElement(t,t.parentElement);for(var r=[],i=0;i<t.length;i++){var n=t[i];"string"==typeof n&&(n=this.get(n,e)),r.push(this.removeElement(n,n.parentElement))}return r},View.prototype.removeElement=function(t,e){void 0===e&&(e=this);var r=e.childList.indexOf(t);return-1!==r&&(t.onRemove&&t.onRemove(),e.childList.splice(r,1),t instanceof PIXI.DisplayObject&&(e instanceof PIXI.DisplayObject?e.removeChild(t):e.stage.removeChild(t))),t},View.prototype.get=function(t,e){void 0===e&&(e=this);var r=this.parser.parseQuery(t);return this.find(r,e.childList)},View.prototype.getAll=function(t,e){void 0===e&&(e=this);var r=this.parser.parseQuery(t);return this.find(r,e.childList,!0)},View.prototype.find=function(t,e,r){void 0===r&&(r=!1);for(var i=[],n=0;n<e.length;n++){if(this.isSelectorOfElement(t,e[n])){if(!r)return e[n];i.push(e[n])}if(e[n].childList.length){var o=this.find(t,e[n].childList,r);if(!r&&o)return o;i=i.concat(o)}}return r?i:null},View.prototype.isSelectorOfElement=function(t,e){var r=!t.element||t.element===e.element,i=!t.id||t.id===e.id,n=isSubsetArray(e.tags,t.tags);return r&&i&&n};export{Parser,View,elements,propPlugins,index as mixins,utils,registerElements,registerPropPlugins};
//# sourceMappingURL=markus.es.js.map