Path.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. /**
  2. * Path.js
  3. *
  4. * Copyright, Moxiecode Systems AB
  5. * Released under LGPL License.
  6. *
  7. * License: http://www.tinymce.com/license
  8. * Contributing: http://www.tinymce.com/contributing
  9. */
  10. /**
  11. * Creates a new path control.
  12. *
  13. * @-x-less Path.less
  14. * @class tinymce.ui.Path
  15. * @extends tinymce.ui.Widget
  16. */
  17. define("tinymce/ui/Path", [
  18. "tinymce/ui/Widget"
  19. ], function(Widget) {
  20. "use strict";
  21. return Widget.extend({
  22. /**
  23. * Constructs a instance with the specified settings.
  24. *
  25. * @constructor
  26. * @param {Object} settings Name/value object with settings.
  27. * @setting {String} delimiter Delimiter to display between items in path.
  28. */
  29. init: function(settings) {
  30. var self = this;
  31. if (!settings.delimiter) {
  32. settings.delimiter = '\u00BB';
  33. }
  34. self._super(settings);
  35. self.addClass('path');
  36. self.canFocus = true;
  37. self.on('click', function(e) {
  38. var index, target = e.target;
  39. if ((index = target.getAttribute('data-index'))) {
  40. self.fire('select', {value: self.data()[index], index: index});
  41. }
  42. });
  43. },
  44. /**
  45. * Focuses the current control.
  46. *
  47. * @method focus
  48. * @return {tinymce.ui.Control} Current control instance.
  49. */
  50. focus: function() {
  51. var self = this;
  52. self.getEl().firstChild.focus();
  53. return self;
  54. },
  55. /**
  56. * Sets/gets the data to be used for the path.
  57. *
  58. * @method data
  59. * @param {Array} data Array with items name is rendered to path.
  60. */
  61. data: function(data) {
  62. var self = this;
  63. if (typeof(data) !== "undefined") {
  64. self._data = data;
  65. self.update();
  66. return self;
  67. }
  68. return self._data;
  69. },
  70. /**
  71. * Updated the path.
  72. *
  73. * @private
  74. */
  75. update: function() {
  76. this.innerHtml(this._getPathHtml());
  77. },
  78. /**
  79. * Called after the control has been rendered.
  80. *
  81. * @method postRender
  82. */
  83. postRender: function() {
  84. var self = this;
  85. self._super();
  86. self.data(self.settings.data);
  87. },
  88. /**
  89. * Renders the control as a HTML string.
  90. *
  91. * @method renderHtml
  92. * @return {String} HTML representing the control.
  93. */
  94. renderHtml: function() {
  95. var self = this;
  96. return (
  97. '<div id="' + self._id + '" class="' + self.classes() + '">' +
  98. self._getPathHtml() +
  99. '</div>'
  100. );
  101. },
  102. _getPathHtml: function() {
  103. var self = this, parts = self._data || [], i, l, html = '', prefix = self.classPrefix;
  104. for (i = 0, l = parts.length; i < l; i++) {
  105. html += (
  106. (i > 0 ? '<div class="' + prefix + 'divider" aria-hidden="true"> ' + self.settings.delimiter + ' </div>' : '') +
  107. '<div role="button" class="' + prefix + 'path-item' + (i == l - 1 ? ' ' + prefix + 'last' : '') + '" data-index="' +
  108. i + '" tabindex="-1" id="' + self._id + '-' + i + '" aria-level="' + i + '">' + parts[i].name + '</div>'
  109. );
  110. }
  111. if (!html) {
  112. html = '<div class="' + prefix + 'path-item">\u00a0</div>';
  113. }
  114. return html;
  115. }
  116. });
  117. });