History.html 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>The source code</title>
  6. <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  7. <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  8. <style type="text/css">
  9. .highlight { display: block; background-color: #ddd; }
  10. </style>
  11. <script type="text/javascript">
  12. function highlight() {
  13. document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14. }
  15. </script>
  16. </head>
  17. <body onload="prettyPrint(); highlight();">
  18. <pre class="prettyprint lang-js"><span id='Ext-util-History'>/**
  19. </span> * History management component that allows you to register arbitrary tokens that signify application
  20. * history state on navigation actions. You can then handle the history {@link #change} event in order
  21. * to reset your application UI to the appropriate state when the user navigates forward or backward through
  22. * the browser history stack.
  23. *
  24. * ## Initializing
  25. *
  26. * The {@link #init} method of the History object must be called before using History. This sets up the internal
  27. * state and must be the first thing called before using History.
  28. */
  29. Ext.define('Ext.util.History', {
  30. singleton: true,
  31. alternateClassName: 'Ext.History',
  32. mixins: {
  33. observable: 'Ext.util.Observable'
  34. },
  35. <span id='Ext-util-History-property-useTopWindow'> /**
  36. </span> * @property
  37. * True to use `window.top.location.hash` or false to use `window.location.hash`.
  38. */
  39. useTopWindow: true,
  40. <span id='Ext-util-History-property-fieldId'> /**
  41. </span> * @property
  42. * The id of the hidden field required for storing the current history token.
  43. */
  44. fieldId: Ext.baseCSSPrefix + 'history-field',
  45. <span id='Ext-util-History-property-iframeId'> /**
  46. </span> * @property
  47. * The id of the iframe required by IE to manage the history stack.
  48. */
  49. iframeId: Ext.baseCSSPrefix + 'history-frame',
  50. constructor: function() {
  51. var me = this;
  52. me.oldIEMode = Ext.isIE6 || Ext.isIE7 || !Ext.isStrict &amp;&amp; Ext.isIE8;
  53. me.iframe = null;
  54. me.hiddenField = null;
  55. me.ready = false;
  56. me.currentToken = null;
  57. me.mixins.observable.constructor.call(me);
  58. },
  59. getHash: function() {
  60. var href = window.location.href,
  61. i = href.indexOf(&quot;#&quot;);
  62. return i &gt;= 0 ? href.substr(i + 1) : null;
  63. },
  64. setHash: function (hash) {
  65. var me = this,
  66. win = me.useTopWindow ? window.top : window;
  67. try {
  68. win.location.hash = hash;
  69. } catch (e) {
  70. // IE can give Access Denied (esp. in popup windows)
  71. }
  72. },
  73. doSave: function() {
  74. this.hiddenField.value = this.currentToken;
  75. },
  76. handleStateChange: function(token) {
  77. this.currentToken = token;
  78. this.fireEvent('change', token);
  79. },
  80. updateIFrame: function(token) {
  81. var html = '&lt;html&gt;&lt;body&gt;&lt;div id=&quot;state&quot;&gt;' +
  82. Ext.util.Format.htmlEncode(token) +
  83. '&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;',
  84. doc;
  85. try {
  86. doc = this.iframe.contentWindow.document;
  87. doc.open();
  88. doc.write(html);
  89. doc.close();
  90. return true;
  91. } catch (e) {
  92. return false;
  93. }
  94. },
  95. checkIFrame: function () {
  96. var me = this,
  97. contentWindow = me.iframe.contentWindow,
  98. doc, elem, oldToken, oldHash;
  99. if (!contentWindow || !contentWindow.document) {
  100. Ext.Function.defer(this.checkIFrame, 10, this);
  101. return;
  102. }
  103. doc = contentWindow.document;
  104. elem = doc.getElementById(&quot;state&quot;);
  105. oldToken = elem ? elem.innerText : null;
  106. oldHash = me.getHash();
  107. Ext.TaskManager.start({
  108. run: function () {
  109. var doc = contentWindow.document,
  110. elem = doc.getElementById(&quot;state&quot;),
  111. newToken = elem ? elem.innerText : null,
  112. newHash = me.getHash();
  113. if (newToken !== oldToken) {
  114. oldToken = newToken;
  115. me.handleStateChange(newToken);
  116. me.setHash(newToken);
  117. oldHash = newToken;
  118. me.doSave();
  119. } else if (newHash !== oldHash) {
  120. oldHash = newHash;
  121. me.updateIFrame(newHash);
  122. }
  123. },
  124. interval: 50,
  125. scope: me
  126. });
  127. me.ready = true;
  128. me.fireEvent('ready', me);
  129. },
  130. startUp: function () {
  131. var me = this,
  132. hash;
  133. me.currentToken = me.hiddenField.value || this.getHash();
  134. if (me.oldIEMode) {
  135. me.checkIFrame();
  136. } else {
  137. hash = me.getHash();
  138. Ext.TaskManager.start({
  139. run: function () {
  140. var newHash = me.getHash();
  141. if (newHash !== hash) {
  142. hash = newHash;
  143. me.handleStateChange(hash);
  144. me.doSave();
  145. }
  146. },
  147. interval: 50,
  148. scope: me
  149. });
  150. me.ready = true;
  151. me.fireEvent('ready', me);
  152. }
  153. },
  154. <span id='Ext-util-History-method-init'> /**
  155. </span> * Initializes the global History instance.
  156. * @param {Function} [onReady] A callback function that will be called once the history
  157. * component is fully initialized.
  158. * @param {Object} [scope] The scope (`this` reference) in which the callback is executed.
  159. * Defaults to the browser window.
  160. */
  161. init: function (onReady, scope) {
  162. var me = this,
  163. DomHelper = Ext.DomHelper;
  164. if (me.ready) {
  165. Ext.callback(onReady, scope, [me]);
  166. return;
  167. }
  168. if (!Ext.isReady) {
  169. Ext.onReady(function() {
  170. me.init(onReady, scope);
  171. });
  172. return;
  173. }
  174. /*
  175. &lt;form id=&quot;history-form&quot; class=&quot;x-hide-display&quot;&gt;
  176. &lt;input type=&quot;hidden&quot; id=&quot;x-history-field&quot; /&gt;
  177. &lt;iframe id=&quot;x-history-frame&quot;&gt;&lt;/iframe&gt;
  178. &lt;/form&gt;
  179. */
  180. me.hiddenField = Ext.getDom(me.fieldId);
  181. if (!me.hiddenField) {
  182. me.hiddenField = Ext.getBody().createChild({
  183. id: Ext.id(),
  184. tag: 'form',
  185. cls: Ext.baseCSSPrefix + 'hide-display',
  186. children: [{
  187. tag: 'input',
  188. type: 'hidden',
  189. id: me.fieldId
  190. }]
  191. }, false, true).firstChild;
  192. }
  193. if (me.oldIEMode) {
  194. me.iframe = Ext.getDom(me.iframeId);
  195. if (!me.iframe) {
  196. me.iframe = DomHelper.append(me.hiddenField.parentNode, {
  197. tag: 'iframe',
  198. id: me.iframeId,
  199. src: Ext.SSL_SECURE_URL
  200. });
  201. }
  202. }
  203. me.addEvents(
  204. <span id='Ext-util-History-event-ready'> /**
  205. </span> * @event ready
  206. * Fires when the Ext.util.History singleton has been initialized and is ready for use.
  207. * @param {Ext.util.History} The Ext.util.History singleton.
  208. */
  209. 'ready',
  210. <span id='Ext-util-History-event-change'> /**
  211. </span> * @event change
  212. * Fires when navigation back or forwards within the local page's history occurs.
  213. * @param {String} token An identifier associated with the page state at that point in its history.
  214. */
  215. 'change'
  216. );
  217. if (onReady) {
  218. me.on('ready', onReady, scope, {single: true});
  219. }
  220. me.startUp();
  221. },
  222. <span id='Ext-util-History-method-add'> /**
  223. </span> * Add a new token to the history stack. This can be any arbitrary value, although it would
  224. * commonly be the concatenation of a component id and another id marking the specific history
  225. * state of that component. Example usage:
  226. *
  227. * // Handle tab changes on a TabPanel
  228. * tabPanel.on('tabchange', function(tabPanel, tab){
  229. * Ext.History.add(tabPanel.id + ':' + tab.id);
  230. * });
  231. *
  232. * @param {String} token The value that defines a particular application-specific history state
  233. * @param {Boolean} [preventDuplicates=true] When true, if the passed token matches the current token
  234. * it will not save a new history step. Set to false if the same state can be saved more than once
  235. * at the same history stack location.
  236. */
  237. add: function (token, preventDup) {
  238. var me = this;
  239. if (preventDup !== false) {
  240. if (me.getToken() === token) {
  241. return true;
  242. }
  243. }
  244. if (me.oldIEMode) {
  245. return me.updateIFrame(token);
  246. } else {
  247. me.setHash(token);
  248. return true;
  249. }
  250. },
  251. <span id='Ext-util-History-method-back'> /**
  252. </span> * Programmatically steps back one step in browser history (equivalent to the user pressing the Back button).
  253. */
  254. back: function() {
  255. window.history.go(-1);
  256. },
  257. <span id='Ext-util-History-method-forward'> /**
  258. </span> * Programmatically steps forward one step in browser history (equivalent to the user pressing the Forward button).
  259. */
  260. forward: function(){
  261. window.history.go(1);
  262. },
  263. <span id='Ext-util-History-method-getToken'> /**
  264. </span> * Retrieves the currently-active history token.
  265. * @return {String} The token
  266. */
  267. getToken: function() {
  268. return this.ready ? this.currentToken : this.getHash();
  269. }
  270. });</pre>
  271. </body>
  272. </html>