1
0

trumbowyg.history.js 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
  1. /*/* ===========================================================
  2. * trumbowyg.history.js v1.0
  3. * history plugin for Trumbowyg
  4. * http://alex-d.github.com/Trumbowyg
  5. * ===========================================================
  6. * Author : Sven Dunemann [dunemann@forelabs.eu]
  7. */
  8. (function ($) {
  9. 'use strict';
  10. $.extend(true, $.trumbowyg, {
  11. langs: {
  12. // jshint camelcase:false
  13. en: {
  14. history: {
  15. redo: 'Redo',
  16. undo: 'Undo'
  17. }
  18. },
  19. da: {
  20. history: {
  21. redo: 'Annuller fortryd',
  22. undo: 'Fortryd'
  23. }
  24. },
  25. de: {
  26. history: {
  27. redo: 'Wiederholen',
  28. undo: 'Rückgängig'
  29. }
  30. },
  31. fr: {
  32. history: {
  33. redo: 'Annuler',
  34. undo: 'Rétablir'
  35. }
  36. },
  37. hu: {
  38. history: {
  39. redo: 'Visszállít',
  40. undo: 'Visszavon'
  41. }
  42. },
  43. ko: {
  44. history: {
  45. redo: '다시 실행',
  46. undo: '되돌리기'
  47. }
  48. },
  49. pt_br: {
  50. history: {
  51. redo: 'Refazer',
  52. undo: 'Desfazer'
  53. }
  54. },
  55. zh_tw: {
  56. history: {
  57. redo: '重做',
  58. undo: '復原'
  59. }
  60. },
  61. // jshint camelcase:true
  62. },
  63. plugins: {
  64. history: {
  65. init: function (t) {
  66. t.o.plugins.history = $.extend(true, {
  67. _stack: [],
  68. _index: -1,
  69. _focusEl: undefined
  70. }, t.o.plugins.history || {});
  71. var btnBuildDefRedo = {
  72. title: t.lang.history.redo,
  73. ico: 'redo',
  74. key: 'Y',
  75. fn: function () {
  76. if (t.o.plugins.history._index < t.o.plugins.history._stack.length - 1) {
  77. t.o.plugins.history._index += 1;
  78. var index = t.o.plugins.history._index;
  79. var newState = t.o.plugins.history._stack[index];
  80. t.execCmd('html', newState);
  81. // because of some semantic optimisations we have to save the state back
  82. // to history
  83. t.o.plugins.history._stack[index] = t.$ed.html();
  84. carretToEnd();
  85. toggleButtonStates();
  86. }
  87. }
  88. };
  89. var btnBuildDefUndo = {
  90. title: t.lang.history.undo,
  91. ico: 'undo',
  92. key: 'Z',
  93. fn: function () {
  94. if (t.o.plugins.history._index > 0) {
  95. t.o.plugins.history._index -= 1;
  96. var index = t.o.plugins.history._index,
  97. newState = t.o.plugins.history._stack[index];
  98. t.execCmd('html', newState);
  99. // because of some semantic optimisations we have to save the state back
  100. // to history
  101. t.o.plugins.history._stack[index] = t.$ed.html();
  102. carretToEnd();
  103. toggleButtonStates();
  104. }
  105. }
  106. };
  107. var pushToHistory = function () {
  108. var index = t.o.plugins.history._index,
  109. stack = t.o.plugins.history._stack,
  110. latestState = stack.slice(-1)[0] || '<p></p>',
  111. prevState = stack[index],
  112. newState = t.$ed.html(),
  113. focusEl = t.doc.getSelection().focusNode,
  114. focusElText = '',
  115. latestStateTagsList,
  116. newStateTagsList,
  117. prevFocusEl = t.o.plugins.history._focusEl;
  118. latestStateTagsList = $('<div>' + latestState + '</div>').find('*').map(function () {
  119. return this.localName;
  120. });
  121. newStateTagsList = $('<div>' + newState + '</div>').find('*').map(function () {
  122. return this.localName;
  123. });
  124. if (focusEl) {
  125. t.o.plugins.history._focusEl = focusEl;
  126. focusElText = focusEl.outerHTML || focusEl.textContent;
  127. }
  128. if (newState !== prevState) {
  129. // a new stack entry is defined when current insert ends on a whitespace character
  130. // or count of node elements has been changed
  131. // or focused element differs from previous one
  132. if (focusElText.slice(-1).match(/\s/) ||
  133. !arraysAreIdentical(latestStateTagsList, newStateTagsList) ||
  134. t.o.plugins.history._index <= 0 || focusEl !== prevFocusEl)
  135. {
  136. t.o.plugins.history._index += 1;
  137. // remove newer entries in history when something new was added
  138. // because timeline was changes with interaction
  139. t.o.plugins.history._stack = stack.slice(
  140. 0, t.o.plugins.history._index
  141. );
  142. // now add new state to modified history
  143. t.o.plugins.history._stack.push(newState);
  144. } else {
  145. // modify last stack entry
  146. t.o.plugins.history._stack[index] = newState;
  147. }
  148. toggleButtonStates();
  149. }
  150. };
  151. var toggleButtonStates = function () {
  152. var index = t.o.plugins.history._index,
  153. stackSize = t.o.plugins.history._stack.length,
  154. undoState = (index > 0),
  155. redoState = (stackSize !== 0 && index !== stackSize - 1);
  156. toggleButtonState('historyUndo', undoState);
  157. toggleButtonState('historyRedo', redoState);
  158. };
  159. var toggleButtonState = function (btn, enable) {
  160. var button = t.$box.find('.trumbowyg-' + btn + '-button');
  161. if (enable) {
  162. button.removeClass('trumbowyg-disable');
  163. } else if (!button.hasClass('trumbowyg-disable')) {
  164. button.addClass('trumbowyg-disable');
  165. }
  166. };
  167. var arraysAreIdentical = function (a, b) {
  168. if (a === b) {
  169. return true;
  170. }
  171. if (a == null || b == null) {
  172. return false;
  173. }
  174. if (a.length !== b.length) {
  175. return false;
  176. }
  177. for (var i = 0; i < a.length; i += 1) {
  178. if (a[i] !== b[i]) {
  179. return false;
  180. }
  181. }
  182. return true;
  183. };
  184. var carretToEnd = function () {
  185. var node = t.doc.getSelection().focusNode,
  186. range = t.doc.createRange();
  187. if (node.childNodes.length > 0) {
  188. range.setStartAfter(node.childNodes[node.childNodes.length - 1]);
  189. range.setEndAfter(node.childNodes[node.childNodes.length - 1]);
  190. t.doc.getSelection().removeAllRanges();
  191. t.doc.getSelection().addRange(range);
  192. }
  193. };
  194. t.$c.on('tbwinit tbwchange', pushToHistory);
  195. t.addBtnDef('historyRedo', btnBuildDefRedo);
  196. t.addBtnDef('historyUndo', btnBuildDefUndo);
  197. }
  198. }
  199. }
  200. });
  201. })(jQuery);