html_block.js

/*!
 * froala_editor v2.7.1 (https://www.froala.com/wysiwyg-editor)
 * License https://froala.com/wysiwyg-editor/terms/
 * Copyright 2014-2017 Froala Labs
 */

(function (factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['jquery'], factory);
    } else if (typeof module === 'object' && module.exports) {
        // Node/CommonJS
        module.exports = function( root, jQuery ) {
            if ( jQuery === undefined ) {
                // require('jQuery') returns a factory that requires window to
                // build a jQuery instance, we normalize how we use modules
                // that require this pattern but the window provided is a noop
                // if it's defined (how jquery works)
                if ( typeof window !== 'undefined' ) {
                    jQuery = require('jquery');
                }
                else {
                    jQuery = require('jquery')(root);
                }
            }
            return factory(jQuery);
        };
    } else {
        // Browser globals
        factory(window.jQuery);
    }
}(function ($) {


  $.extend($.FE.POPUP_TEMPLATES, {
    'html_block.edit': '[_BUTTONS_][_CUSTOM_LAYER_]'
  });

  $.extend($.FE.DEFAULTS, {
    editButtons: ['popupClose', '|']
  });

  $.FE.PLUGINS.html_block = function (editor) {
    var $current_html_block;
    var mousedown = false;

    /**
     * Show the html block edit popup.
     */

    function _showEditPopup () {
      var $popup = editor.popups.get('html_block.edit');

      if (!$popup) $popup = _initEditPopup();

      if ($popup) {
        var $el = $current_html_block;

        editor.popups.setContainer('html_block.edit', $current_html_block);
        editor.popups.refresh('html_block.edit');
        var left = $el.offset().left + $el.outerWidth() / 2;
        var top = $el.offset().top + $el.outerHeight();

        setInput();
        editor.popups.show('html_block.edit', left, top, $el.outerHeight());
        //editor.popups.show('html_block.edit', left, top, offset.bottom - offset.top);

      }
    }


    /**
     * Init the image edit popup.
     */

    function _initEditPopup (delayed) {
      if (delayed) {
        if (editor.$wp) {
          editor.events.$on(editor.$wp, 'scroll', function () {
            if ($current_html_block && editor.popups.isVisible('html_block.edit')) {
              editor.events.disableBlur();
              //_editImg($current_image);
            }
          });
        }

        return true;
      }

      // Image buttons.
      var html_block_buttons = '';
      if (editor.opts.editButtons.length > 1) {
        html_block_buttons += '<div class="fr-buttons">';
        html_block_buttons += editor.button.buildList(editor.opts.editButtons);
        html_block_buttons += '</div>';
      }

      // Image by url layer.
      var alt_layer = '';
      alt_layer = '<div class="fr-code-block-input fr-layer fr-active" id="fr-image-alt-layer-' + editor.id + '"><div class="fr-input-line"><textarea class="fr-code-block" id="fr-image-alt-layer-text-' + editor.id + '" placeholder="' + editor.language.translate('HTML Code') + '" tabIndex="1"></textarea></div><div class="fr-action-buttons"><button type="button" class="fr-command fr-submit" data-cmd="htmlBlockUpdate" tabIndex="2" role="button">' + editor.language.translate('Update') + '</button></div></div>'

      var template = {
        buttons: html_block_buttons,
        custom_layer: alt_layer //'<div class="custom-layer"><textarea class="fr-code-block"></textarea></div>'
      };

      var $popup = editor.popups.create('html_block.edit', template);

      return $popup;
    }
/*
    function _edit (e) {
      //if ($(this).parents('[contenteditable]:not(.fr-html-block):not(.fr-img-caption):not(body):first').attr('contenteditable') == 'false') return true;

      if (e && e.type == 'touchend' && touchScroll) {

        return true;
      }

      if (e && editor.edit.isDisabled()) {
        e.stopPropagation();
        e.preventDefault();

        return false;
      }

      // Hide resizer for other instances.
      for (var i = 0; i < $.FE.INSTANCES.length; i++) {
        if ($.FE.INSTANCES[i] != editor) {
          $.FE.INSTANCES[i].events.trigger('image.hideResizer');
        }
      }

      editor.toolbar.disable();

      if (e) {
        e.stopPropagation();
        e.preventDefault();
      }

      // Hide keyboard.
      if (editor.helpers.isMobile()) {
        editor.events.disableBlur();
        editor.$el.blur();
        editor.events.enableBlur();
      }

      if (editor.opts.iframe) {
        editor.size.syncIframe();
      }

      // Store current image.
      $current_html_block = $(this);

      // Select image.
      if (!editor.browser.msie) _selectImage();

      // Reposition resizer.
      _repositionResizer();
      _showEditPopup();

      // Clear selection.
      if (!editor.browser.msie) {
        editor.selection.clear();
      }

      // Fix for image remaining selected.
      if (editor.helpers.isIOS()) {
        editor.events.disableBlur();
        editor.$el.blur();
      }

      // Refresh buttons.
      editor.button.bulkRefresh();
      editor.events.trigger('video.hideResizer');
    }
*/
    /**
     * Place selection around current html block.
     */
    function _selectHtmlBlock () {
      if ($current_html_block) {
        editor.events.disableBlur();
        editor.selection.clear();
        var range = editor.doc.createRange();
        range.selectNode($current_html_block.get(0));
        var selection = editor.selection.get();
        selection.addRange(range);
        editor.events.enableBlur();
      }
    }


    /*
     * The HTML for insert html block html
     */
    function _insertHtmlBlockHtml () {

      // Grid html
      var html_block = '<div class="fr-html-block">';
      html_block += '<div class="fr-code" contenteditable="false" tabindex="-1" dir="auto" style="display: none;"></textarea>';
      html_block += '</div><br />';

      return html_block;
    }

    /*
     * Insert html block method.
     */
    function insert () {

      var html_block = '<div class="fr-html-block fr-inserted-html-block">';
      html_block += '<div class="fr-code-block" dir="auto" style="" contenteditable="false"></div>';
      html_block += '</div><br />';

      editor.html.insert(html_block);

      // Update cursor position.
      editor.selection.restore()

      var $html_block = editor.$el.find('.fr-inserted-html-block');
      $html_block.removeClass('fr-inserted-html-block');
      //editor.events.trigger('html_block.inserted', [$html_block.get(0)]);

      $current_html_block = $html_block;
      _showEditPopup();

      //if (!this.popups.isVisible('html_block.insert')) {
      //_edit.call($html_block);
      //}

    }

    /**
     * Set HTML based on the values from the popup.
     */

    function setHtml () {
      if ($current_html_block) {
        var $popup = editor.popups.get('html_block.edit');
        $current_html_block.find('.fr-code-block').html($popup.find('textarea').val() || '');
        $popup.find('textarea:focus').blur();
        //_edit($current_image);
      }
    }


    /**
     * Set Textarea value based on the html from the html block div
     */

    function setInput () {
      if ($current_html_block) {
        var $popup = editor.popups.get('html_block.edit');
        $popup.find('textarea').val($current_html_block.find('.fr-code-block').html());
      }
    }

    /*
     * Delete html block method.
     */
    function remove () {

      var selection = editor.selection.get();

      // Delete html block.
      selection.remove();

    }


    /**
     * Destroy
     */
    function _destroy () {
      mouseDownCell = null;
      clearTimeout(mouseMoveTimer);
    }

    function _hideEditPopup() {
      editor.popups.hide('html_block.edit');
    }

    function detectEnterKey(e) {
      var keycode = (e.keyCode ? e.keyCode : e.which);
      if (keycode === 13) {
        console.log("pressed enter key");
        //console.log(e.target);
        //console.log(e);
        var $el = $(e.target);
        if ($el.hasClass("fr-code-block")) {
          //$current_html_block = $(e.target).parents(".fr-html-block").eq(0);
          $(e.target).val($(e.target).val() + '\n');
          e.stopPropagation();
          //console.log($(e.target));
          return true;
        }
      }
      return false;
    }
    /*
     * Init table.
     */
    function _init () {

      if (!editor.$wp) return false;

      // Do cell selection only on desktops (no touch devices)
      if (!editor.helpers.isMobile()) {

        // Remember if mouse is clicked.
        mouseDownFlag = false;

        // Mouse is down
        editor.events.$on(editor.$el, 'mouseup', function(e) {
          //console.log("mousedown");
          if ($(e.target).parents(".fr-html-block").length) {
            $current_html_block = $(e.target).parents(".fr-html-block").eq(0);

            //console.log($(e.target).parent);
            //console.log($current_html_block);

            if ($current_html_block) {
              _showEditPopup();
            }
          }
          //console.log($(e.target).parent(".fr-code-block"));
        });

        // Iframe mouseup.
        /*
        if (editor.opts.iframe) {
          editor.events.$on($(editor.o_win), 'mouseup', function() {
            console.log("iframe mouseup");
          });
        }
        */


        // Prevent backspace from doing browser back.
        editor.events.on('keydown', function (e) {
          if (detectEnterKey(e) == true) {
            return false;
          }

          return true;
        }, true);

        // Prevent backspace from doing browser back.
        editor.events.on('keypress', function (e) {
          if (detectEnterKey(e) == true) {
            return false;
          }

          return true;
        }, true);

        // Prevent backspace from doing browser back.
        editor.events.on('keyup', function (e) {
          if (detectEnterKey(e) == true) {
            return false;
          }

          return true;
        }, true);

        /*
        // Mouse up on an image prevent move.
        editor.events.$on(editor.$el, editor._mouseup, editor.el.tagName == 'DIV' ? null : 'div:not([contenteditable="false"])', function (e) {
          if ($(this).parents('[contenteditable]:not(.fr-element):not(.fr-code-block):not(body):first').attr('contenteditable') == 'false') return true;

          console.log("event 2");
          console.log(editor._mouseup);
          if (mousedown) {
            mousedown = false;

            // Remove moving class.
            e.stopPropagation();

            if (editor.browser.msie) {
              editor.$el.attr('contenteditable', true);
              editor.events.enableBlur();
            }
          }
        });
        */
      }

      editor.events.on('destroy', _destroy);

    }


    return {
      _init: _init,
      insert: insert,
      remove: remove,
      setHtml, setHtml,
      setInput, setInput,
      showEditPopup: _showEditPopup,
      hideEditPopup: _hideEditPopup
    }
  };


  /*
  $.FE.RegisterCommand('html', {
    title: 'Code View',
    undo: false,
    focus: false,
    forcedRefresh: true,
    toggle: true,
    callback: function () {
      this.codeView.toggle();
    },
    plugin: 'codeView'
  })

  $.FE.DefineIcon('html', {
    NAME: 'code'
  });
  */

  // Insert html block button.
  $.FE.DefineIcon('htmlBlock', { NAME: 'code' });
  $.FE.RegisterCommand('htmlBlock', {
    title: 'Insert HTML Block',
    undo: false,
    focus: true,
    refreshOnCallback: false,
    toggle: true,
    callback: function () {
      this.html_block.insert();
      this.html_block.showEditPopup();


      /*
      if (!this.popups.isVisible('html_block.insert')) {
        this.html_block.showInsertPopup();
      }
      else {
        if (this.$el.find('.fr-marker').length) {
          this.events.disableBlur();
          this.selection.restore();
        }
        this.popups.hide('html_block.insert');
      }
      */
    },
    plugin: 'html_block'
  });

  $.FE.RegisterCommand('htmlBlockInsert', {
    callback: function (cmd) {
      this.html_block.insert();
      //this.popups.hide('html_block.insert');
    }
  })

  // Remove table button.
  $.FE.DefineIcon('htmlBlockRemove', { NAME: 'trash' })
  $.FE.RegisterCommand('htmlBlockRemove', {
    title: 'Remove HTML Block',
    focus: false,
    callback: function () {
      this.html_block.remove();
    }
  });

  $.FE.RegisterCommand('htmlBlockUpdate', {
    undo: true,
    focus: false,
    title: 'Update',
    refreshAfterCallback: false,
    callback: function () {
      this.html_block.setHtml();
      this.popups.hide('html_block.edit');
    }
  });

  // Close popup
  $.FE.DefineIcon('popupClose', { NAME: 'times' })
  $.FE.RegisterCommand('popupClose', {
    title: 'Close',
    undo: false,
    focus: false,
    callback: function () {
      this.html_block.hideEditPopup();
    }
  });


  $.FE.RegisterQuickInsertButton('htmlBlock', {
    icon: 'htmlBlock',
    requiredPlugin: 'html_block',
    title: 'Insert HTML Block',
    callback: function () {
      console.log("Hello");
      console.log(this.html_block);
      this.html_block.insert();
    }
  });

}));