SHARE
TWEET

Untitled

a guest Oct 21st, 2019 100 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
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top