PageRenderTime 55ms CodeModel.GetById 17ms RepoModel.GetById 0ms app.codeStats 1ms

/hippo/src/main/webapp/yui/editor/editor-debug.js

http://hdbc.googlecode.com/
JavaScript | 1602 lines | 1093 code | 80 blank | 429 comment | 239 complexity | 1b17fd1ce9b8419bda62baa0b8b1e545 MD5 | raw file
  1. /*
  2. Copyright (c) 2009, Yahoo! Inc. All rights reserved.
  3. Code licensed under the BSD License:
  4. http://developer.yahoo.net/yui/license.txt
  5. version: 2.7.0
  6. */
  7. (function() {
  8. var Dom = YAHOO.util.Dom,
  9. Event = YAHOO.util.Event,
  10. Lang = YAHOO.lang;
  11. /**
  12. * @module editor
  13. * @description <p>Creates a rich custom Toolbar Button. Primarily used with the Rich Text Editor's Toolbar</p>
  14. * @class ToolbarButtonAdvanced
  15. * @namespace YAHOO.widget
  16. * @requires yahoo, dom, element, event, container_core, menu, button
  17. *
  18. * Provides a toolbar button based on the button and menu widgets.
  19. * @constructor
  20. * @class ToolbarButtonAdvanced
  21. * @param {String/HTMLElement} el The element to turn into a button.
  22. * @param {Object} attrs Object liternal containing configuration parameters.
  23. */
  24. if (YAHOO.widget.Button) {
  25. YAHOO.widget.ToolbarButtonAdvanced = YAHOO.widget.Button;
  26. /**
  27. * @property buttonType
  28. * @private
  29. * @description Tells if the Button is a Rich Button or a Simple Button
  30. */
  31. YAHOO.widget.ToolbarButtonAdvanced.prototype.buttonType = 'rich';
  32. /**
  33. * @method checkValue
  34. * @param {String} value The value of the option that we want to mark as selected
  35. * @description Select an option by value
  36. */
  37. YAHOO.widget.ToolbarButtonAdvanced.prototype.checkValue = function(value) {
  38. var _menuItems = this.getMenu().getItems();
  39. if (_menuItems.length === 0) {
  40. this.getMenu()._onBeforeShow();
  41. _menuItems = this.getMenu().getItems();
  42. }
  43. for (var i = 0; i < _menuItems.length; i++) {
  44. _menuItems[i].cfg.setProperty('checked', false);
  45. if (_menuItems[i].value == value) {
  46. _menuItems[i].cfg.setProperty('checked', true);
  47. }
  48. }
  49. };
  50. } else {
  51. YAHOO.widget.ToolbarButtonAdvanced = function() {};
  52. }
  53. /**
  54. * @description <p>Creates a basic custom Toolbar Button. Primarily used with the Rich Text Editor's Toolbar</p><p>Provides a toolbar button based on the button and menu widgets, &lt;select&gt; elements are used in place of menu's.</p>
  55. * @class ToolbarButton
  56. * @namespace YAHOO.widget
  57. * @requires yahoo, dom, element, event
  58. * @extends YAHOO.util.Element
  59. *
  60. *
  61. * @constructor
  62. * @param {String/HTMLElement} el The element to turn into a button.
  63. * @param {Object} attrs Object liternal containing configuration parameters.
  64. */
  65. YAHOO.widget.ToolbarButton = function(el, attrs) {
  66. YAHOO.log('ToolbarButton Initalizing', 'info', 'ToolbarButton');
  67. YAHOO.log(arguments.length + ' arguments passed to constructor', 'info', 'Toolbar');
  68. if (Lang.isObject(arguments[0]) && !Dom.get(el).nodeType) {
  69. attrs = el;
  70. }
  71. var local_attrs = (attrs || {});
  72. var oConfig = {
  73. element: null,
  74. attributes: local_attrs
  75. };
  76. if (!oConfig.attributes.type) {
  77. oConfig.attributes.type = 'push';
  78. }
  79. oConfig.element = document.createElement('span');
  80. oConfig.element.setAttribute('unselectable', 'on');
  81. oConfig.element.className = 'yui-button yui-' + oConfig.attributes.type + '-button';
  82. oConfig.element.innerHTML = '<span class="first-child"><a href="#">LABEL</a></span>';
  83. oConfig.element.firstChild.firstChild.tabIndex = '-1';
  84. oConfig.attributes.id = (oConfig.attributes.id || Dom.generateId());
  85. oConfig.element.id = oConfig.attributes.id;
  86. YAHOO.widget.ToolbarButton.superclass.constructor.call(this, oConfig.element, oConfig.attributes);
  87. };
  88. YAHOO.extend(YAHOO.widget.ToolbarButton, YAHOO.util.Element, {
  89. /**
  90. * @property buttonType
  91. * @private
  92. * @description Tells if the Button is a Rich Button or a Simple Button
  93. */
  94. buttonType: 'normal',
  95. /**
  96. * @method _handleMouseOver
  97. * @private
  98. * @description Adds classes to the button elements on mouseover (hover)
  99. */
  100. _handleMouseOver: function() {
  101. if (!this.get('disabled')) {
  102. this.addClass('yui-button-hover');
  103. this.addClass('yui-' + this.get('type') + '-button-hover');
  104. }
  105. },
  106. /**
  107. * @method _handleMouseOut
  108. * @private
  109. * @description Removes classes from the button elements on mouseout (hover)
  110. */
  111. _handleMouseOut: function() {
  112. this.removeClass('yui-button-hover');
  113. this.removeClass('yui-' + this.get('type') + '-button-hover');
  114. },
  115. /**
  116. * @method checkValue
  117. * @param {String} value The value of the option that we want to mark as selected
  118. * @description Select an option by value
  119. */
  120. checkValue: function(value) {
  121. if (this.get('type') == 'menu') {
  122. var opts = this._button.options;
  123. for (var i = 0; i < opts.length; i++) {
  124. if (opts[i].value == value) {
  125. opts.selectedIndex = i;
  126. }
  127. }
  128. }
  129. },
  130. /**
  131. * @method init
  132. * @description The ToolbarButton class's initialization method
  133. */
  134. init: function(p_oElement, p_oAttributes) {
  135. YAHOO.widget.ToolbarButton.superclass.init.call(this, p_oElement, p_oAttributes);
  136. this.on('mouseover', this._handleMouseOver, this, true);
  137. this.on('mouseout', this._handleMouseOut, this, true);
  138. this.on('click', function(ev) {
  139. Event.stopEvent(ev);
  140. return false;
  141. }, this, true);
  142. },
  143. /**
  144. * @method initAttributes
  145. * @description Initializes all of the configuration attributes used to create
  146. * the toolbar.
  147. * @param {Object} attr Object literal specifying a set of
  148. * configuration attributes used to create the toolbar.
  149. */
  150. initAttributes: function(attr) {
  151. YAHOO.widget.ToolbarButton.superclass.initAttributes.call(this, attr);
  152. /**
  153. * @attribute value
  154. * @description The value of the button
  155. * @type String
  156. */
  157. this.setAttributeConfig('value', {
  158. value: attr.value
  159. });
  160. /**
  161. * @attribute menu
  162. * @description The menu attribute, see YAHOO.widget.Button
  163. * @type Object
  164. */
  165. this.setAttributeConfig('menu', {
  166. value: attr.menu || false
  167. });
  168. /**
  169. * @attribute type
  170. * @description The type of button to create: push, menu, color, select, spin
  171. * @type String
  172. */
  173. this.setAttributeConfig('type', {
  174. value: attr.type,
  175. writeOnce: true,
  176. method: function(type) {
  177. var el, opt;
  178. if (!this._button) {
  179. this._button = this.get('element').getElementsByTagName('a')[0];
  180. }
  181. switch (type) {
  182. case 'select':
  183. case 'menu':
  184. el = document.createElement('select');
  185. var menu = this.get('menu');
  186. for (var i = 0; i < menu.length; i++) {
  187. opt = document.createElement('option');
  188. opt.innerHTML = menu[i].text;
  189. opt.value = menu[i].value;
  190. if (menu[i].checked) {
  191. opt.selected = true;
  192. }
  193. el.appendChild(opt);
  194. }
  195. this._button.parentNode.replaceChild(el, this._button);
  196. Event.on(el, 'change', this._handleSelect, this, true);
  197. this._button = el;
  198. break;
  199. }
  200. }
  201. });
  202. /**
  203. * @attribute disabled
  204. * @description Set the button into a disabled state
  205. * @type String
  206. */
  207. this.setAttributeConfig('disabled', {
  208. value: attr.disabled || false,
  209. method: function(disabled) {
  210. if (disabled) {
  211. this.addClass('yui-button-disabled');
  212. this.addClass('yui-' + this.get('type') + '-button-disabled');
  213. } else {
  214. this.removeClass('yui-button-disabled');
  215. this.removeClass('yui-' + this.get('type') + '-button-disabled');
  216. }
  217. if (this.get('type') == 'menu') {
  218. this._button.disabled = disabled;
  219. }
  220. }
  221. });
  222. /**
  223. * @attribute label
  224. * @description The text label for the button
  225. * @type String
  226. */
  227. this.setAttributeConfig('label', {
  228. value: attr.label,
  229. method: function(label) {
  230. if (!this._button) {
  231. this._button = this.get('element').getElementsByTagName('a')[0];
  232. }
  233. if (this.get('type') == 'push') {
  234. this._button.innerHTML = label;
  235. }
  236. }
  237. });
  238. /**
  239. * @attribute title
  240. * @description The title of the button
  241. * @type String
  242. */
  243. this.setAttributeConfig('title', {
  244. value: attr.title
  245. });
  246. /**
  247. * @config container
  248. * @description The container that the button is rendered to, handled by Toolbar
  249. * @type String
  250. */
  251. this.setAttributeConfig('container', {
  252. value: null,
  253. writeOnce: true,
  254. method: function(cont) {
  255. this.appendTo(cont);
  256. }
  257. });
  258. },
  259. /**
  260. * @private
  261. * @method _handleSelect
  262. * @description The event fired when a change event gets fired on a select element
  263. * @param {Event} ev The change event.
  264. */
  265. _handleSelect: function(ev) {
  266. var tar = Event.getTarget(ev);
  267. var value = tar.options[tar.selectedIndex].value;
  268. this.fireEvent('change', {type: 'change', value: value });
  269. },
  270. /**
  271. * @method getMenu
  272. * @description A stub function to mimic YAHOO.widget.Button's getMenu method
  273. */
  274. getMenu: function() {
  275. return this.get('menu');
  276. },
  277. /**
  278. * @method destroy
  279. * @description Destroy the button
  280. */
  281. destroy: function() {
  282. Event.purgeElement(this.get('element'), true);
  283. this.get('element').parentNode.removeChild(this.get('element'));
  284. //Brutal Object Destroy
  285. for (var i in this) {
  286. if (Lang.hasOwnProperty(this, i)) {
  287. this[i] = null;
  288. }
  289. }
  290. },
  291. /**
  292. * @method fireEvent
  293. * @description Overridden fireEvent method to prevent DOM events from firing if the button is disabled.
  294. */
  295. fireEvent: function(p_sType, p_aArgs) {
  296. // Disabled buttons should not respond to DOM events
  297. if (this.DOM_EVENTS[p_sType] && this.get('disabled')) {
  298. Event.stopEvent(p_aArgs);
  299. return;
  300. }
  301. YAHOO.widget.ToolbarButton.superclass.fireEvent.call(this, p_sType, p_aArgs);
  302. },
  303. /**
  304. * @method toString
  305. * @description Returns a string representing the toolbar.
  306. * @return {String}
  307. */
  308. toString: function() {
  309. return 'ToolbarButton (' + this.get('id') + ')';
  310. }
  311. });
  312. })();
  313. /**
  314. * @module editor
  315. * @description <p>Creates a rich Toolbar widget based on Button. Primarily used with the Rich Text Editor</p>
  316. * @namespace YAHOO.widget
  317. * @requires yahoo, dom, element, event, toolbarbutton
  318. * @optional container_core, dragdrop
  319. */
  320. (function() {
  321. var Dom = YAHOO.util.Dom,
  322. Event = YAHOO.util.Event,
  323. Lang = YAHOO.lang;
  324. var getButton = function(id) {
  325. var button = id;
  326. if (Lang.isString(id)) {
  327. button = this.getButtonById(id);
  328. }
  329. if (Lang.isNumber(id)) {
  330. button = this.getButtonByIndex(id);
  331. }
  332. if ((!(button instanceof YAHOO.widget.ToolbarButton)) && (!(button instanceof YAHOO.widget.ToolbarButtonAdvanced))) {
  333. button = this.getButtonByValue(id);
  334. }
  335. if ((button instanceof YAHOO.widget.ToolbarButton) || (button instanceof YAHOO.widget.ToolbarButtonAdvanced)) {
  336. return button;
  337. }
  338. return false;
  339. };
  340. /**
  341. * Provides a rich toolbar widget based on the button and menu widgets
  342. * @constructor
  343. * @class Toolbar
  344. * @extends YAHOO.util.Element
  345. * @param {String/HTMLElement} el The element to turn into a toolbar.
  346. * @param {Object} attrs Object liternal containing configuration parameters.
  347. */
  348. YAHOO.widget.Toolbar = function(el, attrs) {
  349. YAHOO.log('Toolbar Initalizing', 'info', 'Toolbar');
  350. YAHOO.log(arguments.length + ' arguments passed to constructor', 'info', 'Toolbar');
  351. if (Lang.isObject(arguments[0]) && !Dom.get(el).nodeType) {
  352. attrs = el;
  353. }
  354. var local_attrs = {};
  355. if (attrs) {
  356. Lang.augmentObject(local_attrs, attrs); //Break the config reference
  357. }
  358. var oConfig = {
  359. element: null,
  360. attributes: local_attrs
  361. };
  362. if (Lang.isString(el) && Dom.get(el)) {
  363. oConfig.element = Dom.get(el);
  364. } else if (Lang.isObject(el) && Dom.get(el) && Dom.get(el).nodeType) {
  365. oConfig.element = Dom.get(el);
  366. }
  367. if (!oConfig.element) {
  368. YAHOO.log('No element defined, creating toolbar container', 'warn', 'Toolbar');
  369. oConfig.element = document.createElement('DIV');
  370. oConfig.element.id = Dom.generateId();
  371. if (local_attrs.container && Dom.get(local_attrs.container)) {
  372. YAHOO.log('Container found in config appending to it (' + Dom.get(local_attrs.container).id + ')', 'info', 'Toolbar');
  373. Dom.get(local_attrs.container).appendChild(oConfig.element);
  374. }
  375. }
  376. if (!oConfig.element.id) {
  377. oConfig.element.id = ((Lang.isString(el)) ? el : Dom.generateId());
  378. YAHOO.log('No element ID defined for toolbar container, creating..', 'warn', 'Toolbar');
  379. }
  380. YAHOO.log('Initing toolbar with id: ' + oConfig.element.id, 'info', 'Toolbar');
  381. var fs = document.createElement('fieldset');
  382. var lg = document.createElement('legend');
  383. lg.innerHTML = 'Toolbar';
  384. fs.appendChild(lg);
  385. var cont = document.createElement('DIV');
  386. oConfig.attributes.cont = cont;
  387. Dom.addClass(cont, 'yui-toolbar-subcont');
  388. fs.appendChild(cont);
  389. oConfig.element.appendChild(fs);
  390. oConfig.element.tabIndex = -1;
  391. oConfig.attributes.element = oConfig.element;
  392. oConfig.attributes.id = oConfig.element.id;
  393. YAHOO.widget.Toolbar.superclass.constructor.call(this, oConfig.element, oConfig.attributes);
  394. };
  395. YAHOO.extend(YAHOO.widget.Toolbar, YAHOO.util.Element, {
  396. /**
  397. * @method _addMenuClasses
  398. * @private
  399. * @description This method is called from Menu's renderEvent to add a few more classes to the menu items
  400. * @param {String} ev The event that fired.
  401. * @param {Array} na Array of event information.
  402. * @param {Object} o Button config object.
  403. */
  404. _addMenuClasses: function(ev, na, o) {
  405. Dom.addClass(this.element, 'yui-toolbar-' + o.get('value') + '-menu');
  406. if (Dom.hasClass(o._button.parentNode.parentNode, 'yui-toolbar-select')) {
  407. Dom.addClass(this.element, 'yui-toolbar-select-menu');
  408. }
  409. var items = this.getItems();
  410. for (var i = 0; i < items.length; i++) {
  411. Dom.addClass(items[i].element, 'yui-toolbar-' + o.get('value') + '-' + ((items[i].value) ? items[i].value.replace(/ /g, '-').toLowerCase() : items[i]._oText.nodeValue.replace(/ /g, '-').toLowerCase()));
  412. Dom.addClass(items[i].element, 'yui-toolbar-' + o.get('value') + '-' + ((items[i].value) ? items[i].value.replace(/ /g, '-') : items[i]._oText.nodeValue.replace(/ /g, '-')));
  413. }
  414. },
  415. /**
  416. * @property buttonType
  417. * @description The default button to use
  418. * @type Object
  419. */
  420. buttonType: YAHOO.widget.ToolbarButton,
  421. /**
  422. * @property dd
  423. * @description The DragDrop instance associated with the Toolbar
  424. * @type Object
  425. */
  426. dd: null,
  427. /**
  428. * @property _colorData
  429. * @description Object reference containing colors hex and text values.
  430. * @type Object
  431. */
  432. _colorData: {
  433. /* {{{ _colorData */
  434. '#111111': 'Obsidian',
  435. '#2D2D2D': 'Dark Gray',
  436. '#434343': 'Shale',
  437. '#5B5B5B': 'Flint',
  438. '#737373': 'Gray',
  439. '#8B8B8B': 'Concrete',
  440. '#A2A2A2': 'Gray',
  441. '#B9B9B9': 'Titanium',
  442. '#000000': 'Black',
  443. '#D0D0D0': 'Light Gray',
  444. '#E6E6E6': 'Silver',
  445. '#FFFFFF': 'White',
  446. '#BFBF00': 'Pumpkin',
  447. '#FFFF00': 'Yellow',
  448. '#FFFF40': 'Banana',
  449. '#FFFF80': 'Pale Yellow',
  450. '#FFFFBF': 'Butter',
  451. '#525330': 'Raw Siena',
  452. '#898A49': 'Mildew',
  453. '#AEA945': 'Olive',
  454. '#7F7F00': 'Paprika',
  455. '#C3BE71': 'Earth',
  456. '#E0DCAA': 'Khaki',
  457. '#FCFAE1': 'Cream',
  458. '#60BF00': 'Cactus',
  459. '#80FF00': 'Chartreuse',
  460. '#A0FF40': 'Green',
  461. '#C0FF80': 'Pale Lime',
  462. '#DFFFBF': 'Light Mint',
  463. '#3B5738': 'Green',
  464. '#668F5A': 'Lime Gray',
  465. '#7F9757': 'Yellow',
  466. '#407F00': 'Clover',
  467. '#8A9B55': 'Pistachio',
  468. '#B7C296': 'Light Jade',
  469. '#E6EBD5': 'Breakwater',
  470. '#00BF00': 'Spring Frost',
  471. '#00FF80': 'Pastel Green',
  472. '#40FFA0': 'Light Emerald',
  473. '#80FFC0': 'Sea Foam',
  474. '#BFFFDF': 'Sea Mist',
  475. '#033D21': 'Dark Forrest',
  476. '#438059': 'Moss',
  477. '#7FA37C': 'Medium Green',
  478. '#007F40': 'Pine',
  479. '#8DAE94': 'Yellow Gray Green',
  480. '#ACC6B5': 'Aqua Lung',
  481. '#DDEBE2': 'Sea Vapor',
  482. '#00BFBF': 'Fog',
  483. '#00FFFF': 'Cyan',
  484. '#40FFFF': 'Turquoise Blue',
  485. '#80FFFF': 'Light Aqua',
  486. '#BFFFFF': 'Pale Cyan',
  487. '#033D3D': 'Dark Teal',
  488. '#347D7E': 'Gray Turquoise',
  489. '#609A9F': 'Green Blue',
  490. '#007F7F': 'Seaweed',
  491. '#96BDC4': 'Green Gray',
  492. '#B5D1D7': 'Soapstone',
  493. '#E2F1F4': 'Light Turquoise',
  494. '#0060BF': 'Summer Sky',
  495. '#0080FF': 'Sky Blue',
  496. '#40A0FF': 'Electric Blue',
  497. '#80C0FF': 'Light Azure',
  498. '#BFDFFF': 'Ice Blue',
  499. '#1B2C48': 'Navy',
  500. '#385376': 'Biscay',
  501. '#57708F': 'Dusty Blue',
  502. '#00407F': 'Sea Blue',
  503. '#7792AC': 'Sky Blue Gray',
  504. '#A8BED1': 'Morning Sky',
  505. '#DEEBF6': 'Vapor',
  506. '#0000BF': 'Deep Blue',
  507. '#0000FF': 'Blue',
  508. '#4040FF': 'Cerulean Blue',
  509. '#8080FF': 'Evening Blue',
  510. '#BFBFFF': 'Light Blue',
  511. '#212143': 'Deep Indigo',
  512. '#373E68': 'Sea Blue',
  513. '#444F75': 'Night Blue',
  514. '#00007F': 'Indigo Blue',
  515. '#585E82': 'Dockside',
  516. '#8687A4': 'Blue Gray',
  517. '#D2D1E1': 'Light Blue Gray',
  518. '#6000BF': 'Neon Violet',
  519. '#8000FF': 'Blue Violet',
  520. '#A040FF': 'Violet Purple',
  521. '#C080FF': 'Violet Dusk',
  522. '#DFBFFF': 'Pale Lavender',
  523. '#302449': 'Cool Shale',
  524. '#54466F': 'Dark Indigo',
  525. '#655A7F': 'Dark Violet',
  526. '#40007F': 'Violet',
  527. '#726284': 'Smoky Violet',
  528. '#9E8FA9': 'Slate Gray',
  529. '#DCD1DF': 'Violet White',
  530. '#BF00BF': 'Royal Violet',
  531. '#FF00FF': 'Fuchsia',
  532. '#FF40FF': 'Magenta',
  533. '#FF80FF': 'Orchid',
  534. '#FFBFFF': 'Pale Magenta',
  535. '#4A234A': 'Dark Purple',
  536. '#794A72': 'Medium Purple',
  537. '#936386': 'Cool Granite',
  538. '#7F007F': 'Purple',
  539. '#9D7292': 'Purple Moon',
  540. '#C0A0B6': 'Pale Purple',
  541. '#ECDAE5': 'Pink Cloud',
  542. '#BF005F': 'Hot Pink',
  543. '#FF007F': 'Deep Pink',
  544. '#FF409F': 'Grape',
  545. '#FF80BF': 'Electric Pink',
  546. '#FFBFDF': 'Pink',
  547. '#451528': 'Purple Red',
  548. '#823857': 'Purple Dino',
  549. '#A94A76': 'Purple Gray',
  550. '#7F003F': 'Rose',
  551. '#BC6F95': 'Antique Mauve',
  552. '#D8A5BB': 'Cool Marble',
  553. '#F7DDE9': 'Pink Granite',
  554. '#C00000': 'Apple',
  555. '#FF0000': 'Fire Truck',
  556. '#FF4040': 'Pale Red',
  557. '#FF8080': 'Salmon',
  558. '#FFC0C0': 'Warm Pink',
  559. '#441415': 'Sepia',
  560. '#82393C': 'Rust',
  561. '#AA4D4E': 'Brick',
  562. '#800000': 'Brick Red',
  563. '#BC6E6E': 'Mauve',
  564. '#D8A3A4': 'Shrimp Pink',
  565. '#F8DDDD': 'Shell Pink',
  566. '#BF5F00': 'Dark Orange',
  567. '#FF7F00': 'Orange',
  568. '#FF9F40': 'Grapefruit',
  569. '#FFBF80': 'Canteloupe',
  570. '#FFDFBF': 'Wax',
  571. '#482C1B': 'Dark Brick',
  572. '#855A40': 'Dirt',
  573. '#B27C51': 'Tan',
  574. '#7F3F00': 'Nutmeg',
  575. '#C49B71': 'Mustard',
  576. '#E1C4A8': 'Pale Tan',
  577. '#FDEEE0': 'Marble'
  578. /* }}} */
  579. },
  580. /**
  581. * @property _colorPicker
  582. * @description The HTML Element containing the colorPicker
  583. * @type HTMLElement
  584. */
  585. _colorPicker: null,
  586. /**
  587. * @property STR_COLLAPSE
  588. * @description String for Toolbar Collapse Button
  589. * @type String
  590. */
  591. STR_COLLAPSE: 'Collapse Toolbar',
  592. /**
  593. * @property STR_SPIN_LABEL
  594. * @description String for spinbutton dynamic label. Note the {VALUE} will be replaced with YAHOO.lang.substitute
  595. * @type String
  596. */
  597. STR_SPIN_LABEL: 'Spin Button with value {VALUE}. Use Control Shift Up Arrow and Control Shift Down arrow keys to increase or decrease the value.',
  598. /**
  599. * @property STR_SPIN_UP
  600. * @description String for spinbutton up
  601. * @type String
  602. */
  603. STR_SPIN_UP: 'Click to increase the value of this input',
  604. /**
  605. * @property STR_SPIN_DOWN
  606. * @description String for spinbutton down
  607. * @type String
  608. */
  609. STR_SPIN_DOWN: 'Click to decrease the value of this input',
  610. /**
  611. * @property _titlebar
  612. * @description Object reference to the titlebar
  613. * @type HTMLElement
  614. */
  615. _titlebar: null,
  616. /**
  617. * @property browser
  618. * @description Standard browser detection
  619. * @type Object
  620. */
  621. browser: YAHOO.env.ua,
  622. /**
  623. * @protected
  624. * @property _buttonList
  625. * @description Internal property list of current buttons in the toolbar
  626. * @type Array
  627. */
  628. _buttonList: null,
  629. /**
  630. * @protected
  631. * @property _buttonGroupList
  632. * @description Internal property list of current button groups in the toolbar
  633. * @type Array
  634. */
  635. _buttonGroupList: null,
  636. /**
  637. * @protected
  638. * @property _sep
  639. * @description Internal reference to the separator HTML Element for cloning
  640. * @type HTMLElement
  641. */
  642. _sep: null,
  643. /**
  644. * @protected
  645. * @property _sepCount
  646. * @description Internal refernce for counting separators, so we can give them a useful class name for styling
  647. * @type Number
  648. */
  649. _sepCount: null,
  650. /**
  651. * @protected
  652. * @property draghandle
  653. * @type HTMLElement
  654. */
  655. _dragHandle: null,
  656. /**
  657. * @protected
  658. * @property _toolbarConfigs
  659. * @type Object
  660. */
  661. _toolbarConfigs: {
  662. renderer: true
  663. },
  664. /**
  665. * @protected
  666. * @property CLASS_CONTAINER
  667. * @description Default CSS class to apply to the toolbar container element
  668. * @type String
  669. */
  670. CLASS_CONTAINER: 'yui-toolbar-container',
  671. /**
  672. * @protected
  673. * @property CLASS_DRAGHANDLE
  674. * @description Default CSS class to apply to the toolbar's drag handle element
  675. * @type String
  676. */
  677. CLASS_DRAGHANDLE: 'yui-toolbar-draghandle',
  678. /**
  679. * @protected
  680. * @property CLASS_SEPARATOR
  681. * @description Default CSS class to apply to all separators in the toolbar
  682. * @type String
  683. */
  684. CLASS_SEPARATOR: 'yui-toolbar-separator',
  685. /**
  686. * @protected
  687. * @property CLASS_DISABLED
  688. * @description Default CSS class to apply when the toolbar is disabled
  689. * @type String
  690. */
  691. CLASS_DISABLED: 'yui-toolbar-disabled',
  692. /**
  693. * @protected
  694. * @property CLASS_PREFIX
  695. * @description Default prefix for dynamically created class names
  696. * @type String
  697. */
  698. CLASS_PREFIX: 'yui-toolbar',
  699. /**
  700. * @method init
  701. * @description The Toolbar class's initialization method
  702. */
  703. init: function(p_oElement, p_oAttributes) {
  704. YAHOO.widget.Toolbar.superclass.init.call(this, p_oElement, p_oAttributes);
  705. },
  706. /**
  707. * @method initAttributes
  708. * @description Initializes all of the configuration attributes used to create
  709. * the toolbar.
  710. * @param {Object} attr Object literal specifying a set of
  711. * configuration attributes used to create the toolbar.
  712. */
  713. initAttributes: function(attr) {
  714. YAHOO.widget.Toolbar.superclass.initAttributes.call(this, attr);
  715. this.addClass(this.CLASS_CONTAINER);
  716. /**
  717. * @attribute buttonType
  718. * @description The buttonType to use (advanced or basic)
  719. * @type String
  720. */
  721. this.setAttributeConfig('buttonType', {
  722. value: attr.buttonType || 'basic',
  723. writeOnce: true,
  724. validator: function(type) {
  725. switch (type) {
  726. case 'advanced':
  727. case 'basic':
  728. return true;
  729. }
  730. return false;
  731. },
  732. method: function(type) {
  733. if (type == 'advanced') {
  734. if (YAHOO.widget.Button) {
  735. this.buttonType = YAHOO.widget.ToolbarButtonAdvanced;
  736. } else {
  737. YAHOO.log('Can not find YAHOO.widget.Button', 'error', 'Toolbar');
  738. this.buttonType = YAHOO.widget.ToolbarButton;
  739. }
  740. } else {
  741. this.buttonType = YAHOO.widget.ToolbarButton;
  742. }
  743. }
  744. });
  745. /**
  746. * @attribute buttons
  747. * @description Object specifying the buttons to include in the toolbar
  748. * Example:
  749. * <code><pre>
  750. * {
  751. * { id: 'b3', type: 'button', label: 'Underline', value: 'underline' },
  752. * { type: 'separator' },
  753. * { id: 'b4', type: 'menu', label: 'Align', value: 'align',
  754. * menu: [
  755. * { text: "Left", value: 'alignleft' },
  756. * { text: "Center", value: 'aligncenter' },
  757. * { text: "Right", value: 'alignright' }
  758. * ]
  759. * }
  760. * }
  761. * </pre></code>
  762. * @type Array
  763. */
  764. this.setAttributeConfig('buttons', {
  765. value: [],
  766. writeOnce: true,
  767. method: function(data) {
  768. for (var i in data) {
  769. if (Lang.hasOwnProperty(data, i)) {
  770. if (data[i].type == 'separator') {
  771. this.addSeparator();
  772. } else if (data[i].group !== undefined) {
  773. this.addButtonGroup(data[i]);
  774. } else {
  775. this.addButton(data[i]);
  776. }
  777. }
  778. }
  779. }
  780. });
  781. /**
  782. * @attribute disabled
  783. * @description Boolean indicating if the toolbar should be disabled. It will also disable the draggable attribute if it is on.
  784. * @default false
  785. * @type Boolean
  786. */
  787. this.setAttributeConfig('disabled', {
  788. value: false,
  789. method: function(disabled) {
  790. if (this.get('disabled') === disabled) {
  791. return false;
  792. }
  793. if (disabled) {
  794. this.addClass(this.CLASS_DISABLED);
  795. this.set('draggable', false);
  796. this.disableAllButtons();
  797. } else {
  798. this.removeClass(this.CLASS_DISABLED);
  799. if (this._configs.draggable._initialConfig.value) {
  800. //Draggable by default, set it back
  801. this.set('draggable', true);
  802. }
  803. this.resetAllButtons();
  804. }
  805. }
  806. });
  807. /**
  808. * @config cont
  809. * @description The container for the toolbar.
  810. * @type HTMLElement
  811. */
  812. this.setAttributeConfig('cont', {
  813. value: attr.cont,
  814. readOnly: true
  815. });
  816. /**
  817. * @attribute grouplabels
  818. * @description Boolean indicating if the toolbar should show the group label's text string.
  819. * @default true
  820. * @type Boolean
  821. */
  822. this.setAttributeConfig('grouplabels', {
  823. value: ((attr.grouplabels === false) ? false : true),
  824. method: function(grouplabels) {
  825. if (grouplabels) {
  826. Dom.removeClass(this.get('cont'), (this.CLASS_PREFIX + '-nogrouplabels'));
  827. } else {
  828. Dom.addClass(this.get('cont'), (this.CLASS_PREFIX + '-nogrouplabels'));
  829. }
  830. }
  831. });
  832. /**
  833. * @attribute titlebar
  834. * @description Boolean indicating if the toolbar should have a titlebar. If
  835. * passed a string, it will use that as the titlebar text
  836. * @default false
  837. * @type Boolean or String
  838. */
  839. this.setAttributeConfig('titlebar', {
  840. value: false,
  841. method: function(titlebar) {
  842. if (titlebar) {
  843. if (this._titlebar && this._titlebar.parentNode) {
  844. this._titlebar.parentNode.removeChild(this._titlebar);
  845. }
  846. this._titlebar = document.createElement('DIV');
  847. this._titlebar.tabIndex = '-1';
  848. Event.on(this._titlebar, 'focus', function() {
  849. this._handleFocus();
  850. }, this, true);
  851. Dom.addClass(this._titlebar, this.CLASS_PREFIX + '-titlebar');
  852. if (Lang.isString(titlebar)) {
  853. var h2 = document.createElement('h2');
  854. h2.tabIndex = '-1';
  855. h2.innerHTML = '<a href="#" tabIndex="0">' + titlebar + '</a>';
  856. this._titlebar.appendChild(h2);
  857. Event.on(h2.firstChild, 'click', function(ev) {
  858. Event.stopEvent(ev);
  859. });
  860. Event.on([h2, h2.firstChild], 'focus', function() {
  861. this._handleFocus();
  862. }, this, true);
  863. }
  864. if (this.get('firstChild')) {
  865. this.insertBefore(this._titlebar, this.get('firstChild'));
  866. } else {
  867. this.appendChild(this._titlebar);
  868. }
  869. if (this.get('collapse')) {
  870. this.set('collapse', true);
  871. }
  872. } else if (this._titlebar) {
  873. if (this._titlebar && this._titlebar.parentNode) {
  874. this._titlebar.parentNode.removeChild(this._titlebar);
  875. }
  876. }
  877. }
  878. });
  879. /**
  880. * @attribute collapse
  881. * @description Boolean indicating if the the titlebar should have a collapse button.
  882. * The collapse button will not remove the toolbar, it will minimize it to the titlebar
  883. * @default false
  884. * @type Boolean
  885. */
  886. this.setAttributeConfig('collapse', {
  887. value: false,
  888. method: function(collapse) {
  889. if (this._titlebar) {
  890. var collapseEl = null;
  891. var el = Dom.getElementsByClassName('collapse', 'span', this._titlebar);
  892. if (collapse) {
  893. if (el.length > 0) {
  894. //There is already a collapse button
  895. return true;
  896. }
  897. collapseEl = document.createElement('SPAN');
  898. collapseEl.innerHTML = 'X';
  899. collapseEl.title = this.STR_COLLAPSE;
  900. Dom.addClass(collapseEl, 'collapse');
  901. this._titlebar.appendChild(collapseEl);
  902. Event.addListener(collapseEl, 'click', function() {
  903. if (Dom.hasClass(this.get('cont').parentNode, 'yui-toolbar-container-collapsed')) {
  904. this.collapse(false); //Expand Toolbar
  905. } else {
  906. this.collapse(); //Collapse Toolbar
  907. }
  908. }, this, true);
  909. } else {
  910. collapseEl = Dom.getElementsByClassName('collapse', 'span', this._titlebar);
  911. if (collapseEl[0]) {
  912. if (Dom.hasClass(this.get('cont').parentNode, 'yui-toolbar-container-collapsed')) {
  913. //We are closed, reopen the titlebar..
  914. this.collapse(false); //Expand Toolbar
  915. }
  916. collapseEl[0].parentNode.removeChild(collapseEl[0]);
  917. }
  918. }
  919. }
  920. }
  921. });
  922. /**
  923. * @attribute draggable
  924. * @description Boolean indicating if the toolbar should be draggable.
  925. * @default false
  926. * @type Boolean
  927. */
  928. this.setAttributeConfig('draggable', {
  929. value: (attr.draggable || false),
  930. method: function(draggable) {
  931. if (draggable && !this.get('titlebar')) {
  932. YAHOO.log('Dragging enabled', 'info', 'Toolbar');
  933. if (!this._dragHandle) {
  934. this._dragHandle = document.createElement('SPAN');
  935. this._dragHandle.innerHTML = '|';
  936. this._dragHandle.setAttribute('title', 'Click to drag the toolbar');
  937. this._dragHandle.id = this.get('id') + '_draghandle';
  938. Dom.addClass(this._dragHandle, this.CLASS_DRAGHANDLE);
  939. if (this.get('cont').hasChildNodes()) {
  940. this.get('cont').insertBefore(this._dragHandle, this.get('cont').firstChild);
  941. } else {
  942. this.get('cont').appendChild(this._dragHandle);
  943. }
  944. this.dd = new YAHOO.util.DD(this.get('id'));
  945. this.dd.setHandleElId(this._dragHandle.id);
  946. }
  947. } else {
  948. YAHOO.log('Dragging disabled', 'info', 'Toolbar');
  949. if (this._dragHandle) {
  950. this._dragHandle.parentNode.removeChild(this._dragHandle);
  951. this._dragHandle = null;
  952. this.dd = null;
  953. }
  954. }
  955. if (this._titlebar) {
  956. if (draggable) {
  957. this.dd = new YAHOO.util.DD(this.get('id'));
  958. this.dd.setHandleElId(this._titlebar);
  959. Dom.addClass(this._titlebar, 'draggable');
  960. } else {
  961. Dom.removeClass(this._titlebar, 'draggable');
  962. if (this.dd) {
  963. this.dd.unreg();
  964. this.dd = null;
  965. }
  966. }
  967. }
  968. },
  969. validator: function(value) {
  970. var ret = true;
  971. if (!YAHOO.util.DD) {
  972. ret = false;
  973. }
  974. return ret;
  975. }
  976. });
  977. },
  978. /**
  979. * @method addButtonGroup
  980. * @description Add a new button group to the toolbar. (uses addButton)
  981. * @param {Object} oGroup Object literal reference to the Groups Config (contains an array of button configs as well as the group label)
  982. */
  983. addButtonGroup: function(oGroup) {
  984. if (!this.get('element')) {
  985. this._queue[this._queue.length] = ['addButtonGroup', arguments];
  986. return false;
  987. }
  988. if (!this.hasClass(this.CLASS_PREFIX + '-grouped')) {
  989. this.addClass(this.CLASS_PREFIX + '-grouped');
  990. }
  991. var div = document.createElement('DIV');
  992. Dom.addClass(div, this.CLASS_PREFIX + '-group');
  993. Dom.addClass(div, this.CLASS_PREFIX + '-group-' + oGroup.group);
  994. if (oGroup.label) {
  995. var label = document.createElement('h3');
  996. label.innerHTML = oGroup.label;
  997. div.appendChild(label);
  998. }
  999. if (!this.get('grouplabels')) {
  1000. Dom.addClass(this.get('cont'), this.CLASS_PREFIX, '-nogrouplabels');
  1001. }
  1002. this.get('cont').appendChild(div);
  1003. //For accessibility, let's put all of the group buttons in an Unordered List
  1004. var ul = document.createElement('ul');
  1005. div.appendChild(ul);
  1006. if (!this._buttonGroupList) {
  1007. this._buttonGroupList = {};
  1008. }
  1009. this._buttonGroupList[oGroup.group] = ul;
  1010. for (var i = 0; i < oGroup.buttons.length; i++) {
  1011. var li = document.createElement('li');
  1012. li.className = this.CLASS_PREFIX + '-groupitem';
  1013. ul.appendChild(li);
  1014. if ((oGroup.buttons[i].type !== undefined) && oGroup.buttons[i].type == 'separator') {
  1015. this.addSeparator(li);
  1016. } else {
  1017. oGroup.buttons[i].container = li;
  1018. this.addButton(oGroup.buttons[i]);
  1019. }
  1020. }
  1021. },
  1022. /**
  1023. * @method addButtonToGroup
  1024. * @description Add a new button to a toolbar group. Buttons supported:
  1025. * push, split, menu, select, color, spin
  1026. * @param {Object} oButton Object literal reference to the Button's Config
  1027. * @param {String} group The Group identifier passed into the initial config
  1028. * @param {HTMLElement} after Optional HTML element to insert this button after in the DOM.
  1029. */
  1030. addButtonToGroup: function(oButton, group, after) {
  1031. var groupCont = this._buttonGroupList[group];
  1032. var li = document.createElement('li');
  1033. li.className = this.CLASS_PREFIX + '-groupitem';
  1034. oButton.container = li;
  1035. this.addButton(oButton, after);
  1036. groupCont.appendChild(li);
  1037. },
  1038. /**
  1039. * @method addButton
  1040. * @description Add a new button to the toolbar. Buttons supported:
  1041. * push, split, menu, select, color, spin
  1042. * @param {Object} oButton Object literal reference to the Button's Config
  1043. * @param {HTMLElement} after Optional HTML element to insert this button after in the DOM.
  1044. */
  1045. addButton: function(oButton, after) {
  1046. if (!this.get('element')) {
  1047. this._queue[this._queue.length] = ['addButton', arguments];
  1048. return false;
  1049. }
  1050. if (!this._buttonList) {
  1051. this._buttonList = [];
  1052. }
  1053. YAHOO.log('Adding button of type: ' + oButton.type, 'info', 'Toolbar');
  1054. if (!oButton.container) {
  1055. oButton.container = this.get('cont');
  1056. }
  1057. if ((oButton.type == 'menu') || (oButton.type == 'split') || (oButton.type == 'select')) {
  1058. if (Lang.isArray(oButton.menu)) {
  1059. for (var i in oButton.menu) {
  1060. if (Lang.hasOwnProperty(oButton.menu, i)) {
  1061. var funcObject = {
  1062. fn: function(ev, x, oMenu) {
  1063. if (!oButton.menucmd) {
  1064. oButton.menucmd = oButton.value;
  1065. }
  1066. oButton.value = ((oMenu.value) ? oMenu.value : oMenu._oText.nodeValue);
  1067. },
  1068. scope: this
  1069. };
  1070. oButton.menu[i].onclick = funcObject;
  1071. }
  1072. }
  1073. }
  1074. }
  1075. var _oButton = {}, skip = false;
  1076. for (var o in oButton) {
  1077. if (Lang.hasOwnProperty(oButton, o)) {
  1078. if (!this._toolbarConfigs[o]) {
  1079. _oButton[o] = oButton[o];
  1080. }
  1081. }
  1082. }
  1083. if (oButton.type == 'select') {
  1084. _oButton.type = 'menu';
  1085. }
  1086. if (oButton.type == 'spin') {
  1087. _oButton.type = 'push';
  1088. }
  1089. if (_oButton.type == 'color') {
  1090. if (YAHOO.widget.Overlay) {
  1091. _oButton = this._makeColorButton(_oButton);
  1092. } else {
  1093. skip = true;
  1094. }
  1095. }
  1096. if (_oButton.menu) {
  1097. if ((YAHOO.widget.Overlay) && (oButton.menu instanceof YAHOO.widget.Overlay)) {
  1098. oButton.menu.showEvent.subscribe(function() {
  1099. this._button = _oButton;
  1100. });
  1101. } else {
  1102. for (var m = 0; m < _oButton.menu.length; m++) {
  1103. if (!_oButton.menu[m].value) {
  1104. _oButton.menu[m].value = _oButton.menu[m].text;
  1105. }
  1106. }
  1107. if (this.browser.webkit) {
  1108. _oButton.focusmenu = false;
  1109. }
  1110. }
  1111. }
  1112. if (skip) {
  1113. oButton = false;
  1114. } else {
  1115. //Add to .get('buttons') manually
  1116. this._configs.buttons.value[this._configs.buttons.value.length] = oButton;
  1117. var tmp = new this.buttonType(_oButton);
  1118. tmp.get('element').tabIndex = '-1';
  1119. tmp.get('element').setAttribute('role', 'button');
  1120. tmp._selected = true;
  1121. if (this.get('disabled')) {
  1122. //Toolbar is disabled, disable the new button too!
  1123. tmp.set('disabled', true);
  1124. }
  1125. if (!oButton.id) {
  1126. oButton.id = tmp.get('id');
  1127. }
  1128. YAHOO.log('Button created (' + oButton.type + ')', 'info', 'Toolbar');
  1129. if (after) {
  1130. var el = tmp.get('element');
  1131. var nextSib = null;
  1132. if (after.get) {
  1133. nextSib = after.get('element').nextSibling;
  1134. } else if (after.nextSibling) {
  1135. nextSib = after.nextSibling;
  1136. }
  1137. if (nextSib) {
  1138. nextSib.parentNode.insertBefore(el, nextSib);
  1139. }
  1140. }
  1141. tmp.addClass(this.CLASS_PREFIX + '-' + tmp.get('value'));
  1142. var icon = document.createElement('span');
  1143. icon.className = this.CLASS_PREFIX + '-icon';
  1144. tmp.get('element').insertBefore(icon, tmp.get('firstChild'));
  1145. if (tmp._button.tagName.toLowerCase() == 'button') {
  1146. tmp.get('element').setAttribute('unselectable', 'on');
  1147. //Replace the Button HTML Element with an a href if it exists
  1148. var a = document.createElement('a');
  1149. a.innerHTML = tmp._button.innerHTML;
  1150. a.href = '#';
  1151. a.tabIndex = '-1';
  1152. Event.on(a, 'click', function(ev) {
  1153. Event.stopEvent(ev);
  1154. });
  1155. tmp._button.parentNode.replaceChild(a, tmp._button);
  1156. tmp._button = a;
  1157. }
  1158. if (oButton.type == 'select') {
  1159. if (tmp._button.tagName.toLowerCase() == 'select') {
  1160. icon.parentNode.removeChild(icon);
  1161. var iel = tmp._button;
  1162. var parEl = tmp.get('element');
  1163. parEl.parentNode.replaceChild(iel, parEl);
  1164. } else {
  1165. //Don't put a class on it if it's a real select element
  1166. tmp.addClass(this.CLASS_PREFIX + '-select');
  1167. }
  1168. }
  1169. if (oButton.type == 'spin') {
  1170. if (!Lang.isArray(oButton.range)) {
  1171. oButton.range = [ 10, 100 ];
  1172. }
  1173. this._makeSpinButton(tmp, oButton);
  1174. }
  1175. tmp.get('element').setAttribute('title', tmp.get('label'));
  1176. if (oButton.type != 'spin') {
  1177. if ((YAHOO.widget.Overlay) && (_oButton.menu instanceof YAHOO.widget.Overlay)) {
  1178. var showPicker = function(ev) {
  1179. var exec = true;
  1180. if (ev.keyCode && (ev.keyCode == 9)) {
  1181. exec = false;
  1182. }
  1183. if (exec) {
  1184. if (this._colorPicker) {
  1185. this._colorPicker._button = oButton.value;
  1186. }
  1187. var menuEL = tmp.getMenu().element;
  1188. if (Dom.getStyle(menuEL, 'visibility') == 'hidden') {
  1189. tmp.getMenu().show();
  1190. } else {
  1191. tmp.getMenu().hide();
  1192. }
  1193. }
  1194. YAHOO.util.Event.stopEvent(ev);
  1195. };
  1196. tmp.on('mousedown', showPicker, oButton, this);
  1197. tmp.on('keydown', showPicker, oButton, this);
  1198. } else if ((oButton.type != 'menu') && (oButton.type != 'select')) {
  1199. tmp.on('keypress', this._buttonClick, oButton, this);
  1200. tmp.on('mousedown', function(ev) {
  1201. YAHOO.util.Event.stopEvent(ev);
  1202. this._buttonClick(ev, oButton);
  1203. }, oButton, this);
  1204. tmp.on('click', function(ev) {
  1205. YAHOO.util.Event.stopEvent(ev);
  1206. });
  1207. } else {
  1208. //Stop the mousedown event so we can trap the selection in the editor!
  1209. tmp.on('mousedown', function(ev) {
  1210. YAHOO.util.Event.stopEvent(ev);
  1211. });
  1212. tmp.on('click', function(ev) {
  1213. YAHOO.util.Event.stopEvent(ev);
  1214. });
  1215. tmp.on('change', function(ev) {
  1216. if (!oButton.menucmd) {
  1217. oButton.menucmd = oButton.value;
  1218. }
  1219. oButton.value = ev.value;
  1220. this._buttonClick(ev, oButton);
  1221. }, this, true);
  1222. var self = this;
  1223. //Hijack the mousedown event in the menu and make it fire a button click..
  1224. tmp.on('appendTo', function() {
  1225. var tmp = this;
  1226. if (tmp.getMenu() && tmp.getMenu().mouseDownEvent) {
  1227. tmp.getMenu().mouseDownEvent.subscribe(function(ev, args) {
  1228. YAHOO.log('mouseDownEvent', 'warn', 'Toolbar');
  1229. var oMenu = args[1];
  1230. YAHOO.util.Event.stopEvent(args[0]);
  1231. tmp._onMenuClick(args[0], tmp);
  1232. if (!oButton.menucmd) {
  1233. oButton.menucmd = oButton.value;
  1234. }
  1235. oButton.value = ((oMenu.value) ? oMenu.value : oMenu._oText.nodeValue);
  1236. self._buttonClick.call(self, args[1], oButton);
  1237. tmp._hideMenu();
  1238. return false;
  1239. });
  1240. tmp.getMenu().clickEvent.subscribe(function(ev, args) {
  1241. YAHOO.log('clickEvent', 'warn', 'Toolbar');
  1242. YAHOO.util.Event.stopEvent(args[0]);
  1243. });
  1244. tmp.getMenu().mouseUpEvent.subscribe(function(ev, args) {
  1245. YAHOO.log('mouseUpEvent', 'warn', 'Toolbar');
  1246. YAHOO.util.Event.stopEvent(args[0]);
  1247. });
  1248. }
  1249. });
  1250. }
  1251. } else {
  1252. //Stop the mousedown event so we can trap the selection in the editor!
  1253. tmp.on('mousedown', function(ev) {
  1254. YAHOO.util.Event.stopEvent(ev);
  1255. });
  1256. tmp.on('click', function(ev) {
  1257. YAHOO.util.Event.stopEvent(ev);
  1258. });
  1259. }
  1260. if (this.browser.ie) {
  1261. /*
  1262. //Add a couple of new events for IE
  1263. tmp.DOM_EVENTS.focusin = true;
  1264. tmp.DOM_EVENTS.focusout = true;
  1265. //Stop them so we don't loose focus in the Editor
  1266. tmp.on('focusin', function(ev) {
  1267. YAHOO.util.Event.stopEvent(ev);
  1268. }, oButton, this);
  1269. tmp.on('focusout', function(ev) {
  1270. YAHOO.util.Event.stopEvent(ev);
  1271. }, oButton, this);
  1272. tmp.on('click', function(ev) {
  1273. YAHOO.util.Event.stopEvent(ev);
  1274. }, oButton, this);
  1275. */
  1276. }
  1277. if (this.browser.webkit) {
  1278. //This will keep the document from gaining focus and the editor from loosing it..
  1279. //Forcefully remove the focus calls in button!
  1280. tmp.hasFocus = function() {
  1281. return true;
  1282. };
  1283. }
  1284. this._buttonList[this._buttonList.length] = tmp;
  1285. if ((oButton.type == 'menu') || (oButton.type == 'split') || (oButton.type == 'select')) {
  1286. if (Lang.isArray(oButton.menu)) {
  1287. YAHOO.log('Button type is (' + oButton.type + '), doing extra renderer work.', 'info', 'Toolbar');
  1288. var menu = tmp.getMenu();
  1289. if (menu && menu.renderEvent) {
  1290. menu.renderEvent.subscribe(this._addMenuClasses, tmp);
  1291. if (oButton.renderer) {
  1292. menu.renderEvent.subscribe(oButton.renderer, tmp);
  1293. }
  1294. }
  1295. }
  1296. }
  1297. }
  1298. return oButton;
  1299. },
  1300. /**
  1301. * @method addSeparator
  1302. * @description Add a new button separator to the toolbar.
  1303. * @param {HTMLElement} cont Optional HTML element to insert this button into.
  1304. * @param {HTMLElement} after Optional HTML element to insert this button after in the DOM.
  1305. */
  1306. addSeparator: function(cont, after) {
  1307. if (!this.get('element')) {
  1308. this._queue[this._queue.length] = ['addSeparator', arguments];
  1309. return false;
  1310. }
  1311. var sepCont = ((cont) ? cont : this.get('cont'));
  1312. if (!this.get('element')) {
  1313. this._queue[this._queue.length] = ['addSeparator', arguments];
  1314. return false;
  1315. }
  1316. if (this._sepCount === null) {
  1317. this._sepCount = 0;
  1318. }
  1319. if (!this._sep) {
  1320. YAHOO.log('Separator does not yet exist, creating', 'info', 'Toolbar');
  1321. this._sep = document.createElement('SPAN');
  1322. Dom.addClass(this._sep, this.CLASS_SEPARATOR);
  1323. this._sep.innerHTML = '|';
  1324. }
  1325. YAHOO.log('Separator does exist, cloning', 'info', 'Toolbar');
  1326. var _sep = this._sep.cloneNode(true);
  1327. this._sepCount++;
  1328. Dom.addClass(_sep, this.CLASS_SEPARATOR + '-' + this._sepCount);
  1329. if (after) {
  1330. var nextSib = null;
  1331. if (after.get) {
  1332. nextSib = after.get('element').nextSibling;
  1333. } else if (after.nextSibling) {
  1334. nextSib = after.nextSibling;
  1335. } else {
  1336. nextSib = after;
  1337. }
  1338. if (nextSib) {
  1339. if (nextSib == after) {
  1340. nextSib.parentNode.appendChild(_sep);
  1341. } else {
  1342. nextSib.parentNode.insertBefore(_sep, nextSib);
  1343. }
  1344. }
  1345. } else {
  1346. sepCont.appendChild(_sep);
  1347. }
  1348. return _sep;
  1349. },
  1350. /**
  1351. * @method _createColorPicker
  1352. * @private
  1353. * @description Creates the core DOM reference to the color picker menu item.
  1354. * @param {String} id the id of the toolbar to prefix this DOM container with.
  1355. */
  1356. _createColorPicker: function(id) {
  1357. if (Dom.get(id + '_colors')) {
  1358. Dom.get(id + '_colors').parentNode.removeChild(Dom.get(id + '_colors'));
  1359. }
  1360. var picker = document.createElement('div');
  1361. picker.className = 'yui-toolbar-colors';
  1362. picker.id = id + '_colors';
  1363. picker.style.display = 'none';
  1364. Event.on(window, 'load', function() {
  1365. document.body.appendChild(picker);
  1366. }, this, true);
  1367. this._colorPicker = picker;
  1368. var html = '';
  1369. for (var i in this._colorData) {
  1370. if (Lang.hasOwnProperty(this._colorData, i)) {
  1371. html += '<a style="background-color: ' + i + '" href="#">' + i.replace('#', '') + '</a>';
  1372. }
  1373. }
  1374. html += '<span><em>X</em><strong></strong></span>';
  1375. window.setTimeout(function() {
  1376. picker.innerHTML = html;
  1377. }, 0);
  1378. Event.on(picker, 'mouseover', function(ev) {
  1379. var picker = this._colorPicker;
  1380. var em = picker.getElementsByTagName('em')[0];
  1381. var strong = picker.getElementsByTagName('strong')[0];
  1382. var tar = Event.getTarget(ev);
  1383. if (tar.tagName.toLowerCase() == 'a') {
  1384. em.style.backgroundColor = tar.style.backgroundColor;
  1385. strong.innerHTML = this._colorData['#' + tar.innerHTML] + '<br>' + tar.innerHTML;
  1386. }
  1387. }, this, true);
  1388. Event.on(picker, 'focus', function(ev) {
  1389. Event.stopEvent(ev);
  1390. });
  1391. Event.on(picker, 'click', function(ev) {
  1392. Event.stopEvent(ev);
  1393. });
  1394. Event.on(picker, 'mousedown', function(ev) {
  1395. Event.stopEvent(ev);
  1396. var tar = Event.getTarget(ev);
  1397. if (tar.tagName.toLowerCase() == 'a') {
  1398. var retVal = this.fireEvent('colorPickerClicked', { type: 'colorPickerClicked', target: this, button: this._colorPicker._button, color: tar.innerHTML, colorName: this._colorData['#' + tar.innerHTML] } );
  1399. if (retVal !== false) {
  1400. var info = {
  1401. color: tar.innerHTML,
  1402. colorName: this._colorData['#' + tar.innerHTML],
  1403. value: this._colorPicker._button
  1404. };
  1405. this.fireEvent('buttonClick', { type: 'buttonClick', target: this.get('element'), button: info });
  1406. }
  1407. this.getButtonByValue(this._colorPicker._button).getMenu().hide();
  1408. }
  1409. }, this, true);
  1410. },
  1411. /**
  1412. * @method _resetColorPicker
  1413. * @private
  1414. * @description Clears the currently selected color or mouseover color in the color picker.
  1415. */
  1416. _resetColorPicker: function() {
  1417. var em = this._colorPicker.getElementsByTagName('em')[0];
  1418. var strong = this._colorPicker.getElementsByTagName('strong')[0];
  1419. em.style.backgroundColor = 'transparent';
  1420. strong.innerHTML = '';
  1421. },
  1422. /**
  1423. * @method _makeColorButton
  1424. * @private
  1425. * @description Called to turn a "color" button into a menu button with an Overlay for the menu.
  1426. * @param {Object} _oButton <a href="YAHOO.widget.ToolbarButton.html">YAHOO.widget.ToolbarButton</a> reference
  1427. */
  1428. _makeColorButton: function(_oButton) {
  1429. if (!this._colorPicker) {
  1430. this._createColorPicker(this.get('id'));
  1431. }
  1432. _oButton.type = 'color';
  1433. _oButton.menu = new YAHOO.widget.Overlay(this.get('id') + '_' + _oButton.value + '_menu', { visible: false, position: 'absolute', iframe: true });
  1434. _oButton.menu.setBody('');
  1435. _oButton.menu.render(this.get('cont'));
  1436. Dom.addClass(_oButton.menu.element, 'yui-button-menu');
  1437. Dom.addClass(_oButton.menu.element, 'yui-color-button-menu');
  1438. _oButton.menu.beforeShowEvent.subscribe(function() {
  1439. _oButton.menu.cfg.setProperty('zindex', 5); //Re Adjust the overlays zIndex.. not sure why.
  1440. _oButton.menu.cfg.setProperty('context', [this.getButtonById(_oButton.id).get('element'), 'tl', 'bl']); //Re Adjust the overlay.. not sure why.
  1441. //Move the DOM reference of the color picker to the Overlay that we are about to show.
  1442. this._resetColorPicker();
  1443. var _p = this._colorPicker;
  1444. if (_p.parentNode) {
  1445. _p.parentNode.removeChild(_p);
  1446. }
  1447. _oButton.menu.setBody('');
  1448. _oButton.menu.appendToBody(_p);
  1449. this._colorPicker.style.display = 'block';
  1450. }, this, true);
  1451. return _oButton;
  1452. },
  1453. /**
  1454. * @private
  1455. * @method _makeSpinButton
  1456. * @description Create a button similar to an OS Spin button.. It has an up/down arrow combo to scroll through a range of int values.
  1457. * @param {Object} _button <a href="YAHOO.widget.ToolbarButton.html">YAHOO.widget.ToolbarButton</a> reference
  1458. * @param {Object} oButton Object literal containing the buttons initial config
  1459. */
  1460. _makeSpinButton: function(_button, oButton) {
  1461. _button.addClass(this.CLASS_PREFIX + '-spinbutton');
  1462. var self = this,
  1463. _par = _button._button.parentNode.parentNode, //parentNode of Button Element for appending child
  1464. range = oButton.range,
  1465. _b1 = document.createElement('a'),
  1466. _b2 = document.createElement('a');
  1467. _b1.href = '#';
  1468. _b2.href = '#';
  1469. _b1.tabIndex = '-1';
  1470. _b2.tabIndex = '-1';
  1471. //Setup the up and down arrows
  1472. _b1.className = 'up';
  1473. _b1.title = this.STR_SPIN_UP;
  1474. _b1.innerHTML = this.STR_SPIN_UP;
  1475. _b2.className = 'down';
  1476. _b2.title = this.STR_SPIN_DOWN;
  1477. _b2.innerHTML = this.STR_SPIN_DOWN;
  1478. //Append them to the container
  1479. _par.appendChild(_b1);
  1480. _par.appendChild(_b2);
  1481. var label = YAHOO.lang.substitute(this.STR_SPIN_LABEL, { VALUE: _button.get('label') });
  1482. _button.set('title', label);
  1483. var cleanVal = function(value) {
  1484. value = ((value < range[0]) ? range[0] : value);
  1485. value = ((value > range[1]) ? range[1] : value);
  1486. return value;
  1487. };
  1488. var br = this.browser;
  1489. var tbar = false;
  1490. var strLabel = this.STR_SPIN_LABEL;
  1491. if (this._titlebar && this._titlebar.firstChild) {
  1492. tbar = this._titlebar.firstChild;
  1493. }
  1494. var _intUp = function(ev) {
  1495. YAHOO.util.Event.stopEvent(ev);
  1496. if (!_button.get('disabled') && (ev.keyCode != 9)) {
  1497. var value = parseInt(_button.get('label'), 10);
  1498. value++;
  1499. value = cleanVal(value);
  1500. _button.set('label', ''+value);
  1501. var label = YAHOO.lang.substitute(strLabel, { VALUE: _button.get('label') });
  1502. _button.set('title', label);
  1503. if (!br.webkit && tbar) {
  1504. //tbar.focus(); //We do this for accessibility, on the re-focus of the element, a screen reader will re-read the title that was just changed
  1505. //_button.focus();
  1506. }
  1507. self._buttonClick(ev, oButton);
  1508. }
  1509. };
  1510. var _intDown = function(ev) {
  1511. YAHOO.util.Event.stopEvent(ev);
  1512. if (!_button.get('disabled') && (ev.keyCode != 9)) {
  1513. var value = parseInt(_button.get('label'), 10);
  1514. value--;
  1515. value = cleanVal(value);
  1516. _button.set('label', ''+value);
  1517. var label = YAHOO.lang.substitute(strLabel, { VALUE: _button.get('label') });
  1518. _button.set('title', label);
  1519. if (!br.webkit && tbar) {
  1520. //tbar.focus(); //We do this for accessibility, on the re-focus