PHPIndex

var PBSyntaxHighlighter = (function() {
  "use strict";

  var sh;

  /**
   * Constructor
   * @param {String} sh The SyntaxHighlighter
   */
  function PBSyntaxHighlighter(sh) {
    switch (sh) {
      case "HIGHLIGHT" :
        this.sh = HIGHLIGHT;
        break;
      case "PRETTIFY" :
        this.sh = PRETTIFY;
        break;
      case "PRISM" :
        this.sh = PRISM;
        break;
      case "SYNTAX_HIGHLIGHTER" :
        this.sh = SYNTAX_HIGHLIGHTER;
        break;
      default :
        this.sh = {
          _type: "DEFAULT",
          _cls: "",
          _tag: 'pre'
        };
        break;
    }
  }

  /**
   * Sets the SyntaxHighlighter type
   * @param {String} type The name of the SyntaxHighlighter
   */
  PBSyntaxHighlighter.prototype.setType = function(type) {
    this.sh._type = type;
  };

  /**
   * Gets the SyntaxHighlighter type
   * @return {String} The type of the SyntaxHighlighter
   */
  PBSyntaxHighlighter.prototype.getType = function() {
    return this.sh._type;
  };

  /**
   * Sets the full class of the SH object
   * @param {String} cls the class to add to the Object
   */
  PBSyntaxHighlighter.prototype.setCls = function(cls) {
    this.sh.cls = this.sh._cls + cls;
  };

  /**
   * Gets the full class of the SH Object
   * @return {String} the full class of the SH Object
   */
  PBSyntaxHighlighter.prototype.getCls = function() {
    return this.sh.cls;
  };

  /**
   * Get the tag to insert into the pre tag
   * @return {String} the tag to insert, pre otherwise
   */
  PBSyntaxHighlighter.prototype.getTag = function() {
    return this.sh._tag;
  };

  return PBSyntaxHighlighter;
})();

/**********************************/
/* SYNTAX HIGHLIGHTERS DEFINITION */
/**********************************/
var HIGHLIGHT = {
  _type: "HIGHLIGHT",
  _cls: "", // only show language (done in pbckcode.js)
  _tag: 'code'
};

var PRETTIFY = {
  _type: "PRETTIFY",
  _cls: "prettyprint linenums lang-",
  _tag: 'pre'
};

var PRISM = {
  _type: "PRISM",
  _cls: "language-",
  _tag: 'code'
};

var SYNTAX_HIGHLIGHTER = {
  _type: "SYNTAX_HIGHLIGHTER",
  _cls: "brush: ",
  _tag: 'pre'
};

CKEDITOR.dialog.add('pbckcodeDialog', function(editor) {
  var tab_sizes = ['1', '2', '4', '8'];

  // CKEditor variables
  var dialog;
  var shighlighter = new PBSyntaxHighlighter(editor.settings.highlighter);

  // ACE variables
  var aceEditor, aceSession, whitespace;

  // EDITOR panel
  var editorPanel = {
    id: 'editor',
    label: editor.lang.pbckcode.editor,
    elements: [
      {
        type: 'hbox',
        children: [
          {
            type: 'select',
            id: 'code-select',
            className: 'cke_pbckcode_form',
            label: editor.lang.pbckcode.mode,
            items: editor.settings.modes,
            'default': editor.settings.modes[0][1],
            setup: function(element) {
              if (element) {
                element = element.getAscendant('pre', true);
                this.setValue(element.getAttribute('data-pbcklang'));
              }
            },
            commit: function(element) {
              if (element) {
                element = element.getAscendant('pre', true);
                element.setAttribute('data-pbcklang', this.getValue());
              }
            },
            onChange: function() {
              aceSession.setMode('ace/mode/' + this.getValue());
            }
          },
          {
            type: 'select',
            id: 'code-tabsize-select',
            className: 'cke_pbckcode_form',
            label: editor.lang.pbckcode.tabSize,
            items: tab_sizes,
            'default': editor.settings.tab_size,
            setup: function(element) {
              if (element) {
                element = element.getAscendant('pre', true);
                this.setValue(element.getAttribute('data-pbcktabsize'));
              }
            },
            commit: function(element) {
              if (element) {
                element = element.getAscendant('pre', true);
                element.setAttribute('data-pbcktabsize', this.getValue());
              }
            },
            onChange: function(element) {
              if (element) {
                whitespace.convertIndentation(aceSession, ' ', this.getValue());
                aceSession.setTabSize(this.getValue());
              }
            }
          }
        ]
      },
      {
        type: 'html',
        html: '<div></div>',
        id: 'code-textarea',
        className: 'cke_pbckcode_ace',
        style: 'position: absolute; top: 80px; left: 10px; right: 10px; bottom: 50px;',
        setup: function(element) {
          // get the value of the editor
          var code = element.getHtml();

          // replace some regexp
          code = code.replace(new RegExp('<br/>', 'g'), '\n')
            .replace(new RegExp('<br>', 'g'), '\n')
            .replace(new RegExp('&lt;', 'g'), '<')
            .replace(new RegExp('&gt;', 'g'), '>')
            .replace(new RegExp('&amp;', 'g'), '&')
            .replace(new RegExp('&nbsp;', 'g'), ' ');

          aceEditor.setValue(code);
        },
        commit: function(element) {
          element.setText(aceEditor.getValue());
        }
      }
    ]
  };

  // dialog code
  return {
    // Basic properties of the dialog window: title, minimum size.
    title: editor.lang.pbckcode.title,
    minWidth: 600,
    minHeight: 400,
    // Dialog window contents definition.
    contents: [
      editorPanel
    ],
    onLoad: function() {
      dialog = this;
      // we load the ACE plugin to our div
      aceEditor = ace.edit(dialog.getContentElement('editor', 'code-textarea')
        .getElement().getId());
      // save the aceEditor into the editor object for the resize event
      editor.aceEditor = aceEditor;

      // set default settings
      aceEditor.setTheme('ace/theme/' + editor.settings.theme);
      aceEditor.setHighlightActiveLine(true);
      aceEditor.setShowInvisibles(true);

      aceSession = aceEditor.getSession();
      aceSession.setMode('ace/mode/' + editor.settings.modes[0][1]);
      aceSession.setTabSize(editor.settings.tab_size);
      aceSession.setUseSoftTabs(true);

      // load ace extensions
      whitespace = ace.require('ace/ext/whitespace');
    },
    onShow: function() {
      // get the selection
      var selection = editor.getSelection();
      // get the entire element
      var element = selection.getStartElement();

      // looking for the pre parent tag
      if (element) {
        element = element.getAscendant('pre', true);
      }
      // if there is no pre tag, it is an addition. Therefore, it is an edition
      if (!element || element.getName() !== 'pre') {
        element = new CKEDITOR.dom.element('pre');

        if (shighlighter.getTag() !== 'pre') {
          element.append(new CKEDITOR.dom.element('code'));
        }
        this.insertMode = true;
      }
      else {
        if (shighlighter.getTag() !== 'pre') {
          element = element.getChild(0);
        }
        this.insertMode = false;
      }
      // get the element to fill the inputs
      this.element = element;

      // focus on the editor
      aceEditor.focus();

      // we empty the editor
      aceEditor.setValue('');

      // we fill the inputs
      if (!this.insertMode) {
        this.setupContent(this.element);
      }
    },
    // This method is invoked once a user clicks the OK button, confirming the dialog.
    onOk: function() {
      var pre, element;
      pre = element = this.element;

      if (this.insertMode) {
        if (shighlighter.getTag() !== 'pre') {
          element = this.element.getChild(0);
        }
      }
      else {
        pre = element.getAscendant('pre', true);
      }

      this.commitContent(element);

      // set the full class to the code tag
      shighlighter.setCls(pre.getAttribute('data-pbcklang') + ' ' + editor.settings.cls);

      element.setAttribute('class', shighlighter.getCls());

      // we add a new code tag into ckeditor editor
      if (this.insertMode) {
        editor.insertElement(pre);
      }
    }
  };
});

/*
 * Resize the ACE Editor
 */
CKEDITOR.dialog.on('resize', function(evt) {
  var AceEditor = evt.editor.aceEditor;
  if (AceEditor !== undefined) {
    AceEditor.resize();
  }
});

/*label styling */
.cke_pbckcode_form .cke_dialog_ui_labeled_content {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
}

/*select styling */
.cke_pbckcode_form .cke_dialog_ui_input_select select {
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  color: #555;
  display: inline-block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 12px;
  height: auto;
  margin-bottom: 0;
  padding: 0;
  vertical-align: middle;
  width: 110px;
}

/* ace reset needed due to ckeditor style */
.cke_pbckcode_ace.ace_editor * {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Droid Sans Mono', 'Consolas', monospace;
  font-size: 12px;
}

.cke_pbckcode_ace .ace_invisible {
  opacity: 0;
  visibility: hidden;
}

/*good font color on dark theme*/
.cke_pbckcode_ace.ace_dark * {
  color: inherit;
}