PLAYGROUND
CANVAS
42 |
45 | {{dropIndex}}
43 | DATA MODEL
{{$data | json}}dependencies:
10 |semantic-ui (www.semantic-ui.com) building the user interface
11 |vuejs (http://vuejs.org) managing the view model
12 |jquery&jquery-ui
13 | 14 | *** Work in progress 15 | 16 |DEMO: http://supraniti.github.io/generic-visual-builder
17 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 supraniti 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /js/tinymce/skins/lightgray/content.inline.min.css: -------------------------------------------------------------------------------- 1 | .mce-content-body .mce-reset{margin:0;padding:0;border:0;outline:0;vertical-align:top;background:transparent;text-decoration:none;color:black;font-family:Arial;font-size:11px;text-shadow:none;float:none;position:static;width:auto;height:auto;white-space:nowrap;cursor:inherit;line-height:normal;font-weight:normal;text-align:left;-webkit-tap-highlight-color:transparent;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;direction:ltr;max-width:none}.mce-object{border:1px dotted #3a3a3a;background:#d5d5d5 url(img/object.gif) no-repeat center}.mce-preview-object{display:inline-block;position:relative;margin:0 2px 0 2px;line-height:0;border:1px solid gray}.mce-preview-object .mce-shim{position:absolute;top:0;left:0;width:100%;height:100%;background:url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)}figure.align-left{float:left}figure.align-right{float:right}figure.image.align-center{display:table;margin-left:auto;margin-right:auto}figure.image{display:inline-block;border:1px solid gray;margin:0 2px 0 1px;background:#f5f2f0}figure.image img{margin:8px 8px 0 8px}figure.image figcaption{margin:6px 8px 6px 8px;text-align:center}.mce-preview-object[data-mce-selected="2"] .mce-shim{display:none}.mce-pagebreak{cursor:default;display:block;border:0;width:100%;height:5px;border:1px dashed #666;margin-top:15px;page-break-before:always}@media print{.mce-pagebreak{border:0}}.mce-item-anchor{cursor:default;display:inline-block;-webkit-user-select:all;-webkit-user-modify:read-only;-moz-user-select:all;-moz-user-modify:read-only;user-select:all;user-modify:read-only;width:9px !important;height:9px !important;border:1px dotted #3a3a3a;background:#d5d5d5 url(img/anchor.gif) no-repeat center}.mce-nbsp,.mce-shy{background:#aaa}.mce-shy::after{content:'-'}hr{cursor:default}.mce-match-marker{background:#aaa;color:#fff}.mce-match-marker-selected{background:#39f;color:#fff}.mce-spellchecker-word{border-bottom:2px solid #f00;cursor:default}.mce-spellchecker-grammar{border-bottom:2px solid #008000;cursor:default}.mce-item-table,.mce-item-table td,.mce-item-table th,.mce-item-table caption{border:1px dashed #bbb}td[data-mce-selected],th[data-mce-selected]{background-color:#39f !important}.mce-edit-focus{outline:1px dotted #333}.mce-content-body *[contentEditable=false] *[contentEditable=true]:focus{outline:2px solid #2d8ac7}.mce-content-body *[contentEditable=false] *[contentEditable=true]:hover{outline:2px solid #7acaff}.mce-content-body *[contentEditable=false][data-mce-selected]{outline:2px solid #2d8ac7}.mce-resize-bar-dragging{background-color:blue;opacity:.25;filter:alpha(opacity=25);zoom:1} -------------------------------------------------------------------------------- /js/tinymce/skins/lightgray/content.min.css: -------------------------------------------------------------------------------- 1 | body{background-color:#fff;color:#000;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:11px;scrollbar-3dlight-color:#f0f0ee;scrollbar-arrow-color:#676662;scrollbar-base-color:#f0f0ee;scrollbar-darkshadow-color:#ddd;scrollbar-face-color:#e0e0dd;scrollbar-highlight-color:#f0f0ee;scrollbar-shadow-color:#f0f0ee;scrollbar-track-color:#f5f5f5}td,th{font-family:Verdana,Arial,Helvetica,sans-serif;font-size:11px}.mce-content-body .mce-reset{margin:0;padding:0;border:0;outline:0;vertical-align:top;background:transparent;text-decoration:none;color:black;font-family:Arial;font-size:11px;text-shadow:none;float:none;position:static;width:auto;height:auto;white-space:nowrap;cursor:inherit;line-height:normal;font-weight:normal;text-align:left;-webkit-tap-highlight-color:transparent;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;direction:ltr;max-width:none}.mce-object{border:1px dotted #3a3a3a;background:#d5d5d5 url(img/object.gif) no-repeat center}.mce-preview-object{display:inline-block;position:relative;margin:0 2px 0 2px;line-height:0;border:1px solid gray}.mce-preview-object .mce-shim{position:absolute;top:0;left:0;width:100%;height:100%;background:url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)}figure.align-left{float:left}figure.align-right{float:right}figure.image.align-center{display:table;margin-left:auto;margin-right:auto}figure.image{display:inline-block;border:1px solid gray;margin:0 2px 0 1px;background:#f5f2f0}figure.image img{margin:8px 8px 0 8px}figure.image figcaption{margin:6px 8px 6px 8px;text-align:center}.mce-preview-object[data-mce-selected="2"] .mce-shim{display:none}.mce-pagebreak{cursor:default;display:block;border:0;width:100%;height:5px;border:1px dashed #666;margin-top:15px;page-break-before:always}@media print{.mce-pagebreak{border:0}}.mce-item-anchor{cursor:default;display:inline-block;-webkit-user-select:all;-webkit-user-modify:read-only;-moz-user-select:all;-moz-user-modify:read-only;user-select:all;user-modify:read-only;width:9px !important;height:9px !important;border:1px dotted #3a3a3a;background:#d5d5d5 url(img/anchor.gif) no-repeat center}.mce-nbsp,.mce-shy{background:#aaa}.mce-shy::after{content:'-'}hr{cursor:default}.mce-match-marker{background:#aaa;color:#fff}.mce-match-marker-selected{background:#39f;color:#fff}.mce-spellchecker-word{border-bottom:2px solid #f00;cursor:default}.mce-spellchecker-grammar{border-bottom:2px solid #008000;cursor:default}.mce-item-table,.mce-item-table td,.mce-item-table th,.mce-item-table caption{border:1px dashed #bbb}td[data-mce-selected],th[data-mce-selected]{background-color:#39f !important}.mce-edit-focus{outline:1px dotted #333}.mce-content-body *[contentEditable=false] *[contentEditable=true]:focus{outline:2px solid #2d8ac7}.mce-content-body *[contentEditable=false] *[contentEditable=true]:hover{outline:2px solid #7acaff}.mce-content-body *[contentEditable=false][data-mce-selected]{outline:2px solid #2d8ac7}.mce-resize-bar-dragging{background-color:blue;opacity:.25;filter:alpha(opacity=25);zoom:1} -------------------------------------------------------------------------------- /css/gvb.css: -------------------------------------------------------------------------------- 1 | ul ul ul { 2 | list-style-type: none !important; 3 | } 4 | #grid-layout{ 5 | list-style-type: none; 6 | padding: 0 !important; 7 | } 8 | .wpbcolumns { 9 | list-style-type: none !important; 10 | } 11 | .editable #grid-layout { 12 | padding: 0; 13 | } 14 | .row-panel{ 15 | display: none !important; 16 | } 17 | .editable .row-panel{ 18 | display: flex !important; 19 | } 20 | .editable .magicrow:hover { 21 | box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75); 22 | } 23 | .editable .magicrow { 24 | margin-bottom: 10px; 25 | padding: 0 !important; 26 | min-height: 100px; 27 | border-top: 1px dotted gray; 28 | border-bottom: 1px dotted gray; 29 | } 30 | .row-placeholder{ 31 | display: flexbox; 32 | height: 90px; 33 | border: 1px dashed gray; 34 | border-radius: 10px; 35 | margin: 5px; 36 | } 37 | .editable .wpbcolumns{ 38 | min-height: 100px; 39 | margin: 0 !important; 40 | } 41 | .editable .wpbcomponents{ 42 | list-style-type: none; 43 | min-height: 50px; 44 | padding: 0 !important; 45 | margin: 0 !important; 46 | } 47 | .wpbcomponents{ 48 | list-style-type: none; 49 | padding: 0 !important; 50 | } 51 | .editable .magiccolumn{ 52 | border-right: 1px dotted gray; 53 | padding: 1px !important; 54 | } 55 | .editable .magiccolumn:hover { 56 | box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75); 57 | } 58 | .column-placeholder{ 59 | width: 200px; 60 | border: 1px dashed gray; 61 | border-radius: 10px; 62 | margin: 5px; 63 | } 64 | .col-panel{ 65 | display: none; 66 | } 67 | .editable .col-panel{ 68 | display: block; 69 | padding: 5px !important; 70 | } 71 | .editable .col-panel a{ 72 | color: rgba(255,255,255,0.9); 73 | } 74 | .editable .col-panel a:hover{ 75 | color: rgba(255,255,255,1); 76 | } 77 | .editable .context{ 78 | box-shadow: 5px 5px 5px 0px rgba(255,0,0,0.75); 79 | } 80 | .slot-placeholder{ 81 | display: flexbox; 82 | width: 90%; 83 | height: 50px; 84 | border: 1px dashed gray; 85 | border-radius: 10px; 86 | margin: 5px; 87 | } 88 | .slot-panel{ 89 | display: none !important; 90 | } 91 | .editable .slot-panel{ 92 | display: block !important; 93 | padding: 5px !important; 94 | } 95 | .editable .slot-panel a{ 96 | color: rgba(255,255,255,0.9); 97 | } 98 | .editable .slot-panel a:hover{ 99 | color: rgba(255,255,255,1); 100 | } 101 | .editable .magicslot{ 102 | //margin-top: 1rem !important; 103 | //padding: 0 !important; 104 | } 105 | 106 | .editable [contenteditable="true"]:hover, .component-context [contenteditable="true"]:hover{ 107 | box-shadow: 0px 0px 10px 5px rgba(255,182,193,1); 108 | } 109 | 110 | 111 | 112 | .component{ 113 | min-height:50px; 114 | background: #e5feff; 115 | border-bottom:1px dotted rgb(212, 212, 213); 116 | border-right:1px solid rgb(212, 212, 213); 117 | border-left:1px solid rgb(212, 212, 213); 118 | } -------------------------------------------------------------------------------- /js/tinymce/jquery.tinymce.min.js: -------------------------------------------------------------------------------- 1 | !function(a){function b(){function b(a){"remove"===a&&this.each(function(a,b){var c=e(b);c&&c.remove()}),this.find("span.mceEditor,div.mceEditor").each(function(a,b){var c=tinymce.get(b.id.replace(/_parent$/,""));c&&c.remove()})}function d(a){var c,d=this;if(null!=a)b.call(d),d.each(function(b,c){var d;(d=tinymce.get(c.id))&&d.setContent(a)});else if(d.length>0&&(c=tinymce.get(d[0].id)))return c.getContent()}function e(a){var b=null;return a&&a.id&&g.tinymce&&(b=tinymce.get(a.id)),b}function f(a){return!!(a&&a.length&&g.tinymce&&a.is(":tinymce"))}var h={};a.each(["text","html","val"],function(b,g){var i=h[g]=a.fn[g],j="text"===g;a.fn[g]=function(b){var g=this;if(!f(g))return i.apply(g,arguments);if(b!==c)return d.call(g.filter(":tinymce"),b),i.apply(g.not(":tinymce"),arguments),g;var h="",k=arguments;return(j?g:g.eq(0)).each(function(b,c){var d=e(c);h+=d?j?d.getContent().replace(/<(?:"[^"]*"|'[^']*'|[^'">])*>/g,""):d.getContent({save:!0}):i.apply(a(c),k)}),h}}),a.each(["append","prepend"],function(b,d){var g=h[d]=a.fn[d],i="prepend"===d;a.fn[d]=function(a){var b=this;return f(b)?a!==c?("string"==typeof a&&b.filter(":tinymce").each(function(b,c){var d=e(c);d&&d.setContent(i?a+d.getContent():d.getContent()+a)}),g.apply(b.not(":tinymce"),arguments),b):void 0:g.apply(b,arguments)}}),a.each(["remove","replaceWith","replaceAll","empty"],function(c,d){var e=h[d]=a.fn[d];a.fn[d]=function(){return b.call(this,d),e.apply(this,arguments)}}),h.attr=a.fn.attr,a.fn.attr=function(b,g){var i=this,j=arguments;if(!b||"value"!==b||!f(i))return g!==c?h.attr.apply(i,j):h.attr.apply(i,j);if(g!==c)return d.call(i.filter(":tinymce"),g),h.attr.apply(i.not(":tinymce"),j),i;var k=i[0],l=e(k);return l?l.getContent({save:!0}):h.attr.apply(a(k),j)}}var c,d,e,f=[],g=window;a.fn.tinymce=function(c){function h(){var d=[],f=0;e||(b(),e=!0),l.each(function(a,b){var e,g=b.id,h=c.oninit;g||(b.id=g=tinymce.DOM.uniqueId()),tinymce.get(g)||(e=new tinymce.Editor(g,c,tinymce.EditorManager),d.push(e),e.on("init",function(){var a,b=h;l.css("visibility",""),h&&++f==d.length&&("string"==typeof b&&(a=-1===b.indexOf(".")?null:tinymce.resolve(b.replace(/\.\w+$/,"")),b=tinymce.resolve(b)),b.apply(a||tinymce,d))}))}),a.each(d,function(a,b){b.render()})}var i,j,k,l=this,m="";if(!l.length)return l;if(!c)return window.tinymce?tinymce.get(l[0].id):null;if(l.css("visibility","hidden"),g.tinymce||d||!(i=c.script_url))1===d?f.push(h):h();else{d=1,j=i.substring(0,i.lastIndexOf("/")),-1!=i.indexOf(".min")&&(m=".min"),g.tinymce=g.tinyMCEPreInit||{base:j,suffix:m},-1!=i.indexOf("gzip")&&(k=c.language||"en",i=i+(/\?/.test(i)?"&":"?")+"js=true&core=true&suffix="+escape(m)+"&themes="+escape(c.theme||"modern")+"&plugins="+escape(c.plugins||"")+"&languages="+(k||""),g.tinyMCE_GZ||(g.tinyMCE_GZ={start:function(){function b(a){tinymce.ScriptLoader.markDone(tinymce.baseURI.toAbsolute(a))}b("langs/"+k+".js"),b("themes/"+c.theme+"/theme"+m+".js"),b("themes/"+c.theme+"/langs/"+k+".js"),a.each(c.plugins.split(","),function(a,c){c&&(b("plugins/"+c+"/plugin"+m+".js"),b("plugins/"+c+"/langs/"+k+".js"))})},end:function(){}}));var n=document.createElement("script");n.type="text/javascript",n.onload=n.onreadystatechange=function(b){b=b||window.event,2===d||"load"!=b.type&&!/complete|loaded/.test(n.readyState)||(tinymce.dom.Event.domLoaded=1,d=2,c.script_loaded&&c.script_loaded(),h(),a.each(f,function(a,b){b()}))},n.src=i,document.body.appendChild(n)}return l},a.extend(a.expr[":"],{tinymce:function(a){var b;return!!(a.id&&"tinymce"in window&&(b=tinymce.get(a.id),b&&b.editorManager===tinymce))}})}(jQuery); -------------------------------------------------------------------------------- /css/gvb2.css: -------------------------------------------------------------------------------- 1 | .component{ 2 | min-height: 50px; 3 | border: 1px dotted rgba(0,0,0,0.1); 4 | transition:0.5s; 5 | } 6 | .component:hover{ 7 | background-color: rgba(0,0,100,0.1); 8 | min-height: 100px; 9 | transition:0.5s; 10 | } 11 | 12 | .component.nestable.ui.grid.container { 13 | /*display: block;*/ 14 | /*z-index: 10;*/ 15 | } 16 | .drop-zone.row{ 17 | height:15px !important; 18 | padding:0 !important; 19 | margin:0 !important; 20 | } 21 | .drop-zone.row.over{ 22 | height:45px !important; 23 | } 24 | .drop-zone.column{ 25 | width:15% !important; 26 | padding:0 !important; 27 | margin:0 !important; 28 | } 29 | .drop-zone.column.over{ 30 | width:25% !important; 31 | } 32 | .drop-zone{ 33 | background-color:red; 34 | opacity:0.1; 35 | /*padding:15px;*/ 36 | /*margin:-15px;*/ 37 | transition: ease-in 0.5s; 38 | z-index:99; 39 | } 40 | .drop-zone.over{ 41 | opacity:0.2; 42 | padding:45px; 43 | transition: ease-out 0.5s; 44 | } 45 | /*.drop-zone:last-child{*/ 46 | /*background-color:green;*/ 47 | /*padding:15px 0;*/ 48 | /*margin:15px 0;*/ 49 | /*width:100%;*/ 50 | /*}*/ 51 | /*.drop-zone.over:last-child{*/ 52 | /*padding:45px 0;*/ 53 | /*margin:15px 0;*/ 54 | /*}*/ 55 | .drop-zone-nested{ 56 | background-color:blue; 57 | opacity:0.1; 58 | position:absolute; 59 | top:25%; 60 | right:25%; 61 | width:50%; 62 | height:50%; 63 | transition: ease-in 0.5s; 64 | z-index:99; 65 | } 66 | .drop-zone-nested.over{ 67 | opacity:0.1; 68 | top:10%; 69 | right:5%; 70 | width:90%; 71 | height:80%; 72 | transition: ease-in 0.5s; 73 | } 74 | .dragevent .action-menu{ 75 | display:none; 76 | } 77 | .dragevent .component{ 78 | /*margin:-15px;*/ 79 | transition: 0.2s; 80 | } 81 | .dragevent .component:hover{ 82 | min-height:50px; 83 | } 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | .drop-zone-generic{ 99 | background-color:red; 100 | opacity:0; 101 | padding:15px; 102 | margin:-15px; 103 | transition: ease-in 0.5s; 104 | z-index:99; 105 | } 106 | .drop-zone-generic.drop-zone-over{ 107 | opacity:0.1; 108 | /*+30px*/ 109 | padding:45px; 110 | transition: ease-out 0.5s; 111 | 112 | } 113 | .drop-zone-generic.last{ 114 | padding-right:0px; 115 | padding-lefft:0px; 116 | margin-right:0px; 117 | margin-left:0px; 118 | margin-top:-15px; 119 | margin-bottom:-15px; 120 | padding-top:15px; 121 | padding-bottom:15px; 122 | /*height:20px;*/ 123 | width:100%; 124 | transition: ease-in 1s; 125 | } 126 | .drop-zone-generic.last.drop-zone-over { 127 | padding:0px; 128 | margin:0px; 129 | transition: ease-out 1s; 130 | padding-top:45px; 131 | padding-bottom:45px; 132 | } 133 | .drop-zone-generic.nested{ 134 | background-color:red; 135 | opacity:0; 136 | position:absolute; 137 | top:20%; 138 | height:60%; 139 | left:10%; 140 | width:80%; 141 | padding:0; 142 | margin:0; 143 | } 144 | .drop-zone-generic.nested.drop-zone-over{ 145 | opacity:0.1; 146 | top:10%; 147 | left:5%; 148 | width:90%; 149 | height:80%; 150 | padding:0; 151 | margin:0; 152 | } 153 | 154 | 155 | 156 | .drop-zone-vertical{ 157 | background-color:red; 158 | opacity:0.1; 159 | padding-right:25px; 160 | padding-left:25px; 161 | height:100%; 162 | margin-right:-25px; 163 | margin-left:-25px; 164 | transition: ease-in 0.5s; 165 | z-index:99; 166 | } 167 | .drop-zone-vertical.drop-zone-over{ 168 | opacity:0.5; 169 | margin:0; 170 | width:50px; 171 | transition: ease-out 0.5s; 172 | } 173 | .drop-zone-vertical.last.drop-zone-over{ 174 | width:0px; 175 | margin-right:-25px; 176 | margin-left:-25px; 177 | } 178 | .drop-zone-horizontal{ 179 | background-color:blue; 180 | opacity:0.1; 181 | padding-top:10px; 182 | padding-bottom:10px; 183 | width:100%; 184 | margin-top:-10px; 185 | margin-bottom:-10px; 186 | transition: ease-in 0.5s; 187 | z-index:99; 188 | } 189 | .drop-zone-horizontal.drop-zone-over{ 190 | opacity:0.5; 191 | margin:0; 192 | height:20px; 193 | transition: ease-out 0.5s; 194 | } 195 | 196 | 197 | 198 | .drop-zone-nested.drop-zone-over{ 199 | opacity:0.5; 200 | top:0; 201 | right:0; 202 | width:100%; 203 | height:100%; 204 | transition: ease-out 0.5s; 205 | } 206 | 207 | .action-menu{ 208 | height:0; 209 | visibility:hidden; 210 | width:100%; 211 | } 212 | .component:hover>.action-menu{ 213 | height:30px; 214 | visibility:visible; 215 | margin-bottom:5px; 216 | } 217 | .component:hover .action-menu{ 218 | } 219 | .rich-text{ 220 | width:100%; 221 | } 222 | .editor{ 223 | min-height:1.5rem; 224 | } 225 | .editor:hover{ 226 | background-color:#ffe5e5; 227 | } 228 | -------------------------------------------------------------------------------- /css/gvb3.css: -------------------------------------------------------------------------------- 1 | .animated { 2 | /*animation-fill-mode: both;*/ 3 | } 4 | .animateIn { 5 | animation-name: animateIn; 6 | animation-duration: 1s; 7 | } 8 | .animateOut { 9 | animation-name: animateOut; 10 | animation-duration: 0.5s; 11 | } 12 | .animateIn *{ 13 | animation-name: animateIn; 14 | animation-duration: 2s; 15 | } 16 | .animateOut *{ 17 | animation-name: animateOut; 18 | animation-duration: 1s; 19 | } 20 | @keyframes animateIn { 21 | from{ 22 | flex-basis:0; 23 | flex-shrink:0; 24 | flex-grow:0; 25 | min-height:0 26 | } 27 | } 28 | @keyframes animateOut { 29 | to{ 30 | flex-basis:0; 31 | flex-shrink:0; 32 | flex-grow:0; 33 | min-height:0; 34 | } 35 | } 36 | 37 | .ghost{ 38 | background-color:white !important; 39 | border:1px dotted black; 40 | opacity:0.7; 41 | pointer-events: none !important; 42 | /*transition:all 0.2s;*/ 43 | } 44 | .ghost *{ 45 | pointer-events: none !important; 46 | } 47 | .ghost .component{ 48 | border:1px dotted black; 49 | /*transition:all 0.2s ease-in-out !important;*/ 50 | } 51 | /*.ghost.fadeout {*/ 52 | /*transition:all 0.5s ease-in-out !important;*/ 53 | /*}*/ 54 | 55 | .rectangle{ 56 | position:fixed; 57 | border:3px double blue; 58 | z-index:99; 59 | } 60 | .dragevent .rectangle{ 61 | z-index:-1; 62 | } 63 | .hidden{ 64 | /*display:none !important;*/ 65 | position: absolute !important; 66 | visibility: hidden !important; 67 | /*transition:0.1s;*/ 68 | } 69 | /* always present */ 70 | .expand-transition { 71 | transition: all 0.1s ease; 72 | } 73 | 74 | /* .expand-enter defines the starting state for entering */ 75 | /* .expand-leave defines the ending state for leaving */ 76 | .expand-enter{ 77 | background-color:red; 78 | } 79 | .expand-leave{ 80 | background-color:red; 81 | } 82 | 83 | .dragevent .dropzone{ 84 | border:1px dotted red; 85 | } 86 | .dragenter{ 87 | background-color:red !important; 88 | } 89 | /*.dragged *{*/ 90 | /*border:1px solid red;*/ 91 | /*pointer-events: none;*/ 92 | /*}*/ 93 | 94 | .me{ 95 | background-color:lightpink; 96 | } 97 | /*wrapper for layout component*/ 98 | .flex-layout{/*define flex flow + self width*/ 99 | display:flex; 100 | } 101 | .flex-layout.flex-row{ 102 | flex-flow: row wrap; 103 | } 104 | .flex-layout.flex-column{ 105 | flex-flow: column nowrap; 106 | } 107 | /*wrapper for all components*/ 108 | .flex-cell{ 109 | flex:0 1 100%; /*define self width*/ 110 | display:flex; 111 | flex-flow:column; 112 | } 113 | .flex-holder{ 114 | /*flex:0 1 auto;*/ 115 | min-width:50px; 116 | min-height:50px; 117 | border:1px dotted red; 118 | background-color:lightpink; 119 | } 120 | .ui-sortable-placeholder{ 121 | position:relative !important; 122 | flex: 0 1 100%; 123 | visibility:visible !important; 124 | border:1px dotted red; 125 | background-color:lightpink; 126 | } 127 | .nestable{ 128 | flex:auto; 129 | } 130 | /*width-classes - preview*/ 131 | .edit .size-12 { 132 | flex-basis: calc(100% - 20px); 133 | } 134 | .edit .size-11 { 135 | flex-basis: calc(91.66666667% - 20px); 136 | } 137 | .edit .size-10 { 138 | flex-basis: calc(83.33333333% - 20px); 139 | } 140 | .edit .size-9 { 141 | flex-basis: calc(75% - 20px); 142 | } 143 | .edit .size-8 { 144 | flex-basis: calc(66.66666667% - 20px); 145 | } 146 | .edit .size-7 { 147 | flex-basis: calc(58.33333333% - 20px); 148 | } 149 | .edit .size-6 { 150 | flex-basis: calc(50% - 20px); 151 | } 152 | .edit .size-5 { 153 | flex-basis: calc(41.66666667% - 20px); 154 | } 155 | .edit .size-4 { 156 | flex-basis: calc(33.33333333% - 20px); 157 | } 158 | .edit .size-3 { 159 | flex-basis: calc(25% - 20px); 160 | } 161 | .edit .size-2 { 162 | flex-basis: calc(16.66666667% - 20px); 163 | } 164 | .edit .size-1 { 165 | flex-basis: calc(8.33333333% - 20px); 166 | } 167 | 168 | 169 | /*width-classes - real*/ 170 | .size-12 { 171 | flex-basis: 100%; 172 | } 173 | .size-11 { 174 | flex-basis: 91.66666667%; 175 | } 176 | .size-10 { 177 | flex-basis: 83.33333333%; 178 | } 179 | .size-9 { 180 | flex-basis: 75%; 181 | } 182 | .size-8 { 183 | flex-basis: 66.66666667%; 184 | } 185 | .size-7 { 186 | flex-basis: 58.33333333%; 187 | } 188 | .size-6 { 189 | flex-basis: 50%; 190 | } 191 | .size-5 { 192 | flex-basis: 41.66666667%; 193 | } 194 | .size-4 { 195 | /*flex-basis: 33.33333333%;*/ 196 | flex: 1 1 33.33333333%; 197 | } 198 | .size-3 { 199 | flex-basis: 25%; 200 | } 201 | .size-2 { 202 | flex-basis: 16.66666667%; 203 | } 204 | .size-1 { 205 | flex-basis: 8.33333333%; 206 | } 207 | 208 | .component{ 209 | min-height: 50px; 210 | box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.2); 211 | box-sizing: border-box; 212 | margin:10px; 213 | } 214 | .component:hover{ 215 | background-color: rgba(0,0,0,0.2); 216 | /*min-height: 100px;*/ 217 | /*transition:0.2s;*/ 218 | } 219 | .action-menu{ 220 | display:none; 221 | } 222 | .component:hover>.action-menu{ 223 | display:block; 224 | } 225 | 226 | .dragevent .action-menu{ 227 | display:none !important; 228 | } 229 | .editor{ 230 | min-height:1.5rem; 231 | } 232 | .editor:hover{ 233 | background-color:#ffe5e5; 234 | } 235 | .action-menu .ui.ribbon.label { 236 | left: -1rem; 237 | width:0; 238 | padding-left: 1rem; 239 | padding-right: 0; 240 | } 241 | -------------------------------------------------------------------------------- /js/tinymce/themes/modern/theme.min.js: -------------------------------------------------------------------------------- 1 | tinymce.ThemeManager.add("modern",function(a){function b(b,c){var d,e=[];if(b)return o(b.split(/[ ,]/),function(b){function f(){function c(a){return function(c,d){for(var e,f=d.parents.length;f--&&(e=d.parents[f].nodeName,"OL"!=e&&"UL"!=e););b.active(c&&e==a)}}var d=a.selection;"bullist"==g&&d.selectorChanged("ul > li",c("UL")),"numlist"==g&&d.selectorChanged("ol > li",c("OL")),b.settings.stateSelector&&d.selectorChanged(b.settings.stateSelector,function(a){b.active(a)},!0),b.settings.disabledStateSelector&&d.selectorChanged(b.settings.disabledStateSelector,function(a){b.disabled(a)})}var g;"|"==b?d=null:n.has(b)?(b={type:b,size:c},e.push(b),d=null):(d||(d={type:"buttongroup",items:[]},e.push(d)),a.buttons[b]&&(g=b,b=a.buttons[g],"function"==typeof b&&(b=b()),b.type=b.type||"button",b.size=c,b=n.create(b),d.items.push(b),a.initialized?f():a.on("init",f)))}),{type:"toolbar",layout:"flow",items:e}}function c(a){function c(c){return c?(d.push(b(c,a)),!0):void 0}var d=[];if(tinymce.isArray(m.toolbar)){if(0===m.toolbar.length)return;tinymce.each(m.toolbar,function(a,b){m["toolbar"+(b+1)]=a}),delete m.toolbar}for(var e=1;10>e&&c(m["toolbar"+e]);e++);return d.length||m.toolbar===!1||c(m.toolbar||t),d.length?{type:"panel",layout:"stack",classes:"toolbar-grp",ariaRoot:!0,ariaRemember:!0,items:d}:void 0}function d(){function b(b){var c;return"|"==b?{text:"|"}:c=a.menuItems[b]}function c(c){var d,e,f,g,h;if(h=tinymce.makeMap((m.removed_menuitems||"").split(/[ ,]/)),m.menu?(e=m.menu[c],g=!0):e=s[c],e){d={text:e.title},f=[],o((e.items||"").split(/[ ,]/),function(a){var c=b(a);c&&!h[a]&&f.push(b(a))}),g||o(a.menuItems,function(a){a.context==c&&("before"==a.separator&&f.push({text:"|"}),a.prependToContext?f.unshift(a):f.push(a),"after"==a.separator&&f.push({text:"|"}))});for(var i=0;i{{$data | json}}{{selection.name}}: {{selection.info}}
194 | 195 |