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