APIs

Show:
  1. /**
  2. Base class for all StackView components. StackView allows for dynamic changes of elements (show/hide) and it works
  3. with the Backbone framework, thus allowing for view control.
  4. @class StackView.ViewPort
  5. @constructor
  6. @return none instead instantiate derived classes
  7. **/
  8. define(['jquery', 'backbone', 'StackView'], function ($, Backbone, StackView) {
  9.  
  10. var StackView = BB.StackView = {};
  11. StackView.ViewPort = BB.View.extend({
  12.  
  13. /**
  14. Constructor
  15. @method initialize
  16. **/
  17. initialize: function () {
  18. this.m_views = {};
  19. this.m_selectedView = {};
  20. },
  21.  
  22. /**
  23. Add a backbone view so we can control its display mode via one of the derived classes
  24. @method addView
  25. @param {Object} i_view add a backbone view to control
  26. @return {String} stack view id added
  27. **/
  28. addView: function (i_view) {
  29. i_view.$el.hide();
  30. if (i_view.el==undefined)
  31. log('')
  32. var oid = i_view.el.id === '' ? i_view.cid : i_view.el.id;
  33. this.m_views[oid] = i_view;
  34. return oid;
  35. },
  36.  
  37. /**
  38. Get all registered views
  39. @method getViews
  40. @return {Object} registered views
  41. **/
  42. getViews: function () {
  43. return this.m_views;
  44. },
  45.  
  46. /**
  47. Find a registered backbone view by its id or cid
  48. @method getViewByID
  49. @param {String} i_id
  50. @return {Object} view object retrieved
  51. **/
  52. getViewByID: function (i_id) {
  53. var oid = i_id.replace(/#/g, '');
  54. if (this.m_views[oid])
  55. return this.m_views[oid];
  56. var f = _.find(this.m_views, function (v) {
  57. if (v.cid == oid)
  58. return v;
  59. });
  60. return f;
  61. },
  62.  
  63. /**
  64. Select a view to present in the DOM, implementation varies per derived class
  65. @method selectView
  66. @param {Object} i_view
  67. **/
  68. selectView: function (i_view) {
  69. this.m_selectedView = this._parseView(i_view);
  70. this._notifySubscribers(i_view);
  71. },
  72.  
  73. /**
  74. If view was given as an ID string, find its matching Backbone > View
  75. @method _parseView
  76. @param {Object} i_view
  77. **/
  78. _parseView: function(i_view){
  79. if (_.isString(i_view)){
  80. i_view = this.getViewByID(i_view);
  81. }
  82. return i_view;
  83. },
  84.  
  85. _notifySubscribers: function(i_view){
  86. var view = this._parseView(i_view);
  87. // log('view: '+ view.el.id);
  88. this.trigger(BB.EVENTS.SELECTED_STACK_VIEW, view);
  89. if (BB.comBroker)
  90. BB.comBroker.fire(BB.EVENTS.SELECTED_STACK_VIEW, view);
  91. }
  92.  
  93. });
  94.  
  95. /**
  96. An animated backbone view slider that supports unlimited number of separated views.
  97. Be sure to check CSS file for additional configuration via classes:
  98. .page.left .page.center .page.right .page.transition
  99. Animation can be configured for GPU hardware acceleration as well as in vertical and horizontal modes (all via CSS).
  100. @class StackView.Slider
  101. @constructor
  102. @return {Object} instantiated StackView.Slider
  103. **/
  104. StackView.Slider = StackView.ViewPort.extend({
  105.  
  106. /**
  107. Class init
  108. @method constructor
  109. @param {Object} options backbone (config done through CSS)
  110. **/
  111. constructor: function (options) {
  112. this._views = [];
  113. this._index = null;
  114. StackView.ViewPort.prototype.constructor.apply(this, arguments);
  115. },
  116.  
  117. /**
  118. Select the initial default view
  119. @method selectView
  120. @param {Object} i_view backbone view
  121. **/
  122. selectView: function (i_view) {
  123. var self = this;
  124. i_view = self._parseView(i_view);
  125. StackView.ViewPort.prototype.selectView.apply(this, arguments);
  126. $.each(self.m_views, function (id, view) {
  127. view.$el.hide();
  128. });
  129. i_view.$el.fadeIn(this.m_duration);
  130. },
  131.  
  132. /**
  133. The main functions which allows the animated sliding of one view to the next
  134. @method slideToPage
  135. @param {Object} i_toView backbone view
  136. @param {Object} i_direction provide 'left' or 'right'
  137. **/
  138. slideToPage: function (i_toView, i_direction) {
  139. var self = this;
  140. i_toView = self._parseView(i_toView);
  141. if (i_toView==self.m_selectedView)
  142. return;
  143. self._notifySubscribers(i_toView);
  144. i_toView.$el.show();
  145. // toView.el.offsetWidth;
  146. // Position the new page at the starting position of the animation
  147. i_toView.el.className = "page " + i_direction;
  148. // Position the new page and the current page at the ending position of their
  149. // animation with a transition class indicating the duration of the animation
  150. // and force reflow of page so it renders
  151. i_toView.$el.parent().parent()[0].offsetWidth;
  152. i_toView.el.className = "page transition center";
  153. self.m_selectedView.el.className = "page transition " + (i_direction === "left" ? "right" : "left");
  154. self.m_selectedView = i_toView;
  155. }
  156. });
  157.  
  158. /**
  159. Select a view thus fading it in and hiding all other views managed by this class
  160. @class StackView.Fader
  161. @constructor
  162. @return {Object} instantiated StackView.Fader
  163. **/
  164. StackView.Fader = StackView.ViewPort.extend({
  165.  
  166. /**
  167. Class init
  168. @method constructor
  169. @param {Object} options duration, default 300ms
  170. **/
  171. constructor: function (options) {
  172. options || (options = {});
  173. this.m_duration = options.duration || 300;
  174. this.transition = options.transition;
  175. if (options.views) this.setViews(options.views);
  176. // if (options.duration) this.m_duration = options.duration;
  177. StackView.ViewPort.prototype.constructor.apply(this, arguments);
  178. },
  179.  
  180. /**
  181. Bring the selected view into display while hiding siblings
  182. @method selectView
  183. @param {Object} i_view backbone view
  184. **/
  185. selectView: function (i_view) {
  186. var self = this;
  187. var bb_view = self._parseView(i_view);
  188. if (self.m_selectedView==bb_view)
  189. return;
  190.  
  191. // stop previous animation on previosuly selected view
  192. if (self.m_selectedView.el)
  193. self.m_selectedView.$el.stop();
  194.  
  195. StackView.ViewPort.prototype.selectView.apply(this, arguments);
  196. $.each(self.m_views, function (id, view) {
  197. view.$el.hide();
  198. });
  199. bb_view.$el.fadeIn(this.m_duration);
  200. },
  201.  
  202. /**
  203. Select a stack view using an offset index
  204. @method selectIndex
  205. @param {Number} i_index offset
  206. **/
  207. selectIndex: function (i_index) {
  208. var self = this;
  209. var foundView = undefined;
  210. var i = -1;
  211. $.each(this.m_views, function (view_id) {
  212. i++;
  213. if (i == i_index)
  214. foundView = self.m_views[view_id];
  215. });
  216. return foundView;
  217. }
  218. });
  219.  
  220. /**
  221. Load a backbone view inside a full page modal window while maintaining persistency between modals.
  222. @class StackView.Modal
  223. @constructor
  224. @return {Object} instantiated StackView.Modal
  225. **/
  226. StackView.Modal = StackView.ViewPort.extend({
  227.  
  228. /**
  229. Class init
  230. @method constructor
  231. @param {Object} options include (slide_top | fade), (bgColor)
  232. **/
  233. constructor: function (options) {
  234. this.m_animation = 'slide_top';
  235. this.m_bgColor = 'white';
  236. options || (options = {});
  237. this.transition = options.transition;
  238. if (options.views) this.setViews(options.views);
  239. if (options.animation) this.m_animation = options.animation;
  240. if (options.bgColor) this.m_bgColor = options.bgColor;
  241. StackView.ViewPort.prototype.constructor.apply(this, arguments);
  242. },
  243.  
  244. /**
  245. Load up selected backbone view into a full screen modal and present it (persistent)
  246. @method selectView
  247. @param {Object} i_view backbone
  248. **/
  249. selectView: function (i_view) {
  250. var self = this;
  251. i_view = self._parseView(i_view);
  252. StackView.ViewPort.prototype.selectView.apply(this, arguments);
  253. $.each(self.m_views, function (id, view) {
  254. view.$el.hide()
  255. });
  256. i_view.$el.show();
  257. self.$el.append(i_view.el);
  258. $('.modal_close').one('click', function (e) {
  259. self.closeModal(self.el);
  260. e.preventDefault();
  261. });
  262.  
  263. var bh = $('body').get(0).scrollHeight + 'px';
  264. var bw = $('body').get(0).scrollWidth + 'px';
  265. self.$el.css({
  266. 'display': 'block',
  267. 'opacity': self.m_animation == 'fade' ? 0 : 1,
  268. 'position': 'absolute',
  269. 'z-index': 9999,
  270. 'height': bh,
  271. 'width': bw,
  272. 'left': 0,
  273. 'border-bottom': '3px solid gray',
  274. 'background-color': self.m_bgColor,
  275. 'top': self.m_animation == 'fade' ? 0 : '-' + bh,
  276. margin: 0
  277. // 'left': 50 + '%',
  278. // 'margin-left': -(modal_width / 2) + "px",
  279. // 'top': o.top + "px"
  280. });
  281. self.$el.animate({
  282. top: 0,
  283. opacity: 1}, 400);
  284. },
  285.  
  286. /**
  287. Close via animation the currently opened modal window
  288. @method closelModal
  289. @param {String} modal_id
  290. **/
  291. closeModal: function (modal_id) {
  292. var self = this;
  293. $(modal_id).animate({
  294. top: self.m_animation == 'fade' ? 0 : 0 - $('body').get(0).scrollHeight,
  295. opacity: 0},
  296. 400, function () {
  297. $(this).css({display: 'none'})
  298. });
  299. }
  300. });
  301.  
  302. return StackView;
  303.  
  304. });