UNPKG

chondric/src/directives/cjs-sidepanel.js

Version:

15.4 kBJavaScriptView Raw

1export default {
  name: "cjsSidepanel",
  injections: [],
  fn: () => {
      var panelTransitions = {
          revealRight: {
              init: function(panel, page, overlay) {
                  // set initial position
              },
              progress: function(panel, page, overlay, progress) {
                  // set intermediate position
              },
              cancel: function(panel, page, overlay, prevProgress) {
                  // move off screen with transition, return timing
              },
              complete: function(panel, page, overlay, prevProgress) {
                  // move on screen with transition, return timing
              },
              reset: function(panel, page, overlay) {
                  // remove custom css
              }
          },
          coverRight: {
              init: function(panel, page, overlay) {
                  // set initial position
                  var spwidth = panel.width();
                  overlay.css({
                      "visibility": "visible",
                      "-webkit-transition": "none",
                      "opacity": "0"
                  });
                  panel.css({
                      "right": 0,
                      "left": "auto",
                      "display": "block",
                      "-webkit-transition": "none",
                      "-webkit-transform": "translate(" + (spwidth) + "px, 0)"
                  });
              },
              progress: function(panel, page, overlay, progress) {
                  // set intermediate position
                  var spwidth = panel.width();
                  overlay.css({
                      "visibility": "visible",
                      "-webkit-transition": "none",
                      "opacity": (progress * 0.3)
                  });
                  panel.css({
                      "right": 0,
                      "left": "auto",
                      "display": "block",
                      "-webkit-transition": "none",
                      "-webkit-transform": "translate(" + (spwidth - progress * spwidth) + "px, 0)"
                  });
              },
              cancel: function(panel, page, overlay, prevProgress) {
                  // move off screen with transition, return timing
                  var time = (prevProgress) * 300;
                  if (time === 0) return 0;
                  var spwidth = panel.width();
                  overlay.css({
                      "visibility": "visible",
                      "-webkit-transition": "opacity " + time + "ms ease-in-out",
                      "opacity": "0"
                  });
                  panel.css({
                      "display": "block",
                      "-webkit-transition": "-webkit-transform " + time + "ms ease-in-out",
                      "-webkit-transform": "translate(" + (spwidth) + "px, 0)"
                  });
                  return time;
              },
              complete: function(panel, page, overlay, prevProgress) {
                  // move on screen with transition, return timing
                  var time = (1 - prevProgress) * 300;
                  overlay.css({
                      "visibility": "visible",
                      "-webkit-transition": "opacity " + time + "ms ease-in-out",
                      "opacity": "0.3"
                  });
                  panel.css({
                      "display": "block",
                      "-webkit-transition": "-webkit-transform " + time + "ms ease-in-out",
                      "-webkit-transform": "translate(" + 0 + "px, 0)"
                  });
                  return time;
              },
              reset: function(panel, page, overlay) {
                  // remove custom css
                  overlay.css({
                      "visibility": "",
                      "-webkit-transition": "",
                      "opacity": ""
                  });
                  panel.css({
                      "display": "",
                      "-webkit-transition": "",
                      "-webkit-transform": "",
                      // keep position because there isn't a reasonable default
                      "right": 0,
                      "left": "auto"
                  });
              }
          },
          slideRight: {
              init: function(panel, page, overlay) {
                  // set initial position
              },
              progress: function(panel, page, overlay, progress) {
                  // set intermediate position
              },
              cancel: function(panel, page, overlay, prevProgress) {
                  // move off screen with transition, return timing
              },
              complete: function(panel, page, overlay, prevProgress) {
                  // move on screen with transition, return timing
              },
              reset: function(panel, page, overlay) {
                  // remove custom css
              }
          },
          revealLeft: {
              init: function(panel, page, overlay) {
                  // set initial position
              },
              progress: function(panel, page, overlay, progress) {
                  // set intermediate position
              },
              cancel: function(panel, page, overlay, prevProgress) {
                  // move off screen with transition, return timing
              },
              complete: function(panel, page, overlay, prevProgress) {
                  // move on screen with transition, return timing
              },
              reset: function(panel, page, overlay) {
                  // remove custom css
              }
          },
          coverLeft: {
              init: function(panel, page, overlay) {
                  // set initial position
                  var spwidth = panel.width();
                  overlay.css({
                      "visibility": "visible",
                      "-webkit-transition": "none",
                      "opacity": "0"
                  });
                  panel.css({
                      "left": 0,
                      "right": "auto",
                      "display": "block",
                      "-webkit-transition": "none",
                      "-webkit-transform": "translate(" + (-spwidth) + "px, 0)"
                  });
              },
              progress: function(panel, page, overlay, progress) {
                  // set intermediate position
                  var spwidth = panel.width();
                  overlay.css({
                      "visibility": "visible",
                      "-webkit-transition": "none",
                      "opacity": (progress * 0.3)
                  });
                  panel.css({
                      "left": 0,
                      "right": "auto",
                      "display": "block",
                      "-webkit-transition": "none",
                      "-webkit-transform": "translate(" + (-spwidth + progress * spwidth) + "px, 0)"
                  });
              },
              cancel: function(panel, page, overlay, prevProgress) {
                  // move off screen with transition, return timing
                  var time = (prevProgress) * 300;
                  if (time === 0) return 0;
                  var spwidth = panel.width();
                  overlay.css({
                      "visibility": "visible",
                      "-webkit-transition": "opacity " + time + "ms ease-in-out",
                      "opacity": "0"
                  });
                  panel.css({
                      "display": "block",
                      "-webkit-transition": "-webkit-transform " + time + "ms ease-in-out",
                      "-webkit-transform": "translate(" + (-spwidth) + "px, 0)"
                  });
                  return time;
              },
              complete: function(panel, page, overlay, prevProgress) {
                  // move on screen with transition, return timing
                  var time = (1 - prevProgress) * 300;
                  overlay.css({
                      "visibility": "visible",
                      "-webkit-transition": "opacity " + time + "ms ease-in-out",
                      "opacity": "0.3"
                  });
                  panel.css({
                      "display": "block",
                      "-webkit-transition": "-webkit-transform " + time + "ms ease-in-out",
                      "-webkit-transform": "translate(" + 0 + "px, 0)"
                  });
                  return time;
              },
              reset: function(panel, page, overlay) {
                  // remove custom css
                  overlay.css({
                      "visibility": "",
                      "-webkit-transition": "",
                      "opacity": ""
                  });
                  panel.css({
                      "display": "",
                      "-webkit-transition": "",
                      "-webkit-transform": "",
                      // keep position because there isn't a reasonable default
                      "left": 0,
                      "right": "auto"
                  });
              }
          },
          slideLeft: {
              init: function(panel, page, overlay) {
                  // set initial position
              },
              progress: function(panel, page, overlay, progress) {
                  // set intermediate position
              },
              cancel: function(panel, page, overlay, prevProgress) {
                  // move off screen with transition, return timing
              },
              complete: function(panel, page, overlay, prevProgress) {
                  // move on screen with transition, return timing
              },
              reset: function(panel, page, overlay) {
                  // remove custom css
              }
          }
      };
239
      return {
          //        restrict: "E",
          link: function(scope, element, attrs) {
243
244
              function clickOutsidePopup(e) {
                  var r = element[0].getBoundingClientRect();
                  var x = e.changedTouches ? e.changedTouches[0].clientX : e.touches ? e.touches[0].clientX : e.clientX;
                  var y = e.changedTouches ? e.changedTouches[0].clientY : e.touches ? e.touches[0].clientY : e.clientY;
                  if (x > r.left && x < r.right && y > r.top && y < r.bottom) return;
                  scope.$apply("hideModal('" + attrs.cjsSidepanel + "')");
              }
252
              element.addClass("modal");
              element.addClass("sidepanel");
255
              var pushmode;
257
              if (!element.hasClass("left")) {
                  element.addClass("right");
                  if (element.hasClass("push")) pushmode = "left";
              } else {
                  if (element.hasClass("push")) pushmode = "right";
              }
264
265
266
              var parentPageElement = element.closest(".chondric-page");
              if (parentPageElement.length === 0) parentPageElement = element.closest(".chondric-section");
              if (parentPageElement.length === 0) parentPageElement = element.closest(".chondric-viewport");
              var overlay = angular.element(".modal-overlay", parentPageElement);
              if (overlay.length === 0) {
                  overlay = angular.element('<div class="modal-overlay"></div>');
                  parentPageElement.append(overlay);
              }
275
              if (pushmode) {
                  parentPageElement.addClass("haspushpanel");
              }
279
280
              scope.$watch(attrs.cjsSidepanel, function(val, oldval) {
                  if (!val && !oldval) return;
                  if (document.activeElement && !window.NativeNav && document.activeElement.tagName != "BODY" && (((val && !oldval) || !(val && oldval)) || val.progress != oldval.progress)) {
                      document.activeElement.blur();
                  }
                  var transition = "coverRight";
                  var progress = 0;
                  var oldprogress = 0;
                  var spwidth = element.width() || 200;
                  var dwidth = angular.element(document).width();
291
                  if (val && val.transition) transition = val.transition;
                  else if (oldval && oldval.transition) transition = oldval.transition;
294
                  if (val && val.progress) {
                      // progress will be % of screen width
                      // convert back to px and make 100% at side panel width
                      progress = Math.min(1, val.progress * dwidth / spwidth);
                  } else {
                      progress = 0;
                  }
                  if (oldval && oldval.progress) {
                      // progress will be % of screen width
                      // convert back to px and make 100% at side panel width
                      oldprogress = Math.min(1, oldval.progress * dwidth / spwidth);
                  } else {
                      oldprogress = 0;
                  }
309
                  if (progress == 1) {
                      overlay.addClass("active");
                      window.document.body.addEventListener(window.useMouse ? 'mousedown' : "touchstart", clickOutsidePopup, true);
313
                      if (!oldprogress) {
                          // ensure initial position was set
                          panelTransitions[transition].init(element, parentPageElement, overlay);
                      }
                      window.setTimeout(function() {
                          panelTransitions[transition].complete(element, parentPageElement, overlay, oldprogress);
                      }, 0);
321
                  } else if (progress === 0) {
                      var time = panelTransitions[transition].cancel(element, parentPageElement, overlay, oldprogress);
                      window.setTimeout(function() {
                          panelTransitions[transition].reset(element, parentPageElement, overlay);
                      }, time);
                      overlay.removeClass("active");
                      window.document.body.removeEventListener(window.useMouse ? 'mousedown' : "touchstart", clickOutsidePopup, true);
                  } else {
                      panelTransitions[transition].progress(element, parentPageElement, overlay, progress);
                      overlay.addClass("active");
                      window.document.body.addEventListener(window.useMouse ? 'mousedown' : "touchstart", clickOutsidePopup, true);
                  }
334
              });
          }
      };
  }
339};

1	`export default {`
2	`name: "cjsSidepanel",`
3	`injections: [],`
4	`fn: () => {`
5	`var panelTransitions = {`
6	`revealRight: {`
7	`init: function(panel, page, overlay) {`
8	`// set initial position`
9	`},`
10	`progress: function(panel, page, overlay, progress) {`
11	`// set intermediate position`
12	`},`
13	`cancel: function(panel, page, overlay, prevProgress) {`
14	`// move off screen with transition, return timing`
15	`},`
16	`complete: function(panel, page, overlay, prevProgress) {`
17	`// move on screen with transition, return timing`
18	`},`
19	`reset: function(panel, page, overlay) {`
20	`// remove custom css`
21	`}`
22	`},`
23	`coverRight: {`
24	`init: function(panel, page, overlay) {`
25	`// set initial position`
26	`var spwidth = panel.width();`
27	`overlay.css({`
28	`"visibility": "visible",`
29	`"-webkit-transition": "none",`
30	`"opacity": "0"`
31	`});`
32	`panel.css({`
33	`"right": 0,`
34	`"left": "auto",`
35	`"display": "block",`
36	`"-webkit-transition": "none",`
37	`"-webkit-transform": "translate(" + (spwidth) + "px, 0)"`
38	`});`
39	`},`
40	`progress: function(panel, page, overlay, progress) {`
41	`// set intermediate position`
42	`var spwidth = panel.width();`
43	`overlay.css({`
44	`"visibility": "visible",`
45	`"-webkit-transition": "none",`
46	`"opacity": (progress * 0.3)`
47	`});`
48	`panel.css({`
49	`"right": 0,`
50	`"left": "auto",`
51	`"display": "block",`
52	`"-webkit-transition": "none",`
53	`"-webkit-transform": "translate(" + (spwidth - progress * spwidth) + "px, 0)"`
54	`});`
55	`},`
56	`cancel: function(panel, page, overlay, prevProgress) {`
57	`// move off screen with transition, return timing`
58	`var time = (prevProgress) * 300;`
59	`if (time === 0) return 0;`
60	`var spwidth = panel.width();`
61	`overlay.css({`
62	`"visibility": "visible",`
63	`"-webkit-transition": "opacity " + time + "ms ease-in-out",`
64	`"opacity": "0"`
65	`});`
66	`panel.css({`
67	`"display": "block",`
68	`"-webkit-transition": "-webkit-transform " + time + "ms ease-in-out",`
69	`"-webkit-transform": "translate(" + (spwidth) + "px, 0)"`
70	`});`
71	`return time;`
72	`},`
73	`complete: function(panel, page, overlay, prevProgress) {`
74	`// move on screen with transition, return timing`
75	`var time = (1 - prevProgress) * 300;`
76	`overlay.css({`
77	`"visibility": "visible",`
78	`"-webkit-transition": "opacity " + time + "ms ease-in-out",`
79	`"opacity": "0.3"`
80	`});`
81	`panel.css({`
82	`"display": "block",`
83	`"-webkit-transition": "-webkit-transform " + time + "ms ease-in-out",`
84	`"-webkit-transform": "translate(" + 0 + "px, 0)"`
85	`});`
86	`return time;`
87	`},`
88	`reset: function(panel, page, overlay) {`
89	`// remove custom css`
90	`overlay.css({`
91	`"visibility": "",`
92	`"-webkit-transition": "",`
93	`"opacity": ""`
94	`});`
95	`panel.css({`
96	`"display": "",`
97	`"-webkit-transition": "",`
98	`"-webkit-transform": "",`
99	`// keep position because there isn't a reasonable default`
100	`"right": 0,`
101	`"left": "auto"`
102	`});`
103	`}`
104	`},`
105	`slideRight: {`
106	`init: function(panel, page, overlay) {`
107	`// set initial position`
108	`},`
109	`progress: function(panel, page, overlay, progress) {`
110	`// set intermediate position`
111	`},`
112	`cancel: function(panel, page, overlay, prevProgress) {`
113	`// move off screen with transition, return timing`
114	`},`
115	`complete: function(panel, page, overlay, prevProgress) {`
116	`// move on screen with transition, return timing`
117	`},`
118	`reset: function(panel, page, overlay) {`
119	`// remove custom css`
120	`}`
121	`},`
122	`revealLeft: {`
123	`init: function(panel, page, overlay) {`
124	`// set initial position`
125	`},`
126	`progress: function(panel, page, overlay, progress) {`
127	`// set intermediate position`
128	`},`
129	`cancel: function(panel, page, overlay, prevProgress) {`
130	`// move off screen with transition, return timing`
131	`},`
132	`complete: function(panel, page, overlay, prevProgress) {`
133	`// move on screen with transition, return timing`
134	`},`
135	`reset: function(panel, page, overlay) {`
136	`// remove custom css`
137	`}`
138	`},`
139	`coverLeft: {`
140	`init: function(panel, page, overlay) {`
141	`// set initial position`
142	`var spwidth = panel.width();`
143	`overlay.css({`
144	`"visibility": "visible",`
145	`"-webkit-transition": "none",`
146	`"opacity": "0"`
147	`});`
148	`panel.css({`
149	`"left": 0,`
150	`"right": "auto",`
151	`"display": "block",`
152	`"-webkit-transition": "none",`
153	`"-webkit-transform": "translate(" + (-spwidth) + "px, 0)"`
154	`});`
155	`},`
156	`progress: function(panel, page, overlay, progress) {`
157	`// set intermediate position`
158	`var spwidth = panel.width();`
159	`overlay.css({`
160	`"visibility": "visible",`
161	`"-webkit-transition": "none",`
162	`"opacity": (progress * 0.3)`
163	`});`
164	`panel.css({`
165	`"left": 0,`
166	`"right": "auto",`
167	`"display": "block",`
168	`"-webkit-transition": "none",`
169	`"-webkit-transform": "translate(" + (-spwidth + progress * spwidth) + "px, 0)"`
170	`});`
171	`},`
172	`cancel: function(panel, page, overlay, prevProgress) {`
173	`// move off screen with transition, return timing`
174	`var time = (prevProgress) * 300;`
175	`if (time === 0) return 0;`
176	`var spwidth = panel.width();`
177	`overlay.css({`
178	`"visibility": "visible",`
179	`"-webkit-transition": "opacity " + time + "ms ease-in-out",`
180	`"opacity": "0"`
181	`});`
182	`panel.css({`
183	`"display": "block",`
184	`"-webkit-transition": "-webkit-transform " + time + "ms ease-in-out",`
185	`"-webkit-transform": "translate(" + (-spwidth) + "px, 0)"`
186	`});`
187	`return time;`
188	`},`
189	`complete: function(panel, page, overlay, prevProgress) {`
190	`// move on screen with transition, return timing`
191	`var time = (1 - prevProgress) * 300;`
192	`overlay.css({`
193	`"visibility": "visible",`
194	`"-webkit-transition": "opacity " + time + "ms ease-in-out",`
195	`"opacity": "0.3"`
196	`});`
197	`panel.css({`
198	`"display": "block",`
199	`"-webkit-transition": "-webkit-transform " + time + "ms ease-in-out",`
200	`"-webkit-transform": "translate(" + 0 + "px, 0)"`
201	`});`
202	`return time;`
203	`},`
204	`reset: function(panel, page, overlay) {`
205	`// remove custom css`
206	`overlay.css({`
207	`"visibility": "",`
208	`"-webkit-transition": "",`
209	`"opacity": ""`
210	`});`
211	`panel.css({`
212	`"display": "",`
213	`"-webkit-transition": "",`
214	`"-webkit-transform": "",`
215	`// keep position because there isn't a reasonable default`
216	`"left": 0,`
217	`"right": "auto"`
218	`});`
219	`}`
220	`},`
221	`slideLeft: {`
222	`init: function(panel, page, overlay) {`
223	`// set initial position`
224	`},`
225	`progress: function(panel, page, overlay, progress) {`
226	`// set intermediate position`
227	`},`
228	`cancel: function(panel, page, overlay, prevProgress) {`
229	`// move off screen with transition, return timing`
230	`},`
231	`complete: function(panel, page, overlay, prevProgress) {`
232	`// move on screen with transition, return timing`
233	`},`
234	`reset: function(panel, page, overlay) {`
235	`// remove custom css`
236	`}`
237	`}`
238	`};`
239
240	`return {`
241	`// restrict: "E",`
242	`link: function(scope, element, attrs) {`
243
244
245	`function clickOutsidePopup(e) {`
246	`var r = element[0].getBoundingClientRect();`
247	`var x = e.changedTouches ? e.changedTouches[0].clientX : e.touches ? e.touches[0].clientX : e.clientX;`
248	`var y = e.changedTouches ? e.changedTouches[0].clientY : e.touches ? e.touches[0].clientY : e.clientY;`
249	`if (x > r.left && x < r.right && y > r.top && y < r.bottom) return;`
250	`scope.$apply("hideModal('" + attrs.cjsSidepanel + "')");`
251	`}`
252
253	`element.addClass("modal");`
254	`element.addClass("sidepanel");`
255
256	`var pushmode;`
257
258	`if (!element.hasClass("left")) {`
259	`element.addClass("right");`
260	`if (element.hasClass("push")) pushmode = "left";`
261	`} else {`
262	`if (element.hasClass("push")) pushmode = "right";`
263	`}`
264
265
266
267	`var parentPageElement = element.closest(".chondric-page");`
268	`if (parentPageElement.length === 0) parentPageElement = element.closest(".chondric-section");`
269	`if (parentPageElement.length === 0) parentPageElement = element.closest(".chondric-viewport");`
270	`var overlay = angular.element(".modal-overlay", parentPageElement);`
271	`if (overlay.length === 0) {`
272	`overlay = angular.element('<div class="modal-overlay"></div>');`
273	`parentPageElement.append(overlay);`
274	`}`
275
276	`if (pushmode) {`
277	`parentPageElement.addClass("haspushpanel");`
278	`}`
279
280
281	`scope.$watch(attrs.cjsSidepanel, function(val, oldval) {`
282	`if (!val && !oldval) return;`
283	`if (document.activeElement && !window.NativeNav && document.activeElement.tagName != "BODY" && (((val && !oldval) \|\| !(val && oldval)) \|\| val.progress != oldval.progress)) {`
284	`document.activeElement.blur();`
285	`}`
286	`var transition = "coverRight";`
287	`var progress = 0;`
288	`var oldprogress = 0;`
289	`var spwidth = element.width() \|\| 200;`
290	`var dwidth = angular.element(document).width();`
291
292	`if (val && val.transition) transition = val.transition;`
293	`else if (oldval && oldval.transition) transition = oldval.transition;`
294
295	`if (val && val.progress) {`
296	`// progress will be % of screen width`
297	`// convert back to px and make 100% at side panel width`
298	`progress = Math.min(1, val.progress * dwidth / spwidth);`
299	`} else {`
300	`progress = 0;`
301	`}`
302	`if (oldval && oldval.progress) {`
303	`// progress will be % of screen width`
304	`// convert back to px and make 100% at side panel width`
305	`oldprogress = Math.min(1, oldval.progress * dwidth / spwidth);`
306	`} else {`
307	`oldprogress = 0;`
308	`}`
309
310	`if (progress == 1) {`
311	`overlay.addClass("active");`
312	`window.document.body.addEventListener(window.useMouse ? 'mousedown' : "touchstart", clickOutsidePopup, true);`
313
314	`if (!oldprogress) {`
315	`// ensure initial position was set`
316	`panelTransitions[transition].init(element, parentPageElement, overlay);`
317	`}`
318	`window.setTimeout(function() {`
319	`panelTransitions[transition].complete(element, parentPageElement, overlay, oldprogress);`
320	`}, 0);`
321
322	`} else if (progress === 0) {`
323	`var time = panelTransitions[transition].cancel(element, parentPageElement, overlay, oldprogress);`
324	`window.setTimeout(function() {`
325	`panelTransitions[transition].reset(element, parentPageElement, overlay);`
326	`}, time);`
327	`overlay.removeClass("active");`
328	`window.document.body.removeEventListener(window.useMouse ? 'mousedown' : "touchstart", clickOutsidePopup, true);`
329	`} else {`
330	`panelTransitions[transition].progress(element, parentPageElement, overlay, progress);`
331	`overlay.addClass("active");`
332	`window.document.body.addEventListener(window.useMouse ? 'mousedown' : "touchstart", clickOutsidePopup, true);`
333	`}`
334
335	`});`
336	`}`
337	`};`
338	`}`
339	`};`