├── LICENSE ├── README.md ├── css ├── style.css └── style.min.css ├── images ├── bg1.png ├── close-arrow.png └── open-arrow.png ├── index.html └── script ├── themeCreator.js └── themeCreator.min.js /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Gürbüz Uğurgül 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gurb/blogger-template-generator/588627891492e5e5ee3fa70699a4798434a34234/README.md -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | font-family: 'Roboto', sans-serif; 3 | background: #dddddd!important; 4 | overflow-y: scroll; 5 | } 6 | .container{ 7 | max-width: 850px!important; 8 | margin: auto; 9 | } 10 | .controller{ 11 | font-size: 13px; 12 | background: #f1f1f1; 13 | border-bottom:1px solid #ccc; 14 | padding: 10px; 15 | } 16 | .controller .form-control{ 17 | font-size:13px!important; 18 | } 19 | .controller button{ 20 | padding:5px 10px; 21 | } 22 | .panel{ 23 | background:#fff; 24 | margin-bottom:40px; 25 | border-bottom-left-radius:5px; 26 | border-bottom-right-radius:5px; 27 | } 28 | 29 | .demo{ 30 | background:#fff; 31 | background:url("https://gurb.github.io/bg1.png") no-repeat; 32 | background-color: rgba(255, 255, 255, 0.9); 33 | background-blend-mode: lighten; 34 | background-position: center; 35 | 36 | max-width:470px; 37 | 38 | padding: 10px; 39 | } 40 | .rightside{ 41 | text-align: center; 42 | max-width:290px; 43 | padding:10px; 44 | background:#f1f1f1; 45 | } 46 | .clear{ 47 | width: 100%; 48 | clear: both; 49 | } 50 | .properties input{ 51 | font-size:13px; 52 | width: 100%; 53 | padding:5px; 54 | } 55 | select#select_box, select#select_widget_type { 56 | font-size: 13px; 57 | } 58 | 59 | select{ 60 | font-size:13px; 61 | width:100%; 62 | padding:5px; 63 | } 64 | .button{ 65 | width:100%!important; 66 | padding:4px; 67 | float:left; 68 | margin-top:10px; 69 | } 70 | .exitButton{ 71 | width:24px!important; 72 | padding:5px; 73 | float:rigth; 74 | } 75 | #preview{ 76 | width: 100%; 77 | height:200px; 78 | border:1px solid rgb(169, 169, 169);; 79 | background:#f9f9f9; 80 | } 81 | 82 | .layers{ 83 | margin-right: 1px; 84 | height:auto; 85 | } 86 | .layers-list{ 87 | font-size: 13px!important; 88 | height: 120px!important; 89 | } 90 | ul.layers-control{ 91 | margin: 0; 92 | padding: 0; 93 | height:40px; 94 | } 95 | ul.layers-control li{ 96 | padding:5px; 97 | line-height: 30px; 98 | display: inline; 99 | list-style-type: none; 100 | cursor: pointer; 101 | } 102 | li#add-layer, li#delete-layer{ 103 | float:left; 104 | margin-right: 5px; 105 | } 106 | 107 | li#up-layer, li#down-layer{ 108 | float:right; 109 | margin-left: 5px; 110 | } 111 | li.clear{ 112 | clear:both; 113 | } 114 | .line{ 115 | width:100%; 116 | height:5px; 117 | line-height: 5px; 118 | border-top:1px solid rgb(168, 168, 168); 119 | } 120 | 121 | .showNotification{ 122 | margin:10px 0; 123 | color:#fff; 124 | font-size: 13px; 125 | background: #a88a28; 126 | padding:4px; 127 | border:1px solid #7c661e; 128 | border-radius: 3px; 129 | display: block; 130 | } 131 | 132 | .sectionArea{ 133 | border-radius: 4px; 134 | border:1px solid #bbb; 135 | background:#eee; 136 | padding: 3px; 137 | margin-bottom:10px; 138 | text-align: center; 139 | } 140 | 141 | .sectionOption{ 142 | height: auto; 143 | padding:10px; 144 | background:#fff; 145 | border:1px solid #ccc; 146 | margin:0px 0px 0px 0; 147 | } 148 | 149 | .sectionHeader{ 150 | padding:15px; 151 | cursor: pointer; 152 | user-select: none; 153 | } 154 | 155 | .iconImage{ 156 | padding: 3px 0 0 40px; 157 | height:32px; 158 | display: inline-block; 159 | background:url(https://gurb.github.io/open-arrow.png) no-repeat; 160 | text-align:center; 161 | opacity: 0.5; 162 | } 163 | 164 | .formOptions input{ 165 | font-size: 13px; 166 | width: 100%; 167 | } 168 | 169 | .leftInput, .rightInput{ 170 | width:44%; 171 | margin:10px; 172 | } 173 | 174 | .leftInput{ 175 | float: left; 176 | } 177 | 178 | .rightInput{ 179 | float:right; 180 | } 181 | 182 | .bgColorPicker{ 183 | width:30%!important; 184 | float:right; 185 | margin-right: -4px; 186 | padding: 0; 187 | } 188 | 189 | .bgColorPickerText{ 190 | width:64%!important; 191 | float:left; 192 | } 193 | 194 | .tab{ 195 | margin-left:2em; 196 | } 197 | 198 | .codeBox{ 199 | white-space: nowrap; 200 | border:1px solid #ccc; 201 | padding: 10px; 202 | font-family: 'Source Code Pro', monospace; 203 | font-size: 13px; 204 | overflow-x: auto; 205 | } 206 | 207 | .properties{ 208 | margin-top:10px; 209 | } 210 | 211 | .copyCode{ 212 | position:absolute; 213 | right:5px; 214 | margin:5px 15px; 215 | cursor: pointer; 216 | background: #f1f1f1; 217 | padding:3px 5px; 218 | border-radius: 4px; 219 | border:1px solid #ccc; 220 | } 221 | 222 | .banner{ 223 | background:#3f3f3f; 224 | height:150px; 225 | } 226 | 227 | h1.title{ 228 | color:#fff; 229 | line-height: 100px; 230 | text-align: center; 231 | } 232 | 233 | .descriptionwrapper{ 234 | text-align:center; 235 | margin-top:-30px; 236 | color:#ccc; 237 | } 238 | 239 | .container{ 240 | padding-right: 0!important; 241 | padding-left: 0!important; 242 | } 243 | .notification-panel{ 244 | border-top-left-radius: 5px; 245 | border-top-right-radius: 5px; 246 | background:#fff; 247 | height:100px; 248 | border-bottom:1px solid #ccc; 249 | margin-top:-30px; 250 | } 251 | 252 | .manipulate-row{ 253 | margin-left:0!important; 254 | margin-right:0!important; 255 | } 256 | 257 | .manipulate-row .col-sm-4{ 258 | padding-right: 0px!important; 259 | padding-left: 0px!important; 260 | } 261 | 262 | .box-notf{ 263 | font-size:12px; 264 | height:90px; 265 | margin:5px; 266 | padding:5px; 267 | 268 | border-radius:4px; 269 | } -------------------------------------------------------------------------------- /css/style.min.css: -------------------------------------------------------------------------------- 1 | body{font-family:Roboto,sans-serif;background:#ddd!important;overflow-y:scroll}.container{max-width:850px!important;margin:auto}.controller{font-size:13px;background:#f1f1f1;border-bottom:1px solid #ccc;padding:10px}.controller .form-control{font-size:13px!important}.controller button{padding:5px 10px}.panel{background:#fff}.demo{background:#fff;background:url(https://gurb.github.io/bg1.png) no-repeat;background-color:rgba(255,255,255,.9);background-blend-mode:lighten;background-position:center;width:470px;float:left;padding:10px}.rightside{text-align:center;width:290px;float:right;padding:10px;background:#f1f1f1}.clear{width:100%;clear:both}.properties input{font-size:13px;width:100%;padding:5px}select#select_box,select#select_widget_type{font-size:13px}select{font-size:13px;width:100%;padding:5px}.button{width:100%!important;padding:4px;float:left;margin-top:10px}.exitButton{width:24px!important;padding:5px;float:rigth}#preview{width:100%;height:200px;border:1px solid #a9a9a9;background:#f9f9f9}.layers{margin-right:1px;height:auto}.layers-list{font-size:13px!important;height:120px!important}ul.layers-control{margin:0;padding:0;height:40px}ul.layers-control li{padding:5px;line-height:30px;display:inline;list-style-type:none;cursor:pointer}li#add-layer,li#delete-layer{float:left;margin-right:5px}li#down-layer,li#up-layer{float:right;margin-left:5px}li.clear{clear:both}.line{width:100%;height:5px;line-height:5px;border-top:1px solid #a8a8a8}.showNotification{margin:10px 0;color:#fff;font-size:13px;background:#a88a28;padding:4px;border:1px solid #7c661e;border-radius:3px;display:block}.sectionArea{border-radius:4px;border:1px solid #bbb;background:#eee;padding:3px;margin-bottom:10px;text-align:center}.sectionOption{height:auto;padding:10px;background:#fff;border:1px solid #ccc;margin:0}.sectionHeader{padding:15px;cursor:pointer;user-select:none}.iconImage{padding:3px 0 0 40px;height:32px;display:inline-block;background:url(https://gurb.github.io/open-arrow.png) no-repeat;text-align:center;opacity:.5}.formOptions input{font-size:13px;width:100%}.leftInput,.rightInput{width:44%;margin:10px}.leftInput{float:left}.rightInput{float:right}.bgColorPicker{width:30%!important;float:right;margin-right:-4px;padding:0}.bgColorPickerText{width:64%!important;float:left}.tab{margin-left:2em}.codeBox{white-space:nowrap;border:1px solid #ccc;padding:10px;font-family:'Source Code Pro',monospace;font-size:13px;overflow-x:auto}.properties{margin-top:10px}.copyCode{position:absolute;right:5px;margin:5px 15px;cursor:pointer;background:#f1f1f1;padding:3px 5px;border-radius:4px;border:1px solid #ccc}.banner{background:#3f3f3f;height:150px}h1.title{color:#fff;line-height:100px;text-align:center}.descriptionwrapper{text-align:center;margin-top:-30px;color:#ccc}.container{padding-right:0!important;padding-left:0!important}.notification-panel{border-top-left-radius:5px;border-top-right-radius:5px;background:#fff;height:100px;border-bottom:1px solid #ccc;margin-top:-30px}.manipulate-row{margin-left:0!important;margin-right:0!important}.manipulate-row .col-sm-4{padding-right:0!important;padding-left:0!important}.box-notf{font-size:12px;height:90px;margin:5px;padding:5px;border-radius:4px} -------------------------------------------------------------------------------- /images/bg1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gurb/blogger-template-generator/588627891492e5e5ee3fa70699a4798434a34234/images/bg1.png -------------------------------------------------------------------------------- /images/close-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gurb/blogger-template-generator/588627891492e5e5ee3fa70699a4798434a34234/images/close-arrow.png -------------------------------------------------------------------------------- /images/open-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gurb/blogger-template-generator/588627891492e5e5ee3fa70699a4798434a34234/images/open-arrow.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Theme Creator 12 | 13 | 14 | 20 |
21 |
22 |
23 |
This project is being developed for creating Blogger Template. For now, it offers only the basic level of template creation. Deficiencies will be fixed over time. 🛠
24 |
25 |
26 |
You can watch the 📹video tutorial to learn how to use it or you can read README page. Click video link.
27 |
28 |
29 |
Click to see the updates and new additions for the project.

📌 Last update: #1 ...
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 | 41 |
42 |
43 | 44 |
45 |
46 | 47 |
48 |
49 | 50 |
51 |
52 |
53 |
54 | 55 | 56 |
57 |
58 |
59 |
60 |
CSS General Settings
61 |
62 |
63 |
64 | 65 |
66 |
67 |
68 |
69 | 71 | 72 |
73 |
74 |
75 |
76 |
77 |
Copy
78 |
79 |
80 |
81 | 83 |
84 | 86 |
    87 |
  • ➕
    • 88 |
  • ➖
    • 89 |
  • Up
    • 90 |
  • Down
    • 91 |
92 |
93 |
94 |
95 |
96 |
97 | 98 |
99 |
100 | 101 |
102 |
103 | 104 |
105 |
106 | 111 |
112 |
113 |
114 | 119 |
120 | 121 | 122 | 123 |

124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 | 132 | 133 | 134 | 135 | 136 | -------------------------------------------------------------------------------- /script/themeCreator.js: -------------------------------------------------------------------------------- 1 | class UI{ 2 | constructor(){ 3 | this.controller = document.querySelector(".controller"); 4 | this.panel = document.querySelector(".panel"); 5 | this.demoView = document.querySelector(".demo-view"); 6 | this.codeBox = document.querySelector(".codeBox"); 7 | this.codeBox.style.display = 'none'; 8 | this.copyCodeButton = document.querySelector(".copyCode"); 9 | this.copyCodeButton.style.display = 'none'; 10 | 11 | this.templateName = document.getElementById("templateName"); 12 | this.templateURL = document.getElementById("templateURL"); 13 | this.author = document.getElementById("author"); 14 | this.settingsNotification = document.querySelector(".settings-notification"); 15 | 16 | this.blogWidth = document.getElementById("BlogWidth"); 17 | 18 | this.rightside = document.querySelector(".rightside"); 19 | this.layersList = document.querySelector(".layers-list"); 20 | this.layersControl = document.querySelector(".layers-control"); 21 | this.properties = document.querySelector(".properties"); 22 | //this.properties.style.display = 'none'; 23 | this.propertiesNotification = document.querySelector(".properties-notification"); 24 | this.sectionId = document.getElementById("sectionId"); 25 | this.sectionClass = document.getElementById("sectionClass"); 26 | this.maxWidgetNumber = document.getElementById("maxWidgetNumber"); 27 | this.selectBox = document.getElementById("select_box"); 28 | this.selectWidgetType = document.getElementById("select_widget_type"); 29 | this.sectionOption = document.querySelector(".sectionOption"); 30 | this.line = document.createElement("hr"); 31 | this.temp_msg; 32 | this.securityCode = randomCharacter(10); 33 | 34 | this.canvas = document.getElementById("preview"); 35 | this.context = this.canvas.getContext("2d"); 36 | this.image = new Image(); 37 | } 38 | 39 | submitProperties(){ 40 | const idValue = this.sectionId.value; 41 | const classValue = this.sectionClass.value; 42 | const maxWidgetNumberValue = this.maxWidgetNumber.value; 43 | const selectBoxValue = this.selectBox.options[this.selectBox.selectedIndex].value; 44 | const selectWidgetTypeValue = this.selectWidgetType.options[this.selectWidgetType.selectedIndex].value; 45 | const self = this; 46 | var message; 47 | 48 | if(idValue==='' || idValue < 0){ 49 | message = "Actually, section id is necessary."; 50 | }else if(classValue==='' || classValue < 0){ 51 | message = "Actually, section class is necessary."; 52 | }/*else if(maxWidgetNumberValue==='' || maxWidgetNumberValue < 0){ 53 | message = "Don't Necessary"; 54 | }*/else if(selectBoxValue==="0"){ 55 | message = "Yes or No, choose one."; 56 | }else if(!uniqueIDcontrol(idValue)){ 57 | message = "ID must be unique"; 58 | }else{ 59 | message = "All added."; 60 | var obj = new Section(idValue, classValue, maxWidgetNumberValue, selectBoxValue, selectWidgetTypeValue); 61 | sections.push(obj); 62 | this.addSection(self, sections); 63 | this.addOption(self, sections); 64 | } 65 | this.addNotification(self, message, self.propertiesNotification); 66 | } 67 | 68 | showAddProperties(){ 69 | this.properties.style.display = 'block'; 70 | } 71 | 72 | copyCode(){ 73 | if(document.selection){ 74 | var range = document.body.createTextRange(); 75 | var codeBox = document.getElementById("codeB"); 76 | range.moveToElementText(codeBox); 77 | range.select(); 78 | document.execCommand("copy"); 79 | }else if(window.getSelection){ 80 | var sel = window.getSelection(); 81 | sel.removeAllRanges(); 82 | var range = document.createRange(); 83 | range.selectNode(document.getElementById("codeB")); 84 | sel.addRange(range); 85 | document.execCommand("copy"); 86 | sel.removeAllRanges(); // deactive selection :) 87 | } 88 | } 89 | 90 | addNotification(self, message, showDiv){ 91 | var notification = document.createElement('div'); 92 | notification.className = "showNotification"; 93 | if(showDiv.children.length === 0 || this.temp_msg !== message) 94 | showDiv.appendChild(notification); 95 | notification.innerHTML = message; 96 | this.temp_msg = message; 97 | setTimeout(function(){ 98 | notification.remove("showNotification"); 99 | },10000); 100 | } 101 | 102 | showSectionProperties(self, id, iconId){ 103 | var index; 104 | var sectionOptionID = id; 105 | var sectionOption = document.getElementById(sectionOptionID); 106 | var iconState = document.getElementById(iconId); 107 | if(sectionOption.style.display === 'block'){ 108 | sectionOption.style.display = 'none'; 109 | iconState.style.backgroundImage = 'url(https://gurb.github.io/open-arrow.png)'; 110 | iconState.style.opacity = 0.5; 111 | }else{ 112 | for(var i=0;i setTimeout(resolve, ms)); 361 | } 362 | 363 | function eventListener(){ 364 | const layers = document.querySelector(".layers"); 365 | const properties = document.querySelector(".properties"); 366 | const showAddLayer = document.getElementById("add-layer"); 367 | const deleteLayer = document.getElementById("delete-layer"); 368 | const upLayer = document.getElementById("up-layer"); 369 | const downLayer = document.getElementById("down-layer"); 370 | const closeProperties = document.querySelector(".exitButton"); 371 | const copyButton = document.querySelector(".copyCode"); 372 | 373 | const createButton = document.getElementById("create-button"); 374 | 375 | const ui = new UI(); 376 | 377 | layers.addEventListener("click", function(event){ 378 | event.preventDefault(); 379 | //ui.submit_layers(); 380 | }); 381 | 382 | properties.addEventListener("submit", function(event) { 383 | event.preventDefault(); 384 | ui.submitProperties(); 385 | }); 386 | 387 | showAddLayer.addEventListener("click", function(event){ 388 | event.preventDefault(); 389 | ui.showAddProperties(); 390 | }); 391 | 392 | deleteLayer.addEventListener("click", function(event){ 393 | event.preventDefault(); 394 | ui.deleteSection(); 395 | }); 396 | 397 | upLayer.addEventListener("click", function(event){ 398 | event.preventDefault(); 399 | ui.upSection(); 400 | }); 401 | 402 | downLayer.addEventListener("click", function(event){ 403 | event.preventDefault(); 404 | ui.downSection(); 405 | }); 406 | 407 | closeProperties.addEventListener("click", function(event){ 408 | event.preventDefault(); 409 | ui.closeProperties(); 410 | }); 411 | 412 | createButton.addEventListener("click", function(event){ 413 | event.preventDefault(); 414 | ui.controlTemplateSettings(); 415 | }); 416 | 417 | copyButton.addEventListener("click", function(event){ 418 | event.preventDefault(); 419 | ui.copyCode(); 420 | }); 421 | } 422 | 423 | document.addEventListener('DOMContentLoaded', function(){ 424 | eventListener(); 425 | }); 426 | 427 | var sections = []; 428 | var cssStyles = []; 429 | 430 | function Section(idName, className, max_widgets, show_add_element, widgetType){ 431 | this.idName = idName; 432 | this.className = className; 433 | this.max_widgets = max_widgets; 434 | this.show_add_element = show_add_element; 435 | this.widgetType = widgetType; 436 | } 437 | 438 | function CSSattr(selectorName, width, height, bgColor){ 439 | this.selectorName = selectorName; 440 | this.width = width; 441 | this.height = height; 442 | this.bgColor = bgColor; 443 | } 444 | 445 | function uniqueIDcontrol(idValue){ 446 | if(sections.length === 0) 447 | return true; 448 | for(var i=0;i" + "<html>" + "
" + "<head>" + "
" + "<meta charset='utf-8'/>" + newLine + tab; 489 | 490 | function titlePattern(titleN){ 491 | return "<title>" + titleN + "</title>"; 492 | } 493 | var cssFirstTag = newLine + tab + "<b:skin><![CDATA[" + newLine + newLine + tab; 494 | var commentFirst = "/* ---------------------------------" + newLine + tab; 495 | var commentLast = newLine + tab + "--------------------------------- */" + newLine + tab; 496 | function blogPattern(w){ 497 | return ".container{width: " + w + ";}" + newLine + tab; 498 | } 499 | function cssPattern(selectorN, w, h, bgC){ 500 | return "." + selectorN + "-area{width:" + w + ";height:" + h + ";background:" + bgC + ";}" + newLine + tab; 501 | } 502 | var cssEndTag = newLine + tab + "]]></b:skin>" + "
"; 503 | var headEndTag = "</head>" + "
"; 504 | var bodyFirstTag = "<body>" + newLine + tab + "<div class='container'>" + newLine + tab; 505 | function sectionPattern(idN, classN, maxWidgetN, showaddelementN, widgetCode){ 506 | if(widgetCode === "0" || widgetCode !== "1") 507 | return tab + "<div class='"+ classN +"-area'>" + "
" + "<b:section id='" + idN + "' class='" + classN + "' showaddelement='" + showaddelementN + "'/>" + newLine + tab + "</div>"; 508 | else if(widgetCode === "1") 509 | return newLine + tab + "<div class='"+ classN +"-area'>" + "
" + "<b:section id='" + idN + "' class='" + classN + "' showaddelement='" + showaddelementN + "'>" + newLine + tab + tab + main_widget + newLine + tab + "</b:section>" + newLine + tab + "</div>"; 510 | } 511 | var bodyEndTag = "</div>
" + "</body>"; 512 | var htmlEndTag = "
" + "</html>"; 513 | 514 | // widget codes 515 | var main_widget = "<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>" -------------------------------------------------------------------------------- /script/themeCreator.min.js: -------------------------------------------------------------------------------- 1 | function sleep(e){return new Promise(t=>setTimeout(t,e))}function eventListener(){const e=document.querySelector(".layers"),t=document.querySelector(".properties"),s=document.getElementById("add-layer"),i=document.getElementById("delete-layer"),n=document.getElementById("up-layer"),o=document.getElementById("down-layer"),l=document.querySelector(".exitButton"),a=document.querySelector(".copyCode"),r=document.getElementById("create-button"),c=new UI;e.addEventListener("click",function(e){e.preventDefault()}),t.addEventListener("submit",function(e){e.preventDefault(),c.submitProperties()}),s.addEventListener("click",function(e){e.preventDefault(),c.showAddProperties()}),i.addEventListener("click",function(e){e.preventDefault(),c.deleteSection()}),n.addEventListener("click",function(e){e.preventDefault(),c.upSection()}),o.addEventListener("click",function(e){e.preventDefault(),c.downSection()}),l.addEventListener("click",function(e){e.preventDefault(),c.closeProperties()}),r.addEventListener("click",function(e){e.preventDefault(),c.controlTemplateSettings()}),a.addEventListener("click",function(e){e.preventDefault(),c.copyCode()})}function Section(e,t,s,i,n){this.idName=e,this.className=t,this.max_widgets=s,this.show_add_element=i,this.widgetType=n}function CSSattr(e,t,s,i){this.selectorName=e,this.width=t,this.height=s,this.bgColor=i}function uniqueIDcontrol(e){if(0===sections.length)return!0;for(var t=0;t
      <b:section id='"+e+"' class='"+t+"' maxwidgets='"+s+"' showaddelement='"+i+"'/>"+newLine+tab+"</div>":"1"===n?newLine+tab+"<div class='"+t+"-area'>
      <b:section id='"+e+"' class='"+t+"' maxwidgets='"+s+"' showaddelement='"+i+"'>"+newLine+tab+tab+main_widget+newLine+tab+"  </b:section>"+newLine+tab+"</div>":void 0}class UI{constructor(){this.controller=document.querySelector(".controller"),this.panel=document.querySelector(".panel"),this.demoView=document.querySelector(".demo-view"),this.codeBox=document.querySelector(".codeBox"),this.codeBox.style.display="none",this.copyCodeButton=document.querySelector(".copyCode"),this.copyCodeButton.style.display="none",this.templateName=document.getElementById("templateName"),this.templateURL=document.getElementById("templateURL"),this.author=document.getElementById("author"),this.settingsNotification=document.querySelector(".settings-notification"),this.rightside=document.querySelector(".rightside"),this.layersList=document.querySelector(".layers-list"),this.layersControl=document.querySelector(".layers-control"),this.properties=document.querySelector(".properties"),this.propertiesNotification=document.querySelector(".properties-notification"),this.sectionId=document.getElementById("sectionId"),this.sectionClass=document.getElementById("sectionClass"),this.maxWidgetNumber=document.getElementById("maxWidgetNumber"),this.selectBox=document.getElementById("select_box"),this.selectWidgetType=document.getElementById("select_widget_type"),this.sectionOption=document.querySelector(".sectionOption"),this.line=document.createElement("hr"),this.temp_msg,this.securityCode=randomCharacter(10),this.canvas=document.getElementById("preview"),this.context=this.canvas.getContext("2d"),this.image=new Image}submitProperties(){const e=this.sectionId.value,t=this.sectionClass.value,s=this.maxWidgetNumber.value,i=this.selectBox.options[this.selectBox.selectedIndex].value,n=this.selectWidgetType.options[this.selectWidgetType.selectedIndex].value,o=this;var l;if(""===e||e<0)l="Actually, section id is necessary.";else if(""===t||t<0)l="Actually, section class is necessary.";else if(""===s||s<0)l="Don't Necessary";else if("0"===i)l="Yes or No, choose one.";else if(uniqueIDcontrol(e)){l="All added.";var a=new Section(e,t,s,i,n);sections.push(a),this.addSection(o,sections),this.addOption(o,sections)}else l="ID must be unique";this.addNotification(o,l,o.propertiesNotification)}showAddProperties(){this.properties.style.display="block"}copyCode(){if(document.selection){var e=document.body.createTextRange(),t=document.getElementById("codeB");e.moveToElementText(t),e.select(),document.execCommand("copy")}else if(window.getSelection){var s=window.getSelection();s.removeAllRanges();e=document.createRange();e.selectNode(document.getElementById("codeB")),s.addRange(e),document.execCommand("copy"),s.removeAllRanges()}}addNotification(e,t,s){var i=document.createElement("div");i.className="showNotification",0!==s.children.length&&this.temp_msg===t||s.appendChild(i),i.innerHTML=t,this.temp_msg=t,setTimeout(function(){i.remove("showNotification")},1e4)}showSectionProperties(e,t,s){var i,n=t,o=document.getElementById(n),l=document.getElementById(s);if("block"===o.style.display)o.style.display="none",l.style.backgroundImage="url(https://gurb.github.io/open-arrow.png)",l.style.opacity=.5;else for(var a=0;a",tab="    ",XMLpattern="",firstPattern="<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'/>"+newLine+tab,cssFirstTag=newLine+tab+"<b:skin><![CDATA["+newLine+newLine+tab,commentFirst="*/ ---------------------------------"+newLine+tab,commentLast=newLine+tab+"--------------------------------- */"+newLine+tab,cssEndTag=newLine+tab+"]]></b:skin>
  ",headEndTag="</head>
  ",bodyFirstTag="<body>"+newLine+tab,bodyEndTag="
  </body>",htmlEndTag="
</html>",main_widget="<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>"; --------------------------------------------------------------------------------