css-javascript-toolbox
/
views
/
blocks
/
block
/
public
/
js
/
codefile-manager
/
codefile-manager.js
codefile-manager.js in CSS & JavaScript Toolbox 8.0.2, at views/blocks/block/public/js/codefile-manager/codefile-manager.js
| 1 | /** |
| 2 | * |
| 3 | * |
| 4 | * |
| 5 | */ |
| 6 | |
| 7 | (function($) { |
| 8 | |
| 9 | /** |
| 10 | * |
| 11 | * |
| 12 | * |
| 13 | */ |
| 14 | CJTBlockCodeFileView = new function() { |
| 15 | |
| 16 | /** |
| 17 | * |
| 18 | */ |
| 19 | this.block; |
| 20 | |
| 21 | /** |
| 22 | * |
| 23 | */ |
| 24 | this.filesManager; |
| 25 | |
| 26 | /** |
| 27 | * |
| 28 | */ |
| 29 | this.quickToolbar; |
| 30 | |
| 31 | /** |
| 32 | * |
| 33 | */ |
| 34 | var _changequicktoolbarstate = function(event) { |
| 35 | switch (event.type) { |
| 36 | case 'mouseenter': |
| 37 | // Initialize. |
| 38 | var liElement = $(event.currentTarget); |
| 39 | var toolbarNode = this.quickToolbar.get(0); |
| 40 | // Associate with Li. |
| 41 | toolbarNode.codeFileLi = liElement; |
| 42 | var toolbarNode = this.quickToolbar.get(0); |
| 43 | // Don' allow active/master selection. |
| 44 | var link = liElement.find('a'); |
| 45 | toolbarNode.selectCheckbox.prop('disabled', ((link.data('codeFile').id == 1) || link.hasClass('active'))); |
| 46 | // Get Select-Checkbox check state. |
| 47 | toolbarNode.selectCheckbox.prop('checked', liElement.data('checkbox-selected') ? true : false); |
| 48 | // Add directly after the current li. |
| 49 | liElement.after(this.quickToolbar); |
| 50 | // Show over the current li element. |
| 51 | this.quickToolbar.show(); |
| 52 | break; |
| 53 | case 'mouseleave': |
| 54 | // Hide when mouse leaved. |
| 55 | this.quickToolbar.hide(); |
| 56 | break; |
| 57 | } |
| 58 | }; |
| 59 | |
| 60 | /** |
| 61 | * |
| 62 | * |
| 63 | */ |
| 64 | var _onswitchfile = function(event) { |
| 65 | // Initialize. |
| 66 | var link = $(event.target); |
| 67 | var codeFile = link.data('codeFile'); |
| 68 | // Disable Form. |
| 69 | var overlay = this.filesManager.find('.overlay').show(); |
| 70 | // Switch. |
| 71 | this.block.codeFile.switchFile(codeFile).done($.proxy( |
| 72 | function(blockId, codeFileId) { |
| 73 | // Process only if it still the current active block |
| 74 | // otehrwise discard. |
| 75 | if (blockId == this.block.block.get('id')) { |
| 76 | // Switch editor language. |
| 77 | this.block._onswitcheditorlang(undefined, { |
| 78 | lang : codeFile.type ? |
| 79 | codeFile.type : |
| 80 | this.block.block.get('editorLang', 'css') |
| 81 | }); |
| 82 | // Close. |
| 83 | this.deattach(); |
| 84 | // Activate new switched code file. |
| 85 | //===this.filesManager.find('li.codeFile a').removeClass('active'); |
| 86 | //===link.addClass('active'); |
| 87 | // Enable Form |
| 88 | overlay.hide(); |
| 89 | } |
| 90 | }, this) |
| 91 | ); |
| 92 | }; |
| 93 | |
| 94 | /** |
| 95 | * |
| 96 | * |
| 97 | */ |
| 98 | var dialogToolButtons = function() { |
| 99 | // Initialize Tool Buttons. |
| 100 | this.dialogToolButtons = this.filesManager.find('.dialog-tool-buttons'); |
| 101 | // Close Dialog |
| 102 | this.dialogToolButtons.find('.close').click($.proxy( |
| 103 | function() { |
| 104 | // Deattach from current block, free resources. |
| 105 | this.deattach(); |
| 106 | // Inactive |
| 107 | return false; |
| 108 | }, this ) |
| 109 | ); |
| 110 | // Delete Seletced Files. |
| 111 | this.dialogToolButtons.find('.delete').click($.proxy( |
| 112 | function() { |
| 113 | // Get all selected codeFiles ids. |
| 114 | var ids = []; |
| 115 | var checkboxes = this.filesManager.find('.code-file-item input[type="checkbox"]'); |
| 116 | // My select at least one code file. |
| 117 | if (!checkboxes.length) { |
| 118 | alert(CJTCodefileManagerI18N.noSelection); |
| 119 | } |
| 120 | else { |
| 121 | // Confirm Delete |
| 122 | if (confirm(CJTCodefileManagerI18N.confirmDelete.replace('{count}', checkboxes.length))) { |
| 123 | checkboxes.each($.proxy( |
| 124 | function(index, checkbox) { |
| 125 | ids.push(checkbox.value); |
| 126 | }, this) |
| 127 | ); |
| 128 | // Disable Form. |
| 129 | var overlay = this.filesManager.find('.overlay').show(); |
| 130 | // Once collected process deletion. |
| 131 | this.block.codeFile.deleteCodeFile(ids).done($.proxy( |
| 132 | function(response) { |
| 133 | // Delete those codeFiles from Files Manager. |
| 134 | checkboxes.parent().remove(); |
| 135 | // Enable Form. |
| 136 | overlay.hide(); |
| 137 | }, this) |
| 138 | ); |
| 139 | } |
| 140 | } |
| 141 | // Inactive |
| 142 | return false; |
| 143 | }, this ) |
| 144 | ); |
| 145 | // Create File. |
| 146 | this.filesManager.find('.create-file').click($.proxy( |
| 147 | function(event) { |
| 148 | // New Code file default data. |
| 149 | var newCodeFile = {name : '', type : '', tag : '', description : '', id : 0}; |
| 150 | // Display form. |
| 151 | this.editCodeFileDialog.display($(event.target).parent(), newCodeFile).done($.proxy( |
| 152 | function(rCodeFile) { |
| 153 | // Add newly added code file. |
| 154 | this.listCodeFile(rCodeFile);; |
| 155 | // Close the form. |
| 156 | this.editCodeFileDialog.close(); |
| 157 | }, this) |
| 158 | ); |
| 159 | return false; |
| 160 | }, this ) |
| 161 | ); |
| 162 | }; |
| 163 | |
| 164 | /** |
| 165 | * |
| 166 | * |
| 167 | */ |
| 168 | var editCodeFile = function() { |
| 169 | // Edit Code File Dial object/ |
| 170 | this.editCodeFileDialog = new (function(codeFilesView) { |
| 171 | |
| 172 | /** |
| 173 | * |
| 174 | * |
| 175 | */ |
| 176 | var jDialog = codeFilesView.filesManager.find('.edit-code-file'); |
| 177 | |
| 178 | /** |
| 179 | * |
| 180 | * |
| 181 | */ |
| 182 | var jOverlay = codeFilesView.filesManager.find('.overlay'); |
| 183 | |
| 184 | /** |
| 185 | * |
| 186 | * |
| 187 | */ |
| 188 | var promise; |
| 189 | |
| 190 | /** |
| 191 | * |
| 192 | * |
| 193 | */ |
| 194 | var _oncancel = function() { |
| 195 | // Destroy dialog. |
| 196 | this.close(); |
| 197 | }; |
| 198 | |
| 199 | /** |
| 200 | * |
| 201 | * |
| 202 | */ |
| 203 | var _onsave = function() { |
| 204 | // Initialize vars. |
| 205 | var fields = ['name', 'description', 'tag', 'type', 'id']; |
| 206 | var data = {}; |
| 207 | // Collect data. |
| 208 | $.each(fields, $.proxy( |
| 209 | function(index, fieldName) { |
| 210 | data[fieldName] = jDialog.find('#code-file-' + fieldName).val(); |
| 211 | }, this) |
| 212 | ); |
| 213 | // Validate. |
| 214 | // Name must be specified. |
| 215 | if (!data.name) { |
| 216 | alert(CJTCodefileManagerI18N.nameIsNull); |
| 217 | } |
| 218 | else { |
| 219 | // Initialize as available. |
| 220 | var isNameExists = false; |
| 221 | // Name must be unique! |
| 222 | codeFilesView.filesManager.find('.codeFile a').each($.proxy( |
| 223 | function(index, link) { |
| 224 | // Get CodeFile structure associated with the link. |
| 225 | var codeFile = $(link).data('codeFile'); |
| 226 | // Check the name exists. DONT CHECK WITH SELF! |
| 227 | if ((codeFile.id != data.id) && (codeFile.name == data.name)) { |
| 228 | // Mark as not available. |
| 229 | isNameExists = true; |
| 230 | // Exists loop. |
| 231 | return false; |
| 232 | } |
| 233 | }, this)); |
| 234 | if (isNameExists) { |
| 235 | alert(CJTCodefileManagerI18N.nameAlreadyExists); |
| 236 | } |
| 237 | else { // Success |
| 238 | codeFilesView.block.codeFile.save(data).done($.proxy( |
| 239 | function(response) { |
| 240 | // Response to caller (create/edit) |
| 241 | promise.resolve(response); |
| 242 | }, this) |
| 243 | ); |
| 244 | } |
| 245 | } |
| 246 | }; |
| 247 | |
| 248 | /** |
| 249 | * Display |
| 250 | * |
| 251 | */ |
| 252 | this.close = function() { |
| 253 | // Hide the form. |
| 254 | jDialog.hide(); |
| 255 | // Hide Overlay. |
| 256 | jOverlay.hide(); |
| 257 | }; |
| 258 | |
| 259 | /** |
| 260 | * Display |
| 261 | * |
| 262 | */ |
| 263 | this.display = function(li, formData) { |
| 264 | // Fill the form. |
| 265 | $.each(formData, $.proxy( |
| 266 | function(name, value) { |
| 267 | // Find element corresponding to the field. |
| 268 | jDialog.find('#code-file-' + name).val(value); |
| 269 | }, this) |
| 270 | ); |
| 271 | // Add after current LI. |
| 272 | li.after(jDialog) |
| 273 | // Add the overlay immediately before the form. |
| 274 | .after(jOverlay); |
| 275 | // Display dialog and overlay. |
| 276 | jOverlay.show(); |
| 277 | jDialog.show(); |
| 278 | // Return a promise object to be used when form |
| 279 | //is being saved. |
| 280 | promise = $.Deferred(); |
| 281 | return promise; |
| 282 | }; |
| 283 | |
| 284 | // Prepare dialog. |
| 285 | jDialog.find('#code-file-save-button').click($.proxy(_onsave, this)); |
| 286 | jDialog.find('#code-file-cancel-button').click($.proxy(_oncancel, this)); |
| 287 | var typesList = jDialog.find('#code-file-type').change($.proxy( |
| 288 | function() { |
| 289 | // Tag text. |
| 290 | var tagInput = jDialog.find('#code-file-tag'); |
| 291 | var tag = ''; |
| 292 | // Based on the selected type specifiy TAG. |
| 293 | switch (typesList.val()) { |
| 294 | case 'php': |
| 295 | tag = '<?php%s?>'; |
| 296 | break; |
| 297 | case 'javascript': |
| 298 | tag = '<script type="text/javascript">%s</script>'; |
| 299 | break; |
| 300 | case 'css': |
| 301 | tag = '<style type="text/css">%s</style>'; |
| 302 | break; |
| 303 | } |
| 304 | // Set. |
| 305 | tagInput.val(tag); |
| 306 | }, this) |
| 307 | ); |
| 308 | })(this); |
| 309 | }; |
| 310 | |
| 311 | /** |
| 312 | * |
| 313 | * |
| 314 | */ |
| 315 | var filesManagerDialog = function() { |
| 316 | // File Manager. |
| 317 | this.filesManager = $('#code-files-manager') |
| 318 | // Prevent Closing Metabox when interacting with the Code Files Manager. |
| 319 | .click(function(event) {event.stopPropagation()}); |
| 320 | }; |
| 321 | |
| 322 | /** |
| 323 | * |
| 324 | * |
| 325 | */ |
| 326 | this.applyTheme = function(themeBlock) { |
| 327 | // Switch only if displayed for the current block that changing the theme. |
| 328 | if (this.block === themeBlock) { |
| 329 | this.filesManager.css({ |
| 330 | 'background-color': this.block.theme.backgroundColor, |
| 331 | 'color': this.block.theme.color |
| 332 | }); |
| 333 | } |
| 334 | }; |
| 335 | |
| 336 | this.listCodeFile = function(codeFile) { |
| 337 | // Create new LI element for the code file and all the related comopnents. |
| 338 | var liElement = $('<li>').addClass('codeFile').addClass('code-file-item').appendTo(this.filesManager) |
| 339 | // Show quick toolbox when Li ELement is hovered. |
| 340 | .mouseenter($.proxy(_changequicktoolbarstate, this)); |
| 341 | $('<a>').text(codeFile.name) |
| 342 | .prop('title', codeFile.description) |
| 343 | .appendTo(liElement) |
| 344 | // Store Code File Data. |
| 345 | .data('codeFile', codeFile) |
| 346 | // Switch when clicked. |
| 347 | .click($.proxy(_onswitchfile, this)); |
| 348 | return liElement; |
| 349 | }; |
| 350 | |
| 351 | /** |
| 352 | * |
| 353 | * |
| 354 | */ |
| 355 | var quickToolbar = function() { |
| 356 | // Initialize Quick Toolbar |
| 357 | this.quickToolbar = this.filesManager.find('.quick-toolbar').detach(); |
| 358 | // Hide Quicktoolbar when mouse leave. |
| 359 | this.filesManager.mouseleave($.proxy(_changequicktoolbarstate, this)); |
| 360 | // Select File Checkbox. |
| 361 | this.quickToolbar.get(0).selectCheckbox = this.quickToolbar.find('.select-code-file').change($.proxy( |
| 362 | function() { |
| 363 | var isChecked = this.quickToolbar.get(0).selectCheckbox.prop('checked'); |
| 364 | var codeFileLi = this.quickToolbar.prev() |
| 365 | // Mark current QuickToolbar Code File as Selected. |
| 366 | .data('checkbox-selected', isChecked); |
| 367 | // Get CodeFile. |
| 368 | var codeFile = codeFileLi.find('a').data('codeFile'); |
| 369 | // Add Checkbox for current Code File is chcked. |
| 370 | // Delete it otherwise. |
| 371 | switch(isChecked) { |
| 372 | case true: |
| 373 | // Add checkbox and mark it checked. |
| 374 | codeFileLi.data('mySelectCheckbox', $('<input class="show-selection" type="checkbox" checked="checked" />').val(codeFile.id) |
| 375 | .prop('disabled', 'disabled') |
| 376 | .prependTo(codeFileLi)); |
| 377 | break; |
| 378 | case false: |
| 379 | // Delete chekbox |
| 380 | var mySelectCheckbox; |
| 381 | if (mySelectCheckbox = codeFileLi.data('mySelectCheckbox')) { |
| 382 | mySelectCheckbox.remove(); |
| 383 | } |
| 384 | break; |
| 385 | } |
| 386 | }, this) |
| 387 | ); |
| 388 | // Edit Code File. |
| 389 | this.quickToolbar.find('a.edit').click($.proxy( |
| 390 | function(event) { |
| 391 | // Get Code File data from the Code FileLi the Quicktoolbar is currenty activated for. |
| 392 | var codeFileLi = this.quickToolbar.get(0).codeFileLi; |
| 393 | var codeFileLink = codeFileLi.find('a'); |
| 394 | // Display form. |
| 395 | this.editCodeFileDialog.display($(event.target).parent(), codeFileLink.data('codeFile')).done($.proxy( |
| 396 | function(rCodeFile) { |
| 397 | // Update codeFile record cache. |
| 398 | codeFileLink.data('codeFile', rCodeFile); |
| 399 | // Edit View Code File. |
| 400 | codeFileLink.text(rCodeFile.name); |
| 401 | // If is the active file. |
| 402 | if (codeFileLink.hasClass('active')) { |
| 403 | // Change Block Active File Name. |
| 404 | this.block.block.box.find('.hndle a.file').text(rCodeFile.name); |
| 405 | } |
| 406 | // Close the form. |
| 407 | this.editCodeFileDialog.close(); |
| 408 | }, this) |
| 409 | ); |
| 410 | return false; |
| 411 | }, this ) |
| 412 | ); |
| 413 | }; |
| 414 | |
| 415 | /** |
| 416 | * |
| 417 | * |
| 418 | */ |
| 419 | this.deattach = function() { |
| 420 | // Hide Manager. |
| 421 | this.filesManager.css({'display' : 'none'}).detach(); |
| 422 | // Clear any previously added list |
| 423 | this.filesManager.find('li.codeFile').remove(); |
| 424 | // Make sure edit/create form to be destructed. |
| 425 | this.editCodeFileDialog.close(); |
| 426 | // Hide Quicktoolbar. |
| 427 | this.quickToolbar.hide(); |
| 428 | // Reset Block |
| 429 | var oldBlock = this.block; |
| 430 | this.block = null; |
| 431 | // Returns Old block |
| 432 | return oldBlock; |
| 433 | }; |
| 434 | |
| 435 | /** |
| 436 | * put your comment there... |
| 437 | * |
| 438 | */ |
| 439 | this.initialize = function() { |
| 440 | // Files Manager dialog. |
| 441 | filesManagerDialog.apply(this); |
| 442 | // Edit Code File Dialog. |
| 443 | editCodeFile.apply(this); |
| 444 | // Prepare Quick Toolbar |
| 445 | quickToolbar.apply(this); |
| 446 | // Dialog tool buttons |
| 447 | dialogToolButtons.apply(this); |
| 448 | }; |
| 449 | |
| 450 | /** |
| 451 | * |
| 452 | */ |
| 453 | this.switchTo = function(block) { |
| 454 | // If not in revision mode submit to server. |
| 455 | if (block.revisionControl && (block.revisionControl.state == 'revision')) { |
| 456 | return; |
| 457 | } |
| 458 | // Enter Deattached state. |
| 459 | var oldBlock = this.deattach(); |
| 460 | // Display if not displayed. |
| 461 | if (oldBlock !== block) { |
| 462 | // Switch to block. |
| 463 | this.block = block; |
| 464 | // Fetch List |
| 465 | block.codeFile.getList().done($.proxy( |
| 466 | function(codeFiles) { |
| 467 | // - Don't process is entered deattach state. |
| 468 | // - Process only last switched block. |
| 469 | if (this.block.block.get('id') == codeFiles.blockId) { |
| 470 | // Append list. |
| 471 | $.each(codeFiles.list, $.proxy( |
| 472 | function(index, codeFile) { |
| 473 | // List codeFile. |
| 474 | var codeFileLink = this.listCodeFile(codeFile).find('a'); |
| 475 | // Check if current codeFile. |
| 476 | if (this.block.codeFile.file.activeFileId == codeFile.id) { |
| 477 | codeFileLink.addClass('active'); |
| 478 | } |
| 479 | }, this) |
| 480 | ); |
| 481 | // Set Location. |
| 482 | this.block.block.box.find('.file').after(this.filesManager); |
| 483 | // Aply theme |
| 484 | this.applyTheme(this.block); |
| 485 | // Display |
| 486 | this.filesManager.css({'display' : 'block'}); |
| 487 | } |
| 488 | }, this) |
| 489 | ); |
| 490 | } |
| 491 | }; |
| 492 | }; |
| 493 | |
| 494 | })(jQuery) |