first commit

modules/viewmanager/basesettingsview.js

@@ -0,0 +1 @@
+define(["exports","./baseview.js","./basesettingscontainer.js"],function(_exports,_baseview,_basesettingscontainer){function BaseSettingsView(view,params,options){_basesettingscontainer.default.call(this,view),_baseview.default.apply(this,arguments),view.classList.add("settingsView"),this.options=options}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,Object.assign(BaseSettingsView.prototype,_basesettingscontainer.default.prototype),Object.assign(BaseSettingsView.prototype,_baseview.default.prototype),BaseSettingsView.prototype.onResume=function(options){_baseview.default.prototype.onResume.apply(this,arguments),this.settingsOnResume(options)};_exports.default=BaseSettingsView});

modules/viewmanager/basewidget.js

@@ -0,0 +1 @@
+define(["exports"],function(_exports){function BaseWidget(view,params){this.view=view,this.params=params}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,BaseWidget.prototype.onBeginResume=function(options){this.paused=!1},BaseWidget.prototype.onResume=function(options){this.paused=!1},BaseWidget.prototype.onPause=function(){this.paused=!0},BaseWidget.prototype.destroy=function(){this.paused=null,this.view=null,this.params=null};_exports.default=BaseWidget});

modules/viewmanager/transitions.css

@@ -0,0 +1,199 @@
+@-webkit-keyframes slide-from-left {
+    from {
+        -webkit-transform: translateX(-25%);
+        transform: translateX(-25%);
+    }
+}
+
+@keyframes slide-from-left {
+    from {
+        -webkit-transform: translateX(-25%);
+        transform: translateX(-25%);
+    }
+}
+
+@-webkit-keyframes slide-from-right {
+    from {
+        -webkit-transform: translateX(100%);
+        transform: translateX(100%);
+    }
+}
+
+@keyframes slide-from-right {
+    from {
+        -webkit-transform: translateX(100%);
+        transform: translateX(100%);
+    }
+}
+
+@-webkit-keyframes slide-to-left {
+    to {
+        -webkit-transform: translateX(-25%);
+        transform: translateX(-25%);
+    }
+}
+
+@keyframes slide-to-left {
+    to {
+        -webkit-transform: translateX(-25%);
+        transform: translateX(-25%);
+    }
+}
+
+@-webkit-keyframes slide-to-right {
+    to {
+        -webkit-transform: translateX(100%);
+        transform: translateX(100%);
+    }
+}
+
+@keyframes slide-to-right {
+    to {
+        -webkit-transform: translateX(100%);
+        transform: translateX(100%);
+    }
+}
+
+@-webkit-keyframes view-scale-up {
+    from {
+        scale: .9;
+        opacity: 0;
+    }
+}
+
+@keyframes view-scale-up {
+    from {
+        scale: .9;
+        opacity: 0;
+    }
+}
+
+@-webkit-keyframes view-scale-down {
+    to {
+        scale: .9;
+        opacity: 0;
+    }
+}
+
+@keyframes view-scale-down {
+    to {
+        scale: .9;
+        opacity: 0;
+    }
+}
+
+@-webkit-keyframes view-fade-in {
+    from {
+        opacity: 0;
+    }
+}
+
+@keyframes view-fade-in {
+    from {
+        opacity: 0;
+    }
+}
+
+@-webkit-keyframes view-fade-out {
+    to {
+        opacity: 0;
+    }
+}
+
+@keyframes view-fade-out {
+    to {
+        opacity: 0;
+    }
+}
+
+.skinHeader {
+    view-transition-name: header-transition;
+}
+
+.mainDrawer {
+    view-transition-name: drawer-transition;
+}
+
+.appfooter {
+    view-transition-name: footer-transition;
+}
+
+.animatedView {
+    view-transition-class: animatedview;
+}
+
+html:active-view-transition-type(slide-forwards) {
+    &::view-transition-old(.animatedview)
+
+{
+    -webkit-animation: 200ms ease-out both slide-to-left;
+    animation: 200ms ease-out both slide-to-left;
+    mix-blend-mode: normal;
+    z-index: 1;
+}
+
+&::view-transition-new(.animatedview) {
+    -webkit-animation: 300ms ease-out both slide-from-right;
+    animation: 300ms ease-out both slide-from-right;
+    mix-blend-mode: normal;
+    z-index: 2;
+}
+
+}
+
+html:active-view-transition-type(slide-backwards) {
+    &::view-transition-old(.animatedview)
+
+{
+    -webkit-animation: 200ms ease-out both slide-to-right;
+    animation: 200ms ease-out both slide-to-right;
+    mix-blend-mode: normal;
+    z-index: 1;
+}
+
+&::view-transition-new(.animatedview) {
+    -webkit-animation: 300ms ease-out both slide-from-left;
+    animation: 300ms ease-out both slide-from-left;
+    mix-blend-mode: normal;
+    z-index: 2;
+}
+
+}
+
+html:active-view-transition-type(scale-forwards) {
+    &::view-transition-old(.animatedview)
+
+{
+    -webkit-animation: 400ms ease-out both view-scale-down;
+    animation: 400ms ease-out both view-scale-down;
+    mix-blend-mode: normal;
+    z-index: 1;
+}
+
+&::view-transition-new(.animatedview) {
+    -webkit-animation: 400ms ease-out both view-scale-up;
+    animation: 400ms ease-out both view-scale-up;
+    mix-blend-mode: normal;
+    z-index: 2;
+}
+
+}
+
+html:active-view-transition-type(scale-backwards) {
+    &::view-transition-old(.animatedview)
+
+{
+    -webkit-animation: 400ms ease-out both view-scale-down;
+    animation: 400ms ease-out both view-scale-down;
+    mix-blend-mode: normal;
+    z-index: 1;
+}
+
+&::view-transition-new(.animatedview) {
+    -webkit-animation: 400ms ease-out both view-scale-up;
+    animation: 400ms ease-out both view-scale-up;
+    mix-blend-mode: normal;
+    z-index: 2;
+}
+
+}