1 | (function (global, factory) {
|
2 | typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms')) :
|
3 | typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/common', '@angular/forms'], factory) :
|
4 | (factory((global['ngx-wig'] = {}),global.core,global.common,global.forms));
|
5 | }(this, (function (exports,core,common,forms) { 'use strict';
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 | var NgxWigToolbarService = (function () {
|
12 | function NgxWigToolbarService() {
|
13 | this._buttonLibrary = {
|
14 | list1: { title: 'Unordered List', command: 'insertunorderedlist', styleClass: 'list-ul' },
|
15 | list2: { title: 'Ordered List', command: 'insertorderedlist', styleClass: 'list-ol' },
|
16 | bold: { title: 'Bold', command: 'bold', styleClass: 'bold' },
|
17 | italic: { title: 'Italic', command: 'italic', styleClass: 'italic' },
|
18 | link: { title: 'Link', command: 'createlink', styleClass: 'link' }
|
19 | };
|
20 | this._defaultButtonsList = ['list1', 'list2', 'bold', 'italic', 'link'];
|
21 | }
|
22 | |
23 |
|
24 |
|
25 |
|
26 | NgxWigToolbarService.prototype.setButtons = |
27 |
|
28 |
|
29 |
|
30 | function (buttons) {
|
31 |
|
32 |
|
33 |
|
34 | this._defaultButtonsList = buttons;
|
35 | };
|
36 |
|
37 | |
38 |
|
39 |
|
40 |
|
41 |
|
42 |
|
43 |
|
44 | NgxWigToolbarService.prototype.addStandardButton = |
45 |
|
46 |
|
47 |
|
48 |
|
49 |
|
50 |
|
51 | function (name, title, command, styleClass) {
|
52 | if (!name || !title || !command) {
|
53 | throw 'Arguments "name", "title" and "command" are required';
|
54 | }
|
55 | styleClass = styleClass || '';
|
56 | this._buttonLibrary[name] = { title: title, command: command, styleClass: styleClass };
|
57 | this._defaultButtonsList.push(name);
|
58 | };
|
59 | |
60 |
|
61 |
|
62 |
|
63 |
|
64 | NgxWigToolbarService.prototype.addCustomButton = |
65 |
|
66 |
|
67 |
|
68 |
|
69 | function (name, pluginName) {
|
70 | if (!name || !pluginName) {
|
71 | throw 'Arguments "name" and "pluginName" are required';
|
72 | }
|
73 | this._buttonLibrary[name] = { pluginName: pluginName, isComplex: true };
|
74 | this._defaultButtonsList.push(name);
|
75 | };
|
76 | |
77 |
|
78 |
|
79 |
|
80 | NgxWigToolbarService.prototype.getToolbarButtons = |
81 |
|
82 |
|
83 |
|
84 | function (buttonsList) {
|
85 | var _this = this;
|
86 | var buttons = this._defaultButtonsList;
|
87 | var toolbarButtons = [];
|
88 | if (typeof buttonsList !== 'undefined') {
|
89 | buttons = string2array(buttonsList);
|
90 | }
|
91 | buttons.forEach(function (buttonKey) {
|
92 | if (!buttonKey) {
|
93 | return;
|
94 | }
|
95 | if (!_this._buttonLibrary[buttonKey]) {
|
96 | throw 'There is no "' + buttonKey + '" in your library. Possible variants: ' + Object.keys(_this._buttonLibrary);
|
97 | }
|
98 | var button = Object.assign({}, _this._buttonLibrary[buttonKey]);
|
99 |
|
100 | toolbarButtons.push(button);
|
101 | });
|
102 | return toolbarButtons;
|
103 | };
|
104 | return NgxWigToolbarService;
|
105 | }());
|
106 |
|
107 |
|
108 |
|
109 |
|
110 | function string2array(keysString) {
|
111 | return keysString.split(',').map(Function.prototype.call, String.prototype.trim);
|
112 | }
|
113 |
|
114 |
|
115 |
|
116 |
|
117 |
|
118 | var NgxWigComponent = (function () {
|
119 | function NgxWigComponent(_ngWigToolbarService) {
|
120 | this._ngWigToolbarService = _ngWigToolbarService;
|
121 | this.isSourceModeAllowed = false;
|
122 | this.contentChange = new core.EventEmitter();
|
123 | this.editMode = false;
|
124 | this.toolbarButtons = [];
|
125 | this.hasFocus = false;
|
126 | this.propagateChange = function (_) { };
|
127 |
|
128 | this.iconsTheme = "nw-button-mdi";
|
129 | }
|
130 | |
131 |
|
132 |
|
133 | NgxWigComponent.prototype.toggleEditMode = |
134 |
|
135 |
|
136 | function () {
|
137 | this.editMode = !this.editMode;
|
138 | };
|
139 | |
140 |
|
141 |
|
142 |
|
143 |
|
144 | NgxWigComponent.prototype.execCommand = |
145 |
|
146 |
|
147 |
|
148 |
|
149 | function (command, options) {
|
150 | if (this.editMode) {
|
151 | return false;
|
152 | }
|
153 | if (document.queryCommandSupported && !document.queryCommandSupported(command)) {
|
154 | throw 'The command "' + command + '" is not supported';
|
155 | }
|
156 | if (command === 'createlink' || command === 'insertImage') {
|
157 | options = window.prompt('Please enter the URL', 'http://');
|
158 | if (!options) {
|
159 | return;
|
160 | }
|
161 | }
|
162 |
|
163 | var selection = document.getSelection().toString();
|
164 | if (command === 'createlink' && selection === '') {
|
165 | document.execCommand('insertHtml', false, '<a href="' + options + '">' + options + '</a>');
|
166 | }
|
167 | else {
|
168 | document.execCommand(command, false, options);
|
169 | }
|
170 | this.container.focus();
|
171 | };
|
172 | |
173 |
|
174 |
|
175 | NgxWigComponent.prototype.ngOnInit = |
176 |
|
177 |
|
178 | function () {
|
179 | var _this = this;
|
180 | this.toolbarButtons = this._ngWigToolbarService.getToolbarButtons(this.buttons);
|
181 | this.container = this.ngxWigEditable.nativeElement;
|
182 | if (this.content) {
|
183 | this.container.innerHTML = this.content;
|
184 | }
|
185 |
|
186 | ('keyup change focus click'.split(' ')).forEach(function (event) {
|
187 | return _this.container.addEventListener(event, function () {
|
188 | _this.content = _this.container.innerHTML;
|
189 | _this.contentChange.emit(_this.content);
|
190 | _this.propagateChange(_this.content);
|
191 | }, false);
|
192 | });
|
193 | };
|
194 | |
195 |
|
196 |
|
197 |
|
198 | NgxWigComponent.prototype.ngOnChanges = |
199 |
|
200 |
|
201 |
|
202 | function (changes) {
|
203 | if (this.container && changes['content']) {
|
204 |
|
205 | this.container.innerHTML = '';
|
206 |
|
207 | this.pasteHtmlAtCaret(changes['content'].currentValue);
|
208 | }
|
209 | };
|
210 | |
211 |
|
212 |
|
213 |
|
214 | NgxWigComponent.prototype.onChange = |
215 |
|
216 |
|
217 |
|
218 | function (event) {
|
219 |
|
220 | this.container.innerHTML = this.content;
|
221 | this.contentChange.emit(this.content);
|
222 | this.propagateChange(this.content);
|
223 | };
|
224 | |
225 |
|
226 |
|
227 |
|
228 | NgxWigComponent.prototype.writeValue = |
229 |
|
230 |
|
231 |
|
232 | function (value) {
|
233 | if (value) {
|
234 | this.content = value;
|
235 | this.container.innerHTML = this.content;
|
236 | }
|
237 | };
|
238 | |
239 |
|
240 |
|
241 |
|
242 | NgxWigComponent.prototype.registerOnChange = |
243 |
|
244 |
|
245 |
|
246 | function (fn) {
|
247 | this.propagateChange = fn;
|
248 | };
|
249 | |
250 |
|
251 |
|
252 | NgxWigComponent.prototype.registerOnTouched = |
253 |
|
254 |
|
255 | function () { };
|
256 | |
257 |
|
258 |
|
259 | NgxWigComponent.prototype.shouldShowPlaceholder = |
260 |
|
261 |
|
262 | function () {
|
263 | return this.placeholder
|
264 | && !this.hasFocus
|
265 | && !this.container.innerText;
|
266 | };
|
267 | |
268 |
|
269 |
|
270 |
|
271 | NgxWigComponent.prototype.pasteHtmlAtCaret = |
272 |
|
273 |
|
274 |
|
275 | function (html) {
|
276 | var sel, range;
|
277 | if (window.getSelection) {
|
278 | sel = window.getSelection();
|
279 | if (sel.getRangeAt && sel.rangeCount) {
|
280 | range = sel.getRangeAt(0);
|
281 | range.deleteContents();
|
282 |
|
283 | var el = document.createElement('div');
|
284 | el.innerHTML = html;
|
285 | var frag = document.createDocumentFragment(), node = void 0, lastNode = void 0;
|
286 | while ((node = el.firstChild)) {
|
287 | lastNode = frag.appendChild(node);
|
288 | }
|
289 | range.insertNode(frag);
|
290 |
|
291 | if (lastNode) {
|
292 | range = range.cloneRange();
|
293 | range.setStartAfter(lastNode);
|
294 | range.collapse(true);
|
295 | sel.removeAllRanges();
|
296 | sel.addRange(range);
|
297 | }
|
298 | }
|
299 | }
|
300 | };
|
301 | |
302 |
|
303 |
|
304 |
|
305 | NgxWigComponent.prototype.setDisabledState = |
306 |
|
307 |
|
308 |
|
309 | function (isDisabled) {
|
310 | this.disabled = isDisabled;
|
311 | };
|
312 | NgxWigComponent.decorators = [
|
313 | { type: core.Component, args: [{
|
314 | selector: 'ngx-wig',
|
315 | template: "<div class=\"ng-wig\"> <ul class=\"nw-toolbar\" *ngIf=\"toolbarButtons.length\"> <li class=\"nw-toolbar__item\" *ngFor=\"let button of toolbarButtons\"> <div *ngIf=\"!button.isComplex\"> <button type=\"button\" class=\"nw-button\" [ngClass]=\"[button.styleClass, iconsTheme]\" [title]=\"button.title\" (click)=\"execCommand(button.command)\" [disabled]=\"disabled\"> {{ button.title }} </button> </div> </li><!-- --><li class=\"nw-toolbar__item\"> <button type=\"button\" class=\"nw-button nw-button--source\" title=\"Edit HTML\" [class.nw-button--active] = \"editMode\" [ngClass]=\"iconsTheme\" *ngIf=\"isSourceModeAllowed\" (click)=\"toggleEditMode()\" [disabled]=\"disabled\"> Edit HTML </button> </li> </ul> <div class=\"nw-editor-container\" (click)=\"container.focus()\" [ngClass]=\"{ 'nw-editor-container--with-toolbar': toolbarButtons.length }\"> <div class=\"nw-editor__src-container\" *ngIf=\"editMode\"> <textarea [(ngModel)]=\"content\" (ngModelChange)=\"onChange($event)\" class=\"nw-editor__src\"> </textarea> </div> <div class=\"nw-editor\" [ngClass]=\"{ 'nw-disabled': disabled,'nw-invisible': editMode}\"> <div class=\"nw-editor__placeholder\" [innerText]=\"placeholder\" *ngIf=\"shouldShowPlaceholder()\"> </div> <div #ngWigEditable class=\"nw-editor__res\" [attr.contenteditable]=\"!disabled\" [ngClass]=\"{ disabled: disabled}\" (focus)=\"hasFocus = true\" (blur)=\"hasFocus = false\"> </div> </div> </div> </div>",
|
316 | styles: ["/* -------- NG-WIG -------- */ /** * * RESET BOX MODEL * */ .ng-wig, [class^=\"nw-\"] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } /** * main wrapper for the editor * * .ngx-wig * */ .ng-wig { display: block; padding: 0; margin: 0; } /** * styling for toolbar and its items * * .nw-toolbar * &__item * */ .nw-toolbar { display: block; margin: 0; padding: 0; list-style: none; font-size: 12px; color: #6B7277; background: -webkit-linear-gradient(90deg, #ffffff 0%, #f9f9f9 100%); background: -moz-linear-gradient(90deg, #ffffff 0%, #f9f9f9 100%); background: linear-gradient(180deg, #ffffff 0%, #f9f9f9 100%); border: 1px solid #CCCCCC; border-radius: 3px 3px 0 0; } .nw-toolbar__item { display: inline-block; vertical-align: top; margin: 0; border-right: 1px solid #DEDEDE; } .nw-toolbar label { line-height: 30px; display: inline-block; padding: 0 6px 0 3px; } .nw-toolbar input[type=checkbox] { vertical-align: -3px; margin-right: -1px; } /** * styling for the editor part: source code (original textarea) and resulting div * * .nw-editor * &__src * &__res * */ .nw-editor { display: table; /* Default when height is not set */ height: 300px; background: #fff; cursor: text; width: 100%; } .nw-editor-container { border: 1px solid #CCCCCC; border-radius: 0 0 3px 3px; position: relative; } .nw-editor-container--with-toolbar { border-top: none; } .nw-editor__res { min-height: 100%; padding: 0 8px; display: table-cell; } .nw-editor__placeholder { padding: 1px 8px; color: lightgray; display: table-cell; width: 100%; } .nw-editor__src, .nw-editor__res { width: 100%; outline: none; box-sizing: border-box; border: none; margin: 0; } .nw-editor__res.disabled { opacity: 0.5; } .nw-editor__src-container { position: absolute; left: 0; top: 0; right: 0; bottom: 0; } .nw-editor__src { height: 100%; resize: none; padding: 0 8px; } .nw-editor--fixed .nw-editor { display: block; overflow-y: auto; } .nw-editor--fixed .nw-editor__res { padding: 1px 8px; display: block; } .nw-invisible { visibility: hidden; } .nw-editor--fixed .nw-invisible { display: none; } .nw-editor.nw-disabled { cursor: default; } /** * styling for toolbar button, has two modifiers: active and type of icon for background * * .nw-button * &--active * &--{button type} * */ .nw-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: block; width: 30px; height: 30px; margin: 0; padding: 0; opacity: 0.5; line-height: 30px; background-color: transparent; background-position: center center; background-repeat: no-repeat; border: none; border-radius: 2px; font-size: 0; cursor: pointer; } .nw-button-fa:before { font-size: 12px; font-family: FontAwesome; } .nw-button-fa.bold:before { content: '\\f032'; } .nw-button-fa.italic:before { content: '\\f033'; } .nw-button-fa.list-ul:before { content: '\\f0ca'; } .nw-button-fa.list-ol:before { content: '\\f0cb'; } .nw-button-fa.link:before { content: '\\f0c1'; } .nw-button-fa.font-color:before { content: '\\f031'; } .nw-button-fa.nw-button--source:before { content: '\\f040'; } .nw-button-fa.clear-styles:before { content: '\\f12d'; } .nw-button-mdi:before { vertical-align: middle; font-size: 14px; font-family: \"Material Design Icons\"; } .nw-button-mdi.bold:before { content: '\\f264'; } .nw-button-mdi.italic:before { content: '\\f277'; } .nw-button-mdi.list-ul:before { content: '\\f279'; } .nw-button-mdi.list-ol:before { content: '\\f27B'; } .nw-button-mdi.link:before { content: '\\f339'; } .nw-button-mdi.font-color:before { content: '\\f6D5'; } .nw-button-mdi.nw-button--source:before { content: '\\f3EB'; } .nw-button-mdi.clear-styles:before { content: '\\f1fE'; } .nw-button:focus { outline: none; } .nw-button:hover, .nw-button.nw-button--active { opacity: 1 } .nw-button--active { background-color: #EEEEEE; } .nw-button:disabled { cursor: default; } .nw-button:disabled:hover { opacity: 0.5; } /** * styling & formatting of content inside contenteditable div * * .nw-content * */ .nw-content { padding: 12px; margin: 0; font-family: sans-serif; font-size: 14px; line-height: 24px; } .nw-select { height: 30px; padding: 6px; color: #555; background-color: inherit; border: 0; } .nw-select:disabled { opacity: 0.5; } .nw-select:focus { outline: none; } .nw-button:focus { border-color: lightgray; border-style: solid; } [contenteditable]:empty:before { content: attr(placeholder); color: grey; display: inline-block; }"],
|
317 | providers: [
|
318 | NgxWigToolbarService,
|
319 | {
|
320 | provide: forms.NG_VALUE_ACCESSOR,
|
321 | useExisting: core.forwardRef(function () { return NgxWigComponent; }),
|
322 | multi: true
|
323 | }
|
324 | ],
|
325 | encapsulation: core.ViewEncapsulation.None
|
326 | },] },
|
327 | ];
|
328 |
|
329 | NgxWigComponent.ctorParameters = function () { return [
|
330 | { type: NgxWigToolbarService, },
|
331 | ]; };
|
332 | NgxWigComponent.propDecorators = {
|
333 | "content": [{ type: core.Input },],
|
334 | "placeholder": [{ type: core.Input },],
|
335 | "buttons": [{ type: core.Input },],
|
336 | "disabled": [{ type: core.Input },],
|
337 | "isSourceModeAllowed": [{ type: core.Input },],
|
338 | "contentChange": [{ type: core.Output },],
|
339 | "ngxWigEditable": [{ type: core.ViewChild, args: ['ngWigEditable',] },],
|
340 | };
|
341 | return NgxWigComponent;
|
342 | }());
|
343 |
|
344 |
|
345 |
|
346 |
|
347 |
|
348 | var NgxWigModule = (function () {
|
349 | function NgxWigModule() {
|
350 | }
|
351 | NgxWigModule.decorators = [
|
352 | { type: core.NgModule, args: [{
|
353 | imports: [
|
354 | common.CommonModule,
|
355 | forms.FormsModule,
|
356 | forms.ReactiveFormsModule
|
357 | ],
|
358 | declarations: [
|
359 | NgxWigComponent,
|
360 | ],
|
361 | exports: [
|
362 | NgxWigComponent,
|
363 | ],
|
364 | providers: [NgxWigToolbarService]
|
365 | },] },
|
366 | ];
|
367 |
|
368 | NgxWigModule.ctorParameters = function () { return []; };
|
369 | return NgxWigModule;
|
370 | }());
|
371 |
|
372 | exports.NgxWigModule = NgxWigModule;
|
373 | exports.NgxWigComponent = NgxWigComponent;
|
374 | exports.NgxWigToolbarService = NgxWigToolbarService;
|
375 |
|
376 | Object.defineProperty(exports, '__esModule', { value: true });
|
377 |
|
378 | })));
|