1 | import {SharedUiComponent} from "./shareduicomponent";
|
2 |
|
3 | export class cjsRightPanel extends SharedUiComponent {
|
4 | constructor() {
|
5 | super();
|
6 | this.componentId = "cjsRightPanel";
|
7 | this.template = require("./cjs-right-panel.html");
|
8 | this.handledSwipeState = "rightBorder";
|
9 | this.transition = "coverRight";
|
10 | this.nativeShowTransition = "showrightpanel";
|
11 | this.nativeHideTransition = "hiderightpanel";
|
12 | }
|
13 | isNative() {
|
14 | return false;
|
15 | }
|
16 | controller($scope) {
|
17 | var self = $scope.componentDefinition;
|
18 | self.scope = $scope;
|
19 | $scope.componentId = self.id;
|
20 | self.defaultController = function() { };
|
21 | $scope.hideModal = function() {
|
22 | var routeScope = self.app.scopesForRoutes[self.route];
|
23 | if (self.data.closeCallback) {
|
24 | routeScope.$eval(self.data.closeCallback)(self.data);
|
25 | }
|
26 |
|
27 |
|
28 | self.app.setSharedUiComponentState(routeScope, self.id, false, true, self.data);
|
29 | };
|
30 | $scope.runOnMainScope = function(funcName, params) {
|
31 | var routeScope = self.app.scopesForRoutes[self.route];
|
32 | if (routeScope) {
|
33 | routeScope.$eval(funcName).apply(undefined, params);
|
34 | }
|
35 | };
|
36 | $scope.runOnMainScopeAndClose = function(funcName, params) {
|
37 | $scope.hideModal();
|
38 | var routeScope = self.app.scopesForRoutes[self.route];
|
39 | if (routeScope) {
|
40 | routeScope.$eval(funcName).apply(undefined, params);
|
41 | }
|
42 | };
|
43 |
|
44 | }
|
45 | setPanelPosition(self, progress) {
|
46 | self.popuptrigger = {
|
47 | progress: progress,
|
48 | transition: self.transition
|
49 | };
|
50 | }
|
51 | forceHide(self) {
|
52 | self.active = false;
|
53 | window.scrollTo(self.scrollX, self.scrollY);
|
54 | document.getElementById("viewport").setAttribute("content", "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0");
|
55 |
|
56 | }
|
57 | forceShow(self) {
|
58 | self.scrollX = window.scrollX;
|
59 | self.scrollY = window.scrollY;
|
60 | self.active = true;
|
61 | document.getElementById("viewport").setAttribute("content", "width=260, initial-scale=1, maximum-scale=1, user-scalable=0");
|
62 | window.scrollTo(0, 0);
|
63 | }
|
64 | setState(self, route, active, available, data) {
|
65 | self.data = data;
|
66 | self.route = route;
|
67 | self.available = available;
|
68 |
|
69 | if (window.NativeNav) {
|
70 | if (active && !self.active) {
|
71 | self.originRect = null;
|
72 | if (data.element && data.element.length) {
|
73 | self.originRect = data.element[0].getBoundingClientRect();
|
74 | }
|
75 | window.NativeNav.startNativeTransition(self.nativeShowTransition, null, function() {
|
76 | angular.element("body").addClass("cjs-shared-popup-active");
|
77 | document.getElementById("viewport").setAttribute("content", "width=260, initial-scale=1, maximum-scale=1, user-scalable=0");
|
78 | self.active = active;
|
79 | window.scrollTo(0, 0);
|
80 | self.app.scopesForRoutes[self.route].$apply();
|
81 | window.NativeNav.finishNativeTransition();
|
82 | },
|
83 | self.scope.hideModal
|
84 | );
|
85 | } else if (!active && self.active) {
|
86 | window.NativeNav.startNativeTransition(self.nativeHideTransition, null, function() {
|
87 | angular.element("body").removeClass("cjs-shared-popup-active");
|
88 | document.getElementById("viewport").setAttribute("content", "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0");
|
89 | self.active = active;
|
90 | self.app.scopesForRoutes[self.route].$apply();
|
91 | window.scrollTo(self.scrollX, self.scrollY);
|
92 | window.NativeNav.finishNativeTransition();
|
93 | });
|
94 | }
|
95 | } else {
|
96 | if (!active) {
|
97 | self.setPanelPosition(self, 0);
|
98 | } else {
|
99 | self.setPanelPosition(self, 1);
|
100 | }
|
101 | }
|
102 |
|
103 |
|
104 | }
|
105 | getSwipeNav(self, active, available) {
|
106 | var d = {};
|
107 | if (available) d[self.handledSwipeState] = {
|
108 | component: self.id
|
109 | };
|
110 | return d;
|
111 | }
|
112 | updateSwipe(self, swipeState) {
|
113 | if (!self.available) return;
|
114 | if (self.active) return;
|
115 | if (swipeState[self.handledSwipeState]) {
|
116 | self.setPanelPosition(self, swipeState[self.handledSwipeState]);
|
117 | self.scope.$apply();
|
118 | }
|
119 | }
|
120 | endSwipe(self, swipeState) {
|
121 | if (!self.available) return;
|
122 | if (self.active) return;
|
123 |
|
124 | if (swipeState[self.handledSwipeState]) {
|
125 | if (swipeState[self.handledSwipeState] < 0.1) {
|
126 | self.setPanelPosition(self, 0);
|
127 | self.scope.$apply();
|
128 | } else {
|
129 | self.setPanelPosition(self, 1);
|
130 | self.scope.$apply();
|
131 | }
|
132 | }
|
133 |
|
134 |
|
135 | }
|
136 | }
|
137 |
|
138 | export default cjsRightPanel; |
\ | No newline at end of file |