diff --git a/demo.html b/demo.html index ec0590af3..482960fee 100644 --- a/demo.html +++ b/demo.html @@ -861,473 +861,191 @@ diff --git a/gjs-plg-doc.html b/gjs-plg-doc.html index 6fbe13312..e36377e27 100644 --- a/gjs-plg-doc.html +++ b/gjs-plg-doc.html @@ -2,13 +2,13 @@ - GrapesJS Playground PDF Creator + GrapesJS Playground PDF Builder - + "),this.config.em.trigger("loaded"),this.frame.el.contentWindow.onscroll=this.onFrameScroll,this.frame.udpateOffset();var g=document,h=this.frame.el.contentDocument;h.addEventListener("keydown",function(a){g.dispatchEvent(new KeyboardEvent(a.type,a))}),h.addEventListener("keyup",function(a){g.dispatchEvent(new KeyboardEvent(a.type,a))})}},offset:function(a){var b=a.getBoundingClientRect(),c=a.ownerDocument.body;return{top:b.top+c.scrollTop,left:b.left+c.scrollLeft}},clearOff:function(){this.frmOff=null,this.cvsOff=null},getElementPos:function(a){this.frmOff||(this.frmOff=this.offset(this.frame.el)),this.cvsOff||(this.cvsOff=this.offset(this.el));var b=this.offset(a),c=b.top+this.frmOff.top-this.cvsOff.top,d=b.left+this.frmOff.left-this.cvsOff.left;return{top:c,left:d,height:a.offsetHeight,width:a.offsetWidth}},getPosition:function(){var a=this.frame.el.contentDocument.body,b=this.frmOff,c=this.cvsOff;return{top:b.top+a.scrollTop-c.top,left:b.left+a.scrollLeft-c.left}},render:function(){if(this.wrapper=this.model.get("wrapper"),this.wrapper&&"function"==typeof this.wrapper.render){this.model.get("frame").set("wrapper",this.wrapper),this.$el.append(this.frame.render().el);var a=this.frame;a.el.onload=this.renderBody}this.toolsEl=$("
",{id:this.ppfx+"tools"}).get(0),this.hlEl=$("
",{"class":this.ppfx+"highlighter"}).get(0),this.badgeEl=$("
",{"class":this.ppfx+"badge"}).get(0),this.placerEl=$("
",{"class":this.ppfx+"placeholder"}).get(0),this.placerIntEl=$("
",{"class":this.ppfx+"placeholder-int"}).get(0),this.ghostEl=$("
",{"class":this.ppfx+"ghost"}).get(0),this.placerEl.appendChild(this.placerIntEl),this.toolsEl.appendChild(this.hlEl),this.toolsEl.appendChild(this.badgeEl),this.toolsEl.appendChild(this.placerEl),this.toolsEl.appendChild(this.ghostEl),this.$el.append(this.toolsEl);var b=this.em.get("rte");return b&&this.toolsEl.appendChild(b.render()),this.$el.attr({"class":this.className}),this}})}),c("Canvas/main",["require","./config/config","./model/Canvas","./view/CanvasView"],function(a){return function(){var b,c={},d=a("./config/config"),e=a("./model/Canvas"),f=a("./view/CanvasView");return{getCanvasView:function(){return f},name:"Canvas",init:function(a){c=a||{};for(var g in d)g in c||(c[g]=d[g]);var h=c.pStylePrefix;h&&(c.stylePrefix=h+c.stylePrefix),b=new e(a),f=new f({model:b,config:c});var i=c.em.get("DomComponents");return i&&this.setWrapper(i),this},setWrapper:function(a){b.set("wrapper",a)},getElement:function(){return f.el},getFrameEl:function(){return f.frame.el},getBody:function(){return f.frame.el.contentDocument.body},getWrapperEl:function(){return this.getBody().querySelector("#wrapper")},getToolsEl:function(){return f.toolsEl},getHighlighter:function(){return f.hlEl},getBadgeEl:function(){return f.badgeEl},getPlacerEl:function(){return f.placerEl},getGhostEl:function(){return f.ghostEl},render:function(){return f.render().el},getOffset:function(){var a=this.offset(this.getFrameEl()),b=this.offset(this.getElement());return{top:a.top-b.top,left:a.left-b.left}},offset:function(a){var b=a.getBoundingClientRect();return{top:b.top+document.body.scrollTop,left:b.left+document.body.scrollLeft}},getFrameWrapperEl:function(){return f.frame.getWrapper()}}}}),c("Canvas",["Canvas/main"],function(a){return a}),c("Commands/config/config",[],function(){return{ESCAPE_KEY:27,stylePrefix:"com-",defaults:[],em:null,firstCentered:!0,newFixedH:!1,minComponentH:50,minComponentW:50}}),c("Commands/view/CommandAbstract",["backbone"],function(a){return a.View.extend({initialize:function(a){this.config=a||{},this.editorModel=this.em=this.config.em||{},this.pfx=this.config.stylePrefix,this.ppfx=this.config.pStylePrefix, -this.hoverClass=this.pfx+"hover",this.badgeClass=this.pfx+"badge",this.plhClass=this.pfx+"placeholder",this.freezClass=this.ppfx+"freezed",this.canvas=this.em.get&&this.em.get("Canvas"),this.em.get&&this.setElement(this.getCanvas()),this.canvas&&(this.$canvas=this.$el,this.$wrapper=$(this.getCanvasWrapper()),this.frameEl=this.canvas.getFrameEl(),this.canvasTool=this.getCanvasTools(),this.bodyEl=this.getCanvasBody()),this.init(this.config)},onFrameScroll:function(a){},getCanvas:function(){return this.canvas.getElement()},getCanvasBody:function(){return this.canvas.getBody()},getCanvasWrapper:function(){return this.canvas.getWrapperEl()},getCanvasTools:function(){return this.canvas.getToolsEl()},offset:function(a){var b=a.getBoundingClientRect();return{top:b.top+a.ownerDocument.body.scrollTop,left:b.left+a.ownerDocument.body.scrollLeft}},init:function(a){},run:function(a,b){},stop:function(a,b){}})}),c("Commands/view/SelectComponent",[],function(){return{init:function(a){_.bindAll(this,"onHover","onOut","onClick","onKeyPress")},enable:function(){_.bindAll(this,"copyComp","pasteComp","onFrameScroll"),this.frameOff=this.canvasOff=this.adjScroll=null;var a=this.config.em.get("Config");this.startSelectComponent(),this.toggleClipboard(a.copyPaste)},toggleClipboard:function(a){var b=a||0;b?(key("⌘+c, ctrl+c",this.copyComp),key("⌘+v, ctrl+v",this.pasteComp)):(key.unbind("⌘+c, ctrl+c"),key.unbind("⌘+v, ctrl+v"))},copyComp:function(){var a=this.editorModel.get("selectedComponent");a&&a.get("copyable")&&this.editorModel.set("clipboard",a)},pasteComp:function(){var a=this.editorModel.get("clipboard"),b=this.editorModel.get("selectedComponent");if(a&&b&&b.collection){var c=b.collection.indexOf(b),d=a.clone();b.collection.add(d,{at:c+1})}},startSelectComponent:function(){this.selEl=$(this.getCanvasBody()).find("*"),this.selEl.on("mouseover",this.onHover).on("mouseout",this.onOut).on("click",this.onClick);var a=this.getContentWindow();a.on("scroll",this.onFrameScroll),a.on("keydown",this.onKeyPress)},stopSelectComponent:function(){this.selEl&&this.selEl.trigger("mouseout").off("mouseover",this.onHover).off("mouseout",this.onOut).off("click",this.onClick),this.selEl=null;var a=this.getContentWindow();a.off("scroll",this.onFrameScroll),a.off("keydown",this.onKeyPress)},onKeyPress:function(a){var b=a.which||a.keyCode,c=this.editorModel.get("selectedComponent"),d="BODY"!==this.frameEl.contentDocument.activeElement.tagName;if((8==b||46==b)&&(d||a.preventDefault(),c&&!d)){if(!c.get("removable"))return;c.set("status",""),c.destroy(),this.hideBadge(),this.clean(),this.editorModel.set("selectedComponent",null)}},onHover:function(a){a.stopPropagation();var b=a.target;this.adjScroll||(this.adjScroll=1,this.onFrameScroll(a));var c=this.getElementPos(b);this.updateBadge(b,c),this.updateHighlighter(b,c)},onOut:function(a){a.stopPropagation(),this.hideBadge(),this.hl&&this.hl.css({left:-1e4,top:-1e4})},onClick:function(a){var b=$(a.target).data("model");if(b){var c=b.get("stylable");(c instanceof Array||c)&&this.onSelect(a,a.target)}},updateBadge:function(a,b){var c=$(a);this.cacheEl=a;var d=c.data("model");if(d&&d.get("badgable")){var e=this.getBadge();e.innerHTML=d.getName();var f=e.style,g="px";f.display="block";var h=this.canvas.getCanvasView().getPosition(),i=e?e.offsetHeight:0,j=e?e.offsetWidth:0,k=b.top-ic&&(f=c,h=d.left-c),e>b&&(e=b,g=d.top-b),this.updateSize(e,f,h,g)},updateSize:function(a,b,c,d){var e="px",f=this.ghost.style,g=this.tempComponent.style;f.top=g.top=a+e,f.left=g.left=b+e,f.width=g.width=c+e,f[this.hType]=g[this.hType]=d+e},rollback:function(a,b){var c=a.which||a.keyCode;(c==this.config.ESCAPE_KEY||b)&&(this.isDragged=!1,this.endDraw())},beforeDraw:function(a){a.editable=!1},afterDraw:function(a){},run:function(a,b,c){this.editor=a,this.sender=b,this.$wr=this.$wrapper,this.enable()},stop:function(){this.stopSelectPosition(),this.$wrapper.css("cursor",""),this.$wrapper.unbind()}})}),c("Commands/view/DeleteComponent",["backbone","./SelectComponent"],function(a,b){return _.extend({},b,{init:function(a){_.bindAll(this,"startDelete","stopDelete","onDelete"),this.hoverClass=this.pfx+"hover-delete",this.badgeClass=this.pfx+"badge-red"},enable:function(){this.$el.find("*").mouseover(this.startDelete).mouseout(this.stopDelete).click(this.onDelete)},startDelete:function(a){a.stopPropagation();var b=$(a.target);b.data("model").get("removable")&&(b.addClass(this.hoverClass),this.attachBadge(b.get(0)))},stopDelete:function(a){a.stopPropagation();var b=$(a.target);b.removeClass(this.hoverClass),this.badge&&this.badge.css({left:-1e3,top:-1e3})},onDelete:function(a){a.stopPropagation();var b=$(a.target);b.data("model").get("removable")&&(b.data("model").destroy(),this.removeBadge(),this.clean())},updateBadgeLabel:function(a){this.badge.html("Remove "+a.getName())}})}),c("Commands/view/InsertCustom",["backbone","./CreateComponent"],function(a,b){return _.extend({},b,{init:function(){b.init.apply(this,arguments),_.bindAll(this,"insertComponent"),this.allowDraw=0},run:function(a,b,c){this.em=a,this.sender=b,this.opt=c||{},this.$wr=this.$wrapper,this.enable()},enable:function(){b.enable.apply(this,arguments),this.$wr.on("click",this.insertComponent)},insertComponent:function(){this.$wr.off("click",this.insertComponent),this.stopSelectPosition();var a=this.buildContent();this.beforeInsert(a);var b=this.sorter.lastPos.index,c=this.create(this.sorter.target,a,b,null,{silent:!1});this.opt.terminateAfterInsert&&this.sender?this.sender.set("active",!1):this.enable(),c&&(this.em&&this.em.editor.initChildrenComp(c),this.afterInsert(c,this))},beforeInsert:function(a){},afterInsert:function(a){},buildContent:function(){return this.opt.content||{}}})}),c("Commands/view/ImageComponent",["backbone","./InsertCustom"],function(a,b){return _.extend({},b,{beforeInsert:function(a){a.type="image",a.style={},a.attributes={},a.attributes.onmousedown="return false",this.config.firstCentered&&this.getCanvasWrapper()==this.sorter.target&&(a.style.margin="0 auto")},afterInsert:function(a){a.trigger("dblclick"),this.sender&&this.sender.set("active",!1)}})}),c("Commands/view/MoveComponent",["backbone","./SelectComponent","./SelectPosition"],function(a,b,c){return _.extend({},c,b,{init:function(a){b.init.apply(this,arguments),_.bindAll(this,"initSorter","rollback","onEndMove"),this.opt=a,this.hoverClass=this.ppfx+"highlighter-warning",this.badgeClass=this.ppfx+"badge-warning",this.noSelClass=this.ppfx+"no-select"},enable:function(){b.enable.apply(this,arguments),this.getBadgeEl().addClass(this.badgeClass),this.getHighlighterEl().addClass(this.hoverClass);var a=this.$wrapper;a.css("cursor","move"),a.on("mousedown",this.initSorter),a.addClass(this.noSelClass)},toggleClipboard:function(){},initSorter:function(a){var b=$(a.target).data("model");b.get("draggable")&&(this.cacheEl=null,this.startSelectPosition(a.target,this.frameEl.contentDocument),this.sorter.onEndMove=this.onEndMove.bind(this),this.stopSelectComponent(),this.$wrapper.off("mousedown",this.initSorter),this.getContentWindow().on("keydown",this.rollback))},onEndMove:function(){this.enable(),this.getContentWindow().off("keydown",this.rollback)},onSelect:function(a,b){},rollback:function(a,b){var c=a.which||a.keyCode;(c==this.opt.ESCAPE_KEY||b)&&(this.sorter.moved=!1,this.sorter.endMove())},getBadgeEl:function(){return this.$badge||(this.$badge=$(this.getBadge())),this.$badge},getHighlighterEl:function(){return this.$hl||(this.$hl=$(this.canvas.getHighlighter())),this.$hl},stop:function(){b.stop.apply(this,arguments),this.getBadgeEl().removeClass(this.badgeClass),this.getHighlighterEl().removeClass(this.hoverClass);var a=this.$wrapper;a.css("cursor","").unbind().removeClass(this.noSelClass)}})}),c("Commands/view/TextComponent",["backbone","./CreateComponent"],function(a,b){return _.extend({},b,{beforeDraw:function(a){a.type="text",a.style||(a.style={}),a.style.padding="10px"},afterDraw:function(a){a&&a.set&&(a.trigger("focus"),this.sender&&this.sender.set("active",!1))}})}),c("Commands/view/ExportTemplate",[],function(){return{run:function(a,b){this.sender=b,this.components=a.DomComponents.getComponents(),this.modal=a.Modal||null,this.cm=a.CodeManager||null,this.cssc=a.CssComposer||null,this.protCss=a.Config.protectedCss,this.pfx=a.Config.stylePrefix||"",this.enable()},buildEditor:function(a,b,c){this.codeMirror||(this.codeMirror=this.cm.getViewer("CodeMirror"));var d=$("