Guest User

Untitled

a guest
Oct 21st, 2019
105
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. namespace [YOUR_NAME_SPACE].Common {
  2.  
  3. export class MySlilerRevealOptions {
  4. initDialog: () => Serenity.EntityDialog<any, any>;
  5. onDataChangeCallback?: () => void;
  6. sliderWidth?: any;
  7. entityOrId?: any;
  8.  
  9. // if we want to show next/previous buttons on slider
  10. // then we also need to include grid data
  11. grid?: Serenity.DataGrid<any, any>;
  12. showNextPreviousButtons?: boolean;
  13. }
  14.  
  15. @Serenity.Decorators.registerClass()
  16. export class MySlilerReveal extends Serenity.TemplatedWidget<MySlilerRevealOptions> {
  17.  
  18. private slider: JQuery;
  19. private overlayDiv: JQuery = $(`<div class="custom-slide-reveal-overlay ui-dialog" style="position: fixed; top: 0px; left: 0px; height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.5);"></div>`);
  20. private dlg: Serenity.EntityDialog<any, any>;
  21.  
  22. private btnPreviousRecord: JQuery = $(`<div class="tool-button btn-previous-record icon-tool-button" style="display: none"><div class="button-outer"><span class="button-inner"><i class="fa fa-step-backward text-purple"></i> Previous</span></div></div>`);
  23. private btnNextRecord: JQuery = $(`<div class="tool-button btn-next-record icon-tool-button" style="display: none"><div class="button-outer"><span class="button-inner"><i class="fa fa-step-forward text-purple"></i> Next</span></div></div>`);
  24.  
  25. constructor(container: JQuery, opt?: MySlilerRevealOptions) {
  26. super(container, opt);
  27.  
  28. this.dlg = this.options.initDialog();
  29.  
  30. // #region pre/next toolbar
  31. let dlgUniqueId = this.dlg.element.attr("id");
  32. let dlgToolbar = this.dlg.element.find(`#${dlgUniqueId}_Toolbar`).find(`.tool-buttons`);
  33.  
  34. let nextPreOuter = $(`<div class="buttons-inner"></div>`);
  35.  
  36. this.btnPreviousRecord.click(e => {
  37. let self = this;
  38.  
  39. (function back(loadedNewPage?: boolean) {
  40. let listIds = self.options.grid.view.getItems().map(x => x[(self.options.grid as any).getIdProperty()]);
  41.  
  42. if (self.options.grid !== null && typeof self.options.grid !== 'undefined') {
  43. if (loadedNewPage) {
  44. let preId = listIds[listIds.length - 1];
  45. self.options.entityOrId = preId;
  46. self.loadByIdAndOpenSlider(preId);
  47. (self.slider as any).slideReveal('show');
  48. }
  49. else {
  50. let currentEntityId = (self.dlg as any).entityId;
  51. if (currentEntityId !== null && typeof currentEntityId !== 'undefined') {
  52.  
  53. let currentIdIndex = listIds.indexOf(currentEntityId);
  54. if (currentIdIndex <= 0) {
  55. self.backToPreviousPage(() => back(true), listIds[0]);
  56. }
  57. else {
  58. let preId = listIds[currentIdIndex - 1];
  59. self.options.entityOrId = preId;
  60. self.loadByIdAndOpenSlider(preId);
  61. (self.slider as any).slideReveal('show');
  62. }
  63. }
  64. }
  65. }
  66. })();
  67. });
  68.  
  69. this.btnNextRecord.click(e => {
  70. let self = this;
  71. (function next(loadedNewPage?: boolean): void {
  72. let listIds = self.options.grid.view.getItems().map(x => x[(self.options.grid as any).getIdProperty()]);
  73.  
  74. if (self.options.grid !== null && typeof self.options.grid !== 'undefined') {
  75. if (loadedNewPage) {
  76. let nextId = listIds[0];
  77. self.options.entityOrId = nextId;
  78. self.loadByIdAndOpenSlider(nextId);
  79. (self.slider as any).slideReveal('show');
  80. }
  81. else {
  82. let currentEntityId = (self.dlg as any).entityId;
  83. if (currentEntityId !== null && typeof currentEntityId !== 'undefined') {
  84. let listIds = self.options.grid.view.getItems().map(x => x[(self.options.grid as any).getIdProperty()]);
  85.  
  86. let currentIdIndex = listIds.indexOf(currentEntityId);
  87. if (currentIdIndex >= listIds.length - 1) {
  88. self.goToNextPage(() => next(true), listIds[0]);
  89. }
  90. else {
  91. let nextId = listIds[currentIdIndex + 1];
  92. self.options.entityOrId = nextId;
  93. self.loadByIdAndOpenSlider(nextId);
  94. (self.slider as any).slideReveal('show');
  95. }
  96. }
  97. }
  98. }
  99. })();
  100. });
  101.  
  102. nextPreOuter.append(this.btnPreviousRecord);
  103. nextPreOuter.append(this.btnNextRecord);
  104.  
  105. dlgToolbar.find(".buttons-outer").append(nextPreOuter);
  106.  
  107. // #endregion
  108.  
  109. //container.appendTo(target);
  110. container.appendTo($("body"));
  111.  
  112. if (this.options.showNextPreviousButtons && this.options.grid !== null && typeof this.options.grid !== "undefined") {
  113. this.btnPreviousRecord.show();
  114. this.btnNextRecord.show();
  115. }
  116.  
  117. if ($(".custom-slide-reveal-overlay").length > 0) {
  118. this.overlayDiv.css("opacity", 0.3);
  119. }
  120.  
  121. this.overlayDiv.insertBefore(this.element);
  122.  
  123. this.overlayDiv.click(e => {
  124. try {
  125. (this.slider as any).slideReveal('hide');
  126. } catch{ }
  127. });
  128.  
  129.  
  130. let targetIndex = 0;
  131. try {
  132. targetIndex = Q.parseInteger($(".s-Dialog").css("z-Index"));
  133. } catch{ }
  134.  
  135. targetIndex = targetIndex.toString() == "NaN" ? 0 : targetIndex;
  136. targetIndex = targetIndex <= 1100 ? 1100 : targetIndex;
  137.  
  138. this.overlayDiv.css("z-index", targetIndex + 1);
  139. this.element.css("z-index", targetIndex + 1);
  140. this.byId("sliderCloseButton").css("z-index", targetIndex + 1);
  141.  
  142. this.element.css("position", "relative");
  143.  
  144. this.dlg.element.addClass("flex-layout");
  145.  
  146. let nbrExistedSlider = $(".slider-container").length;
  147.  
  148. //let topHeight = $('header.main-header').height();
  149. this.slider = (this.byId("sliderContainer") as any).slideReveal({
  150. push: false,
  151. position: 'right',
  152. zIndex: 1100,
  153. overlay: false,
  154. autoEscape: true,
  155. //top: topHeight,
  156. width: Q.coalesce(this.options.sliderWidth, `calc(50% - ${nbrExistedSlider * 40}px)`),
  157. trigger: this.byId("sliderCloseButton"),
  158. show: (slider, trigger) => {
  159. (this.dlg as any).handleResponsive();
  160. },
  161. shown: (slider, trigger) => {
  162. $(slider).css("right", "-10px");
  163. },
  164. hide: (slider, trigger) => {
  165.  
  166. },
  167. hidden: (slider, trigger) => {
  168.  
  169. try {
  170. this.overlayDiv.remove();
  171. } catch { }
  172.  
  173. try {
  174. this.element.remove();
  175. } catch{ }
  176.  
  177. try {
  178. this.dlg.dialogClose();
  179. } catch { }
  180.  
  181. $(".slider-full-height-width").last().remove();
  182. }
  183. });
  184.  
  185. this.dlg.element.on("ondatachange", (x, data) => {
  186. //console.log(data);
  187. this.options.onDataChangeCallback && this.options.onDataChangeCallback();
  188. });
  189.  
  190. this.dlg.element.one('dialogclose panelclose', () => {
  191. (this.slider as any).slideReveal('hide');
  192. });
  193. }
  194.  
  195. private backToPreviousPage(callback?: () => void, firstIdOfOldPage?: any) {
  196. let currentPage = parseInt($(".slick-pg-current").val());
  197. let prePage = currentPage - 1;
  198.  
  199. let isFirstPage = false;
  200. if (prePage < 1) {
  201. prePage = 1;
  202. isFirstPage = true;
  203. }
  204.  
  205. this.options.grid.view.seekToPage = prePage;
  206. this.options.grid.refresh();
  207.  
  208. if (!isFirstPage) {
  209. let self = this;
  210. (function execCallback() {
  211. setTimeout(function () {
  212. if (self.options.grid.view.getItems()[0] !== firstIdOfOldPage) {
  213. callback && callback();
  214. }
  215. else {
  216. execCallback();
  217. }
  218. }, 500);
  219. })();
  220. }
  221. }
  222.  
  223. private goToNextPage(callback?: () => void, firstIdOfOldPage?: any) {
  224. let currentTotalPage = parseInt($(".slick-pg-total").text());
  225. let currentPage = parseInt($(".slick-pg-current").val());
  226. let nextPage = currentPage + 1;
  227.  
  228. let isLastPage = false;
  229. if (nextPage > currentTotalPage) {
  230. nextPage = currentTotalPage;
  231. isLastPage = true;
  232. }
  233.  
  234. this.options.grid.view.seekToPage = nextPage;
  235. this.options.grid.refresh();
  236.  
  237. if (!isLastPage) {
  238. let self = this;
  239. (function execCallback() {
  240. setTimeout(function () {
  241. if (self.options.grid.view.getItems()[0] !== firstIdOfOldPage) {
  242. callback && callback();
  243. }
  244. else {
  245. execCallback();
  246. }
  247. }, 500);
  248. })();
  249. }
  250. }
  251.  
  252. public handleEditItem() {
  253. if (this.options.entityOrId !== null && typeof this.options.entityOrId == "string") {
  254. this.loadByIdAndOpenSlider(this.options.entityOrId);
  255. Q.Router.dialog(this.element, this.dlg.element, () => 'edit/' + this.options.entityOrId.toString());
  256. }
  257. else {
  258. Q.Router.dialog(this.element, this.dlg.element, () => "new");
  259. this.loadNewAndOpenSlider();
  260. }
  261. }
  262.  
  263. public loadByIdAndOpenSlider(id: any) {
  264.  
  265. this.dlg.loadById(id,
  266. response => window.setTimeout(() => {
  267.  
  268. this.dlg.dialogOpen(false);
  269.  
  270. this.convertJqueryDialogToSlider();
  271.  
  272. }, 10),
  273. () => {
  274. try {
  275. (this.slider as any).slideReveal('hide');
  276. } catch{
  277.  
  278. }
  279.  
  280. if (!this.element.is(':visible')) {
  281. this.element.remove();
  282. }
  283. });
  284.  
  285. this.injectDialogIntoPanel(id);
  286. }
  287.  
  288. public loadNewAndOpenSlider() {
  289.  
  290. this.btnPreviousRecord.hide();
  291. this.btnNextRecord.hide();
  292.  
  293. this.dlg.loadNewAndOpenDialog(false);
  294.  
  295. this.convertJqueryDialogToSlider();
  296.  
  297. this.injectDialogIntoPanel();
  298. }
  299.  
  300. private convertJqueryDialogToSlider() {
  301. if (!this.dlg.element.parent().is(this.byId("panelContainer"))) {
  302. let orgDlgParent = this.dlg.element.parent();
  303. this.dlg.element.appendTo(this.byId("panelContainer"));
  304.  
  305. orgDlgParent.remove();
  306.  
  307. this.dlg.element.addClass("ui-dialog");
  308. this.dlg.element.addClass("flex-layout");
  309. this.dlg.element.addClass("slider-full-height-width");
  310. }
  311. }
  312.  
  313. private injectDialogIntoPanel(id?: any) {
  314. var nbrRetry = 0;
  315.  
  316. var self = this;
  317. (function appendDialogIntoPanel() {
  318. setTimeout(function () {
  319. nbrRetry++;
  320.  
  321. //console.log(nbrRetry);
  322.  
  323. if (nbrRetry >= 100) {
  324. return;
  325. }
  326.  
  327. if (self.slider.find(".s-TemplatedDialog").length === 1) {
  328.  
  329. (self.slider as any).slideReveal('show');
  330.  
  331. //self.options.grid.element.removeClass('hidden').removeClass('panel-hidden');
  332. }
  333. else {
  334. appendDialogIntoPanel();
  335. }
  336.  
  337. }, 100);
  338. })();
  339.  
  340. }
  341.  
  342. getTemplate() {
  343. return `<div id="~_sliderContainer" class="slider-container ui-dialog" style="background-color:#fff; position:relative; border-left: solid 1px #c9c9c9">
  344. <div id="~_sliderCloseButton" style="width:25px; height: 25px; position: absolute; top: 10px; right: 13px;color: red; cursor: pointer">
  345. <i class="fa fa-lg fa-times"></i>
  346. </div>
  347. <div id="~_panelContainer">
  348.  
  349. </div>
  350. </div>`;
  351. }
  352. }
  353. }
RAW Paste Data