/*global Quill*/ (function () { 'use strict'; var app; // declare ngQuill module app = angular.module('ngQuill', []); app.provider('ngQuillConfig', function () { var config = { // default fontFamilies fontSizes: [{ size: '10px', alias: 'small' }, { size: '13px', alias: 'normal' }, { size: '18px', alias: 'large' }, { size: '32px', alias: 'huge' }], // default fontFamilies fontFamilies: [{ label: 'Sans Serif', alias: 'sans-serif' }, { label: 'Serif', alias: 'serif' }, { label: 'Monospace', alias: 'monospace' }], // formats list formats: [ 'link', 'image', 'bold', 'italic', 'underline', 'strike', 'color', 'background', 'align', 'font', 'size', 'bullet', 'list' ], // default translations translations: { font: 'Font', size: 'Size', small: 'Small', normal: 'Normal', large: 'Large', huge: 'Huge', bold: 'Bold', italic: 'Italic', underline: 'Underline', strike: 'Strikethrough', textColor: 'Text Color', backgroundColor: 'Background Color', list: 'List', bullet: 'Bullet', textAlign: 'Text Align', left: 'Left', center: 'Center', right: 'Right', justify: 'Justify', link: 'Link', image: 'Image', visitURL: 'Visit URL', change: 'Change', done: 'Done', cancel: 'Cancel', remove: 'Remove', insert: 'Insert', preview: 'Preview' } }; this.set = function (fontSizes, fontFamilies) { if (fontSizes) { config.fontSizes = fontSizes; } if (fontFamilies) { config.fontFamilies = fontFamilies; } }; this.$get = function () { return config; }; }); app.service('ngQuillService', ['ngQuillConfig', function (ngQuillConfig) { // validate formats this.validateFormats = function (checkFormats) { var correctFormats = [], i = 0; for (i; i < checkFormats.length; i = i + 1) { if (ngQuillConfig.formats.indexOf(checkFormats[i]) !== -1) { correctFormats.push(checkFormats[i]); } } return correctFormats; }; }]); app.component('ngQuillEditor', { bindings: { 'toolbarEntries': '@?', 'toolbar': '@?', 'showToolbar': '', 'fontfamilyOptions': '', 'fontsizeOptions': '', 'linkTooltip': '@?', 'imageTooltip': '@?', 'theme': '@?', 'save': '@?', 'translations': '', 'required': '@?editorRequired', 'readOnly': '', 'errorClass': '@?', 'ngModel': '<', 'callback': '&?', 'name': '@?', 'editorStyles': '' }, require: { 'ngModelController': 'ngModel' }, restrict: 'E', templateUrl: 'ngQuill/template.html', controller: function ($scope, $element, $timeout, ngQuillService, ngQuillConfig) { console.log(this.ngModel); var config = { theme: this.theme || 'snow', save: this.save || 'html', readOnly: this.readOnly || false, formats: this.toolbarEntries ? ngQuillService.validateFormats(this.toolbarEntries.split(' ')) : ngQuillConfig.formats, modules: {}, styles: this.editorStyles || false }, changed = false, editor, setClass = function () { // if editor content length <= 1 and content is required -> add custom error clas and ng-invalid if (this.required && (!this.modelLength || this.modelLength <= 1)) { $element.addClass('ng-invalid'); $element.removeClass('ng-valid'); // if form was reseted and input field set to empty if (this.errorClass && changed && $element.hasClass('ng-dirty')) { $element.children().addClass(this.errorClass); } } else { // set to valid $element.removeClass('ng-invalid'); $element.addClass('ng-valid'); if (this.errorClass) { $element.children().removeClass(this.errorClass); } } }.bind(this); // set required flag (if text editor is required) if (this.required && this.required === 'true') { this.required = true; } else { this.required = false; } // overwrite global settings dynamically this.fontsizeOptions = this.fontsizeOptions || ngQuillConfig.fontSizes; this.fontfamilyOptions = this.fontfamilyOptions || ngQuillConfig.fontFamilies; // default translations this.dict = ngQuillConfig.translations; this.shouldShow = function (formats) { var okay = false, i = 0; for (i; i < formats.length; i = i + 1) { if (config.formats.indexOf(formats[i]) !== -1) { okay = true; break; } } return okay; }; // if there are custom translations if (this.translations) { this.dict = this.translations; } // add tooltip modules if (this.linkTooltip && this.linkTooltip === 'true') { config.modules['link-tooltip'] = { template: '' + this.dict.visitURL + ': ' + '' + '' + ' - ' + '' + this.dict.change + '' + '' + this.dict.remove + '' + '' + this.dict.done + '' }; } if (this.imageTooltip && this.imageTooltip === 'true') { config.modules['image-tooltip'] = { template: '' + '