WordPress.org
Get WordPress

Plugin Directory

Changeset 1912838


Ignore:
Timestamp:
07/21/2018 06:10:37 PM (8 years ago)
Author:
rahburma
Message:

support for highlighting selected portion of code in public view

Location:
code-editor-and-compiler/trunk
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • code-editor-and-compiler/trunk/admin/js/editor-handler.js

    r1904276 r1912838  
    282282              cdbx_editor_js.clearSelection();
    283283               
     284              if (cdbx_linesHighlight) cdbx_appendHighlightedLines();   
     285              cdbx_editor.getSession().selection.on('changeSelection', function(e) {
     286                 var selectionRange = cdbx_editor.getSelectionRange();
     287                 var startLine = parseInt(selectionRange.start.row) + 1;
     288                 var endLine = parseInt(selectionRange.end.row) + 1;
     289                 //var content = cdbx_editor.session.getTextRange(selectionRange);
     290                 //console.log(startLine + ',' + endLine);
     291                 $(CDBX_LINES_HIGHLIGHT_NOW).html(startLine + '-' + endLine);
     292                 $(CDBX_SELECT_LINES).css('display', 'inline'); 
     293              });
     294               
    284295              cdbx_setModeWeb();
    285296              cdbx_setTheme();
    … …  
    349360                          }
    350361                          initEditorDialog();
     362                          cdbx_linesHighlight = null;   
    351363                          $(CDBX_EDITOR_DIALOG).dialog(CDBX_EVENT_OPEN);
    352364                          pref_loaded = true;
    353                           cdbx_closeDummyDialog();   
     365                          cdbx_closeDummyDialog(); 
    354366                       }
    355367                    });
    … …  
    360372                    }
    361373                    initEditorDialog();
     374                    cdbx_linesHighlight = null;
    362375                    $(CDBX_EDITOR_DIALOG).dialog(CDBX_EVENT_OPEN);
    363376                }
    … …  
    447460            var lang_id = cdbx_curLangId.toString();
    448461            var file_name = $(CDBX_FILENAME).val();
    449             var prefix = '<pre id="' + pre_id + '"' + ' class="prettyprint" style="padding:10px;border:1px solid rgba(231, 231, 230, 1);border-radius:10px;background-color:#FFFFFF;font-size:13px;">';
     462            var highlight = cdbx_linesHighlight ? cdbx_linesHighlight : '';
     463           
     464            var prefix = '<pre id="' + pre_id + '"' + 'data-highlight="' + highlight + '"' + ' class="prettyprint" style="padding:10px;border:1px solid rgba(231, 231, 230, 1);border-radius:10px;background-color:#FFFFFF;font-size:13px;">';
    450465           
    451466            var suffix = '';
    … …  
    455470                         'style="background-color:#FFFFFF;margin-bottom:0;color:#008B8B;border: 1px solid rgba(231, 231, 230, 1); border-radius: 10px;font-size:13px;height:30px;min-width:60px;max-width:150px;padding:4px;font-weight:normal;outline:none;display:none;"' +
    456471                         'type="" value="Run" data-code="' + pre_id + '"' +
     472                         'data-highlight="' + highlight + '"' +
    457473                         'data-lang="' + lang_id + '"' + 'data-filename="' + file_name + '" /><br></pre><br>';
    458474            } else {
    … …  
    461477                         'style="background-color:#FFFFFF;margin-bottom:0;color:#008B8B;border: 1px solid rgba(231, 231, 230, 1); border-radius: 10px;font-size:13px;height:30px;min-width:60px;max-width:150px;padding:4px;font-weight:normal;outline:none;display:none;"' +
    462478                         'type="button" value="Run" data-code="' + pre_id + '"' +
     479                         'data-highlight="' + highlight + '"' +
    463480                         'data-lang="' + lang_id + '"' + 'data-filename="' + file_name + '" /><br></pre><br>';   
    464481            }
    … …  
    526543            var html_suffix = '<input id="' + input_id + '"' +
    527544                         'class="cdbx-try-code-web cdbx-btn-main"' +
    528                          'style="background-color:#FFFFFF;margin-bottom:0;color:#008B8B;border: 1px solid rgba(231, 231, 230, 1); border-radius: 10px;font-size:13px;height:30px;min-width:110px;max-width:220px;padding:4px;font-weight:normal;outline:none;"' +
     545                         'style="background-color:#FFFFFF;margin-bottom:0;color:#008B8B;border: 1px solid rgba(231, 231, 230, 1); border-radius: 10px;font-size:13px;height:30px;min-width:110px;max-width:220px;padding:4px;font-weight:normal;outline:none;display:none;"' +
    529546                         'type="button" value="Run HTML" data-code="' + pre_id + '"' +
    530547                         '" /></pre>';
    … …  
    533550                         'class="cdbx-try-code-web cdbx-btn-main"' +
    534551                         'type="button" value="Run CSS" data-code="' + pre_id + '"' +
    535                          'style="background-color:#FFFFFF;margin-bottom:0;color:#008B8B;border: 1px solid rgba(231, 231, 230, 1); border-radius: 10px;font-size:13px;height:30px;min-width:110px;max-width:220px;padding:4px;font-weight:normal;outline:none;"' +
     552                         'style="background-color:#FFFFFF;margin-bottom:0;color:#008B8B;border: 1px solid rgba(231, 231, 230, 1); border-radius: 10px;font-size:13px;height:30px;min-width:110px;max-width:220px;padding:4px;font-weight:normal;outline:none;display:none"' +
    536553                         '" /></pre>';
    537554           
    … …  
    539556                         'class="cdbx-try-code-web cdbx-btn-main"' +
    540557                         'type="button" value="Run Javascript" data-code="' + pre_id + '"' +
    541                          'style="background-color:#FFFFFF;margin-bottom:0;color:#008B8B;border: 1px solid rgba(231, 231, 230, 1); border-radius: 10px;font-size:13px;height:30px;min-width:110px;max-width:220px;padding:4px;font-weight:normal;outline:none"' +
     558                         'style="background-color:#FFFFFF;margin-bottom:0;color:#008B8B;border: 1px solid rgba(231, 231, 230, 1); border-radius: 10px;font-size:13px;height:30px;min-width:110px;max-width:220px;padding:4px;font-weight:normal;outline:none;display:none;"' +
    542559                         '" /></pre>';
    543560
    … …  
    916933            $(CDBX_TABS_PLACEHOLDER).css('display', 'none');
    917934        });
     935       
     936        $(CDBX_CODE_LINES_HIGHLIGHT).live(CDBX_EVENT_CLICK, function (e) {
     937            e.preventDefault();
     938            if ($(CDBX_CODE_LINES_HIGHLIGHT_AREA).css('display') == 'block') {
     939                $(CDBX_CODE_LINES_HIGHLIGHT_AREA).css('display', 'none');
     940            } else {
     941                $(CDBX_CODE_LINES_HIGHLIGHT_AREA).css('display', 'block');
     942            }
     943        });
     944       
     945        $(CDBX_SELECT_LINES).live(CDBX_EVENT_CLICK, function (e) {
     946            var selectedLines = $(CDBX_LINES_HIGHLIGHT_NOW).text();
     947            if (cdbx_linesHighlight) {
     948                if (!cdbx_detectDuplicateOverlapHighlight(selectedLines)) {
     949                    cdbx_linesHighlight += ',' + selectedLines;
     950                }
     951            } else {
     952                cdbx_linesHighlight = selectedLines;
     953            }
     954           
     955            cdbx_appendHighlightedLines();
     956            cdbx_editor.clearSelection();
     957        });
     958       
     959        $(CDBX_REMOVE_HIGHLIGHT_LINES).live(CDBX_EVENT_CLICK, function (e) {
     960            var idx = parseInt($(this).attr('id').split('@')[1]);
     961            var linesGroup = cdbx_linesHighlight.split(',');
     962            linesGroup.splice(idx, 1);
     963            var linestr = '';
     964            for (var i = 0; i < linesGroup.length; i++) {
     965                linestr += linesGroup[i];
     966                if (i != linesGroup.length - 1) {
     967                    linestr += ',';
     968                }
     969            }
     970            cdbx_linesHighlight = linestr;
     971            cdbx_appendHighlightedLines();
     972        });
     973       
     974        var cdbx_appendHighlightedLines = function () {
     975            $(CDBX_LINES_HIGHLIGHTED_HIDDEN).html(cdbx_linesHighlight);
     976            if (!cdbx_linesHighlight  || cdbx_linesHighlight.length == 0) {
     977                $(CDBX_LINES_HIGHLIGHTED).html(cdbx_linesHighlight);
     978                return;
     979            }
     980            var linesGroup = cdbx_linesHighlight.split(',');
     981            var currentHighlights = '';
     982            for (var i = 0; i < linesGroup.length; i++) {
     983                currentHighlights +=
     984                    '<span> \
     985                        <a id="cdbx_remove_highlight@' + i + '" class="cdbx-remove-highlight-lines" style="cursor:pointer;" title="Remove highlight"> \
     986                            <span class="dashicons dashicons-no"></span> ' + '<span style="margin-top:0.5em">' + linesGroup[i] + '</span>' +
     987                        '</button> \
     988                    </span>';
     989                currentHighlights += '&nbsp;&nbsp;&nbsp;';
     990            }
     991            $(CDBX_LINES_HIGHLIGHTED).html(currentHighlights);
     992        };
     993       
     994        var cdbx_detectDuplicateOverlapHighlight = function (selectedLines) {
     995            var linesGroup = cdbx_linesHighlight.split(',');
     996            for (var i = 0; i < linesGroup.length; i++) {
     997                if (selectedLines == linesGroup[i]) {
     998                    alert('Duplicate highlight range !!!');
     999                    return true;
     1000                }
     1001            }
     1002            return false;
     1003        };
    9181004
    9191005        $(document).live(CDBX_EVENT_EDITOR_INIT, function( event, editor ) {
    … …  
    9331019                    cdbx_curLangId = run_btn_elem.dataset.lang;
    9341020                    cdbx_progName = run_btn_elem.dataset.filename;
     1021                    cdbx_linesHighlight = null;
     1022                    if (run_btn_elem.dataset.highlight && run_btn_elem.dataset.highlight.length > 0) {
     1023                       cdbx_linesHighlight = run_btn_elem.dataset.highlight;   
     1024                    }
    9351025                   
    9361026                    var postLoadSetup = function () {
    … …  
    12841374                     </button> \
    12851375                   </div> \
     1376                   <div> \
     1377                     <p><a id="cdbx-code-lines-highlight" style="cursor:pointer" title="Selected lines will be highlighted with different background color in public view"><u>Highlight lines</u></a></p> \
     1378                     <div id="cdbx-code-lines-highlight-area" style="display:none"> \
     1379                        <div id="cdbx-lines-highlighted-hidden" style="display:none"></div> \
     1380                        <div id="cdbx-lines-highlighted"></div> \
     1381                        <p style="font-size:0.8em;color:#008B8B">Select lines to be highlighted in the editor</p> \
     1382                        <span id="cdbx-lines-highlight-now"></span>&nbsp;&nbsp; \
     1383                        <span> \
     1384                           <button type="button" id="cdbx-select-lines" style="cursor:pointer;display:none;"> \
     1385                              <span class="dashicons dashicons-yes"></span> \
     1386                           </button> \
     1387                        </span> \
     1388                     </div> \
     1389                   </div> \
    12861390                   <div id="cdbx-div-output" style="width:98%"> \
    12871391                     Output Appears Here ... \

  • code-editor-and-compiler/trunk/common/js/include.js

    r1904276 r1912838  
    105105var CDBX_PREF_THEME  = '#cdbx-pref-theme';
    106106
     107var CDBX_CODE_LINES_HIGHLIGHT      = '#cdbx-code-lines-highlight';
     108var CDBX_CODE_LINES_HIGHLIGHT_AREA = '#cdbx-code-lines-highlight-area';
     109var CDBX_LINES_HIGHLIGHTED         = '#cdbx-lines-highlighted';
     110var CDBX_LINES_HIGHLIGHTED_HIDDEN  = '#cdbx-lines-highlighted-hidden';
     111var CDBX_LINES_HIGHLIGHT_NOW       = '#cdbx-lines-highlight-now';
     112var CDBX_SELECT_LINES              = '#cdbx-select-lines';
     113var CDBX_REMOVE_HIGHLIGHT_LINES    = '.cdbx-remove-highlight-lines';
     114
    107115var cdbx_languages = [
    108116    { id: 0,     name: 'C',           mode: 'ace/mode/c_cpp',      ext: '.c'     },
    … …  
    165173var cdbx_run_btn_status = 1;
    166174var cdbx_linenum_status = 1;
     175var cdbx_linesHighlight = null;
    167176var cdbx_curThemePrefId = CDBX_THEME_XCODE;
    168177var cdbx_curThemeId = CDBX_THEME_XCODE;

  • code-editor-and-compiler/trunk/public/js/editor-handler-public.js

    r1904276 r1912838  
    1414               return true;
    1515           }
    16            return false;   
     16           return false;
     17        };
     18       
     19        var cdbx_lineHighlight = function (cdbx_codeElem) {
     20            var elem = document.getElementById(cdbx_codeElem.id);
     21            if (cdbx_codeElem.getAttribute('class') != 'prettyprint') return;
     22            var highlightedLines = '';
     23            if (elem && elem.dataset && elem.dataset.highlight) {
     24                highlightedLines = elem.dataset.highlight;
     25            }
     26            if (highlightedLines.length == 0) return;
     27            var myCodeStr = cdbx_codeElem.innerHTML;
     28            var codeLineArray = myCodeStr.split('\n');
     29            var newCodeStr = '';
     30            var highlightArray = highlightedLines.split(',');
     31            for (var i = 0; i < highlightArray.length; i++) {
     32                var lineRange = highlightArray[i].split('-');
     33                var start = parseInt(lineRange[0]);
     34                var end = parseInt(lineRange[1]);
     35                for (var j = start - 1; j < end; j++) {
     36                    codeLineArray[j] = '<span style="background-color:rgba(240, 240, 240, 1);">' + codeLineArray[j] + '</span>';
     37                }
     38            }
     39            for (var i = 0; i < codeLineArray.length; i++) {
     40                newCodeStr += codeLineArray[i] + '\n';
     41            }
     42            cdbx_codeElem.innerHTML = newCodeStr;
    1743        };
    1844       
    … …  
    2046            var cdbx_preElems = document.getElementsByTagName("PRE");
    2147            for (var i = 0; i < cdbx_preElems.length; i++) {
     48                cdbx_lineHighlight(cdbx_preElems[i]);
    2249                if (cdbx_isCrayonHighlighterPresent(cdbx_preElems[i])) {
    2350                    cdbx_preElems[i].classList.add('prettyprint');
Note: See TracChangeset for help on using the changeset viewer.