vue_crud 0.1.9.6 → 0.1.9.7

data/lib/generators/vue_crud/templates/assets/javascripts/froala_editor/plugins/code_view.js

@@ -0,0 +1,311 @@
+/*!
+ * froala_editor v2.3.3 (https://www.froala.com/wysiwyg-editor)
+ * License https://froala.com/wysiwyg-editor/terms/
+ * Copyright 2014-2016 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);
+                }
+            }
+            factory(jQuery);
+            return jQuery;
+        };
+    } else {
+        // Browser globals
+        factory(jQuery);
+    }
+}(function ($) {
+
+  'use strict';
+
+  $.extend($.FE.DEFAULTS, {
+    codeMirror: true,
+    codeMirrorOptions: {
+      lineNumbers: true,
+      tabMode: 'indent',
+      indentWithTabs: true,
+      lineWrapping: true,
+      mode: 'text/html',
+      tabSize: 2
+    },
+    codeBeautifierOptions: {
+      end_with_newline: true,
+      indent_inner_html: true,
+      extra_liners: ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'pre', 'ul', 'ol', 'table', 'dl'],
+      brace_style: 'expand',
+      indent_char: '\t',
+      indent_size: 1,
+      wrap_line_length: 0
+    }
+  })
+
+  $.FE.PLUGINS.codeView = function (editor) {
+    var $html_area;
+    var code_mirror;
+
+    /**
+     * Check if code view is enabled.
+     */
+    function isActive () {
+      return editor.$box.hasClass('fr-code-view');
+    }
+
+    function get () {
+      if (code_mirror) {
+        return code_mirror.getValue();
+      } else {
+        return $html_area.val();
+      }
+    }
+
+    /**
+     * Get back to edit mode.
+     */
+    function _showText ($btn) {
+      var html = get();
+
+      // Code mirror enabled.
+      editor.html.set(html);
+
+      // Blur the element.
+      editor.$el.blur();
+
+      // Toolbar no longer disabled.
+      editor.$tb.find(' > .fr-command').not($btn).removeClass('fr-disabled');
+      $btn.removeClass('fr-active');
+
+      editor.events.focus(true);
+      editor.placeholder.refresh();
+
+      editor.undo.saveStep();
+    }
+
+    /**
+     * Get to code mode.
+     */
+    function _showHTML ($btn) {
+      if (!$html_area) _initArea();
+
+      // Enable code mirror.
+      if (!code_mirror && editor.opts.codeMirror && typeof CodeMirror != 'undefined') {
+        code_mirror = CodeMirror.fromTextArea($html_area.get(0), editor.opts.codeMirrorOptions);
+      }
+
+      editor.undo.saveStep();
+
+      // Clean white tags but ignore selection.
+      editor.html.cleanEmptyTags();
+      editor.html.cleanWhiteTags(true);
+
+      // Blur the element.
+      if (editor.core.hasFocus()) {
+        if (!editor.core.isEmpty()) {
+          editor.selection.save();
+          editor.$el.find('.fr-marker[data-type="true"]:first').replaceWith('<span class="fr-tmp fr-sm">F</span>');
+          editor.$el.find('.fr-marker[data-type="false"]:last').replaceWith('<span class="fr-tmp fr-em">F</span>');
+        }
+      }
+
+      // Get HTML.
+      var html = editor.html.get(false, true);
+      editor.$el.find('span.fr-tmp').remove();
+
+      if (editor.core.hasFocus()) editor.$el.blur();
+
+      html = html.replace(/<span class="fr-tmp fr-sm">F<\/span>/, 'FROALA-SM');
+      html = html.replace(/<span class="fr-tmp fr-em">F<\/span>/, 'FROALA-EM');
+
+      // Beautify HTML.
+      if (editor.codeBeautifier) {
+        html = editor.codeBeautifier.run(html, editor.opts.codeBeautifierOptions);
+      }
+
+      var s_index;
+      var e_index;
+
+      // Code mirror is enabled.
+      if (code_mirror) {
+        s_index = html.indexOf('FROALA-SM');
+        e_index = html.indexOf('FROALA-EM');
+
+        if (s_index > e_index) {
+          s_index = e_index;
+        }
+        else {
+          e_index = e_index - 9;
+        }
+
+        html = html.replace(/FROALA-SM/g, '').replace(/FROALA-EM/g, '')
+        var s_line = html.substring(0, s_index).length - html.substring(0, s_index).replace(/\n/g, '').length;
+        var e_line = html.substring(0, e_index).length - html.substring(0, e_index).replace(/\n/g, '').length;
+
+        s_index = html.substring(0, s_index).length - html.substring(0, html.substring(0, s_index).lastIndexOf('\n') + 1).length;
+        e_index = html.substring(0, e_index).length - html.substring(0, html.substring(0, e_index).lastIndexOf('\n')  + 1).length;
+
+        code_mirror.setSize(null, editor.opts.height ? editor.opts.height : 'auto');
+        if (editor.opts.heightMin) editor.$box.find('.CodeMirror-scroll').css('min-height', editor.opts.heightMin);
+        code_mirror.setValue(html);
+        code_mirror.focus();
+        code_mirror.setSelection({ line: s_line, ch: s_index }, { line: e_line, ch: e_index })
+        code_mirror.refresh();
+        code_mirror.clearHistory();
+      }
+
+      // No code mirror.
+      else {
+        s_index = html.indexOf('FROALA-SM');
+        e_index = html.indexOf('FROALA-EM') - 9;
+
+        if (editor.opts.heightMin) {
+          $html_area.css('min-height', editor.opts.heightMin);
+        }
+
+        if (editor.opts.height) {
+          $html_area.css('height', editor.opts.height);
+        }
+
+        if (editor.opts.heightMax) {
+          $html_area.css('max-height', editor.opts.height || editor.opts.heightMax);
+        }
+
+        $html_area.val(html.replace(/FROALA-SM/g, '').replace(/FROALA-EM/g, ''));
+        $html_area.focus();
+        $html_area.get(0).setSelectionRange(s_index, e_index);
+      }
+
+      // Disable buttons.
+      editor.$tb.find(' > .fr-command').not($btn).addClass('fr-disabled');
+      $btn.addClass('fr-active');
+
+      if (!editor.helpers.isMobile() && editor.opts.toolbarInline) {
+        editor.toolbar.hide();
+      }
+    }
+
+    /**
+     * Toggle the code view.
+     */
+    function toggle (val) {
+      if (typeof val == 'undefined') val = !isActive();
+
+      var $btn = editor.$tb.find('.fr-command[data-cmd="html"]');
+
+      if (!val) {
+        editor.$box.toggleClass('fr-code-view', false);
+        _showText($btn);
+      } else {
+        editor.popups.hideAll();
+        editor.$box.toggleClass('fr-code-view', true);
+        _showHTML($btn);
+      }
+    }
+
+    /**
+     * Destroy.
+     */
+    function _destroy () {
+      if (isActive()) {
+        toggle(editor.$tb.find('button[data-cmd="html"]'));
+      }
+
+      if (code_mirror) code_mirror.toTextArea();
+      $html_area.val('').removeData().remove();
+      $html_area = null;
+
+      if ($back_button) {
+        $back_button.remove();
+        $back_button = null;
+      }
+    }
+
+    function _initArea () {
+      // Add the coding textarea to the wrapper.
+      $html_area = $('<textarea class="fr-code" tabindex="-1">');
+      editor.$wp.append($html_area);
+
+      $html_area.attr('dir', editor.opts.direction);
+
+      // Exit code view button for inline toolbar.
+      if (!editor.$box.hasClass('fr-basic')) {
+        $back_button = $('<a data-cmd="html" title="Code View" class="fr-command fr-btn html-switch' + (editor.helpers.isMobile() ? '' : ' fr-desktop') + '" role="button" tabindex="-1"><i class="fa fa-code"></i></button>');
+        editor.$box.append($back_button);
+
+        editor.events.bindClick(editor.$box, 'a.html-switch', function () {
+          toggle(false);
+        });
+      }
+
+      var cancel = function () {
+        return !isActive();
+      }
+
+      // Disable refresh of the buttons while enabled.
+      editor.events.on('buttons.refresh', cancel);
+      editor.events.on('copy', cancel, true);
+      editor.events.on('cut', cancel, true);
+      editor.events.on('paste', cancel, true);
+
+      editor.events.on('destroy', _destroy, true);
+
+      editor.events.on('html.set', function () {
+        if (isActive()) toggle(true);
+      });
+
+      editor.events.on('form.submit', function () {
+        if (isActive()) {
+          // Code mirror enabled.
+          editor.html.set(get());
+
+          editor.events.trigger('contentChanged', [], true);
+        }
+      }, true);
+    }
+
+    /**
+     * Initialize.
+     */
+    var $back_button;
+    function _init () {
+      if (!editor.$wp) return false;
+    }
+
+    return {
+      _init: _init,
+      toggle: toggle,
+      isActive: isActive,
+      get: get
+    }
+  };
+
+  $.FE.RegisterCommand('html', {
+    title: 'Code View',
+    undo: false,
+    focus: false,
+    forcedRefresh: true,
+    callback: function () {
+      this.codeView.toggle();
+    },
+    plugin: 'codeView'
+  })
+
+  $.FE.DefineIcon('html', {
+    NAME: 'code'
+  });
+
+}));

data/lib/generators/vue_crud/templates/assets/javascripts/froala_editor/plugins/colors.js

@@ -0,0 +1,350 @@
+/*!
+ * froala_editor v2.3.3 (https://www.froala.com/wysiwyg-editor)
+ * License https://froala.com/wysiwyg-editor/terms/
+ * Copyright 2014-2016 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);
+                }
+            }
+            factory(jQuery);
+            return jQuery;
+        };
+    } else {
+        // Browser globals
+        factory(jQuery);
+    }
+}(function ($) {
+
+  'use strict';
+
+  $.extend($.FE.POPUP_TEMPLATES, {
+    'colors.picker': '[_BUTTONS_][_TEXT_COLORS_][_BACKGROUND_COLORS_]'
+  })
+
+  // Extend defaults.
+  $.extend($.FE.DEFAULTS, {
+    colorsText: [
+      '#61BD6D', '#1ABC9C', '#54ACD2', '#2C82C9', '#9365B8', '#475577', '#CCCCCC',
+      '#41A85F', '#00A885', '#3D8EB9', '#2969B0', '#553982', '#28324E', '#000000',
+      '#F7DA64', '#FBA026', '#EB6B56', '#E25041', '#A38F84', '#EFEFEF', 'REMOVE',
+      '#FAC51C', '#F37934', '#D14841', '#B8312F', '#7C706B', '#FFFFFF', 'PICKER'
+    ],
+    colorsBackground: [
+      '#61BD6D', '#1ABC9C', '#54ACD2', '#2C82C9', '#9365B8', '#475577', '#CCCCCC',
+      '#41A85F', '#00A885', '#3D8EB9', '#2969B0', '#553982', '#28324E', '#000000',
+      '#F7DA64', '#FBA026', '#EB6B56', '#E25041', '#A38F84', '#EFEFEF', 'REMOVE',
+      '#FAC51C', '#F37934', '#D14841', '#B8312F', '#7C706B', '#FFFFFF', 'PICKER'
+    ],
+    colorsStep: 7,
+    colorsDefaultTab: 'text',
+    colorsButtons: ['colorsBack', '|', '-']
+  });
+
+  $.FE.PLUGINS.colors = function (editor) {
+    /*
+     * Show the colors popup.
+     */
+    function _showColorsPopup () {
+      var $btn = editor.$tb.find('.fr-command[data-cmd="color"]');
+
+      var $popup = editor.popups.get('colors.picker');
+      if (!$popup) $popup = _initColorsPopup();
+
+      if (!$popup.hasClass('fr-active')) {
+        // Colors popup
+        editor.popups.setContainer('colors.picker', editor.$tb);
+
+        // Refresh selected color.
+        _refreshColor($popup.find('.fr-selected-tab').attr('data-param1'));
+
+        // Colors popup left and top position.
+        if ($btn.is(':visible')) {
+          var left = $btn.offset().left + $btn.outerWidth() / 2;
+          var top = $btn.offset().top + (editor.opts.toolbarBottom ? 10 : $btn.outerHeight() - 10);
+          editor.popups.show('colors.picker', left, top, $btn.outerHeight());
+        }
+        else {
+          editor.position.forSelection($popup);
+          editor.popups.show('colors.picker');
+        }
+      }
+    }
+
+    /*
+     * Hide colors popup.
+     */
+    function _hideColorsPopup () {
+      // Hide popup.
+      editor.popups.hide('colors.picker');
+    }
+
+    /**
+     * Init the colors popup.
+     */
+    function _initColorsPopup () {
+      var colors_buttons = '<div class="fr-buttons fr-colors-buttons">';
+
+      if (editor.opts.toolbarInline) {
+        // Colors buttons.
+        if (editor.opts.colorsButtons.length > 0) {
+          colors_buttons += editor.button.buildList(editor.opts.colorsButtons)
+        }
+      }
+
+      colors_buttons += _colorsTabsHTML() + '</div>';
+
+      var template = {
+        buttons: colors_buttons,
+        text_colors: _colorPickerHTML('text'),
+        background_colors: _colorPickerHTML('background')
+      };
+
+      // Create popup.
+      var $popup = editor.popups.create('colors.picker', template);
+
+      return $popup;
+    }
+
+    /*
+     * HTML for the color picker text and background tabs.
+     */
+    function _colorsTabsHTML () {
+      var tabs_html = '<div class="fr-colors-tabs">';
+
+      // Text tab.
+      tabs_html += '<span class="fr-colors-tab ' + (editor.opts.colorsDefaultTab == 'background' ? '' : 'fr-selected-tab ') + 'fr-command" data-param1="text" data-cmd="colorChangeSet" title="' + editor.language.translate('Text') + '">' + editor.language.translate('Text') + '</span>';
+
+      // Background tab.
+      tabs_html += '<span class="fr-colors-tab ' + (editor.opts.colorsDefaultTab == 'background' ? 'fr-selected-tab ' : '') + 'fr-command" data-param1="background" data-cmd="colorChangeSet" title="' + editor.language.translate('Background') + '">' + editor.language.translate('Background') + '</span>';
+
+      return tabs_html + '</div>';
+    }
+
+    /*
+     * HTML for the color picker colors.
+     */
+    function _colorPickerHTML (tab) {
+      // Get colors according to tab name.
+      var colors = (tab == 'text' ? editor.opts.colorsText : editor.opts.colorsBackground);
+
+      // Create colors html.
+      var colors_html = '<div class="fr-color-set fr-' + tab + '-color' + ((editor.opts.colorsDefaultTab == tab || (editor.opts.colorsDefaultTab != 'text' && editor.opts.colorsDefaultTab != 'background' && tab == 'text')) ? ' fr-selected-set' : '') + '">';
+
+      // Add colors.
+      for (var i = 0; i < colors.length; i++) {
+        if (i !== 0 && i % editor.opts.colorsStep === 0) {
+          colors_html += '<br>';
+        }
+
+        if (colors[i] == 'REMOVE') {
+          colors_html += '<span class="fr-command fr-select-color" data-cmd="' + tab + 'Color" data-param1="REMOVE" title="' + editor.language.translate('Clear Formatting') + '">' + editor.icon.create('remove') + '</span>';
+        }
+        else if (colors[i] == 'PICKER') {
+          colors_html += '<span class="fr-command fr-select-color fr-color-picker-btn" data-cmd="' + tab + 'Color" data-param1="PICKER" title="' + editor.language.translate('Select Color') + '"><img src="assets/froala_editor/color_picker.png"></span>';
+        }
+        else {
+          colors_html += '<span class="fr-command fr-select-color" style="background: ' + colors[i] + ';" data-cmd="' + tab + 'Color" data-param1="' + colors[i] + '"></span>';
+        }
+      }
+
+      return colors_html + '</div>';
+    }
+
+    /*
+     * Show the current selected color.
+     */
+    function _refreshColor (tab) {
+      var $popup = editor.popups.get('colors.picker');
+      var $element = $(editor.selection.element());
+
+      // The color css property.
+      var color_type;
+      if (tab == 'background') {
+        color_type = 'background-color';
+      }
+      else {
+        color_type = 'color';
+      }
+
+      // Remove current color selection.
+      $popup.find('.fr-' + tab + '-color .fr-select-color').removeClass('fr-selected-color');
+
+      // Find the selected color.
+      while ($element.get(0) != editor.$el.get(0)) {
+        // Transparent or black.
+        if ($element.css(color_type) == 'transparent' || $element.css(color_type) == 'rgba(0, 0, 0, 0)') {
+          $element = $element.parent();
+        }
+
+        // Select the correct color.
+        else {
+          $popup.find('.fr-' + tab + '-color .fr-select-color[data-param1="' + editor.helpers.RGBToHex($element.css(color_type)) + '"]').addClass('fr-selected-color');
+          break;
+        }
+      }
+    }
+
+    /*
+     * Change the colors' tab.
+     */
+    function _changeSet ($tab, val) {
+      // Only on the tab that is not selected yet. On left click only.
+      if (!$tab.hasClass('fr-selected-tab')) {
+        // Switch selected tab.
+        $tab.siblings().removeClass('fr-selected-tab');
+        $tab.addClass('fr-selected-tab');
+
+        // Switch the color set.
+        $tab.parents('.fr-popup').find('.fr-color-set').removeClass('fr-selected-set');
+        $tab.parents('.fr-popup').find('.fr-color-set.fr-' + val + '-color').addClass('fr-selected-set');
+
+        // Refresh selected color.
+        _refreshColor(val);
+      }
+    }
+
+    /*
+     * Change background color.
+     */
+    function background (val) {
+      // Remove background color.
+      if (val == 'REMOVE') {
+        editor.format.removeStyle('background-color');
+      }
+      else if (val == 'PICKER') {
+        $('.fr-color-picker').val('');
+        $('.fr-color-picker')[0].click();
+        $('.fr-color-picker').change(function(){
+          editor.format.applyStyle('color', editor.helpers.HEXtoRGB($(this).val()));
+        });
+      }
+      // Set background  color.
+      else {
+        editor.format.applyStyle('background-color', editor.helpers.HEXtoRGB(val));
+      }
+
+      _hideColorsPopup();
+    }
+
+    /*
+     * Change text color.
+     */
+    function text (val) {
+      // Remove text color.
+      if (val == 'REMOVE') {
+        editor.format.removeStyle('color');
+      }
+      else if (val == 'PICKER') {
+        $('.fr-color-picker').val('');
+        $('.fr-color-picker')[0].click();
+        $('.fr-color-picker').change(function(){
+          editor.format.applyStyle('color', editor.helpers.HEXtoRGB($(this).val()));
+        });
+      }
+      // Set text color.
+      else {
+        editor.format.applyStyle('color', editor.helpers.HEXtoRGB(val));
+      }
+
+      _hideColorsPopup();
+    }
+
+    /*
+     * Go back to the inline editor.
+     */
+    function back () {
+      editor.popups.hide('colors.picker');
+      editor.toolbar.showInline();
+    }
+
+    return {
+      showColorsPopup: _showColorsPopup,
+      hideColorsPopup: _hideColorsPopup,
+      changeSet: _changeSet,
+      background: background,
+      text: text,
+      back: back
+    }
+  }
+
+  // Toolbar colors button.
+  $.FE.DefineIcon('colors', { NAME: 'tint' });
+  $.FE.RegisterCommand('color', {
+    title: 'Colors',
+    undo: false,
+    focus: true,
+    refreshOnCallback: false,
+    popup: true,
+    callback: function () {
+      if (!this.popups.isVisible('colors.picker')) {
+        this.colors.showColorsPopup();
+      }
+      else {
+        if (this.$el.find('.fr-marker')) {
+          this.events.disableBlur();
+          this.selection.restore();
+        }
+        this.popups.hide('colors.picker');
+      }
+    },
+    plugin: 'colors'
+  });
+
+  // Select text color command.
+  $.FE.RegisterCommand('textColor', {
+    undo: true,
+    callback: function (cmd, val) {
+      this.colors.text(val);
+    }
+  });
+
+  // Select background color command.
+  $.FE.RegisterCommand('backgroundColor', {
+    undo: true,
+    callback: function (cmd, val) {
+      this.colors.background(val);
+    }
+  });
+
+  $.FE.RegisterCommand('colorChangeSet', {
+    undo: false,
+    focus: false,
+    callback: function (cmd, val) {
+      var $tab = this.popups.get('colors.picker').find('.fr-command[data-cmd="' + cmd + '"][data-param1="' + val + '"]');
+      this.colors.changeSet($tab, val);
+    }
+  });
+
+  // Colors back.
+  $.FE.DefineIcon('colorsBack', { NAME: 'arrow-left' });
+  $.FE.RegisterCommand('colorsBack', {
+    title: 'Back',
+    undo: false,
+    focus: false,
+    back: true,
+    refreshAfterCallback: false,
+    callback: function () {
+      this.colors.back();
+    }
+  });
+
+  $.FE.DefineIcon('remove', { NAME: 'eraser' });
+
+}));