defaulttoolbar.js 39 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067
  1. // Copyright 2008 The Closure Library Authors. All Rights Reserved.
  2. //
  3. // Licensed under the Apache License, Version 2.0 (the "License");
  4. // you may not use this file except in compliance with the License.
  5. // You may obtain a copy of the License at
  6. //
  7. // http://www.apache.org/licenses/LICENSE-2.0
  8. //
  9. // Unless required by applicable law or agreed to in writing, software
  10. // distributed under the License is distributed on an "AS-IS" BASIS,
  11. // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  12. // See the License for the specific language governing permissions and
  13. // limitations under the License.
  14. /**
  15. * @fileoverview Factory functions for creating a default editing toolbar.
  16. *
  17. * @author attila@google.com (Attila Bodis)
  18. * @see ../../demos/editor/editor.html
  19. */
  20. goog.provide('goog.ui.editor.ButtonDescriptor');
  21. goog.provide('goog.ui.editor.DefaultToolbar');
  22. goog.require('goog.asserts');
  23. goog.require('goog.dom');
  24. goog.require('goog.dom.TagName');
  25. goog.require('goog.dom.classlist');
  26. goog.require('goog.editor.Command');
  27. goog.require('goog.style');
  28. goog.require('goog.ui.editor.ToolbarFactory');
  29. goog.require('goog.ui.editor.messages');
  30. goog.require('goog.userAgent');
  31. // Font menu creation.
  32. /** @desc Font menu item caption for the default sans-serif font. */
  33. goog.ui.editor.DefaultToolbar.MSG_FONT_NORMAL = goog.getMsg('Normal');
  34. /** @desc Font menu item caption for the default serif font. */
  35. goog.ui.editor.DefaultToolbar.MSG_FONT_NORMAL_SERIF =
  36. goog.getMsg('Normal / serif');
  37. /**
  38. * Common font descriptors for all locales. Each descriptor has the following
  39. * attributes:
  40. * <ul>
  41. * <li>{@code caption} - Caption to show in the font menu (e.g. 'Tahoma')
  42. * <li>{@code value} - Value for the corresponding 'font-family' CSS style
  43. * (e.g. 'Tahoma, Arial, sans-serif')
  44. * </ul>
  45. * @type {!Array<{caption:string, value:string}>}
  46. * @private
  47. */
  48. goog.ui.editor.DefaultToolbar.FONTS_ = [
  49. {
  50. caption: goog.ui.editor.DefaultToolbar.MSG_FONT_NORMAL,
  51. value: 'arial,sans-serif'
  52. },
  53. {
  54. caption: goog.ui.editor.DefaultToolbar.MSG_FONT_NORMAL_SERIF,
  55. value: 'times new roman,serif'
  56. },
  57. {caption: 'Courier New', value: 'courier new,monospace'},
  58. {caption: 'Georgia', value: 'georgia,serif'},
  59. {caption: 'Trebuchet', value: 'trebuchet ms,sans-serif'},
  60. {caption: 'Verdana', value: 'verdana,sans-serif'}
  61. ];
  62. /**
  63. * Locale-specific font descriptors. The object is a map of locale strings to
  64. * arrays of font descriptors.
  65. * @type {!Object<!Array<{caption:string, value:string}>>}
  66. * @private
  67. */
  68. goog.ui.editor.DefaultToolbar.I18N_FONTS_ = {
  69. 'ja': [
  70. {
  71. caption: '\uff2d\uff33 \uff30\u30b4\u30b7\u30c3\u30af',
  72. value: 'ms pgothic,sans-serif'
  73. },
  74. {caption: '\uff2d\uff33 \uff30\u660e\u671d', value: 'ms pmincho,serif'}, {
  75. caption: '\uff2d\uff33 \u30b4\u30b7\u30c3\u30af',
  76. value: 'ms gothic,monospace'
  77. }
  78. ],
  79. 'ko': [
  80. {caption: '\uad74\ub9bc', value: 'gulim,sans-serif'},
  81. {caption: '\ubc14\ud0d5', value: 'batang,serif'},
  82. {caption: '\uad74\ub9bc\uccb4', value: 'gulimche,monospace'}
  83. ],
  84. 'zh-tw': [
  85. {caption: '\u65b0\u7d30\u660e\u9ad4', value: 'pmingliu,serif'},
  86. {caption: '\u7d30\u660e\u9ad4', value: 'mingliu,serif'}
  87. ],
  88. 'zh-cn': [
  89. {caption: '\u5b8b\u4f53', value: 'simsun,serif'},
  90. {caption: '\u9ed1\u4f53', value: 'simhei,sans-serif'},
  91. {caption: 'MS Song', value: 'ms song,monospace'}
  92. ]
  93. };
  94. /**
  95. * Default locale for font names.
  96. * @type {string}
  97. * @private
  98. */
  99. goog.ui.editor.DefaultToolbar.locale_ = 'en-us';
  100. /**
  101. * Sets the locale for the font names. If not set, defaults to 'en-us'.
  102. * Used only for default creation of font names name. Must be set
  103. * before font name menu is created.
  104. * @param {string} locale Locale to use for the toolbar font names.
  105. */
  106. goog.ui.editor.DefaultToolbar.setLocale = function(locale) {
  107. goog.ui.editor.DefaultToolbar.locale_ = locale;
  108. };
  109. /**
  110. * Initializes the given font menu button by adding default fonts to the menu.
  111. * If goog.ui.editor.DefaultToolbar.setLocale was called to specify a locale
  112. * for which locale-specific default fonts exist, those are added before
  113. * common fonts.
  114. * @param {!goog.ui.Select} button Font menu button.
  115. */
  116. goog.ui.editor.DefaultToolbar.addDefaultFonts = function(button) {
  117. // Normalize locale to lowercase, with a hyphen (see bug 1036165).
  118. var locale =
  119. goog.ui.editor.DefaultToolbar.locale_.replace(/_/, '-').toLowerCase();
  120. // Add locale-specific default fonts, if any.
  121. var fontlist = [];
  122. if (locale in goog.ui.editor.DefaultToolbar.I18N_FONTS_) {
  123. fontlist = goog.ui.editor.DefaultToolbar.I18N_FONTS_[locale];
  124. }
  125. if (fontlist.length) {
  126. goog.ui.editor.ToolbarFactory.addFonts(button, fontlist);
  127. }
  128. // Add locale-independent default fonts.
  129. goog.ui.editor.ToolbarFactory.addFonts(
  130. button, goog.ui.editor.DefaultToolbar.FONTS_);
  131. };
  132. // Font size menu creation.
  133. /** @desc Font size menu item caption for the 'Small' size. */
  134. goog.ui.editor.DefaultToolbar.MSG_FONT_SIZE_SMALL = goog.getMsg('Small');
  135. /** @desc Font size menu item caption for the 'Normal' size. */
  136. goog.ui.editor.DefaultToolbar.MSG_FONT_SIZE_NORMAL = goog.getMsg('Normal');
  137. /** @desc Font size menu item caption for the 'Large' size. */
  138. goog.ui.editor.DefaultToolbar.MSG_FONT_SIZE_LARGE = goog.getMsg('Large');
  139. /** @desc Font size menu item caption for the 'Huge' size. */
  140. goog.ui.editor.DefaultToolbar.MSG_FONT_SIZE_HUGE = goog.getMsg('Huge');
  141. /**
  142. * Font size descriptors, each with the following attributes:
  143. * <ul>
  144. * <li>{@code caption} - Caption to show in the font size menu (e.g. 'Huge')
  145. * <li>{@code value} - Value for the corresponding HTML font size (e.g. 6)
  146. * </ul>
  147. * @type {!Array<{caption:string, value:number}>}
  148. * @private
  149. */
  150. goog.ui.editor.DefaultToolbar.FONT_SIZES_ = [
  151. {caption: goog.ui.editor.DefaultToolbar.MSG_FONT_SIZE_SMALL, value: 1},
  152. {caption: goog.ui.editor.DefaultToolbar.MSG_FONT_SIZE_NORMAL, value: 2},
  153. {caption: goog.ui.editor.DefaultToolbar.MSG_FONT_SIZE_LARGE, value: 4},
  154. {caption: goog.ui.editor.DefaultToolbar.MSG_FONT_SIZE_HUGE, value: 6}
  155. ];
  156. /**
  157. * Initializes the given font size menu button by adding default font sizes to
  158. * it.
  159. * @param {!goog.ui.Select} button Font size menu button.
  160. */
  161. goog.ui.editor.DefaultToolbar.addDefaultFontSizes = function(button) {
  162. goog.ui.editor.ToolbarFactory.addFontSizes(
  163. button, goog.ui.editor.DefaultToolbar.FONT_SIZES_);
  164. };
  165. // Header format menu creation.
  166. /** @desc Caption for "Heading" block format option. */
  167. goog.ui.editor.DefaultToolbar.MSG_FORMAT_HEADING = goog.getMsg('Heading');
  168. /** @desc Caption for "Subheading" block format option. */
  169. goog.ui.editor.DefaultToolbar.MSG_FORMAT_SUBHEADING = goog.getMsg('Subheading');
  170. /** @desc Caption for "Minor heading" block format option. */
  171. goog.ui.editor.DefaultToolbar.MSG_FORMAT_MINOR_HEADING =
  172. goog.getMsg('Minor heading');
  173. /** @desc Caption for "Normal" block format option. */
  174. goog.ui.editor.DefaultToolbar.MSG_FORMAT_NORMAL = goog.getMsg('Normal');
  175. /**
  176. * Format option descriptors, each with the following attributes:
  177. * <ul>
  178. * <li>{@code caption} - Caption to show in the menu (e.g. 'Minor heading')
  179. * <li>{@code command} - Corresponding {@link goog.dom.TagName} (e.g.
  180. * 'H4')
  181. * </ul>
  182. * @type {!Array<{caption: string, command: !goog.dom.TagName}>}
  183. * @private
  184. */
  185. goog.ui.editor.DefaultToolbar.FORMAT_OPTIONS_ = [
  186. {
  187. caption: goog.ui.editor.DefaultToolbar.MSG_FORMAT_HEADING,
  188. command: goog.dom.TagName.H2
  189. },
  190. {
  191. caption: goog.ui.editor.DefaultToolbar.MSG_FORMAT_SUBHEADING,
  192. command: goog.dom.TagName.H3
  193. },
  194. {
  195. caption: goog.ui.editor.DefaultToolbar.MSG_FORMAT_MINOR_HEADING,
  196. command: goog.dom.TagName.H4
  197. },
  198. {
  199. caption: goog.ui.editor.DefaultToolbar.MSG_FORMAT_NORMAL,
  200. command: goog.dom.TagName.P
  201. }
  202. ];
  203. /**
  204. * Initializes the given "Format block" menu button by adding default format
  205. * options to the menu.
  206. * @param {!goog.ui.Select} button "Format block" menu button.
  207. */
  208. goog.ui.editor.DefaultToolbar.addDefaultFormatOptions = function(button) {
  209. goog.ui.editor.ToolbarFactory.addFormatOptions(
  210. button, goog.ui.editor.DefaultToolbar.FORMAT_OPTIONS_);
  211. };
  212. /**
  213. * Creates a {@link goog.ui.Toolbar} containing a default set of editor
  214. * toolbar buttons, and renders it into the given parent element.
  215. * @param {!Element} elem Toolbar parent element.
  216. * @param {boolean=} opt_isRightToLeft Whether the editor chrome is
  217. * right-to-left; defaults to the directionality of the toolbar parent
  218. * element.
  219. * @return {!goog.ui.Toolbar} Default editor toolbar, rendered into the given
  220. * parent element.
  221. * @see goog.ui.editor.DefaultToolbar.DEFAULT_BUTTONS
  222. */
  223. goog.ui.editor.DefaultToolbar.makeDefaultToolbar = function(
  224. elem, opt_isRightToLeft) {
  225. var isRightToLeft = opt_isRightToLeft || goog.style.isRightToLeft(elem);
  226. var buttons = isRightToLeft ?
  227. goog.ui.editor.DefaultToolbar.DEFAULT_BUTTONS_RTL :
  228. goog.ui.editor.DefaultToolbar.DEFAULT_BUTTONS;
  229. return goog.ui.editor.DefaultToolbar.makeToolbar(
  230. buttons, elem, opt_isRightToLeft);
  231. };
  232. /**
  233. * Creates a {@link goog.ui.Toolbar} containing the specified set of
  234. * toolbar buttons, and renders it into the given parent element. Each
  235. * item in the {@code items} array must either be a
  236. * {@link goog.editor.Command} (to create a built-in button) or a subclass
  237. * of {@link goog.ui.Control} (to create a custom control).
  238. * @param {!Array<string|goog.ui.Control>} items Toolbar items; each must
  239. * be a {@link goog.editor.Command} or a {@link goog.ui.Control}.
  240. * @param {!Element} elem Toolbar parent element.
  241. * @param {boolean=} opt_isRightToLeft Whether the editor chrome is
  242. * right-to-left; defaults to the directionality of the toolbar parent
  243. * element.
  244. * @return {!goog.ui.Toolbar} Editor toolbar, rendered into the given parent
  245. * element.
  246. */
  247. goog.ui.editor.DefaultToolbar.makeToolbar = function(
  248. items, elem, opt_isRightToLeft) {
  249. var domHelper = goog.dom.getDomHelper(elem);
  250. var controls = [];
  251. for (var i = 0, button; button = items[i]; i++) {
  252. if (goog.isString(button)) {
  253. button = goog.ui.editor.DefaultToolbar.makeBuiltInToolbarButton(
  254. button, domHelper);
  255. }
  256. if (button) {
  257. controls.push(button);
  258. }
  259. }
  260. return goog.ui.editor.ToolbarFactory.makeToolbar(
  261. controls, elem, opt_isRightToLeft);
  262. };
  263. /**
  264. * Creates an instance of a subclass of {@link goog.ui.Button} for the given
  265. * {@link goog.editor.Command}, or null if no built-in button exists for the
  266. * command. Note that this function is only intended to create built-in
  267. * buttons; please don't try to hack it!
  268. * @param {string} command Editor command ID.
  269. * @param {goog.dom.DomHelper=} opt_domHelper DOM helper, used for DOM
  270. * creation; defaults to the current document if unspecified.
  271. * @return {goog.ui.Button} Toolbar button (null if no built-in button exists
  272. * for the command).
  273. */
  274. goog.ui.editor.DefaultToolbar.makeBuiltInToolbarButton = function(
  275. command, opt_domHelper) {
  276. var button;
  277. var descriptor = goog.ui.editor.DefaultToolbar.buttons_[command];
  278. if (descriptor) {
  279. // Default the factory method to makeToggleButton, since most built-in
  280. // toolbar buttons are toggle buttons. See also
  281. // goog.ui.editor.DefaultToolbar.button_list_.
  282. var factory =
  283. descriptor.factory || goog.ui.editor.ToolbarFactory.makeToggleButton;
  284. var id = descriptor.command;
  285. var tooltip = descriptor.tooltip;
  286. var caption = descriptor.caption;
  287. var classNames = descriptor.classes;
  288. // Default the DOM helper to the one for the current document.
  289. var domHelper = opt_domHelper || goog.dom.getDomHelper();
  290. // Instantiate the button based on the descriptor.
  291. button = factory(id, tooltip, caption, classNames, null, domHelper);
  292. // If this button's state should be queried when updating the toolbar,
  293. // set the button object's queryable property to true.
  294. if (descriptor.queryable) {
  295. button.queryable = true;
  296. }
  297. }
  298. return button;
  299. };
  300. /**
  301. * A set of built-in buttons to display in the default editor toolbar.
  302. * @type {!Array<string>}
  303. */
  304. goog.ui.editor.DefaultToolbar.DEFAULT_BUTTONS = [
  305. goog.editor.Command.IMAGE, goog.editor.Command.LINK, goog.editor.Command.BOLD,
  306. goog.editor.Command.ITALIC, goog.editor.Command.UNORDERED_LIST,
  307. goog.editor.Command.FONT_COLOR, goog.editor.Command.FONT_FACE,
  308. goog.editor.Command.FONT_SIZE, goog.editor.Command.JUSTIFY_LEFT,
  309. goog.editor.Command.JUSTIFY_CENTER, goog.editor.Command.JUSTIFY_RIGHT,
  310. goog.editor.Command.EDIT_HTML
  311. ];
  312. /**
  313. * A set of built-in buttons to display in the default editor toolbar when
  314. * the editor chrome is right-to-left (BiDi mode only).
  315. * @type {!Array<string>}
  316. */
  317. goog.ui.editor.DefaultToolbar.DEFAULT_BUTTONS_RTL = [
  318. goog.editor.Command.IMAGE, goog.editor.Command.LINK, goog.editor.Command.BOLD,
  319. goog.editor.Command.ITALIC, goog.editor.Command.UNORDERED_LIST,
  320. goog.editor.Command.FONT_COLOR, goog.editor.Command.FONT_FACE,
  321. goog.editor.Command.FONT_SIZE, goog.editor.Command.JUSTIFY_RIGHT,
  322. goog.editor.Command.JUSTIFY_CENTER, goog.editor.Command.JUSTIFY_LEFT,
  323. goog.editor.Command.DIR_RTL, goog.editor.Command.DIR_LTR,
  324. goog.editor.Command.EDIT_HTML
  325. ];
  326. /**
  327. * Creates a toolbar button with the given ID, tooltip, and caption. Applies
  328. * any custom CSS class names to the button's caption element. This button
  329. * is designed to be used as the RTL button.
  330. * @param {string} id Button ID; must equal a {@link goog.editor.Command} for
  331. * built-in buttons, anything else for custom buttons.
  332. * @param {string} tooltip Tooltip to be shown on hover.
  333. * @param {goog.ui.ControlContent} caption Button caption.
  334. * @param {string=} opt_classNames CSS class name(s) to apply to the caption
  335. * element.
  336. * @param {goog.ui.ButtonRenderer=} opt_renderer Button renderer; defaults to
  337. * {@link goog.ui.ToolbarButtonRenderer} if unspecified.
  338. * @param {goog.dom.DomHelper=} opt_domHelper DOM helper, used for DOM
  339. * creation; defaults to the current document if unspecified.
  340. * @return {!goog.ui.Button} A toolbar button.
  341. * @private
  342. */
  343. goog.ui.editor.DefaultToolbar.rtlButtonFactory_ = function(
  344. id, tooltip, caption, opt_classNames, opt_renderer, opt_domHelper) {
  345. var button = goog.ui.editor.ToolbarFactory.makeToggleButton(
  346. id, tooltip, caption, opt_classNames, opt_renderer, opt_domHelper);
  347. button.updateFromValue = function(value) {
  348. // Enable/disable right-to-left text editing mode in the toolbar.
  349. var isRtl = !!value;
  350. // Enable/disable a marker class on the toolbar's root element; the rest is
  351. // done using CSS scoping in editortoolbar.css. This changes
  352. // direction-senitive toolbar icons (like indent/outdent)
  353. goog.dom.classlist.enable(
  354. goog.asserts.assert(button.getParent().getElement()),
  355. goog.getCssName('tr-rtl-mode'), isRtl);
  356. button.setChecked(isRtl);
  357. };
  358. return button;
  359. };
  360. /**
  361. * Creates a toolbar button with the given ID, tooltip, and caption. Applies
  362. * any custom CSS class names to the button's caption element. Designed to
  363. * be used to create undo and redo buttons.
  364. * @param {string} id Button ID; must equal a {@link goog.editor.Command} for
  365. * built-in buttons, anything else for custom buttons.
  366. * @param {string} tooltip Tooltip to be shown on hover.
  367. * @param {goog.ui.ControlContent} caption Button caption.
  368. * @param {string=} opt_classNames CSS class name(s) to apply to the caption
  369. * element.
  370. * @param {goog.ui.ButtonRenderer=} opt_renderer Button renderer; defaults to
  371. * {@link goog.ui.ToolbarButtonRenderer} if unspecified.
  372. * @param {goog.dom.DomHelper=} opt_domHelper DOM helper, used for DOM
  373. * creation; defaults to the current document if unspecified.
  374. * @return {!goog.ui.Button} A toolbar button.
  375. * @private
  376. */
  377. goog.ui.editor.DefaultToolbar.undoRedoButtonFactory_ = function(
  378. id, tooltip, caption, opt_classNames, opt_renderer, opt_domHelper) {
  379. var button = goog.ui.editor.ToolbarFactory.makeButton(
  380. id, tooltip, caption, opt_classNames, opt_renderer, opt_domHelper);
  381. button.updateFromValue = function(value) { button.setEnabled(value); };
  382. return button;
  383. };
  384. /**
  385. * Creates a toolbar button with the given ID, tooltip, and caption. Applies
  386. * any custom CSS class names to the button's caption element. Used to create
  387. * a font face button, filled with default fonts.
  388. * @param {string} id Button ID; must equal a {@link goog.editor.Command} for
  389. * built-in buttons, anything else for custom buttons.
  390. * @param {string} tooltip Tooltip to be shown on hover.
  391. * @param {goog.ui.ControlContent} caption Button caption.
  392. * @param {string=} opt_classNames CSS class name(s) to apply to the caption
  393. * element.
  394. * @param {goog.ui.MenuButtonRenderer=} opt_renderer Button renderer; defaults
  395. * to {@link goog.ui.ToolbarMenuButtonRenderer} if unspecified.
  396. * @param {goog.dom.DomHelper=} opt_domHelper DOM helper, used for DOM
  397. * creation; defaults to the current document if unspecified.
  398. * @return {!goog.ui.Button} A toolbar button.
  399. * @private
  400. */
  401. goog.ui.editor.DefaultToolbar.fontFaceFactory_ = function(
  402. id, tooltip, caption, opt_classNames, opt_renderer, opt_domHelper) {
  403. var button = goog.ui.editor.ToolbarFactory.makeSelectButton(
  404. id, tooltip, caption, opt_classNames, opt_renderer, opt_domHelper);
  405. goog.ui.editor.DefaultToolbar.addDefaultFonts(button);
  406. button.setDefaultCaption(goog.ui.editor.DefaultToolbar.MSG_FONT_NORMAL);
  407. // Font options don't have keyboard accelerators.
  408. goog.dom.classlist.add(
  409. goog.asserts.assert(button.getMenu().getContentElement()),
  410. goog.getCssName('goog-menu-noaccel'));
  411. // How to update this button's state.
  412. button.updateFromValue = function(value) {
  413. // Normalize value to null or a non-empty string (sometimes we get
  414. // the empty string, sometimes we get false...), extract the substring
  415. // up to the first comma to get the primary font name, and normalize
  416. // to lowercase. This allows us to map a font spec like "Arial,
  417. // Helvetica, sans-serif" to a font menu item.
  418. // TODO (attila): Try to make this more robust.
  419. var item = null;
  420. if (value && value.length > 0) {
  421. item = /** @type {goog.ui.MenuItem} */ (
  422. button.getMenu().getChild(
  423. goog.ui.editor.ToolbarFactory.getPrimaryFont(value)));
  424. }
  425. var selectedItem = button.getSelectedItem();
  426. if (item != selectedItem) {
  427. button.setSelectedItem(item);
  428. }
  429. };
  430. return button;
  431. };
  432. /**
  433. * Creates a toolbar button with the given ID, tooltip, and caption. Applies
  434. * any custom CSS class names to the button's caption element. Use to create a
  435. * font size button, filled with default font sizes.
  436. * @param {string} id Button ID; must equal a {@link goog.editor.Command} for
  437. * built-in buttons, anything else for custom buttons.
  438. * @param {string} tooltip Tooltip to be shown on hover.
  439. * @param {goog.ui.ControlContent} caption Button caption.
  440. * @param {string=} opt_classNames CSS class name(s) to apply to the caption
  441. * element.
  442. * @param {goog.ui.MenuButtonRenderer=} opt_renderer Button renderer; defaults
  443. * to {@link goog.ui.ToolbarMebuButtonRenderer} if unspecified.
  444. * @param {goog.dom.DomHelper=} opt_domHelper DOM helper, used for DOM
  445. * creation; defaults to the current document if unspecified.
  446. * @return {!goog.ui.Button} A toolbar button.
  447. * @private
  448. */
  449. goog.ui.editor.DefaultToolbar.fontSizeFactory_ = function(
  450. id, tooltip, caption, opt_classNames, opt_renderer, opt_domHelper) {
  451. var button = goog.ui.editor.ToolbarFactory.makeSelectButton(
  452. id, tooltip, caption, opt_classNames, opt_renderer, opt_domHelper);
  453. goog.ui.editor.DefaultToolbar.addDefaultFontSizes(button);
  454. button.setDefaultCaption(goog.ui.editor.DefaultToolbar.MSG_FONT_SIZE_NORMAL);
  455. // Font size options don't have keyboard accelerators.
  456. goog.dom.classlist.add(
  457. goog.asserts.assert(button.getMenu().getContentElement()),
  458. goog.getCssName('goog-menu-noaccel'));
  459. // How to update this button's state.
  460. button.updateFromValue = function(value) {
  461. // Webkit pre-534.7 returns a string like '32px' instead of the equivalent
  462. // integer, so normalize that first.
  463. // NOTE(user): Gecko returns "6" so can't just normalize all
  464. // strings, only ones ending in "px".
  465. if (goog.isString(value) && goog.style.getLengthUnits(value) == 'px') {
  466. value = goog.ui.editor.ToolbarFactory.getLegacySizeFromPx(
  467. parseInt(value, 10));
  468. }
  469. // Normalize value to null or a positive integer (sometimes we get
  470. // the empty string, sometimes we get false, or -1 if the above
  471. // normalization didn't match to a particular 0-7 size)
  472. value = value > 0 ? value : null;
  473. if (value != button.getValue()) {
  474. button.setValue(value);
  475. }
  476. };
  477. return button;
  478. };
  479. /**
  480. * Function to update the state of a color menu button.
  481. * @param {goog.ui.ToolbarColorMenuButton} button The button to which the
  482. * color menu is attached.
  483. * @param {number} color Color value to update to.
  484. * @private
  485. */
  486. goog.ui.editor.DefaultToolbar.colorUpdateFromValue_ = function(button, color) {
  487. var value = color;
  488. try {
  489. if (goog.userAgent.IE) {
  490. // IE returns a number that, converted to hex, is a BGR color.
  491. // Convert from decimal to BGR to RGB.
  492. var hex = '000000' + value.toString(16);
  493. var bgr = hex.substr(hex.length - 6, 6);
  494. value =
  495. '#' + bgr.substring(4, 6) + bgr.substring(2, 4) + bgr.substring(0, 2);
  496. }
  497. if (value != button.getValue()) {
  498. button.setValue(/** @type {string} */ (value));
  499. }
  500. } catch (ex) {
  501. // TODO(attila): Find out when/why this happens.
  502. }
  503. };
  504. /**
  505. * Creates a toolbar button with the given ID, tooltip, and caption. Applies
  506. * any custom CSS class names to the button's caption element. Use to create
  507. * a font color button.
  508. * @param {string} id Button ID; must equal a {@link goog.editor.Command} for
  509. * built-in buttons, anything else for custom buttons.
  510. * @param {string} tooltip Tooltip to be shown on hover.
  511. * @param {goog.ui.ControlContent} caption Button caption.
  512. * @param {string=} opt_classNames CSS class name(s) to apply to the caption
  513. * element.
  514. * @param {goog.ui.ColorMenuButtonRenderer=} opt_renderer Button renderer;
  515. * defaults to {@link goog.ui.ToolbarColorMenuButtonRenderer} if
  516. * unspecified.
  517. * @param {goog.dom.DomHelper=} opt_domHelper DOM helper, used for DOM
  518. * creation; defaults to the current document if unspecified.
  519. * @return {!goog.ui.Button} A toolbar button.
  520. * @private
  521. */
  522. goog.ui.editor.DefaultToolbar.fontColorFactory_ = function(
  523. id, tooltip, caption, opt_classNames, opt_renderer, opt_domHelper) {
  524. var button = goog.ui.editor.ToolbarFactory.makeColorMenuButton(
  525. id, tooltip, caption, opt_classNames, opt_renderer, opt_domHelper);
  526. // Initialize default foreground color.
  527. button.setSelectedColor('#000');
  528. button.updateFromValue =
  529. goog.partial(goog.ui.editor.DefaultToolbar.colorUpdateFromValue_, button);
  530. return button;
  531. };
  532. /**
  533. * Creates a toolbar button with the given ID, tooltip, and caption. Applies
  534. * any custom CSS class names to the button's caption element. Use to create
  535. * a font background color button.
  536. * @param {string} id Button ID; must equal a {@link goog.editor.Command} for
  537. * built-in buttons, anything else for custom buttons.
  538. * @param {string} tooltip Tooltip to be shown on hover.
  539. * @param {goog.ui.ControlContent} caption Button caption.
  540. * @param {string=} opt_classNames CSS class name(s) to apply to the caption
  541. * element.
  542. * @param {goog.ui.ColorMenuButtonRenderer=} opt_renderer Button renderer;
  543. * defaults to {@link goog.ui.ToolbarColorMenuButtonRenderer} if
  544. * unspecified.
  545. * @param {goog.dom.DomHelper=} opt_domHelper DOM helper, used for DOM
  546. * creation; defaults to the current document if unspecified.
  547. * @return {!goog.ui.Button} A toolbar button.
  548. * @private
  549. */
  550. goog.ui.editor.DefaultToolbar.backgroundColorFactory_ = function(
  551. id, tooltip, caption, opt_classNames, opt_renderer, opt_domHelper) {
  552. var button = goog.ui.editor.ToolbarFactory.makeColorMenuButton(
  553. id, tooltip, caption, opt_classNames, opt_renderer, opt_domHelper);
  554. // Initialize default background color.
  555. button.setSelectedColor('#FFF');
  556. button.updateFromValue =
  557. goog.partial(goog.ui.editor.DefaultToolbar.colorUpdateFromValue_, button);
  558. return button;
  559. };
  560. /**
  561. * Creates a toolbar button with the given ID, tooltip, and caption. Applies
  562. * any custom CSS class names to the button's caption element. Use to create
  563. * the format menu, prefilled with default formats.
  564. * @param {string} id Button ID; must equal a {@link goog.editor.Command} for
  565. * built-in buttons, anything else for custom buttons.
  566. * @param {string} tooltip Tooltip to be shown on hover.
  567. * @param {goog.ui.ControlContent} caption Button caption.
  568. * @param {string=} opt_classNames CSS class name(s) to apply to the caption
  569. * element.
  570. * @param {goog.ui.MenuButtonRenderer=} opt_renderer Button renderer;
  571. * defaults to
  572. * {@link goog.ui.ToolbarMenuButtonRenderer} if unspecified.
  573. * @param {goog.dom.DomHelper=} opt_domHelper DOM helper, used for DOM
  574. * creation; defaults to the current document if unspecified.
  575. * @return {!goog.ui.Button} A toolbar button.
  576. * @private
  577. */
  578. goog.ui.editor.DefaultToolbar.formatBlockFactory_ = function(
  579. id, tooltip, caption, opt_classNames, opt_renderer, opt_domHelper) {
  580. var button = goog.ui.editor.ToolbarFactory.makeSelectButton(
  581. id, tooltip, caption, opt_classNames, opt_renderer, opt_domHelper);
  582. goog.ui.editor.DefaultToolbar.addDefaultFormatOptions(button);
  583. button.setDefaultCaption(goog.ui.editor.DefaultToolbar.MSG_FORMAT_NORMAL);
  584. // Format options don't have keyboard accelerators.
  585. goog.dom.classlist.add(
  586. goog.asserts.assert(button.getMenu().getContentElement()),
  587. goog.getCssName('goog-menu-noaccel'));
  588. // How to update this button.
  589. button.updateFromValue = function(value) {
  590. // Normalize value to null or a nonempty string (sometimes we get
  591. // the empty string, sometimes we get false...)
  592. value = value && value.length > 0 ? value : null;
  593. if (value != button.getValue()) {
  594. button.setValue(value);
  595. }
  596. };
  597. return button;
  598. };
  599. // Messages used for tooltips and captions.
  600. /** @desc Format menu tooltip. */
  601. goog.ui.editor.DefaultToolbar.MSG_FORMAT_BLOCK_TITLE = goog.getMsg('Format');
  602. /** @desc Format menu caption. */
  603. goog.ui.editor.DefaultToolbar.MSG_FORMAT_BLOCK_CAPTION = goog.getMsg('Format');
  604. /** @desc Undo button tooltip. */
  605. goog.ui.editor.DefaultToolbar.MSG_UNDO_TITLE = goog.getMsg('Undo');
  606. /** @desc Redo button tooltip. */
  607. goog.ui.editor.DefaultToolbar.MSG_REDO_TITLE = goog.getMsg('Redo');
  608. /** @desc Font menu tooltip. */
  609. goog.ui.editor.DefaultToolbar.MSG_FONT_FACE_TITLE = goog.getMsg('Font');
  610. /** @desc Font size menu tooltip. */
  611. goog.ui.editor.DefaultToolbar.MSG_FONT_SIZE_TITLE = goog.getMsg('Font size');
  612. /** @desc Text foreground color menu tooltip. */
  613. goog.ui.editor.DefaultToolbar.MSG_FONT_COLOR_TITLE = goog.getMsg('Text color');
  614. /** @desc Bold button tooltip. */
  615. goog.ui.editor.DefaultToolbar.MSG_BOLD_TITLE = goog.getMsg('Bold');
  616. /** @desc Italic button tooltip. */
  617. goog.ui.editor.DefaultToolbar.MSG_ITALIC_TITLE = goog.getMsg('Italic');
  618. /** @desc Underline button tooltip. */
  619. goog.ui.editor.DefaultToolbar.MSG_UNDERLINE_TITLE = goog.getMsg('Underline');
  620. /** @desc Text background color menu tooltip. */
  621. goog.ui.editor.DefaultToolbar.MSG_BACKGROUND_COLOR_TITLE =
  622. goog.getMsg('Text background color');
  623. /** @desc Link button tooltip. */
  624. goog.ui.editor.DefaultToolbar.MSG_LINK_TITLE =
  625. goog.getMsg('Add or remove link');
  626. /** @desc Numbered list button tooltip. */
  627. goog.ui.editor.DefaultToolbar.MSG_ORDERED_LIST_TITLE =
  628. goog.getMsg('Numbered list');
  629. /** @desc Bullet list button tooltip. */
  630. goog.ui.editor.DefaultToolbar.MSG_UNORDERED_LIST_TITLE =
  631. goog.getMsg('Bullet list');
  632. /** @desc Outdent button tooltip. */
  633. goog.ui.editor.DefaultToolbar.MSG_OUTDENT_TITLE =
  634. goog.getMsg('Decrease indent');
  635. /** @desc Indent button tooltip. */
  636. goog.ui.editor.DefaultToolbar.MSG_INDENT_TITLE = goog.getMsg('Increase indent');
  637. /** @desc Align left button tooltip. */
  638. goog.ui.editor.DefaultToolbar.MSG_ALIGN_LEFT_TITLE = goog.getMsg('Align left');
  639. /** @desc Align center button tooltip. */
  640. goog.ui.editor.DefaultToolbar.MSG_ALIGN_CENTER_TITLE =
  641. goog.getMsg('Align center');
  642. /** @desc Align right button tooltip. */
  643. goog.ui.editor.DefaultToolbar.MSG_ALIGN_RIGHT_TITLE =
  644. goog.getMsg('Align right');
  645. /** @desc Justify button tooltip. */
  646. goog.ui.editor.DefaultToolbar.MSG_JUSTIFY_TITLE = goog.getMsg('Justify');
  647. /** @desc Remove formatting button tooltip. */
  648. goog.ui.editor.DefaultToolbar.MSG_REMOVE_FORMAT_TITLE =
  649. goog.getMsg('Remove formatting');
  650. /** @desc Insert image button tooltip. */
  651. goog.ui.editor.DefaultToolbar.MSG_IMAGE_TITLE = goog.getMsg('Insert image');
  652. /** @desc Strike through button tooltip. */
  653. goog.ui.editor.DefaultToolbar.MSG_STRIKE_THROUGH_TITLE =
  654. goog.getMsg('Strikethrough');
  655. /** @desc Left-to-right button tooltip. */
  656. goog.ui.editor.DefaultToolbar.MSG_DIR_LTR_TITLE = goog.getMsg('Left-to-right');
  657. /** @desc Right-to-left button tooltip. */
  658. goog.ui.editor.DefaultToolbar.MSG_DIR_RTL_TITLE = goog.getMsg('Right-to-left');
  659. /** @desc Blockquote button tooltip. */
  660. goog.ui.editor.DefaultToolbar.MSG_BLOCKQUOTE_TITLE = goog.getMsg('Quote');
  661. /** @desc Edit HTML button tooltip. */
  662. goog.ui.editor.DefaultToolbar.MSG_EDIT_HTML_TITLE =
  663. goog.getMsg('Edit HTML source');
  664. /** @desc Subscript button tooltip. */
  665. goog.ui.editor.DefaultToolbar.MSG_SUBSCRIPT = goog.getMsg('Subscript');
  666. /** @desc Superscript button tooltip. */
  667. goog.ui.editor.DefaultToolbar.MSG_SUPERSCRIPT = goog.getMsg('Superscript');
  668. /** @desc Edit HTML button caption. */
  669. goog.ui.editor.DefaultToolbar.MSG_EDIT_HTML_CAPTION = goog.getMsg('Edit HTML');
  670. /**
  671. * Map of {@code goog.editor.Command}s to toolbar button descriptor objects,
  672. * each of which has the following attributes:
  673. * <ul>
  674. * <li>{@code command} - The command corresponding to the
  675. * button (mandatory)
  676. * <li>{@code tooltip} - Tooltip text (optional); if unspecified, the button
  677. * has no hover text
  678. * <li>{@code caption} - Caption to display on the button (optional); if
  679. * unspecified, the button has no text caption
  680. * <li>{@code classes} - CSS class name(s) to be applied to the button's
  681. * element when rendered (optional); if unspecified, defaults to
  682. * 'tr-icon'
  683. * plus 'tr-' followed by the command ID, but without any leading '+'
  684. * character (e.g. if the command ID is '+undo', then {@code classes}
  685. * defaults to 'tr-icon tr-undo')
  686. * <li>{@code factory} - factory function used to create the button, which
  687. * must accept {@code id}, {@code tooltip}, {@code caption}, and
  688. * {@code classes} as arguments, and must return an instance of
  689. * {@link goog.ui.Button} or an appropriate subclass (optional); if
  690. * unspecified, defaults to
  691. * {@link goog.ui.editor.DefaultToolbar.makeToggleButton},
  692. * since most built-in toolbar buttons are toggle buttons
  693. * <li>(@code queryable} - Whether the button's state should be queried
  694. * when updating the toolbar (optional).
  695. * </ul>
  696. * Note that this object is only used for creating toolbar buttons for
  697. * built-in editor commands; custom buttons aren't listed here. Please don't
  698. * try to hack this!
  699. * @private {!Object<!goog.ui.editor.ButtonDescriptor>}.
  700. */
  701. goog.ui.editor.DefaultToolbar.buttons_ = {};
  702. /**
  703. * @typedef {{command: string, tooltip: ?string,
  704. * caption: ?goog.ui.ControlContent, classes: ?string,
  705. * factory: ?function(string, string, goog.ui.ControlContent, ?string,
  706. * goog.ui.ButtonRenderer, goog.dom.DomHelper):goog.ui.Button,
  707. * queryable:?boolean}}
  708. */
  709. goog.ui.editor.ButtonDescriptor;
  710. /**
  711. * Built-in toolbar button descriptors. See
  712. * {@link goog.ui.editor.DefaultToolbar.buttons_} for details on button
  713. * descriptor objects. This array is processed at JS parse time; each item is
  714. * inserted into {@link goog.ui.editor.DefaultToolbar.buttons_}, and the array
  715. * itself is deleted and (hopefully) garbage-collected.
  716. * @private {Array<!goog.ui.editor.ButtonDescriptor>}
  717. */
  718. goog.ui.editor.DefaultToolbar.button_list_ = [
  719. {
  720. command: goog.editor.Command.UNDO,
  721. tooltip: goog.ui.editor.DefaultToolbar.MSG_UNDO_TITLE,
  722. classes: goog.getCssName('tr-icon') + ' ' + goog.getCssName('tr-undo'),
  723. factory: goog.ui.editor.DefaultToolbar.undoRedoButtonFactory_,
  724. queryable: true
  725. },
  726. {
  727. command: goog.editor.Command.REDO,
  728. tooltip: goog.ui.editor.DefaultToolbar.MSG_REDO_TITLE,
  729. classes: goog.getCssName('tr-icon') + ' ' + goog.getCssName('tr-redo'),
  730. factory: goog.ui.editor.DefaultToolbar.undoRedoButtonFactory_,
  731. queryable: true
  732. },
  733. {
  734. command: goog.editor.Command.FONT_FACE,
  735. tooltip: goog.ui.editor.DefaultToolbar.MSG_FONT_FACE_TITLE,
  736. classes: goog.getCssName('tr-fontName'),
  737. factory: goog.ui.editor.DefaultToolbar.fontFaceFactory_,
  738. queryable: true
  739. },
  740. {
  741. command: goog.editor.Command.FONT_SIZE,
  742. tooltip: goog.ui.editor.DefaultToolbar.MSG_FONT_SIZE_TITLE,
  743. classes: goog.getCssName('tr-fontSize'),
  744. factory: goog.ui.editor.DefaultToolbar.fontSizeFactory_,
  745. queryable: true
  746. },
  747. {
  748. command: goog.editor.Command.BOLD,
  749. tooltip: goog.ui.editor.DefaultToolbar.MSG_BOLD_TITLE,
  750. classes: goog.getCssName('tr-icon') + ' ' + goog.getCssName('tr-bold'),
  751. queryable: true
  752. },
  753. {
  754. command: goog.editor.Command.ITALIC,
  755. tooltip: goog.ui.editor.DefaultToolbar.MSG_ITALIC_TITLE,
  756. classes: goog.getCssName('tr-icon') + ' ' + goog.getCssName('tr-italic'),
  757. queryable: true
  758. },
  759. {
  760. command: goog.editor.Command.UNDERLINE,
  761. tooltip: goog.ui.editor.DefaultToolbar.MSG_UNDERLINE_TITLE,
  762. classes: goog.getCssName('tr-icon') + ' ' + goog.getCssName('tr-underline'),
  763. queryable: true
  764. },
  765. {
  766. command: goog.editor.Command.FONT_COLOR,
  767. tooltip: goog.ui.editor.DefaultToolbar.MSG_FONT_COLOR_TITLE,
  768. classes: goog.getCssName('tr-icon') + ' ' + goog.getCssName('tr-foreColor'),
  769. factory: goog.ui.editor.DefaultToolbar.fontColorFactory_,
  770. queryable: true
  771. },
  772. {
  773. command: goog.editor.Command.BACKGROUND_COLOR,
  774. tooltip: goog.ui.editor.DefaultToolbar.MSG_BACKGROUND_COLOR_TITLE,
  775. classes: goog.getCssName('tr-icon') + ' ' + goog.getCssName('tr-backColor'),
  776. factory: goog.ui.editor.DefaultToolbar.backgroundColorFactory_,
  777. queryable: true
  778. },
  779. {
  780. command: goog.editor.Command.LINK,
  781. tooltip: goog.ui.editor.DefaultToolbar.MSG_LINK_TITLE,
  782. caption: goog.ui.editor.messages.MSG_LINK_CAPTION,
  783. classes: goog.getCssName('tr-link'),
  784. queryable: true
  785. },
  786. {
  787. command: goog.editor.Command.ORDERED_LIST,
  788. tooltip: goog.ui.editor.DefaultToolbar.MSG_ORDERED_LIST_TITLE,
  789. classes: goog.getCssName('tr-icon') + ' ' +
  790. goog.getCssName('tr-insertOrderedList'),
  791. queryable: true
  792. },
  793. {
  794. command: goog.editor.Command.UNORDERED_LIST,
  795. tooltip: goog.ui.editor.DefaultToolbar.MSG_UNORDERED_LIST_TITLE,
  796. classes: goog.getCssName('tr-icon') + ' ' +
  797. goog.getCssName('tr-insertUnorderedList'),
  798. queryable: true
  799. },
  800. {
  801. command: goog.editor.Command.OUTDENT,
  802. tooltip: goog.ui.editor.DefaultToolbar.MSG_OUTDENT_TITLE,
  803. classes: goog.getCssName('tr-icon') + ' ' + goog.getCssName('tr-outdent'),
  804. factory: goog.ui.editor.ToolbarFactory.makeButton
  805. },
  806. {
  807. command: goog.editor.Command.INDENT,
  808. tooltip: goog.ui.editor.DefaultToolbar.MSG_INDENT_TITLE,
  809. classes: goog.getCssName('tr-icon') + ' ' + goog.getCssName('tr-indent'),
  810. factory: goog.ui.editor.ToolbarFactory.makeButton
  811. },
  812. {
  813. command: goog.editor.Command.JUSTIFY_LEFT,
  814. tooltip: goog.ui.editor.DefaultToolbar.MSG_ALIGN_LEFT_TITLE,
  815. classes:
  816. goog.getCssName('tr-icon') + ' ' + goog.getCssName('tr-justifyLeft'),
  817. queryable: true
  818. },
  819. {
  820. command: goog.editor.Command.JUSTIFY_CENTER,
  821. tooltip: goog.ui.editor.DefaultToolbar.MSG_ALIGN_CENTER_TITLE,
  822. classes:
  823. goog.getCssName('tr-icon') + ' ' + goog.getCssName('tr-justifyCenter'),
  824. queryable: true
  825. },
  826. {
  827. command: goog.editor.Command.JUSTIFY_RIGHT,
  828. tooltip: goog.ui.editor.DefaultToolbar.MSG_ALIGN_RIGHT_TITLE,
  829. classes:
  830. goog.getCssName('tr-icon') + ' ' + goog.getCssName('tr-justifyRight'),
  831. queryable: true
  832. },
  833. {
  834. command: goog.editor.Command.JUSTIFY_FULL,
  835. tooltip: goog.ui.editor.DefaultToolbar.MSG_JUSTIFY_TITLE,
  836. classes:
  837. goog.getCssName('tr-icon') + ' ' + goog.getCssName('tr-justifyFull'),
  838. queryable: true
  839. },
  840. {
  841. command: goog.editor.Command.REMOVE_FORMAT,
  842. tooltip: goog.ui.editor.DefaultToolbar.MSG_REMOVE_FORMAT_TITLE,
  843. classes:
  844. goog.getCssName('tr-icon') + ' ' + goog.getCssName('tr-removeFormat'),
  845. factory: goog.ui.editor.ToolbarFactory.makeButton
  846. },
  847. {
  848. command: goog.editor.Command.IMAGE,
  849. tooltip: goog.ui.editor.DefaultToolbar.MSG_IMAGE_TITLE,
  850. classes: goog.getCssName('tr-icon') + ' ' + goog.getCssName('tr-image'),
  851. factory: goog.ui.editor.ToolbarFactory.makeButton
  852. },
  853. {
  854. command: goog.editor.Command.STRIKE_THROUGH,
  855. tooltip: goog.ui.editor.DefaultToolbar.MSG_STRIKE_THROUGH_TITLE,
  856. classes:
  857. goog.getCssName('tr-icon') + ' ' + goog.getCssName('tr-strikeThrough'),
  858. queryable: true
  859. },
  860. {
  861. command: goog.editor.Command.SUBSCRIPT,
  862. tooltip: goog.ui.editor.DefaultToolbar.MSG_SUBSCRIPT,
  863. classes: goog.getCssName('tr-icon') + ' ' + goog.getCssName('tr-subscript'),
  864. queryable: true
  865. },
  866. {
  867. command: goog.editor.Command.SUPERSCRIPT,
  868. tooltip: goog.ui.editor.DefaultToolbar.MSG_SUPERSCRIPT,
  869. classes:
  870. goog.getCssName('tr-icon') + ' ' + goog.getCssName('tr-superscript'),
  871. queryable: true
  872. },
  873. {
  874. command: goog.editor.Command.DIR_LTR,
  875. tooltip: goog.ui.editor.DefaultToolbar.MSG_DIR_LTR_TITLE,
  876. classes: goog.getCssName('tr-icon') + ' ' + goog.getCssName('tr-ltr'),
  877. queryable: true
  878. },
  879. {
  880. command: goog.editor.Command.DIR_RTL,
  881. tooltip: goog.ui.editor.DefaultToolbar.MSG_DIR_RTL_TITLE,
  882. classes: goog.getCssName('tr-icon') + ' ' + goog.getCssName('tr-rtl'),
  883. factory: goog.ui.editor.DefaultToolbar.rtlButtonFactory_,
  884. queryable: true
  885. },
  886. {
  887. command: goog.editor.Command.BLOCKQUOTE,
  888. tooltip: goog.ui.editor.DefaultToolbar.MSG_BLOCKQUOTE_TITLE,
  889. classes:
  890. goog.getCssName('tr-icon') + ' ' + goog.getCssName('tr-BLOCKQUOTE'),
  891. queryable: true
  892. },
  893. {
  894. command: goog.editor.Command.FORMAT_BLOCK,
  895. tooltip: goog.ui.editor.DefaultToolbar.MSG_FORMAT_BLOCK_TITLE,
  896. caption: goog.ui.editor.DefaultToolbar.MSG_FORMAT_BLOCK_CAPTION,
  897. classes: goog.getCssName('tr-formatBlock'),
  898. factory: goog.ui.editor.DefaultToolbar.formatBlockFactory_,
  899. queryable: true
  900. },
  901. {
  902. command: goog.editor.Command.EDIT_HTML,
  903. tooltip: goog.ui.editor.DefaultToolbar.MSG_EDIT_HTML_TITLE,
  904. caption: goog.ui.editor.DefaultToolbar.MSG_EDIT_HTML_CAPTION,
  905. classes: goog.getCssName('tr-editHtml'),
  906. factory: goog.ui.editor.ToolbarFactory.makeButton
  907. }
  908. ];
  909. (function() {
  910. // Create the goog.ui.editor.DefaultToolbar.buttons_ map from
  911. // goog.ui.editor.DefaultToolbar.button_list_.
  912. for (var i = 0, button;
  913. button = goog.ui.editor.DefaultToolbar.button_list_[i]; i++) {
  914. goog.ui.editor.DefaultToolbar.buttons_[button.command] = button;
  915. }
  916. // goog.ui.editor.DefaultToolbar.button_list_ is no longer needed
  917. // once the map is ready.
  918. goog.ui.editor.DefaultToolbar.button_list_ = null;
  919. })();