package.lib.themes.snow.index.js Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of quilljs Show documentation
Cross browser rich text editor
The newest version!
var ColorPicker, DefaultTheme, Picker, SnowTheme, dom, _,
  __hasProp = {}.hasOwnProperty,
  __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };

_ = require('lodash');

ColorPicker = require('../../lib/color-picker');

DefaultTheme = require('../default');

dom = require('../../lib/dom');

Picker = require('../../lib/picker');

SnowTheme = (function(_super) {
  __extends(SnowTheme, _super);

  SnowTheme.COLORS = ["#000000", "#e60000", "#ff9900", "#ffff00", "#008A00", "#0066cc", "#9933ff", "#ffffff", "#facccc", "#ffebcc", "#ffffcc", "#cce8cc", "#cce0f5", "#ebd6ff", "#bbbbbb", "#f06666", "#ffc266", "#ffff66", "#66b966", "#66a3e0", "#c285ff", "#888888", "#a10000", "#b26b00", "#b2b200", "#006100", "#0047b2", "#6b24b2", "#444444", "#5c0000", "#663d00", "#666600", "#003700", "#002966", "#3d1466"];

  SnowTheme.OPTIONS = {
    'multi-cursor': {
      template: '     '
    }
  };

  SnowTheme.STYLES = {
    '.snow .image-tooltip-container a': {
      'border': '1px solid #06c'
    },
    '.snow .image-tooltip-container a.insert': {
      'background-color': '#06c',
      'color': '#fff'
    },
    '.snow .cursor-name': {
      'border-radius': '4px',
      'font-size': '11px',
      'font-family': 'Arial',
      'margin-left': '-50%',
      'padding': '4px 10px'
    },
    '.snow .cursor-triangle': {
      'border-left': '4px solid transparent',
      'border-right': '4px solid transparent',
      'height': '0px',
      'margin-left': '-3px',
      'width': '0px'
    },
    '.snow .cursor.left .cursor-name': {
      'margin-left': '-8px'
    },
    '.snow .cursor.right .cursor-flag': {
      'right': 'auto'
    },
    '.snow .cursor.right .cursor-name': {
      'margin-left': '-100%',
      'margin-right': '-8px'
    },
    '.snow .cursor-triangle.bottom': {
      'border-top': '4px solid transparent',
      'display': 'block',
      'margin-bottom': '-1px'
    },
    '.snow .cursor-triangle.top': {
      'border-bottom': '4px solid transparent',
      'display': 'none',
      'margin-top': '-1px'
    },
    '.snow .cursor.top .cursor-triangle.bottom': {
      'display': 'none'
    },
    '.snow .cursor.top .cursor-triangle.top': {
      'display': 'block'
    },
    '.snow a': {
      'color': '#06c'
    },
    '.snow .tooltip': {
      'border': '1px solid #ccc',
      'box-shadow': '0px 0px 5px #ddd',
      'color': '#222'
    },
    '.snow .tooltip a': {
      'color': '#06c'
    },
    '.snow .tooltip .input': {
      'border': '1px solid #ccc',
      'margin': '0px',
      'padding': '5px'
    },
    '.snow .image-tooltip-container .preview': {
      'border-color': '#ccc',
      'color': '#ccc'
    },
    '.snow .link-tooltip-container a, .snow .link-tooltip-container span': {
      'display': 'inline-block',
      'line-height': '25px'
    }
  };

  function SnowTheme(quill) {
    this.quill = quill;
    SnowTheme.__super__.constructor.apply(this, arguments);
    this.quill.addStyles(SnowTheme.STYLES);
    this.pickers = [];
    this.quill.on(this.quill.constructor.events.SELECTION_CHANGE, (function(_this) {
      return function(range) {
        if (range != null) {
          return _.invoke(_this.pickers, 'close');
        }
      };
    })(this));
    dom(this.quill.root.ownerDocument.body).addClass('snow');
    this.quill.onModuleLoad('multi-cursor', _.bind(this.extendMultiCursor, this));
    this.quill.onModuleLoad('toolbar', _.bind(this.extendToolbar, this));
  }

  SnowTheme.prototype.extendMultiCursor = function(module) {
    return module.on(module.constructor.events.CURSOR_ADDED, function(cursor) {
      var bottomTriangle, topTriangle;
      bottomTriangle = cursor.elem.querySelector('.cursor-triangle.bottom');
      topTriangle = cursor.elem.querySelector('.cursor-triangle.top');
      return bottomTriangle.style.borderTopColor = topTriangle.style.borderBottomColor = cursor.color;
    });
  };

  SnowTheme.prototype.extendToolbar = function(module) {
    _.each(['color', 'background', 'font', 'size', 'align'], (function(_this) {
      return function(format) {
        var picker, select;
        select = module.container.querySelector(".ql-" + format);
        if (select == null) {
          return;
        }
        switch (format) {
          case 'font':
          case 'size':
          case 'align':
            picker = new Picker(select);
            break;
          case 'color':
          case 'background':
            picker = new ColorPicker(select);
            _.each(picker.container.querySelectorAll('.ql-picker-item'), function(item, i) {
              if (i < 7) {
                return dom(item).addClass('ql-primary-color');
              }
            });
        }
        if (picker != null) {
          return _this.pickers.push(picker);
        }
      };
    })(this));
    return _.each(dom(module.container).textNodes(), function(node) {
      if (dom(node).text().trim().length === 0) {
        return dom(node).remove();
      }
    });
  };

  return SnowTheme;

})(DefaultTheme);

module.exports = SnowTheme;