code_manager.js
4 years ago
code_manager_dashboard.js
4 years ago
code_manager_listmode.js
4 years ago
code_manager_tabmode.js
4 years ago
notify.min.js
4 years ago
code_manager_tabmode.js
855 lines
| 1 | /** |
| 2 | * JavaScript code to build Code Manager IDE in tab mode |
| 3 | * |
| 4 | * @author Peter Schulz |
| 5 | * @since 1.0.0 |
| 6 | */ |
| 7 | |
| 8 | const PHP_DEFAULT = '<?php\n\n?>'; |
| 9 | |
| 10 | var user_has_edited = {}; |
| 11 | |
| 12 | var current_url = window.location.href.split('?'); |
| 13 | var default_url = current_url[0] + '?page=code_manager'; |
| 14 | |
| 15 | var href = window.location.href; |
| 16 | var pathname = href.substring(0, href.lastIndexOf('/')) + '/admin-ajax.php'; |
| 17 | |
| 18 | var tabs = 0; |
| 19 | var cm_editors = {}; |
| 20 | var new_label_index = 0; |
| 21 | |
| 22 | function option_in_code_list(option_value) { |
| 23 | found = false; |
| 24 | jQuery('#code_manager_code_list option').each(function() { |
| 25 | if (this.value === option_value) { |
| 26 | found = true; |
| 27 | return true; |
| 28 | } |
| 29 | }); |
| 30 | return found; |
| 31 | } |
| 32 | |
| 33 | function get_code_list(callback) { |
| 34 | jQuery.ajax({ |
| 35 | method: 'POST', |
| 36 | url: pathname + '?action=code_manager_get_code_list', |
| 37 | data: { |
| 38 | wpnonce: wpnonce, |
| 39 | page: 'code_manager_post' |
| 40 | } |
| 41 | }).done( |
| 42 | function(msg) { |
| 43 | try { |
| 44 | obj = JSON.parse(msg); |
| 45 | |
| 46 | if (Array.isArray(obj)) { |
| 47 | jQuery('#code_manager_code_list').empty(); |
| 48 | maxLength = 0; |
| 49 | codeTypes = {}; |
| 50 | // Determine max length |
| 51 | for (var key in obj) { |
| 52 | if (obj[key].code_name.length>maxLength) { |
| 53 | maxLength = obj[key].code_name.length; |
| 54 | } |
| 55 | } |
| 56 | // Add option - use monospace to right align code types |
| 57 | for (var key in obj) { |
| 58 | if (!is_code_edited(obj[key].code_id)) { |
| 59 | jQuery('#code_manager_code_list') |
| 60 | .append( |
| 61 | jQuery('<option>', {value: obj[key].code_id}) |
| 62 | .html(obj[key].code_name + " ".repeat( maxLength - obj[key].code_name.length) + " − " + obj[key].code_type) |
| 63 | .attr('data-name', obj[key].code_name) |
| 64 | .attr('data-type', obj[key].code_type) |
| 65 | .attr('data-enabled', obj[key].code_enabled) |
| 66 | .attr('data-preview', obj[key].preview_enabled) |
| 67 | ); |
| 68 | codeTypes[obj[key].code_type] = true; |
| 69 | } |
| 70 | } |
| 71 | // Update filters |
| 72 | jQuery("#code_manager_filter_code_type").empty(); |
| 73 | jQuery("#code_manager_filter_code_type") |
| 74 | .append( |
| 75 | jQuery("<option>", {value: ""}) |
| 76 | .html("Filter code type") |
| 77 | ); |
| 78 | Object.keys(codeTypes).sort().forEach(function(codeType, index) { |
| 79 | jQuery("#code_manager_filter_code_type") |
| 80 | .append( |
| 81 | jQuery("<option>", {value: codeType}) |
| 82 | .html(codeType) |
| 83 | ); |
| 84 | }); |
| 85 | callback(); |
| 86 | } |
| 87 | } |
| 88 | catch (e) { |
| 89 | if (msg.substr(0, 3) === 'ERR') { |
| 90 | jQuery.notify(msg, "error"); |
| 91 | } else { |
| 92 | jQuery.notify(e, "error"); |
| 93 | } |
| 94 | } |
| 95 | } |
| 96 | ); |
| 97 | } |
| 98 | |
| 99 | function is_code_edited(code_id) { |
| 100 | for (var editor in cm_editors) { |
| 101 | if (cm_editors[editor].tab_code_index==code_id) { |
| 102 | return true; |
| 103 | } |
| 104 | } |
| 105 | return false; |
| 106 | } |
| 107 | |
| 108 | function get_code(code_id, code_name, code_type, code_enabled, preview_enabled) { |
| 109 | jQuery.ajax({ |
| 110 | method: 'POST', |
| 111 | url: pathname + '?action=code_manager_get_code', |
| 112 | data: { |
| 113 | wpnonce: wpnonce_get_code, |
| 114 | code_id: code_id, |
| 115 | page: 'code_manager_post' |
| 116 | } |
| 117 | }).done( |
| 118 | function(msg) { |
| 119 | if (msg==='ERR-Not authorized') { |
| 120 | jQuery.notify('Not authorized', 'error'); |
| 121 | } else if (msg==='ERR-Wrong arguments') { |
| 122 | jQuery.notify('Wrong arguments', 'error'); |
| 123 | } else { |
| 124 | tab_load(code_id, code_name, code_type, msg, code_enabled, preview_enabled); |
| 125 | } |
| 126 | } |
| 127 | ); |
| 128 | } |
| 129 | |
| 130 | function set_copy_shortcode_link(tab) { |
| 131 | if (cm_editors[tab].tab_code_index!==-1 && jQuery("#tab-" + tab + "-code_type").val().includes("shortcode")) { |
| 132 | code_name = jQuery("#tab-" + tab + "-label").text(); |
| 133 | jQuery("#tab-" + tab + "-shortcode_link").html(` |
| 134 | <a href="javascript:void(0)" class="dashicons dashicons-image-rotate" onclick="jQuery('#cm_copy_id${tab}').toggle(); jQuery('#cm_copy_name${tab}').toggle();" style="vertical-align:middle"></a> |
| 135 | <span id="cm_copy_id${tab}" style="display:none"> |
| 136 | [cmruncode id="${cm_editors[tab].tab_code_index}"] |
| 137 | <a href="javascript:void(0)" class="dashicons dashicons-clipboard c2c" |
| 138 | onclick="jQuery.notify("Shortcode copied to clipboard", "info")" |
| 139 | data-clipboard-text="[cmruncode id="${cm_editors[tab].tab_code_index}"]" |
| 140 | title="Copy shortcode to clipboard" style="vertical-align:middle" |
| 141 | ></a> |
| 142 | </span> |
| 143 | <span id="cm_copy_name${tab}"> |
| 144 | [cmruncode name="${code_name}"] |
| 145 | <a href="javascript:void(0)" class="dashicons dashicons-clipboard c2c" |
| 146 | onclick="jQuery.notify("Shortcode copied to clipboard", "info")" |
| 147 | data-clipboard-text="[cmruncode name="${code_name}"]" |
| 148 | title="Copy shortcode to clipboard" style="vertical-align:middle" |
| 149 | ></a> |
| 150 | </span> |
| 151 | `); |
| 152 | new ClipboardJS('.c2c'); |
| 153 | } else { |
| 154 | jQuery("#tab-" + tab + "-shortcode_link").html(''); |
| 155 | } |
| 156 | } |
| 157 | |
| 158 | function tab_unselect() { |
| 159 | jQuery('.nav-tab-active').removeClass('nav-tab-active'); |
| 160 | jQuery('.nav-tab-content').hide(); |
| 161 | } |
| 162 | |
| 163 | function tab_new(tab_label, code_id = -1, code_type = 'PHP Shortcode', code = '', code_enabled = 0, preview_enabled = 'false') { |
| 164 | tab_unselect(); |
| 165 | |
| 166 | code_types = ''; |
| 167 | for (var code_group in code_manager_code_groups) { |
| 168 | code_types += '<optgroup label="' + code_group + '">'; |
| 169 | code_manager_code_group = code_manager_code_groups[code_group]; |
| 170 | for (var label in code_manager_code_group ) { |
| 171 | if (code_type===label) { |
| 172 | selected = ' selected'; |
| 173 | } else { |
| 174 | selected = ''; |
| 175 | } |
| 176 | code_types += |
| 177 | '<option value="' + label + '"' + selected + '>' + |
| 178 | code_manager_code_group[label] + |
| 179 | '</option>'; |
| 180 | } |
| 181 | code_types += '</optgroup>'; |
| 182 | } |
| 183 | |
| 184 | jQuery('#code_manager_taskbar_tabmode') |
| 185 | .append( |
| 186 | '<a id="tab-' + tabs + '" href="javascript:void(0)" class="nav-tab nav-tab-active" onclick="tab_clicked(' + tabs + ')" data-code-manager-tab="' + tabs + '">' + |
| 187 | '<span id="tab-' + tabs + '-label" contenteditable="true" class="code_manager_tab_label cm_tooltip" data-code-manager-tab="' + tabs + '" title="Double click to change code name">' + tab_label + '</span>' + |
| 188 | '<span id="tab-' + tabs + '-icon" class="dashicons dashicons-dismiss icon_close" onclick="tab_close(this,event,' + tabs + ')"></span>' + |
| 189 | '</a>' |
| 190 | ); |
| 191 | |
| 192 | var editorSettings = cm_settings; |
| 193 | if (code_type.includes('html')) { |
| 194 | // Load HTML settings |
| 195 | editorSettings = wp.codeEditor.defaultSettings ? _.clone( wp.codeEditor.defaultSettings ) : {}; |
| 196 | editorSettings.codemirror = _.extend( |
| 197 | {}, |
| 198 | editorSettings.codemirror, |
| 199 | { |
| 200 | mode: 'html', |
| 201 | } |
| 202 | ); |
| 203 | } else if (code_type.includes('css')) { |
| 204 | // Load CSS settings |
| 205 | editorSettings = wp.codeEditor.defaultSettings ? _.clone( wp.codeEditor.defaultSettings ) : {}; |
| 206 | editorSettings.codemirror = _.extend( |
| 207 | {}, |
| 208 | editorSettings.codemirror, |
| 209 | { |
| 210 | mode: 'css', |
| 211 | } |
| 212 | ); |
| 213 | } if (code_type.includes('javascript')) { |
| 214 | // Load JavaScript settings |
| 215 | editorSettings = wp.codeEditor.defaultSettings ? _.clone( wp.codeEditor.defaultSettings ) : {}; |
| 216 | editorSettings.codemirror = _.extend( |
| 217 | {}, |
| 218 | editorSettings.codemirror, |
| 219 | { |
| 220 | mode: 'javascript', |
| 221 | } |
| 222 | ); |
| 223 | } else { |
| 224 | // Load PHP settings (default = cm_settings) |
| 225 | if (code==='') { |
| 226 | code = PHP_DEFAULT; |
| 227 | } |
| 228 | } |
| 229 | |
| 230 | code_id_displayed = code_id==-1 ? 'new' : code_id; |
| 231 | code_is_enabled = code_enabled==0 ? '' : 'checked'; |
| 232 | code_preview_enabled = preview_enabled=='false' ? '' : 'checked'; |
| 233 | |
| 234 | if (code_type.includes('file')) { |
| 235 | element_code_enabled = |
| 236 | '<select id="tab-' + tabs + '-cb-enable" ' + code_is_enabled + ' onchange="return tab_icon_enable(' + tabs + ')" title="Enable code" class="cm_tooltip" style="margin-right:15px">' + |
| 237 | '<option value="0">Disabled</option>' + |
| 238 | '<option value="1">Admin enabled</option>' + |
| 239 | '<option value="2">Public enabled</option>' + |
| 240 | '<option value="3">Both enabled</option>' + |
| 241 | '</select>'; |
| 242 | } else { |
| 243 | element_code_enabled = |
| 244 | '<label class="cm_tooltip" style="padding-right:15px" title="Enable code">' + |
| 245 | '<input type="checkbox" id="tab-' + tabs + '-cb-enable" ' + code_is_enabled + ' onclick="return tab_icon_enable(' + tabs + ')" />' + |
| 246 | 'Enable' + |
| 247 | '</label>'; |
| 248 | } |
| 249 | |
| 250 | jQuery('#code_manager_workspace_tabmode') |
| 251 | .append( |
| 252 | '<div id="tab-' + tabs + '-div" class="nav-tab-content">' + |
| 253 | '<div id="tab-' + tabs + '-taskbar" class="tab_task_bar">' + |
| 254 | '<a href="javascript:void(0)" class="button non-active cm_tooltip" id="tab-' + tabs + '-icon-save" disabled="true" onclick="tab_icon_save(' + tabs + ')" title="Save code">' + |
| 255 | '<span class="dashicons dashicons-yes-alt" style="padding-top: 4px;"></span>' + |
| 256 | '</a>' + |
| 257 | ' ' + |
| 258 | '<select id="tab-' + tabs + '-code_type" class="cm_tooltip" title="Select code type">' + |
| 259 | code_types + |
| 260 | '</select>' + |
| 261 | ' ' + |
| 262 | '<span>ID: ' + |
| 263 | '<span id="tab-' + tabs + '-code_id" style="font-weight: bold">' + code_id_displayed + '</span>' + |
| 264 | '</span>' + |
| 265 | '<span id="tab-' + tabs + '-shortcode_link" style="padding-left:10px"></span>' + |
| 266 | '<span style="float:right;line-height:2">' + |
| 267 | element_code_enabled + |
| 268 | '<label class="cm_tooltip" style="padding-right:5px" title="Enable preview mode for this code"><input type="checkbox" class="cm-cb-preview" id="tab-' + tabs + '-cb-preview"' + code_preview_enabled + ' onclick="return tab_icon_preview(' + tabs + ')" />Preview</label>' + |
| 269 | '<label class="material-icons cm_tooltip" title="Refresh tab" onclick="return tab_refresh(' + tabs + ')">refresh</label>' + |
| 270 | '</span>' + |
| 271 | '</div>' + |
| 272 | '<div id="tab-' + tabs + '-code" class="tab_code" data-code-manager-tab="' + tabs + '">' + |
| 273 | '<textarea id="tab-' + tabs + '-content">' + |
| 274 | code.replace(/&(?!amp;)/g, '&')+ |
| 275 | '</textarea>' + |
| 276 | '</div>' + |
| 277 | '</div>' |
| 278 | ); |
| 279 | |
| 280 | var tab_editor = wp.codeEditor.initialize(jQuery('#tab-' + tabs + '-content'), editorSettings); |
| 281 | |
| 282 | tab_editor.codemirror.focus(); |
| 283 | tab_editor.codemirror.setCursor(1); |
| 284 | tab_editor.codemirror.setOption('tabindex', tabs); |
| 285 | |
| 286 | var editor = { |
| 287 | tab_index: tabs, |
| 288 | tab_code_index: code_id, |
| 289 | tab_label: tab_label, |
| 290 | tab_editor: tab_editor |
| 291 | }; |
| 292 | cm_editors[tabs] = editor; |
| 293 | user_has_edited[tabs] = false; |
| 294 | |
| 295 | tab_editor.codemirror.on('change', function(cm_editor){ |
| 296 | tab_changed(cm_editor.getOption('tabindex')); |
| 297 | }); |
| 298 | |
| 299 | // Enable tooltip |
| 300 | jQuery('.cm_tooltip').tooltip(); |
| 301 | |
| 302 | // Add shortcode link if applicable |
| 303 | set_copy_shortcode_link(tabs); |
| 304 | |
| 305 | jQuery('#tab-' + tabs + '-code_type').on('focus', function(event) { |
| 306 | jQuery(this).data({current_value:jQuery(this).val()}); |
| 307 | }); |
| 308 | |
| 309 | jQuery('#tab-' + tabs + '-code_type').on('change', {tab:tabs,cid:code_id}, function(event) { |
| 310 | if (event.data.cid===-1) { |
| 311 | if (jQuery('#tab-' + event.data.tab + '-code_type option:selected').text().toLowerCase().includes('php')) { |
| 312 | // Add php tags |
| 313 | if (cm_editors[event.data.tab].tab_editor.codemirror.getValue()==='') { |
| 314 | cm_editors[event.data.tab].tab_editor.codemirror.setValue(PHP_DEFAULT); |
| 315 | } |
| 316 | } else { |
| 317 | // Remove php tags (clear field) |
| 318 | if (cm_editors[event.data.tab].tab_editor.codemirror.getValue()===PHP_DEFAULT) { |
| 319 | cm_editors[event.data.tab].tab_editor.codemirror.setValue(''); |
| 320 | } |
| 321 | } |
| 322 | |
| 323 | tab_changed(event.data.tab); |
| 324 | return; |
| 325 | } |
| 326 | |
| 327 | html = '<div>Are you sure you want to change the code type? Due to possible errors, this code will be disabled!</div>'; |
| 328 | var dialog = |
| 329 | jQuery(html) |
| 330 | .data('current_element',jQuery(this)) |
| 331 | .data('current_value',jQuery.data(this, 'current_value')) |
| 332 | .data('current_tab',event.data.tab) |
| 333 | .dialog({ |
| 334 | dialogClass: 'no-close', |
| 335 | title: 'Change code type?', |
| 336 | buttons: { |
| 337 | 'Yes': function() { |
| 338 | tab_changed(jQuery.data(this, 'current_tab')); |
| 339 | jQuery("#tab-" + tab + "-cb-enable").prop("checked", false); |
| 340 | set_copy_shortcode_link(tab); |
| 341 | dialog.dialog('destroy'); |
| 342 | }, |
| 343 | 'No': function() { |
| 344 | jQuery(jQuery.data(this, 'current_element')).val(jQuery.data(this, 'current_value')); |
| 345 | dialog.dialog('destroy'); |
| 346 | }, |
| 347 | 'Cancel': function() { |
| 348 | jQuery(jQuery.data(this, 'current_element')).val(jQuery.data(this, 'current_value')); |
| 349 | dialog.dialog('destroy'); |
| 350 | } |
| 351 | } |
| 352 | }); |
| 353 | }); |
| 354 | |
| 355 | jQuery('#tab-' + tabs + '-label').on('input', {tab:tabs}, function(event) { |
| 356 | tab_changed(event.data.tab); |
| 357 | }); |
| 358 | |
| 359 | jQuery('#tab-' + tabs + '-label').on('dblclick', function() { |
| 360 | var cell = this; |
| 361 | var range, selection; |
| 362 | if (document.body.createTextRange) { |
| 363 | range = document.body.createTextRange(); |
| 364 | range.moveToElementText(cell); |
| 365 | range.select(); |
| 366 | } else if (window.getSelection) { |
| 367 | selection = window.getSelection(); |
| 368 | range = document.createRange(); |
| 369 | range.selectNodeContents(cell); |
| 370 | selection.removeAllRanges(); |
| 371 | selection.addRange(range); |
| 372 | } |
| 373 | }); |
| 374 | |
| 375 | tabs++; |
| 376 | } |
| 377 | |
| 378 | function tab_changed(tabindex) { |
| 379 | user_has_edited[tabindex] = true; |
| 380 | jQuery('#tab-' + tabindex + '-icon').addClass('tab_unsaved_changes'); |
| 381 | jQuery('#tab-' + tabindex + '-icon-save').removeClass('non-active').attr('disabled', false); |
| 382 | } |
| 383 | |
| 384 | function activate_code_on_server(tab, val, txt) { |
| 385 | jQuery.ajax({ |
| 386 | type: 'POST', |
| 387 | url: pathname + '?action=code_manager_activate_code', |
| 388 | data: { |
| 389 | code_id: cm_editors[tab].tab_code_index, |
| 390 | code_item_value: val, |
| 391 | wpnonce: wpnonce, |
| 392 | page: 'code_manager_post' |
| 393 | } |
| 394 | }).done( |
| 395 | function (msg) { |
| 396 | if ( msg.substr(0, 3) === 'UPD' ) { |
| 397 | jQuery.notify(txt, 'success'); |
| 398 | } else { |
| 399 | jQuery.notify('Settings not saved', 'error'); |
| 400 | } |
| 401 | } |
| 402 | ).fail( |
| 403 | function () { |
| 404 | jQuery.notify('The request could not be handled', 'error'); |
| 405 | } |
| 406 | ); |
| 407 | |
| 408 | } |
| 409 | |
| 410 | function tab_refresh(tab) { |
| 411 | if (cm_editors[tab].tab_code_index===-1) { |
| 412 | jQuery.notify('Code needs to be saved first', 'error'); |
| 413 | } else { |
| 414 | jQuery.ajax({ |
| 415 | method: 'POST', |
| 416 | url: pathname + '?action=code_manager_get_code', |
| 417 | data: { |
| 418 | wpnonce: wpnonce_get_code, |
| 419 | code_id: cm_editors[tab].tab_code_index, |
| 420 | page: 'code_manager_post', |
| 421 | wpda_action: 'all' |
| 422 | } |
| 423 | }).done( |
| 424 | function(data) { |
| 425 | json = jQuery.parseJSON(data); |
| 426 | |
| 427 | cm_editors[tab].tab_label = json.code_name; |
| 428 | |
| 429 | cm = cm_editors[tab].tab_editor.codemirror; |
| 430 | cm.setValue(json.code); |
| 431 | cm.save(); |
| 432 | |
| 433 | jQuery("#tab-" + tab + "-label").text(json.code_name); |
| 434 | jQuery("#tab-" + tab + "-code_type").val(json.code_type); |
| 435 | jQuery("#tab-" + tab + "-cb-enable").prop("checked", json.code_enabled==="1"); |
| 436 | |
| 437 | mark_tab_as_unchanged(cm); |
| 438 | |
| 439 | set_copy_shortcode_link(tab); |
| 440 | |
| 441 | jQuery.notify('Refresh completed', 'success'); |
| 442 | } |
| 443 | ); |
| 444 | jQuery.ajax({ |
| 445 | method: 'POST', |
| 446 | url: pathname + '?action=code_manager_is_code_preview_enabled', |
| 447 | data: { |
| 448 | wpnonce: wpnonce_get_code, |
| 449 | code_id: cm_editors[tab].tab_code_index, |
| 450 | page: 'code_manager_post', |
| 451 | } |
| 452 | }).done( |
| 453 | function(data) { |
| 454 | jQuery("#tab-" + tab + "-cb-preview").prop("checked", data==="true"); |
| 455 | } |
| 456 | ); |
| 457 | } |
| 458 | } |
| 459 | |
| 460 | function activate_preview_on_server(tab) { |
| 461 | jQuery.ajax({ |
| 462 | method: 'POST', |
| 463 | url: pathname + '?action=code_manager_activate_code_preview', |
| 464 | data: { |
| 465 | wpnonce: wpnonce, |
| 466 | code_id: cm_editors[tab].tab_code_index, |
| 467 | page: 'code_manager_post' |
| 468 | } |
| 469 | }).done( |
| 470 | function(msg) { |
| 471 | if (msg==='OK') { |
| 472 | jQuery.notify('Preview activated', 'success'); |
| 473 | } else { |
| 474 | jQuery.notify(msg, 'error'); |
| 475 | } |
| 476 | } |
| 477 | ); |
| 478 | } |
| 479 | |
| 480 | function tab_open() { |
| 481 | get_code_list(tab_open_callback); |
| 482 | } |
| 483 | |
| 484 | function tab_open_callback() { |
| 485 | var dialog = jQuery(jQuery('#code_manager_open_frame')).dialog({ |
| 486 | dialogClass: 'no-close', |
| 487 | width: "inherit", |
| 488 | resizable: false, |
| 489 | title: 'Select code from list', |
| 490 | buttons: { |
| 491 | 'Open': function() { |
| 492 | var code_list = jQuery('#code_manager_code_list').val(); |
| 493 | if (code_list.length===0) { |
| 494 | alert("Nothing selected!") |
| 495 | } else { |
| 496 | if (code_list[0]==='Loading data...') { |
| 497 | alert("Nothing selected!") |
| 498 | } else { |
| 499 | for (var i=0; i<code_list.length; i++) { |
| 500 | get_code( |
| 501 | code_list[i], |
| 502 | jQuery('#code_manager_code_list option[value=' + code_list[i] + ']').attr('data-name'), |
| 503 | jQuery('#code_manager_code_list option[value=' + code_list[i] + ']').attr('data-type'), |
| 504 | jQuery('#code_manager_code_list option[value=' + code_list[i] + ']').attr('data-enabled'), |
| 505 | jQuery('#code_manager_code_list option[value=' + code_list[i] + ']').attr('data-preview') |
| 506 | ); |
| 507 | } |
| 508 | dialog.dialog('close'); |
| 509 | } |
| 510 | } |
| 511 | }, |
| 512 | 'Cancel': function() { |
| 513 | dialog.dialog('close'); |
| 514 | } |
| 515 | } |
| 516 | }); |
| 517 | jQuery("#code_manager_code_list").unbind("dblclick"); |
| 518 | jQuery("#code_manager_code_list").on("dblclick", function() { |
| 519 | tab = jQuery(this).val()[0]; |
| 520 | get_code( |
| 521 | tab, |
| 522 | jQuery('#code_manager_code_list option[value=' + tab + ']').attr('data-name'), |
| 523 | jQuery('#code_manager_code_list option[value=' + tab + ']').attr('data-type'), |
| 524 | jQuery('#code_manager_code_list option[value=' + tab + ']').attr('data-enabled'), |
| 525 | jQuery('#code_manager_code_list option[value=' + tab + ']').attr('data-preview') |
| 526 | ); |
| 527 | dialog.dialog('close'); |
| 528 | }); |
| 529 | } |
| 530 | |
| 531 | function tab_close(elem, event, tab) { |
| 532 | if (user_has_edited[tab]===true) { |
| 533 | html = '<div>Your changes will not be saved!</div>'; |
| 534 | var dialog = jQuery(html).dialog({ |
| 535 | dialogClass: 'no-close', |
| 536 | title: 'Close tab?', |
| 537 | buttons: { |
| 538 | 'Yes': function() { |
| 539 | close_tab(elem, tab); |
| 540 | dialog.dialog('destroy'); |
| 541 | }, |
| 542 | 'No': function() { |
| 543 | dialog.dialog('destroy'); |
| 544 | }, |
| 545 | 'Cancel': function() { |
| 546 | dialog.dialog('destroy'); |
| 547 | } |
| 548 | } |
| 549 | }); |
| 550 | } else { |
| 551 | close_tab(elem, tab); |
| 552 | } |
| 553 | event.stopPropagation(); |
| 554 | } |
| 555 | function close_tab(elem, tab) { |
| 556 | jQuery(elem).parent().remove(); |
| 557 | jQuery('#tab-' + tab + '-div').remove(); |
| 558 | |
| 559 | cm = cm_editors[tab].tab_editor.codemirror; |
| 560 | cm.setOption('mode', 'text/x-csrc'); |
| 561 | cm.getWrapperElement().parentNode.removeChild(cm.getWrapperElement()); |
| 562 | cm=null; |
| 563 | delete cm_editors[tab]; |
| 564 | delete user_has_edited[tab]; |
| 565 | |
| 566 | if (!jQuery('.nav-tab-active').length) { |
| 567 | index_selected = -1; |
| 568 | |
| 569 | for (editor in cm_editors) { |
| 570 | tab_index = cm_editors[editor].tab_editor.codemirror.getOption('tabindex'); |
| 571 | if (index_selected>tab) { |
| 572 | break; |
| 573 | } |
| 574 | index_selected = tab_index; |
| 575 | } |
| 576 | |
| 577 | if (index_selected>-1) { |
| 578 | tab_activate(index_selected); |
| 579 | } |
| 580 | } |
| 581 | } |
| 582 | |
| 583 | function tab_activate(tab) { |
| 584 | jQuery('#tab-' + tab).addClass('nav-tab-active'); |
| 585 | jQuery('#tab-' + tab + '-div').show(); |
| 586 | } |
| 587 | |
| 588 | function tab_load(code_id, tab_label, code_type, code, code_enabled, preview_enabled) { |
| 589 | tab_new(tab_label, code_id, code_type, code, code_enabled, preview_enabled); |
| 590 | } |
| 591 | |
| 592 | function tab_clicked(tab) { |
| 593 | source_id = jQuery('.nav-tab-active').attr('data-code-manager-tab'); |
| 594 | if (source_id===tab) { |
| 595 | return; |
| 596 | } |
| 597 | |
| 598 | jQuery('.nav-tab-active').removeClass('nav-tab-active'); |
| 599 | jQuery('.nav-tab-content').hide(); |
| 600 | jQuery('#tab-' + tab).addClass('nav-tab-active'); |
| 601 | jQuery('#tab-' + tab + '-div').show(); |
| 602 | } |
| 603 | |
| 604 | function tab_icon_save(tab) { |
| 605 | tab_label = jQuery('#tab-' + tab + '-label').text(); |
| 606 | old_label = cm_editors[tab].tab_label; |
| 607 | if (old_label!==tab_label) { |
| 608 | code_name_exists(tab_label, old_label, tab) |
| 609 | } else { |
| 610 | save_code(tab); |
| 611 | } |
| 612 | } |
| 613 | |
| 614 | function code_name_exists(code_name, old_label, tab) { |
| 615 | jQuery.ajax({ |
| 616 | method: 'POST', |
| 617 | url: pathname + '?action=code_manager_code_name_exists', |
| 618 | data: { |
| 619 | wpnonce: wpnonce_get_code, |
| 620 | code_name: code_name, |
| 621 | page: 'code_manager_post' |
| 622 | } |
| 623 | }).done( |
| 624 | function(msg) { |
| 625 | if (msg!=='OK') { |
| 626 | jQuery.notify('Name already exists', 'error'); |
| 627 | jQuery('#tab-' + tab + '-label').text(old_label); |
| 628 | } else { |
| 629 | save_code(tab); |
| 630 | } |
| 631 | } |
| 632 | ); |
| 633 | } |
| 634 | |
| 635 | function save_code(tab, successmsg = 'Code saved') { |
| 636 | if (user_has_edited[tab]===false) { |
| 637 | return; |
| 638 | } |
| 639 | |
| 640 | cm = cm_editors[tab].tab_editor.codemirror; |
| 641 | cm.save(); |
| 642 | |
| 643 | jQuery.ajax({ |
| 644 | method: 'POST', |
| 645 | url: pathname + '?action=code_manager_update_code', |
| 646 | data: { |
| 647 | wpnonce: wpnonce, |
| 648 | code_id: cm_editors[tab].tab_code_index, |
| 649 | code_name: jQuery('#tab-' + tab + '-label').text(), |
| 650 | code_type: jQuery('#tab-' + tab + '-code_type').val(), |
| 651 | code: jQuery('#tab-' + tab + '-content').val(), |
| 652 | page: 'code_manager_post' |
| 653 | } |
| 654 | }).done( |
| 655 | function(msg) { |
| 656 | if ( msg.substr(0, 3) === 'UPD' ) { |
| 657 | jQuery.notify(successmsg, 'success'); |
| 658 | mark_tab_as_unchanged(cm); |
| 659 | set_copy_shortcode_link(tab); |
| 660 | } else if ( msg.substr(0, 3) === 'INS' ) { |
| 661 | code_id = msg.substr(4); |
| 662 | cm_editors[tab].tab_code_index = code_id; |
| 663 | jQuery('#tab-' + tab + '-code_id').html(code_id); |
| 664 | set_copy_shortcode_link(tab); |
| 665 | jQuery.notify(successmsg, 'success'); |
| 666 | mark_tab_as_unchanged(cm); |
| 667 | } else { |
| 668 | if (msg.length>50) { |
| 669 | errormsg = 'ERROR : ' + msg.substr(0,50) + '...'; |
| 670 | } else { |
| 671 | errormsg = msg; |
| 672 | } |
| 673 | jQuery.notify(errormsg, 'error'); |
| 674 | } |
| 675 | } |
| 676 | ); |
| 677 | } |
| 678 | |
| 679 | function mark_tab_as_unchanged(cm_editor) { |
| 680 | tabindex = cm_editor.getOption('tabindex'); |
| 681 | user_has_edited[tabindex] = false; |
| 682 | jQuery('#tab-' + tabindex + '-icon').removeClass('tab_unsaved_changes'); |
| 683 | jQuery('#tab-' + tabindex + '-icon-save').addClass('non-active').attr('disabled', true); |
| 684 | } |
| 685 | |
| 686 | function tab_icon_enable(tab) { |
| 687 | if (cm_editors[tab].tab_code_index===-1) { |
| 688 | jQuery.notify('Your code must be saved before it can be enabled', 'info'); |
| 689 | return false; |
| 690 | } |
| 691 | |
| 692 | if (jQuery('#tab-' + tab + '-cb-enable').attr('type')==='checkbox') { |
| 693 | if (jQuery('#tab-' + tab + '-cb-enable').is(':checked')) { |
| 694 | val = '1'; |
| 695 | txt = 'Code enabled'; |
| 696 | } else { |
| 697 | val = '0'; |
| 698 | txt = 'Code disabled'; |
| 699 | } |
| 700 | } else { |
| 701 | val = jQuery('#tab-' + tab + '-cb-enable').val(); |
| 702 | txt = 'Code ' + jQuery('#tab-' + tab + '-cb-enable :selected').text().toLowerCase(); |
| 703 | } |
| 704 | |
| 705 | activate_code_on_server(tab, val, txt); |
| 706 | |
| 707 | return true; |
| 708 | } |
| 709 | |
| 710 | function tab_icon_preview(tab) { |
| 711 | if (cm_editors[tab].tab_code_index===-1) { |
| 712 | jQuery.notify('Your code must be saved before it can be previewed', 'info'); |
| 713 | return false; |
| 714 | } |
| 715 | |
| 716 | if (jQuery('#tab-' + tab + '-cb-preview').is(':checked')) { |
| 717 | // Activate preview |
| 718 | activate_preview_on_server(tab); |
| 719 | } else { |
| 720 | // Deactivate preview |
| 721 | tab_icon_deactivate(tab); |
| 722 | } |
| 723 | |
| 724 | return true; |
| 725 | } |
| 726 | |
| 727 | function tab_icon_deactivate(tab) { |
| 728 | jQuery.ajax({ |
| 729 | method: 'POST', |
| 730 | url: pathname + '?action=code_manager_deactivate_code_preview', |
| 731 | data: { |
| 732 | wpnonce: wpnonce, |
| 733 | code_id: cm_editors[tab].tab_code_index, |
| 734 | page: 'code_manager_post' |
| 735 | } |
| 736 | }).done( |
| 737 | function(msg) { |
| 738 | if ( msg === 'OK' ) { |
| 739 | jQuery.notify('Preview deactivated', 'success'); |
| 740 | } else { |
| 741 | jQuery.notify(msg, 'error'); |
| 742 | } |
| 743 | } |
| 744 | ); |
| 745 | } |
| 746 | |
| 747 | function unsaved_changes() { |
| 748 | has_edited = false; |
| 749 | |
| 750 | for (var tabindex in user_has_edited) { |
| 751 | if (user_has_edited[tabindex]===true) { |
| 752 | has_edited = true; |
| 753 | } |
| 754 | } |
| 755 | |
| 756 | return has_edited; |
| 757 | } |
| 758 | |
| 759 | function reset_preview() { |
| 760 | jQuery.ajax({ |
| 761 | type: 'POST', |
| 762 | url: pathname + '?action=code_manager_reset_preview', |
| 763 | data: { |
| 764 | wpnonce: wpnonce, |
| 765 | page: 'code_manager_post' |
| 766 | } |
| 767 | }).done( |
| 768 | function (msg) { |
| 769 | if ( msg === 'OK' ) { |
| 770 | jQuery.notify(msg, 'success'); |
| 771 | jQuery('.cm-cb-preview').prop('checked', false); |
| 772 | } else { |
| 773 | jQuery.notify(msg, 'info'); |
| 774 | } |
| 775 | } |
| 776 | ).fail( |
| 777 | function () { |
| 778 | jQuery.notify(msg, 'error'); |
| 779 | } |
| 780 | ); |
| 781 | } |
| 782 | |
| 783 | jQuery(function() { |
| 784 | tab_new('New'); |
| 785 | new_label_index++; |
| 786 | |
| 787 | jQuery('#code_manager_new').on('click', function(e) { |
| 788 | tab_new('New_' + (new_label_index++), -1); |
| 789 | }); |
| 790 | |
| 791 | jQuery('#code_manager_open').on('click', function(e) { |
| 792 | tab_open(); |
| 793 | }); |
| 794 | |
| 795 | jQuery('#code_manager_cancel_file').on('click', function() { |
| 796 | jQuery('#code_manager_open_frame').hide(); |
| 797 | }); |
| 798 | |
| 799 | jQuery('#code_manager_taskbar_tabmode').sortable(); |
| 800 | |
| 801 | jQuery(window).on('keydown', function(event) { |
| 802 | if ((event.ctrlKey || event.metaKey) && String.fromCharCode(event.which).toLowerCase()==='s') { |
| 803 | if ( |
| 804 | jQuery(event.target).hasClass('CodeMirror-code') || |
| 805 | jQuery(event.target).hasClass('code_manager_tab_label') |
| 806 | ) { |
| 807 | if (jQuery(event.target).hasClass('CodeMirror-code')) { |
| 808 | tab_code = jQuery(event.target).closest('.tab_code'); |
| 809 | tab = tab_code.attr('data-code-manager-tab'); |
| 810 | } else { |
| 811 | tab = jQuery(event.target).attr('data-code-manager-tab'); |
| 812 | } |
| 813 | if (typeof tab !== typeof undefined && tab !== false) { |
| 814 | save_code(tab); |
| 815 | event.preventDefault(); |
| 816 | } |
| 817 | } |
| 818 | } else if ( |
| 819 | (event.ctrlKey || event.metaKey) && |
| 820 | String.fromCharCode(event.which).toLowerCase()==='v' && |
| 821 | jQuery(event.target).hasClass('code_manager_tab_label') |
| 822 | ) { |
| 823 | event.preventDefault(); // Prevent ctrl-v on tab label |
| 824 | } |
| 825 | }); |
| 826 | |
| 827 | jQuery('.cm_menu_title').tooltip(); |
| 828 | jQuery('#disable_preview').tooltip(); |
| 829 | jQuery('#disable_preview').on('click', function() { |
| 830 | html = "<div>This turns of preview mode for all code IDs for all users. Do you want to continue?</div>"; |
| 831 | var dialog = jQuery(html).dialog({ |
| 832 | dialogClass: 'no-close', |
| 833 | title: 'Reset preview', |
| 834 | buttons: { |
| 835 | 'Yes': function() { |
| 836 | dialog.dialog('destroy'); |
| 837 | reset_preview(); |
| 838 | }, |
| 839 | 'No': function() { |
| 840 | dialog.dialog('destroy'); |
| 841 | }, |
| 842 | 'Cancel': function() { |
| 843 | dialog.dialog('destroy'); |
| 844 | } |
| 845 | } |
| 846 | }); |
| 847 | }); |
| 848 | |
| 849 | jQuery(window).on('beforeunload', function() { |
| 850 | if ( unsaved_changes() ) { |
| 851 | return 'Your changes will not be saved! Are you sure you want to leave this page?'; |
| 852 | } |
| 853 | }); |
| 854 | }); |
| 855 |