From 8ad0b7ae2fb676528016ec89d180db4827e9a38e Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Fri, 31 Mar 2017 01:47:54 +0200 Subject: [PATCH] Add getJs() method on top-level API --- src/demo.js | 80 ++++++++++++++++++++++++++- src/dom_components/model/Component.js | 29 ++++++++-- src/editor/config/config.js | 3 + src/editor/main.js | 9 +++ src/editor/model/Editor.js | 23 +++++++- 5 files changed, 133 insertions(+), 11 deletions(-) diff --git a/src/demo.js b/src/demo.js index cbb0c1908..8f5a9385e 100644 --- a/src/demo.js +++ b/src/demo.js @@ -390,8 +390,8 @@ require(['config/require-config'], function() { id: 'clean-all', className: 'fa fa-trash icon-blank', command: function(editor, sender) { - if(sender) sender.set('active',false); - if(confirm('Are you sure to clean the canvas?')){ + if(sender) sender.set('active', false); + if(confirm('Are you sure to clean the canvas?')) { var comps = editor.DomComponents.clear(); localStorage.setItem('gjs-css', ''); localStorage.setItem('gjs-html', ''); @@ -400,6 +400,82 @@ require(['config/require-config'], function() { attributes: { title: 'Empty canvas' } }]); + // Blocks + var bm = editor.BlockManager; + bm.add('timer', { + label: 'timer', + attributes: {class:'gjs-fonts gjs-f-text'}, + content: { + type: 'timer', + startfrom: 'May 5, 2018 20:00:00', + activeOnRender: 1, + } + }); + + var domc = editor.DomComponents; + var defaultType = domc.getType('default'); + var defaultModel = defaultType.model; + var defaultView = defaultType.view; + + domc.addType('timer', { + model: defaultModel.extend({ + defaults: _.extend({}, defaultModel.prototype.defaults, { + startfrom: 'Nov 25, 2018 15:00:00', + droppable: false, + traits: [{ + label: 'Start', + name: 'startfrom', + changeProp: 1, + }], + }), + + init: function () { + this.listenTo(this, 'change:startfrom', this.buildScript); + this.listenTo(this, 'active', this.buildScript); + this.get('components').add(''); + }, + + buildScript: function() { + var startfrom = this.get('startfrom'); + var fn = function () { + var startfrom = $startfrom$; + var countDownDate = new Date(startfrom).getTime(); + var el = this.querySelector('#timer-c'); + var moveTimer = function() { + var now = new Date().getTime(); + var distance = countDownDate - now; + // Time calculations for days, hours, minutes and seconds + var days = Math.floor(distance / (1000 * 60 * 60 * 24)); + var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); + var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); + var seconds = Math.floor((distance % (1000 * 60)) / 1000); + + el.innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s "; + // If the count down is finished, write some text + if (distance < 0) { + clearInterval(x); + el.innerHTML = "EXPIRED"; + } + }; + var x = setInterval(moveTimer, 1000); + moveTimer(); + }; + var fnStr = this.getScriptString(fn); + fnStr = fnStr.replace('$startfrom$', '"'+startfrom+'"'); + this.set('script', fnStr); + }, + + }, { + isComponent: function(el) { + if(el.getAttribute && + el.getAttribute('data-gjs-type') == 'timer') { + return {type: 'timer'}; + } + }, + }), + view: defaultView, + }); + editor.render(); }); }); diff --git a/src/dom_components/model/Component.js b/src/dom_components/model/Component.js index 7d301080d..41d94c5aa 100644 --- a/src/dom_components/model/Component.js +++ b/src/dom_components/model/Component.js @@ -298,18 +298,35 @@ define(['backbone','./Components', 'SelectorManager/model/Selectors', 'TraitMana */ toJSON: function() { var obj = Backbone.Model.prototype.toJSON.apply(this, arguments); - var script = this.get('script'); + var scriptStr = this.getScriptString(); + + if (scriptStr) { + obj.script = scriptStr; + } + + return obj; + }, + + /** + * Return script in string format, cleans 'function() {..' from scripts + * if it's a function + * @param {string|Function} script + * @return {string} + * @private + */ + getScriptString: function (script) { + var scr = script || this.get('script'); // Need to cast script functions to string - if (typeof script == 'function') { - var scrStr = script.toString(); + if (typeof scr == 'function') { + var scrStr = script.toString().trim(); scrStr = scrStr.replace(/^function\s?\(\)\s?\{/, ''); scrStr = scrStr.replace(/\}$/, ''); - obj.script = scrStr; + scr = scrStr; } - return obj; - }, + return scr; + } },{ diff --git a/src/editor/config/config.js b/src/editor/config/config.js index ed643eb25..d9f5f949d 100644 --- a/src/editor/config/config.js +++ b/src/editor/config/config.js @@ -26,6 +26,9 @@ define(function () { // Clear the canvas when editor.render() is called clearOnRender: true, + // Return JS of components inside HTML from 'editor.getHtml()' + jsInHtml: true, + // Height for the editor container height: '900px', diff --git a/src/editor/main.js b/src/editor/main.js index 0ea9461d0..68703d5a6 100644 --- a/src/editor/main.js +++ b/src/editor/main.js @@ -3,6 +3,7 @@ * * [getConfig](#getconfig) * * [getHtml](#gethtml) * * [getCss](#getcss) + * * [getJs](#getjs) * * [getComponents](#getcomponents) * * [setComponents](#setcomponents) * * [getStyle](#getstyle) @@ -218,6 +219,14 @@ define(function (require){ return em.getCss(); }, + /** + * Returns JS of all components + * @return {string} JS string + */ + getJs: function(){ + return em.getJs(); + }, + /** * Returns components in JSON format object * @return {Object} diff --git a/src/editor/model/Editor.js b/src/editor/model/Editor.js index dc3ffaf53..1d155d410 100644 --- a/src/editor/model/Editor.js +++ b/src/editor/model/Editor.js @@ -361,7 +361,7 @@ define(['backbone', 'backboneUndo', 'keymaster', 'Utils', 'StorageManager', 'Dev * @return {string} HTML string * @private */ - getHtml: function(){ + getHtml: function() { var cmp = this.get('DomComponents'); var cm = this.get('CodeManager'); @@ -369,7 +369,14 @@ define(['backbone', 'backboneUndo', 'keymaster', 'Utils', 'StorageManager', 'Dev return; var wrp = cmp.getComponent(); - return cm.getCode(wrp, 'html'); + var html = cm.getCode(wrp, 'html'); + + if (this.config.jsInHtml) { + var js = this.getJs().trim(); + html += js ? '' : ''; + } + + return html; }, /** @@ -377,7 +384,7 @@ define(['backbone', 'backboneUndo', 'keymaster', 'Utils', 'StorageManager', 'Dev * @return {string} CSS string * @private */ - getCss: function(){ + getCss: function() { var cmp = this.get('DomComponents'); var cm = this.get('CodeManager'); var cssc = this.get('CssComposer'); @@ -391,6 +398,16 @@ define(['backbone', 'backboneUndo', 'keymaster', 'Utils', 'StorageManager', 'Dev return protCss + cm.getCode(wrp, 'css', cssc); }, + /** + * Returns JS of all components + * @return {string} JS string + * @private + */ + getJs: function() { + var wrp = this.get('DomComponents').getWrapper(); + return this.get('CodeManager').getCode(wrp, 'js'); + }, + /** * Store data to the current storage * @param {Function} clb Callback function