| [ Index ] |
PHP Cross Reference of Unnamed Project |
[Summary view] [Print] [Text view]
1 /* 2 YUI 3.17.2 (build 9c3c78e) 3 Copyright 2014 Yahoo! Inc. All rights reserved. 4 Licensed under the BSD License. 5 http://yuilibrary.com/license/ 6 */ 7 8 YUI.add('exec-command', function (Y, NAME) { 9 10 11 /** 12 * Plugin for the frame module to handle execCommands for Editor 13 * @class Plugin.ExecCommand 14 * @extends Base 15 * @constructor 16 * @module editor 17 * @submodule exec-command 18 */ 19 var ExecCommand = function() { 20 ExecCommand.superclass.constructor.apply(this, arguments); 21 }, 22 /** 23 * This method is meant to normalize IE's in ability to exec the proper command on elements with CSS styling. 24 * @method fixIETags 25 * @protected 26 * @param {String} cmd The command to execute 27 * @param {String} tag The tag to create 28 * @param {String} rule The rule that we are looking for. 29 */ 30 fixIETags = function(cmd, tag, rule) { 31 var inst = this.getInstance(), 32 doc = inst.config.doc, 33 sel = doc.selection.createRange(), 34 o = doc.queryCommandValue(cmd), 35 html, reg, m, p, d, s, c; 36 37 if (o) { 38 html = sel.htmlText; 39 reg = new RegExp(rule, 'g'); 40 m = html.match(reg); 41 42 if (m) { 43 html = html.replace(rule + ';', '').replace(rule, ''); 44 45 sel.pasteHTML('<var id="yui-ie-bs">'); 46 47 p = doc.getElementById('yui-ie-bs'); 48 d = doc.createElement('div'); 49 s = doc.createElement(tag); 50 51 d.innerHTML = html; 52 if (p.parentNode !== inst.config.doc.body) { 53 p = p.parentNode; 54 } 55 56 c = d.childNodes; 57 58 p.parentNode.replaceChild(s, p); 59 60 Y.each(c, function(f) { 61 s.appendChild(f); 62 }); 63 sel.collapse(); 64 if (sel.moveToElementText) { 65 sel.moveToElementText(s); 66 } 67 sel.select(); 68 } 69 } 70 this._command(cmd); 71 }; 72 73 Y.extend(ExecCommand, Y.Base, { 74 /** 75 * An internal reference to the keyCode of the last key that was pressed. 76 * @private 77 * @property _lastKey 78 */ 79 _lastKey: null, 80 /** 81 * An internal reference to the instance of the frame plugged into. 82 * @private 83 * @property _inst 84 */ 85 _inst: null, 86 /** 87 * Execute a command on the frame's document. 88 * @method command 89 * @param {String} action The action to perform (bold, italic, fontname) 90 * @param {String} value The optional value (helvetica) 91 * @return {Node/NodeList} Should return the Node/Nodelist affected 92 */ 93 command: function(action, value) { 94 var fn = ExecCommand.COMMANDS[action]; 95 96 Y.log('execCommand(' + action + '): "' + value + '"', 'info', 'exec-command'); 97 if (fn) { 98 Y.log('OVERIDE execCommand(' + action + '): "' + value + '"', 'info', 'exec-command'); 99 return fn.call(this, action, value); 100 } else { 101 return this._command(action, value); 102 } 103 }, 104 /** 105 * The private version of execCommand that doesn't filter for overrides. 106 * @private 107 * @method _command 108 * @param {String} action The action to perform (bold, italic, fontname) 109 * @param {String} value The optional value (helvetica) 110 */ 111 _command: function(action, value) { 112 var inst = this.getInstance(); 113 try { 114 try { 115 inst.config.doc.execCommand('styleWithCSS', null, 1); 116 } catch (e1) { 117 try { 118 inst.config.doc.execCommand('useCSS', null, 0); 119 } catch (e2) { 120 } 121 } 122 Y.log('Using default browser execCommand(' + action + '): "' + value + '"', 'info', 'exec-command'); 123 inst.config.doc.execCommand(action, null, value); 124 } catch (e) { 125 Y.log(e.message, 'warn', 'exec-command'); 126 } 127 }, 128 /** 129 * Get's the instance of YUI bound to the parent frame 130 * @method getInstance 131 * @return {YUI} The YUI instance bound to the parent frame 132 */ 133 getInstance: function() { 134 if (!this._inst) { 135 this._inst = this.get('host').getInstance(); 136 } 137 return this._inst; 138 }, 139 initializer: function() { 140 Y.mix(this.get('host'), { 141 execCommand: function(action, value) { 142 return this.exec.command(action, value); 143 }, 144 _execCommand: function(action, value) { 145 return this.exec._command(action, value); 146 } 147 }); 148 149 this.get('host').on('dom:keypress', Y.bind(function(e) { 150 this._lastKey = e.keyCode; 151 }, this)); 152 }, 153 _wrapContent: function(str, override) { 154 var useP = (this.getInstance().host.editorPara && !override ? true : false); 155 156 if (useP) { 157 str = '<p>' + str + '</p>'; 158 } else { 159 str = str + '<br>'; 160 } 161 return str; 162 } 163 }, { 164 /** 165 * execCommand 166 * @property NAME 167 * @static 168 */ 169 NAME: 'execCommand', 170 /** 171 * exec 172 * @property NS 173 * @static 174 */ 175 NS: 'exec', 176 ATTRS: { 177 host: { 178 value: false 179 } 180 }, 181 /** 182 * Static object literal of execCommand overrides 183 * @class Plugin.ExecCommand.COMMANDS 184 * @static 185 */ 186 COMMANDS: { 187 /** 188 * Wraps the content with a new element of type (tag) 189 * @method wrap 190 * @static 191 * @param {String} cmd The command executed: wrap 192 * @param {String} tag The tag to wrap the selection with 193 * @return {NodeList} NodeList of the items touched by this command. 194 */ 195 wrap: function(cmd, tag) { 196 var inst = this.getInstance(); 197 return (new inst.EditorSelection()).wrapContent(tag); 198 }, 199 /** 200 * Inserts the provided HTML at the cursor, should be a single element. 201 * @method inserthtml 202 * @static 203 * @param {String} cmd The command executed: inserthtml 204 * @param {String} html The html to insert 205 * @return {Node} Node instance of the item touched by this command. 206 */ 207 inserthtml: function(cmd, html) { 208 var inst = this.getInstance(); 209 if (inst.EditorSelection.hasCursor() || Y.UA.ie) { 210 return (new inst.EditorSelection()).insertContent(html); 211 } else { 212 this._command('inserthtml', html); 213 } 214 }, 215 /** 216 * Inserts the provided HTML at the cursor, and focuses the cursor afterwards. 217 * @method insertandfocus 218 * @static 219 * @param {String} cmd The command executed: insertandfocus 220 * @param {String} html The html to insert 221 * @return {Node} Node instance of the item touched by this command. 222 */ 223 insertandfocus: function(cmd, html) { 224 var inst = this.getInstance(), out, sel; 225 if (inst.EditorSelection.hasCursor()) { 226 html += inst.EditorSelection.CURSOR; 227 out = this.command('inserthtml', html); 228 sel = new inst.EditorSelection(); 229 sel.focusCursor(true, true); 230 } else { 231 this.command('inserthtml', html); 232 } 233 return out; 234 }, 235 /** 236 * Inserts a BR at the current cursor position 237 * @method insertbr 238 * @static 239 * @param {String} cmd The command executed: insertbr 240 */ 241 insertbr: function() { 242 var inst = this.getInstance(), 243 sel = new inst.EditorSelection(), 244 html = '<var>|</var>', last = null, 245 root = inst.EditorSelection.ROOT, 246 q = (Y.UA.webkit) ? 'span.Apple-style-span,var' : 'var', 247 insert = function(n) { 248 var c = inst.Node.create('<br>'); 249 n.insert(c, 'before'); 250 return c; 251 }; 252 253 if (sel._selection.pasteHTML) { 254 sel._selection.pasteHTML(html); 255 } else { 256 this._command('inserthtml', html); 257 } 258 259 260 root.all(q).each(function(n) { 261 var g = true, s; 262 if (Y.UA.webkit) { 263 g = false; 264 if (n.get('innerHTML') === '|') { 265 g = true; 266 } 267 } 268 if (g) { 269 last = insert(n); 270 if ((!last.previous() || !last.previous().test('br')) && Y.UA.gecko) { 271 s = last.cloneNode(); 272 last.insert(s, 'after'); 273 last = s; 274 } 275 n.remove(); 276 } 277 }); 278 if (Y.UA.webkit && last) { 279 insert(last); 280 sel.selectNode(last); 281 } 282 }, 283 /** 284 * Inserts an image at the cursor position 285 * @method insertimage 286 * @static 287 * @param {String} cmd The command executed: insertimage 288 * @param {String} img The url of the image to be inserted 289 * @return {Node} Node instance of the item touched by this command. 290 */ 291 insertimage: function(cmd, img) { 292 return this.command('inserthtml', '<img src="' + img + '">'); 293 }, 294 /** 295 * Add a class to all of the elements in the selection 296 * @method addclass 297 * @static 298 * @param {String} cmd The command executed: addclass 299 * @param {String} cls The className to add 300 * @return {NodeList} NodeList of the items touched by this command. 301 */ 302 addclass: function(cmd, cls) { 303 var inst = this.getInstance(); 304 return (new inst.EditorSelection()).getSelected().addClass(cls); 305 }, 306 /** 307 * Remove a class from all of the elements in the selection 308 * @method removeclass 309 * @static 310 * @param {String} cmd The command executed: removeclass 311 * @param {String} cls The className to remove 312 * @return {NodeList} NodeList of the items touched by this command. 313 */ 314 removeclass: function(cmd, cls) { 315 var inst = this.getInstance(); 316 return (new inst.EditorSelection()).getSelected().removeClass(cls); 317 }, 318 /** 319 * Adds a forecolor to the current selection, or creates a new element and applies it 320 * @method forecolor 321 * @static 322 * @param {String} cmd The command executed: forecolor 323 * @param {String} val The color value to apply 324 * @return {NodeList} NodeList of the items touched by this command. 325 */ 326 forecolor: function(cmd, val) { 327 var inst = this.getInstance(), 328 sel = new inst.EditorSelection(), n; 329 330 if (!Y.UA.ie) { 331 this._command('useCSS', false); 332 } 333 if (inst.EditorSelection.hasCursor()) { 334 if (sel.isCollapsed) { 335 if (sel.anchorNode && (sel.anchorNode.get('innerHTML') === ' ')) { 336 sel.anchorNode.setStyle('color', val); 337 n = sel.anchorNode; 338 } else { 339 n = this.command('inserthtml', '<span style="color: ' + val + '">' + inst.EditorSelection.CURSOR + '</span>'); 340 sel.focusCursor(true, true); 341 } 342 return n; 343 } else { 344 return this._command(cmd, val); 345 } 346 } else { 347 this._command(cmd, val); 348 } 349 }, 350 /** 351 * Adds a background color to the current selection, or creates a new element and applies it 352 * @method backcolor 353 * @static 354 * @param {String} cmd The command executed: backcolor 355 * @param {String} val The color value to apply 356 * @return {NodeList} NodeList of the items touched by this command. 357 */ 358 backcolor: function(cmd, val) { 359 var inst = this.getInstance(), 360 sel = new inst.EditorSelection(), n; 361 362 if (Y.UA.gecko || Y.UA.opera) { 363 cmd = 'hilitecolor'; 364 } 365 if (!Y.UA.ie) { 366 this._command('useCSS', false); 367 } 368 if (inst.EditorSelection.hasCursor()) { 369 if (sel.isCollapsed) { 370 if (sel.anchorNode && (sel.anchorNode.get('innerHTML') === ' ')) { 371 sel.anchorNode.setStyle('backgroundColor', val); 372 n = sel.anchorNode; 373 } else { 374 n = this.command('inserthtml', 375 '<span style="background-color: ' + val + '">' + inst.EditorSelection.CURSOR + '</span>'); 376 sel.focusCursor(true, true); 377 } 378 return n; 379 } else { 380 return this._command(cmd, val); 381 } 382 } else { 383 this._command(cmd, val); 384 } 385 }, 386 /** 387 * Sugar method, calles backcolor 388 * @method hilitecolor 389 * @static 390 * @param {String} cmd The command executed: backcolor 391 * @param {String} val The color value to apply 392 * @return {NodeList} NodeList of the items touched by this command. 393 */ 394 hilitecolor: function() { 395 return ExecCommand.COMMANDS.backcolor.apply(this, arguments); 396 }, 397 /** 398 * Adds a font name to the current selection, or creates a new element and applies it 399 * @method fontname2 400 * @deprecated 401 * @static 402 * @param {String} cmd The command executed: fontname 403 * @param {String} val The font name to apply 404 * @return {NodeList} NodeList of the items touched by this command. 405 */ 406 fontname2: function(cmd, val) { 407 this._command('fontname', val); 408 var inst = this.getInstance(), 409 sel = new inst.EditorSelection(); 410 411 if (sel.isCollapsed && (this._lastKey !== 32)) { 412 if (sel.anchorNode.test('font')) { 413 sel.anchorNode.set('face', val); 414 } 415 } 416 }, 417 /** 418 * Adds a fontsize to the current selection, or creates a new element and applies it 419 * @method fontsize2 420 * @deprecated 421 * @static 422 * @param {String} cmd The command executed: fontsize 423 * @param {String} val The font size to apply 424 * @return {NodeList} NodeList of the items touched by this command. 425 */ 426 fontsize2: function(cmd, val) { 427 this._command('fontsize', val); 428 429 var inst = this.getInstance(), 430 sel = new inst.EditorSelection(), p; 431 432 if (sel.isCollapsed && sel.anchorNode && (this._lastKey !== 32)) { 433 if (Y.UA.webkit) { 434 if (sel.anchorNode.getStyle('lineHeight')) { 435 sel.anchorNode.setStyle('lineHeight', ''); 436 } 437 } 438 if (sel.anchorNode.test('font')) { 439 sel.anchorNode.set('size', val); 440 } else if (Y.UA.gecko) { 441 p = sel.anchorNode.ancestor(inst.EditorSelection.DEFAULT_BLOCK_TAG); 442 if (p) { 443 p.setStyle('fontSize', ''); 444 } 445 } 446 } 447 }, 448 /** 449 * Overload for list 450 * @method insertorderedlist 451 * @static 452 * @param {String} cmd The command executed: list, ul 453 */ 454 insertunorderedlist: function() { 455 this.command('list', 'ul'); 456 }, 457 /** 458 * Overload for list 459 * @method insertunorderedlist 460 * @static 461 * @param {String} cmd The command executed: list, ol 462 */ 463 insertorderedlist: function() { 464 this.command('list', 'ol'); 465 }, 466 /** 467 * Noramlizes lists creation/destruction for IE. All others pass through to native calls 468 * @method list 469 * @static 470 * @param {String} cmd The command executed: list (not used) 471 * @param {String} tag The tag to deal with 472 */ 473 list: function(cmd, tag) { 474 var inst = this.getInstance(), html, self = this, 475 /* 476 The yui3- class name below is not a skinnable class, 477 it's a utility class used internally by editor and 478 stripped when completed, calling getClassName on this 479 is a waste of resources. 480 */ 481 DIR = 'dir', cls = 'yui3-touched', 482 dir, range, div, elm, n, str, s, par, list, lis, 483 useP = (inst.host.editorPara ? true : false), tmp, 484 sdir, hasPParent, fc, 485 root = inst.EditorSelection.ROOT, 486 sel = new inst.EditorSelection(); 487 488 cmd = 'insert' + ((tag === 'ul') ? 'un' : '') + 'orderedlist'; 489 490 if (Y.UA.ie && Y.UA.ie < 11 && !sel.isCollapsed) { 491 range = sel._selection; 492 html = range.htmlText; 493 div = inst.Node.create(html) || root; 494 495 if (div.test('li') || div.one('li')) { 496 this._command(cmd, null); 497 return; 498 } 499 if (div.test(tag)) { 500 elm = range.item ? range.item(0) : range.parentElement(); 501 n = inst.one(elm); 502 lis = n.all('li'); 503 504 str = '<div>'; 505 lis.each(function(l) { 506 str = self._wrapContent(l.get('innerHTML')); 507 }); 508 str += '</div>'; 509 s = inst.Node.create(str); 510 if (n.get('parentNode').test('div')) { 511 n = n.get('parentNode'); 512 } 513 if (n && n.hasAttribute(DIR)) { 514 if (useP) { 515 s.all('p').setAttribute(DIR, n.getAttribute(DIR)); 516 } else { 517 s.setAttribute(DIR, n.getAttribute(DIR)); 518 } 519 } 520 if (useP) { 521 n.replace(s.get('innerHTML')); 522 } else { 523 n.replace(s); 524 } 525 if (range.moveToElementText) { 526 range.moveToElementText(s._node); 527 } 528 range.select(); 529 } else { 530 par = Y.one(range.parentElement()); 531 if (!par.test(inst.EditorSelection.BLOCKS)) { 532 par = par.ancestor(inst.EditorSelection.BLOCKS); 533 } 534 if (par) { 535 if (par.hasAttribute(DIR)) { 536 dir = par.getAttribute(DIR); 537 } 538 } 539 if (html.indexOf('<br>') > -1) { 540 html = html.split(/<br>/i); 541 } else { 542 tmp = inst.Node.create(html); 543 ps = tmp ? tmp.all('p') : null; 544 545 if (ps && ps.size()) { 546 html = []; 547 ps.each(function(n) { 548 html.push(n.get('innerHTML')); 549 }); 550 } else { 551 html = [html]; 552 } 553 } 554 list = '<' + tag + ' id="ie-list">'; 555 Y.each(html, function(v) { 556 var a = inst.Node.create(v); 557 if (a && a.test('p')) { 558 if (a.hasAttribute(DIR)) { 559 dir = a.getAttribute(DIR); 560 } 561 v = a.get('innerHTML'); 562 } 563 list += '<li>' + v + '</li>'; 564 }); 565 list += '</' + tag + '>'; 566 range.pasteHTML(list); 567 elm = inst.config.doc.getElementById('ie-list'); 568 elm.id = ''; 569 if (dir) { 570 elm.setAttribute(DIR, dir); 571 } 572 if (range.moveToElementText) { 573 range.moveToElementText(elm); 574 } 575 range.select(); 576 } 577 } else if (Y.UA.ie && Y.UA.ie < 11) { 578 par = inst.one(sel._selection.parentElement()); 579 if (par.test('p')) { 580 if (par && par.hasAttribute(DIR)) { 581 dir = par.getAttribute(DIR); 582 } 583 html = Y.EditorSelection.getText(par); 584 if (html === '') { 585 sdir = ''; 586 if (dir) { 587 sdir = ' dir="' + dir + '"'; 588 } 589 list = inst.Node.create(Y.Lang.sub('<{tag}{dir}><li></li></{tag}>', { tag: tag, dir: sdir })); 590 par.replace(list); 591 sel.selectNode(list.one('li')); 592 } else { 593 this._command(cmd, null); 594 } 595 } else { 596 this._command(cmd, null); 597 } 598 } else { 599 root.all(tag).addClass(cls); 600 if (sel.anchorNode.test(inst.EditorSelection.BLOCKS)) { 601 par = sel.anchorNode; 602 } else { 603 par = sel.anchorNode.ancestor(inst.EditorSelection.BLOCKS); 604 } 605 if (!par) { //No parent, find the first block under the anchorNode 606 par = sel.anchorNode.one(inst.EditorSelection.BLOCKS); 607 } 608 609 if (par && par.hasAttribute(DIR)) { 610 dir = par.getAttribute(DIR); 611 } 612 if (par && par.test(tag)) { 613 hasPParent = par.ancestor('p'); 614 html = inst.Node.create('<div/>'); 615 elm = par.all('li'); 616 elm.each(function(h) { 617 html.append(self._wrapContent(h.get('innerHTML'), hasPParent)); 618 }); 619 if (dir) { 620 if (useP) { 621 html.all('p').setAttribute(DIR, dir); 622 } else { 623 html.setAttribute(DIR, dir); 624 } 625 } 626 if (useP) { 627 html = inst.Node.create(html.get('innerHTML')); 628 } 629 fc = html.get('firstChild'); 630 par.replace(html); 631 sel.selectNode(fc); 632 } else { 633 this._command(cmd, null); 634 } 635 list = root.all(tag); 636 if (dir) { 637 if (list.size()) { 638 //Changed to a List 639 list.each(function(n) { 640 if (!n.hasClass(cls)) { 641 n.setAttribute(DIR, dir); 642 } 643 }); 644 } 645 } 646 647 list.removeClass(cls); 648 } 649 }, 650 /** 651 * Noramlizes alignment for Webkit Browsers 652 * @method justify 653 * @static 654 * @param {String} cmd The command executed: justify (not used) 655 * @param {String} val The actual command from the justify{center,all,left,right} stubs 656 */ 657 justify: function(cmd, val) { 658 if (Y.UA.webkit) { 659 var inst = this.getInstance(), 660 sel = new inst.EditorSelection(), 661 aNode = sel.anchorNode, html, 662 bgColor = aNode.getStyle('backgroundColor'); 663 664 this._command(val); 665 sel = new inst.EditorSelection(); 666 if (sel.anchorNode.test('div')) { 667 html = '<span>' + sel.anchorNode.get('innerHTML') + '</span>'; 668 sel.anchorNode.set('innerHTML', html); 669 sel.anchorNode.one('span').setStyle('backgroundColor', bgColor); 670 sel.selectNode(sel.anchorNode.one('span')); 671 } 672 } else { 673 this._command(val); 674 } 675 }, 676 /** 677 * Override method for justify 678 * @method justifycenter 679 * @static 680 */ 681 justifycenter: function() { 682 this.command('justify', 'justifycenter'); 683 }, 684 /** 685 * Override method for justify 686 * @method justifyleft 687 * @static 688 */ 689 justifyleft: function() { 690 this.command('justify', 'justifyleft'); 691 }, 692 /** 693 * Override method for justify 694 * @method justifyright 695 * @static 696 */ 697 justifyright: function() { 698 this.command('justify', 'justifyright'); 699 }, 700 /** 701 * Override method for justify 702 * @method justifyfull 703 * @static 704 */ 705 justifyfull: function() { 706 this.command('justify', 'justifyfull'); 707 } 708 } 709 }); 710 711 if (Y.UA.ie && Y.UA.ie < 11) { 712 ExecCommand.COMMANDS.bold = function() { 713 fixIETags.call(this, 'bold', 'b', 'FONT-WEIGHT: bold'); 714 }; 715 ExecCommand.COMMANDS.italic = function() { 716 fixIETags.call(this, 'italic', 'i', 'FONT-STYLE: italic'); 717 }; 718 ExecCommand.COMMANDS.underline = function() { 719 fixIETags.call(this, 'underline', 'u', 'TEXT-DECORATION: underline'); 720 }; 721 } 722 723 Y.namespace('Plugin'); 724 Y.Plugin.ExecCommand = ExecCommand; 725 726 727 728 }, '3.17.2', {"requires": ["frame"]});
title
Description
Body
title
Description
Body
title
Description
Body
title
Body
| Generated: Thu Aug 11 10:00:09 2016 | Cross-referenced by PHPXref 0.7.1 |