PageRenderTime 42ms CodeModel.GetById 17ms RepoModel.GetById 0ms app.codeStats 0ms

/assemblies/platform/pentaho-cdf-dd/src/main/resources/resources/mobile/cmd.js

https://github.com/webdetails/cde
JavaScript | 402 lines | 287 code | 49 blank | 66 comment | 23 complexity | 0067eff6e390a620cd1ee57955d67d64 MD5 | raw file
  1. /* This is a reset for the
  2. */
  3. $.blockUI.defaults.fadeIn = 0;
  4. $.blockUI.defaults.message = '<div style="padding: 15px;"><img src="res/system/pentaho-cdf-dd/resources/mobile/img/spinner.gif" />';
  5. $.blockUI.defaults.css.left = '50%';
  6. $.blockUI.defaults.css.top = '50%';
  7. $.blockUI.defaults.css.marginLeft = '-210px';
  8. $.blockUI.defaults.css.marginTop = '-220px';
  9. $.blockUI.defaults.css.width = '420px';
  10. $.blockUI.defaults.css.height = '440px';
  11. $.blockUI.defaults.css.opacity = '.8';
  12. $.blockUI.defaults.css['-webkit-border-radius'] = '10px';
  13. $.blockUI.defaults.css['-moz-border-radius'] = '10px';
  14. Dashboards.blockUIwithDrag = function() {
  15. if (typeof Dashboards.i18nSupport !== "undefined" && Dashboards.i18nSupport != null) {
  16. // If i18n support is enabled process the message accordingly
  17. $.blockUI.defaults.message = '<div style="padding: 15px;"><img src="' + webAppPath + '/content/pentaho-cdf/resources/style/images/busy.gif" /><h3>' + Dashboards.i18nSupport.prop('processing.message') + '</h3></div>';
  18. }
  19. $.blockUI();
  20. var handle = $('<div id="blockUIDragHandle"> <a href="javascript:$.unblockUI()" title="Click to unblock">X</a></div>')
  21. $("div.blockUI.blockMsg").prepend(handle);
  22. $("div.blockUI.blockMsg").draggable({
  23. handle: "#blockUIDragHandle"
  24. });
  25. };
  26. function CDFMobile() {
  27. var myself = this;
  28. // expose our local jquery with jquerymobile to the outside world
  29. var _dashboard = {};
  30. var _carousels = [];
  31. var _title = $("#title"),
  32. _navSelector = $('#navSelector'),
  33. _scriptHolder = $("#scriptHolder"),
  34. _staging = $("#placeholder"),
  35. _content = $('#cmdContent'),
  36. _dashboard = $("#dashboard"),
  37. _toolbar = $("#toolbar"),
  38. _filters = $("#filtersPanel"),
  39. _filtersContent = $("#filtersContent"),
  40. _innerFilters = $("#innerFilters"),
  41. _filterToolbar = $("#filtersActions");
  42. var _jqmTheme = 'a';
  43. this.redrawDashboard = function() {
  44. // _title.text(_dashboard.meta.title);
  45. _innerFilters.empty().append($("#filters"));
  46. _dashboard.empty().append(_staging.children(':not(script)'));
  47. updateNavigation();
  48. reloadCarousels();
  49. };
  50. function captureClick(callback) {
  51. return function(ev) {
  52. callback.call(myself);
  53. ev.stopPropagation();
  54. };
  55. }
  56. function handleClick(callback) {
  57. return function(ev) {
  58. callback.call(myself);
  59. };
  60. }
  61. this.loadDashboard = function(target) {
  62. var queryArgs = $.extend({},this.parameters,target);
  63. var queryStrings = [];
  64. for (key in queryArgs) if (queryArgs.hasOwnProperty(key)) {
  65. queryStrings.push( escape(key) + "=" + escape(queryArgs[key]));
  66. }
  67. var queryString = queryStrings.join("&")
  68. window.location = window.location.pathname + "?" + queryString;
  69. };
  70. this.redrawToolbar = function(buttons) {
  71. redrawNavBar(buttons, _toolbar);
  72. };
  73. this.redrawFiltersToolbar = function(buttons) {
  74. redrawNavBar(buttons, _filterToolbar);
  75. };
  76. this.resizeAll = function() {
  77. resizeCharts();
  78. for (var i = 0; i < _carousels.length; i++) {
  79. var car = _carousels[i];
  80. resizeCarousel(car.getHolder());
  81. car.fitToContainer();
  82. }
  83. }
  84. function resizeCharts() {
  85. var activePage = $.mobile.activePage;
  86. var headerFooterPadding = ( activePage != undefined ) ?
  87. activePage.find('[data-role=header]').height() +
  88. activePage.find('[data-role=footer]').height() : 0;
  89. var widthMult,
  90. heightMult;
  91. var charts = Dashboards.components.filter(function(comp) {
  92. return /^ccc/.test(comp.type);
  93. });
  94. $.each(charts,
  95. function(i, comp) {
  96. /* First thing first: don't even try to resize charts that haven't
  97. * been initialized!
  98. */
  99. if (!comp.chart) {
  100. return;
  101. }
  102. var $e = $("#" + comp.htmlObject + " svg"),
  103. e = $e[0],
  104. /* Next step is measuring the available space for our charts. We always
  105. * have the full window width available to us, but that's not the case
  106. * with the height, so we trim out the space we know must be reserved.
  107. */
  108. windowWidth = window.innerWidth,
  109. windowHeight = window.innerHeight,
  110. availableWidth = windowWidth - 20,
  111. availableHeight = windowHeight - headerFooterPadding - 150,
  112. /* In the name of sanity, we'd rather calculate everything relative
  113. * to the original sizes, rather than the last calculated size, so
  114. * we'll store/retrieve the original values in a data attribute.
  115. */
  116. originalHeight = $e.attr('data-originalHeight') || $e.parent().height(),
  117. originalWidth = $e.attr('data-originalWidth') || $e.parent().width();
  118. $e.attr('data-originalHeight', originalHeight);
  119. $e.attr('data-originalWidth', originalWidth);
  120. /* Next we calculate the ratios between original and available space.
  121. * To keep the original proportions, we have to multiply both axes
  122. * by the same ratio. If there's more available height than width,
  123. * we're in portrait mode, so we'll use the height ratio to make the
  124. * chart fit within the available space. If the width is bigger,
  125. * we're in landscape mode. Rather than having a tiny chart we'll use
  126. *the full width, and overflow vertically as needed -- effectively a
  127. * zoom mode.
  128. */
  129. var heightRatio = availableHeight / originalHeight,
  130. widthRatio = availableWidth / originalWidth,
  131. availableRatio = windowHeight > windowWidth ? heightRatio : widthRatio,
  132. targetWidth = originalWidth * availableRatio,
  133. targetHeight = originalHeight * availableRatio;
  134. /* Finally, set the width and height to our desired values for the chart
  135. * object, the component and the svg. We also need to give the svg a
  136. * viewBox, or the svg will think we just enlarged its canvas.
  137. */
  138. comp.chart.options.width = targetWidth;
  139. comp.chart.options.height = targetHeight;
  140. comp.chartDefinition.width = targetWidth;
  141. comp.chartDefinition.height = targetHeight;
  142. e.setAttribute('width', targetWidth);
  143. e.setAttribute('height', targetHeight);
  144. e.setAttribute('viewBox', '0 0 ' + originalWidth + ' ' + originalHeight);
  145. });
  146. };
  147. /* The navigation pull-down menu gets its data from the loaded
  148. * dashboard. We expect to find a mobileNav component with a
  149. * navList() method that provides a listing of the dashboards
  150. * you can navigate to from your present location. if such a
  151. * component isn't found, we assume that this is a dead-end
  152. * dashboard and hide the navigation pull-down instead.
  153. */
  154. function updateNavigation() {
  155. /* First we check for the existence of the mobileNav component.
  156. * We check for either the bare mobileNav name, or the the
  157. * CDE-style render_mobileNav name.
  158. * If it doesn't exist, we just hide the navigation pull-down.
  159. */
  160. var navComponent = window.mobileNav || window.render_mobileNav;
  161. if (!navComponent) {
  162. _navSelector.hide();
  163. return;
  164. }
  165. /*
  166. */
  167. var dashboardList = navComponent.navList();
  168. };
  169. /*
  170. */
  171. function navigationCallback(event) {
  172. };
  173. function redrawNavBar(buttons, loc) {
  174. if (buttons.length) {
  175. var toolbar = $("<ul></ul>"),
  176. buttonWidth = Math.round(10000 / buttons.length) / 100;
  177. for (b in buttons) if (buttons.hasOwnProperty(b)) {
  178. var bdata = buttons[b];
  179. var button = $("<li>").appendTo(toolbar);
  180. var link = $("<a></a>").appendTo(button);
  181. link.attr("data-icon", bdata.icon);
  182. if (bdata.location) {
  183. link.attr("href", bdata.location);
  184. link.click(handleClick(bdata.callback));
  185. } else if (bdata.rel) {
  186. link.attr("data-rel", bdata.rel);
  187. link.click(handleClick(bdata.callback));
  188. } else {
  189. link.click(captureClick(bdata.callback));
  190. }
  191. if (bdata.transition) {
  192. link.attr("data-transition", bdata.transition);
  193. }
  194. link.text(bdata.label);
  195. }
  196. $("<div data-role='navbar'></div>").append(toolbar).appendTo(loc.empty());
  197. }
  198. };
  199. function recalculateHeight(content, title, toolbar) {
  200. var padding = parseInt(content.parent().css('padding-top').match(/[0-9]+/)[0], 10) +
  201. parseInt(content.parent().css('padding-bottom').match(/[0-9]+/)[0], 10);
  202. var height = window.innerHeight - (padding + title.parent().outerHeight() + toolbar.outerHeight());
  203. content.height(height);
  204. };
  205. function showFilters() {
  206. };
  207. function reloadCarousels() {
  208. _carousels.length = 0;
  209. $('.cdfCarouselHolder').each(function(i, e) {
  210. _carousels.push(createCarousel(e));
  211. });
  212. };
  213. function resizeCarousel(element) {
  214. var $element = (element instanceof $ ? element: $(element)),
  215. contentWidth = _content.innerWidth();
  216. totalWidth = 0,
  217. count = 0;
  218. $(element).find("li.cdfCarouselItem").each(function(i, e) {
  219. count += 1;
  220. var $e = $(e);
  221. $e.width(contentWidth);
  222. totalWidth += $e.outerWidth(true);
  223. //contentHeight = $e.height() > contentHeight ? $e.height() : contentHeight;
  224. });
  225. $element.width(totalWidth);
  226. return count;
  227. };
  228. function createCarousel(element) {
  229. var $element = $(element);
  230. resizeCarousel($element.find('ul.cdfCarouself'));
  231. var scroller = new Scroller($element.find('.cdfCarousel'), {},
  232. $);
  233. scroller.fitToContainer();
  234. return scroller;
  235. }
  236. function refreshNav() {
  237. var $nav = $('select#navSelector');
  238. if ( typeof render_navigation != 'undefined') {
  239. $nav.empty();
  240. $nav.unbind('change');
  241. $nav.bind('change',
  242. function(e) {
  243. var keys = {};
  244. var args = $.each($('select#navSelector').val().split('&'),function(i,e) {
  245. var t = e.split('=');
  246. keys[t[0]] = t[1];
  247. });
  248. myself.loadDashboard.call(myself, keys);
  249. });
  250. $nav.append("<option data-placeholder='true'>Navigate</option>");
  251. $.each(render_navigation.navTargets,
  252. function(i, e) {
  253. $nav.append("<option value='" + e[1] + "'>" + e[0] + "</option>");
  254. });
  255. $nav.show();
  256. $nav.selectmenu('refresh');
  257. } else {
  258. $nav.hide();
  259. };
  260. };
  261. this.refresh = function() {
  262. Dashboards.log("Refreshing");
  263. /* If we're going for a reload, we want to
  264. * bypass the browser cache, so we need the
  265. * 'true' argument.
  266. */
  267. window.location.reload(true);
  268. };
  269. this.favorites = function() {
  270. Dashboards.log("Adding to favorites");
  271. };
  272. this.filters = function() {
  273. };
  274. this.settings = function() {
  275. Dashboards.log("Customizing settings");
  276. };
  277. this.filtersOk = function() {
  278. Dashboards.log("Accepting Filters");
  279. };
  280. this.filtersCancel = function() {
  281. Dashboards.log("Rejecting Filters");
  282. $.mobile.changePage(
  283. "#" + $.mobile.urlHistory.getPrev().url,
  284. {transition:'flip', reverse:true}
  285. );
  286. };
  287. this.refreshSelector = function(component) {
  288. $("#" + component.htmlObject + " select").attr('data-theme', _jqmTheme).selectmenu();
  289. }
  290. this.cdfLoaded = function() {
  291. Dashboards.log('cdf-m caught cdf loading');
  292. refreshNav();
  293. this.resizeAll();
  294. }
  295. }
  296. $(function() {
  297. var parameters = {};
  298. $.each(location.search.slice(1).split('&').map(function(e) {
  299. return e.split('=')
  300. }),
  301. function(i, e) {
  302. parameters[e[0]] = e[1]
  303. });
  304. window.cdfmobile = new CDFMobile();
  305. cdfmobile.parameters = parameters;
  306. cdfmobile.redrawToolbar([
  307. // {
  308. // label: "Favorites",
  309. // icon: "star",
  310. // callback: cdfmobile.favorites
  311. // },
  312. // {
  313. // label: "Settings",
  314. // icon: "gear",
  315. // callback: cdfmobile.settings
  316. // },
  317. {
  318. label: "Filters",
  319. icon: "search",
  320. location: "#filtersPanel",
  321. transition: "flip",
  322. callback: cdfmobile.filters
  323. },
  324. {
  325. label: "Refresh",
  326. icon: "refresh",
  327. callback: cdfmobile.refresh
  328. }
  329. ]);
  330. cdfmobile.redrawFiltersToolbar([
  331. // {
  332. // label: "Cancel",
  333. // icon: "delete",
  334. // callback: cdfmobile.filtersCancel,
  335. // },
  336. {
  337. // label: "Ok",
  338. label: "Done",
  339. icon: "check",
  340. location: "#dashboardView",
  341. transition: "flip",
  342. callback: cdfmobile.filtersOk,
  343. }
  344. ]);
  345. setTimeout(function() {
  346. cdfmobile.redrawDashboard();
  347. },
  348. 20);
  349. $(window).bind('cdfLoaded', function(){
  350. cdfmobile.cdfLoaded();
  351. });
  352. $(window).bind('resize', cdfmobile.resizeAll);
  353. });