helloworlddialog.js 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  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 An example of how to write a dialog to be opened by a plugin.
  16. *
  17. */
  18. goog.provide('goog.demos.editor.HelloWorldDialog');
  19. goog.provide('goog.demos.editor.HelloWorldDialog.OkEvent');
  20. goog.require('goog.dom.TagName');
  21. goog.require('goog.events.Event');
  22. goog.require('goog.string');
  23. goog.require('goog.ui.editor.AbstractDialog');
  24. // *** Public interface ***************************************************** //
  25. /**
  26. * Creates a dialog to let the user enter a customized hello world message.
  27. * @param {goog.dom.DomHelper} domHelper DomHelper to be used to create the
  28. * dialog's dom structure.
  29. * @constructor
  30. * @extends {goog.ui.editor.AbstractDialog}
  31. * @final
  32. */
  33. goog.demos.editor.HelloWorldDialog = function(domHelper) {
  34. goog.ui.editor.AbstractDialog.call(this, domHelper);
  35. };
  36. goog.inherits(
  37. goog.demos.editor.HelloWorldDialog, goog.ui.editor.AbstractDialog);
  38. // *** Event **************************************************************** //
  39. /**
  40. * OK event object for the hello world dialog.
  41. * @param {string} message Customized hello world message chosen by the user.
  42. * @constructor
  43. * @extends {goog.events.Event}
  44. * @final
  45. */
  46. goog.demos.editor.HelloWorldDialog.OkEvent = function(message) {
  47. this.message = message;
  48. };
  49. goog.inherits(goog.demos.editor.HelloWorldDialog.OkEvent, goog.events.Event);
  50. /**
  51. * Event type.
  52. * @type {goog.ui.editor.AbstractDialog.EventType}
  53. * @override
  54. */
  55. goog.demos.editor.HelloWorldDialog.OkEvent.prototype.type =
  56. goog.ui.editor.AbstractDialog.EventType.OK;
  57. /**
  58. * Customized hello world message chosen by the user.
  59. * @type {string}
  60. */
  61. goog.demos.editor.HelloWorldDialog.OkEvent.prototype.message;
  62. // *** Protected interface ************************************************** //
  63. /** @override */
  64. goog.demos.editor.HelloWorldDialog.prototype.createDialogControl = function() {
  65. var builder = new goog.ui.editor.AbstractDialog.Builder(this);
  66. /** @desc Title of the hello world dialog. */
  67. var MSG_HELLO_WORLD_DIALOG_TITLE = goog.getMsg('Add a Hello World message');
  68. builder.setTitle(MSG_HELLO_WORLD_DIALOG_TITLE)
  69. .setContent(this.createContent_());
  70. return builder.build();
  71. };
  72. /**
  73. * Creates and returns the event object to be used when dispatching the OK
  74. * event to listeners, or returns null to prevent the dialog from closing.
  75. * @param {goog.events.Event} e The event object dispatched by the wrapped
  76. * dialog.
  77. * @return {goog.demos.editor.HelloWorldDialog.OkEvent} The event object to be
  78. * used when dispatching the OK event to listeners.
  79. * @protected
  80. * @override
  81. */
  82. goog.demos.editor.HelloWorldDialog.prototype.createOkEvent = function(e) {
  83. var message = this.getMessage_();
  84. if (message &&
  85. goog.demos.editor.HelloWorldDialog.isValidHelloWorld_(message)) {
  86. return new goog.demos.editor.HelloWorldDialog.OkEvent(message);
  87. } else {
  88. /** @desc Error message telling the user why their message was rejected. */
  89. var MSG_HELLO_WORLD_DIALOG_ERROR =
  90. goog.getMsg('Your message must contain the words "hello" and "world".');
  91. this.dom.getWindow().alert(MSG_HELLO_WORLD_DIALOG_ERROR);
  92. return null; // Prevents the dialog from closing.
  93. }
  94. };
  95. // *** Private implementation *********************************************** //
  96. /**
  97. * Input element where the user will type their hello world message.
  98. * @type {Element}
  99. * @private
  100. */
  101. goog.demos.editor.HelloWorldDialog.prototype.input_;
  102. /**
  103. * Creates the DOM structure that makes up the dialog's content area.
  104. * @return {Element} The DOM structure that makes up the dialog's content area.
  105. * @private
  106. */
  107. goog.demos.editor.HelloWorldDialog.prototype.createContent_ = function() {
  108. /** @desc Sample hello world message to prepopulate the dialog with. */
  109. var MSG_HELLO_WORLD_DIALOG_SAMPLE = goog.getMsg('Hello, world!');
  110. this.input_ = this.dom.createDom(
  111. goog.dom.TagName.INPUT, {size: 25, value: MSG_HELLO_WORLD_DIALOG_SAMPLE});
  112. /** @desc Prompt telling the user to enter a hello world message. */
  113. var MSG_HELLO_WORLD_DIALOG_PROMPT =
  114. goog.getMsg('Enter your Hello World message');
  115. return this.dom.createDom(
  116. goog.dom.TagName.DIV, null, [MSG_HELLO_WORLD_DIALOG_PROMPT, this.input_]);
  117. };
  118. /**
  119. * Returns the hello world message currently typed into the dialog's input.
  120. * @return {?string} The hello world message currently typed into the dialog's
  121. * input, or null if called before the input is created.
  122. * @private
  123. */
  124. goog.demos.editor.HelloWorldDialog.prototype.getMessage_ = function() {
  125. return this.input_ && this.input_.value;
  126. };
  127. /**
  128. * Returns whether or not the given message contains the strings "hello" and
  129. * "world". Case-insensitive and order doesn't matter.
  130. * @param {string} message The message to be checked.
  131. * @return {boolean} Whether or not the given message contains the strings
  132. * "hello" and "world".
  133. * @private
  134. */
  135. goog.demos.editor.HelloWorldDialog.isValidHelloWorld_ = function(message) {
  136. message = message.toLowerCase();
  137. return goog.string.contains(message, 'hello') &&
  138. goog.string.contains(message, 'world');
  139. };