learun-app.js 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417
  1. // Ionic Starter App
  2. // angular.module is a global place for creating, registering and retrieving Angular modules
  3. // 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
  4. // the 2nd parameter is an array of 'requires'
  5. var app = angular.module('starter', ['ionic', 'starter.uirouter', 'starter.directive', 'starter.component'])
  6. .run(['$ionicPlatform', '$rootScope', '$state', function ($ionicPlatform, $rootScope, $state) {
  7. $ionicPlatform.ready(function () {
  8. // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
  9. // for form inputs)
  10. if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
  11. cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false);
  12. cordova.plugins.Keyboard.disableScroll(true);
  13. }
  14. if (window.StatusBar) {
  15. StatusBar.styleDefault();
  16. }
  17. });
  18. }])
  19. .config(['$ionicConfigProvider', function ($ionicConfigProvider) {
  20. $ionicConfigProvider.backButton.previousTitleText(false);
  21. $ionicConfigProvider.backButton.text('').icon('ion-ios-arrow-left');
  22. $ionicConfigProvider.scrolling.jsScrolling(true);
  23. $ionicConfigProvider.platform.ios.tabs.style('standard');
  24. $ionicConfigProvider.platform.ios.tabs.position('bottom');
  25. $ionicConfigProvider.platform.android.tabs.style('standard');
  26. $ionicConfigProvider.platform.android.tabs.position('bottom');
  27. $ionicConfigProvider.platform.ios.navBar.alignTitle('center');
  28. $ionicConfigProvider.platform.android.navBar.alignTitle('center');
  29. $ionicConfigProvider.platform.ios.views.transition('ios');
  30. $ionicConfigProvider.platform.android.views.transition('android');
  31. }])
  32. .factory('$lrfnGuid', function () {
  33. return function () {
  34. var guid = "";
  35. for (var i = 1; i <= 32; i++) {
  36. var n = Math.floor(Math.random() * 16.0).toString(16);
  37. guid += n;
  38. if ((i == 8) || (i == 12) || (i == 16) || (i == 20)) guid += "-";
  39. }
  40. return guid;
  41. };
  42. })
  43. .factory('$lrDoBroadcastToparent', function () {
  44. return function (name, data) {
  45. parent.$.webappDesigner.doBroadcast(name, data);//告诉设计页已经加载完成
  46. }
  47. })
  48. .controller('modelCtrl', ['$rootScope', '$scope', '$state', '$ionicScrollDelegate', '$lrComponent', '$lrDoBroadcastToparent', function ($rootScope, $scope, $state, $ionicScrollDelegate, $lrComponent, $lrDoBroadcastToparent) {
  49. if ($rootScope.iframeLoaded != true) {
  50. $rootScope.$on('init', function (event, data) {
  51. var contentDiv = angular.element(document.querySelector('ion-content .scroll'));
  52. $scope.modelTitle = data.text;
  53. $scope.modelbgColor = "#ffffff";
  54. $scope.modelPadding = true;
  55. $scope.modelHeadHide = false;
  56. for (var i in data.content) {
  57. var item = data.content[i];
  58. }
  59. //初始化设计器
  60. parent.$('.lr-app-componentContent .lr-component').draggable({
  61. connectToSortable: 'ion-content .scroll',
  62. helper: "clone",
  63. revert: "invalid",
  64. iframeFix: true,
  65. iframeObj: parent.frames["phoneDIndex"].contentWindow
  66. });
  67. $('ion-content .scroll').sortable({
  68. opacity: 0.6,
  69. cursor: 'move',
  70. placeholder: "lr-component-state",
  71. start: function (event, ui) {
  72. var $this_place = $(ui.item[0]);
  73. var componentType = $this_place.attr('data-value');
  74. $(".lr-component-state").addClass('lr-component-item');
  75. $(".lr-component-state").html(sortableStartComponent(componentType, $this_place.children()));
  76. $('.ic-select-box').hide();
  77. },
  78. stop: function (event, ui) {
  79. var $this_place = $(ui.item[0]).removeAttr('style');
  80. $this_place.removeAttr('class');
  81. $this_place.addClass('lr-component-item');
  82. var componentType = $this_place.attr('data-value');
  83. if ($lrComponent[componentType] != null) {
  84. $lrComponent[componentType]($this_place, true);
  85. }
  86. $('.ic-select-box').show();
  87. }
  88. });
  89. });
  90. //模板页切换
  91. $rootScope.$on(appBroadcastCode.cgSelectTemplatePage, function (event, data) {
  92. switch (data.cmd) {
  93. case "selectPage":
  94. $state.go("model");
  95. case "removePage":
  96. $('.ic-select-box').hide();
  97. $scope.modelTitle = data.object.text;
  98. $scope.modelbgColor = data.object.attr.bgColor;
  99. $scope.modelPadding = (data.object.attr.isPadding == "true" ? true : false);
  100. $scope.modelHeadHide = (data.object.attr.isHeadHide == "true" ? true : false);
  101. $scope.$apply();
  102. $('ion-content .scroll').html("");
  103. for (var i in data.object.ChildNodes)
  104. {
  105. var _node = data.object.ChildNodes[i];
  106. var $node = $('<div class="lr-component-item" data-value="' + _node.attr.value + '" ></div>');
  107. if ($lrComponent[_node.attr.value] != undefined)
  108. {
  109. $lrComponent[_node.attr.value]($node, false, _node.attr);
  110. $('ion-content .scroll').append($node);
  111. }
  112. }
  113. break;
  114. case "addPage":
  115. $scope.modelTitle = data.object.text;
  116. $scope.modelbgColor = data.object.attr.bgColor;
  117. $scope.modelPadding = (data.object.attr.isPadding == "true" ? true : false);
  118. $scope.modelHeadHide = (data.object.attr.isHeadHide == "true" ? true : false);
  119. $('ion-content .scroll').html("");
  120. $scope.$apply();
  121. break
  122. case "selectComponent":
  123. if ($state.current.name != "model") {
  124. $('.ic-select-box').hide();
  125. $state.go("model");
  126. $scope.modelTitle = data.currentPage.text;
  127. $scope.modelbgColor = data.currentPage.attr.bgColor;
  128. $scope.modelPadding = (data.currentPage.attr.isPadding == "true" ? true : false);
  129. $scope.modelHeadHide = (data.currentPage.attr.isHeadHide == "true" ? true : false);
  130. $('ion-content .scroll').html("");
  131. for (var i in data.currentPage.ChildNodes) {
  132. var _node = data.currentPage.ChildNodes[i];
  133. var $node = $('<div class="lr-component-item" data-value="' + _node.attr.value + '"></div>');
  134. if ($lrComponent[_node.attr.value] != undefined) {
  135. $lrComponent[_node.attr.value]($node, false, _node.attr);
  136. $('ion-content .scroll').append($node);
  137. }
  138. }
  139. setTimeout(function () {
  140. $('.ic-select-box').show();
  141. $('ion-content .scroll').find('[data-value="' + data.object.id + '"]').trigger('click');
  142. }, 600);
  143. $scope.$apply();
  144. }
  145. else {
  146. $('ion-content .scroll').find('[data-value="' + data.object.id + '"]').trigger('click');
  147. }
  148. break;
  149. case "removeComponent":
  150. $('.ic-select-box').hide();
  151. $('ion-content .scroll').html("");
  152. for (var i in data.object.ChildNodes) {
  153. var _node = data.object.ChildNodes[i];
  154. var $node = $('<div class="lr-component-item" data-value="' + _node.attr.value + '" ></div>');
  155. if ($lrComponent[_node.attr.value] != undefined) {
  156. $lrComponent[_node.attr.value]($node, false, _node.attr);
  157. $('ion-content .scroll').append($node);
  158. }
  159. }
  160. break;
  161. break;
  162. case "lrTabs":
  163. $('.ic-select-box').hide();
  164. $rootScope.tabsData = data.data;
  165. $rootScope.focusTabId = data.focus.id;
  166. if ($state.current.name != "tabs") {
  167. $state.go("tabs");
  168. }
  169. else {
  170. var id = data.focus.id;
  171. if (id != 'lrTabs') {
  172. $('.tab-item[data-value="' + id + '"]').trigger('click');
  173. }
  174. }
  175. break;
  176. }
  177. });
  178. //属性设置
  179. $rootScope.$on(appBroadcastCode.cgAttr, function (event, data) {
  180. switch (data.cmd) {
  181. case "pageText"://页面标题改变
  182. $scope.modelTitle = data.value;
  183. break;
  184. case "pageBgColor":
  185. $scope.modelbgColor = data.value;
  186. break;
  187. case "pageIsPadding":
  188. $scope.modelPadding = (data.value == "true" ? true : false);
  189. if ($selectBoxCurrent != null) {
  190. setTimeout(function () {
  191. $selectBoxCurrent.trigger('click');
  192. }, 10);
  193. }
  194. break;
  195. case "pageIsHeadHide":
  196. $scope.modelHeadHide = (data.value == "true" ? true : false);
  197. if ($selectBoxCurrent != null) {
  198. setTimeout(function () {
  199. $selectBoxCurrent.trigger('click');
  200. }, 10);
  201. }
  202. break;
  203. case "tabsBgColor"://页面标题改变
  204. var _class = 'tabs-background-' + data.value;
  205. setTabsClass(_class, "data-bg");
  206. break;
  207. case "tabsIconColor":
  208. var _class = 'tabs-color-' + data.value;
  209. setTabsClass(_class,"data-icon");
  210. break;
  211. case "tabsIconType":
  212. var _class = 'tabs-icon-' + data.value;
  213. setTabsClass(_class, "data-type");
  214. break;
  215. case "tabText":
  216. var $obj = $('.tab-item-active');
  217. $obj.attr('title', data.value);
  218. $obj.find('span').html(data.value);
  219. break;
  220. case "tabIconOn":
  221. var $obj = $('.tab-item-active');
  222. var ion = $obj.attr('icon-on');
  223. $obj.attr('icon-on', data.value);
  224. $obj.find('i').removeClass(ion);
  225. $obj.find('i').addClass(data.value);
  226. break;
  227. case "tabIconOff":
  228. var $obj = $('.tab-item-active');
  229. var ion = $obj.attr('icon-on');
  230. $obj.attr('icon-off', data.value);
  231. break;
  232. case "componentAttr":
  233. $selectBoxCurrent.setAttrLr(data);
  234. break;
  235. }
  236. $scope.$apply();
  237. });
  238. $rootScope.iframeLoaded = true;
  239. $lrDoBroadcastToparent('iframeLoaded');
  240. }
  241. //选中框按钮操作
  242. $scope.$on(appBroadcastCode.btnSelectBox, function (event, data) {
  243. $lrDoBroadcastToparent(appBroadcastCode.doComponentPhone, { cmd: data.cmd, id: data.id });
  244. });
  245. $scope.scroll = function () {
  246. $rootScope.$broadcast("componentScroll", $ionicScrollDelegate.$getByHandle('componentScroll').getScrollPosition());
  247. }
  248. function setTabsClass(_class, type) {
  249. var $obj = $('ion-tabs');
  250. var _oldClass = $obj.attr(type);
  251. $obj.attr(type, _class);
  252. $obj.removeClass(_oldClass);
  253. $obj.addClass(_class);
  254. }
  255. }])
  256. .controller('tabsCtrl', ['$rootScope', '$scope', '$lrDoBroadcastToparent', '$ionicTabsDelegate','$lrfnGuid', function ($rootScope, $scope, $lrDoBroadcastToparent, $ionicTabsDelegate,$lrfnGuid) {
  257. $scope.modelTitle = "Tabs控制器";
  258. $scope.tabs = $rootScope.tabsData;
  259. function doclick() {
  260. var $selectBox = $('.ic-select-box');
  261. $selectBox.show();
  262. var $obj = $(this);
  263. var id = $obj.attr('data-value');
  264. $selectBox.attr('data-value', id)
  265. .width($obj.width())
  266. .height($obj.height())
  267. .offset($obj.offset());
  268. $('.ic-selected').removeClass("ic-selected");
  269. $obj.addClass("ic-selected");
  270. $selectBoxCurrent = $obj;
  271. for (var i in $scope.tabs) {
  272. if ($scope.tabs[i].id == id) {
  273. $ionicTabsDelegate.select(parseInt(i));
  274. $scope.$apply();
  275. break;
  276. }
  277. }
  278. $lrDoBroadcastToparent(appBroadcastCode.doTabTemplatePhone, { cmd: "selectTab", id: id });
  279. }
  280. $scope.$on('$ionicView.afterEnter', function () {
  281. //设置下tab项绑定点击事件
  282. $('.tab-item').on('click', doclick);
  283. $('.tab-item[data-value="' + $rootScope.focusTabId + '"]').trigger('click');
  284. });
  285. //模板增加
  286. $scope.$on(appBroadcastCode.doTabTemplate, function (event, data) {
  287. switch (data.cmd)
  288. {
  289. case "addTab":
  290. $scope.$apply();
  291. setTimeout(function () {
  292. $('.tab-item').on('click', doclick);
  293. $('.tab-item[data-value="' + data.id + '"]').trigger('click');
  294. }, 50);
  295. break;
  296. case "removeTab":
  297. $scope.$apply();
  298. $('.tab-item[data-value="' + data.id + '"]').trigger('click');
  299. break;
  300. }
  301. });
  302. $scope.$on(appBroadcastCode.btnSelectBox, function (event, data) {
  303. var _obj = {};
  304. for (var i in $scope.tabs) {
  305. var _item = $scope.tabs[i];
  306. if (_item.id == data.id)
  307. {
  308. _obj = _item;
  309. break;
  310. }
  311. }
  312. if (_obj.id != undefined)
  313. {
  314. $lrDoBroadcastToparent(appBroadcastCode.doTabTemplatePhone, { cmd: data.cmd, object: _obj });
  315. }
  316. });
  317. }]);
  318. //广播一个数据
  319. function doBroadcast(name, data) {
  320. var $rootScope = angular.element(document.querySelector('[ ng-app="starter"]')).scope().$root;
  321. $rootScope.$broadcast(name, data);
  322. };
  323. //
  324. function sortableStartComponent(componentType,node) {
  325. var componentHtml = "";
  326. switch (componentType) {
  327. case "lrHeader":
  328. if (node.hasClass("fa")) {
  329. componentHtml = '<h1 class="lr-component-heading">标题</h1>';
  330. }
  331. else {
  332. componentHtml = '<h1 class="lr-component-heading">' + node.text() + '</h1>';
  333. }
  334. break;
  335. case "lrParagraph":
  336. if (node.hasClass("fa")) {
  337. componentHtml = '<p class="lr-component-one">请填写内容</p>';
  338. }
  339. else {
  340. componentHtml = '<p class="lr-component-one">' + node.html() + '</p>';
  341. }
  342. break;
  343. case "lrBtn":
  344. if (node.hasClass("fa")) {
  345. componentHtml = '<a class="button button-block" style="border:1px dashed #ccc;">按钮</a>';
  346. }
  347. else {
  348. componentHtml = '<a class="button button-block" style="border:1px dashed #ccc;">' + node.text() + '</a>';
  349. }
  350. break;
  351. case "lrInput":
  352. if (node.hasClass("fa")) {
  353. componentHtml = '<div class="item item-input" style="padding:10px;color: #B8B8B8;border:1px dashed #ccc;" >输入框</div>';
  354. }
  355. else {
  356. componentHtml = '<div class="item item-input" style="padding:10px;color: #B8B8B8;border:1px dashed #ccc;" >' + node.html() + '</div>';
  357. }
  358. break;
  359. case "lrList3":
  360. if (node.hasClass("fa")) {
  361. componentHtml = '<div class="lr-list-type3"><div class="item item-icon-left" style="border:1px dashed #ccc;color:#ccc">';
  362. componentHtml += '<i class="icon ion-ios-barcode-outline royal-bg" data-icon="ion-ios-barcode-outline" data-color="royal"></i>';
  363. componentHtml += '<span class="ng-binding">列表类型一</span></div></div>';
  364. }
  365. else {
  366. componentHtml = '<div class="lr-list-type3" ><div class="item item-icon-left" style="border:1px dashed #ccc;color:#ccc">';
  367. componentHtml += node.find('div').html();
  368. componentHtml += '</div></div>';
  369. }
  370. break;
  371. case "lrList4":
  372. if (node.hasClass("fa")) {
  373. componentHtml = ' <ion-item class="item-icon-right lr-iconitem item" style="border:1px dashed #ccc;">';
  374. componentHtml += '<i class="icon ion-ios-paper-outline bgcolor_b" data-icon="ion-ios-paper-outline" data-color="bgcolor_b"></i>';
  375. componentHtml += '<span class="ng-binding">列表类型二</span>';
  376. componentHtml += '<i class="icon ion-chevron-right icon-accessory "></i>';
  377. componentHtml += '</ion-item>';
  378. }
  379. else {
  380. componentHtml = ' <ion-item class="item-icon-right lr-iconitem item" style="border:1px dashed #ccc;">' + node.html() + '</ion-item>';
  381. }
  382. break;
  383. }
  384. return componentHtml;
  385. }
  386. function sortableStopComponent(componentType) {
  387. var componentHtml = "";
  388. switch (componentType) {
  389. case "lrHeader":
  390. componentHtml = '<lr-component-header></lr-component-header>';
  391. break;
  392. }
  393. return componentHtml;
  394. }