15088.21 Update

Child UI scaling, UI and child UI Zooming API. Removed 'active white state' on elements. Finalized levelbars addon. Read change log for more.
Aricwithana · Mar 30, 2015 · 0a7775a · 0a7775a
1 parent fe3770f
commit 0a7775a
Show file tree

Hide file tree

Showing 19 changed files with 536 additions and 205 deletions.
diff --git a/LICENSE.md b/LICENSE.md
@@ -1,4 +1,4 @@
-LCARS SDK License 15056.205 (v2.0.5)
+LCARS SDK License 15088.21 (v2.1.0)
 Author: Aric McGriff
 Email: [email protected]
 Website: http://www.lcarssdk.org

diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-LCARS SDK 15056.205
+LCARS SDK 15088.21
 ============
 
 The LCARS SDK is a development kit and environment umbrella designed specifically for generating canon quality and functional LCARS interfaces within a webview.  Utilizing a webview the LCARS SDK can be applied to cross-modern internet browsers and both mobile and desktop applications.  Anywhere a webview is in place the SDK could be used.

diff --git a/index.html b/index.html
diff --git a/lcarssdk/15056.205 b/lcarssdk/15056.205
diff --git a/lcarssdk/15088.21 b/lcarssdk/15088.21
@@ -0,0 +1 @@
+Released 03.29.2015 v2.1.0
diff --git a/lcarssdk/CHANGELOG.md b/lcarssdk/CHANGELOG.md
@@ -113,6 +113,25 @@ EH: Arrive.js + arrive/leave setting
 CO: USS Not Affiliated theme updated
 
 
+15088.21-
+BF: Arrive.js to use Zepto.
+RM: Removed 'active' CSS state.
+RM: Active state JS for IE and touch.
+EH: Orient setting
+EH: Direction settings
+EH: Level Bars updated for direction
+    and orientation settings.
+CO: Added template to index.html, using 
+    the Alert Status Hue Rotation interface.
+BF: Place more than one onresize events on the UI.
+EH: Child Scale, scales a secondary inner 
+    interface to its parent.
+EH: Viewport Zoom uses zoom feature instead
+    of CSS scaling.  Provides a better visual
+    than scaling on Webkit browsers.
+EH: Child Zoom, zooms a seconary inner
+    inerface to its parent.
+
 Legend - 
 BF:  Bug Fix
 CO:  Cosmetic

diff --git a/lcarssdk/LICENSE.md b/lcarssdk/LICENSE.md
@@ -1,4 +1,4 @@
-LCARS SDK License 15056.205 (v2.0.5)
+LCARS SDK License 15088.21 (v2.1.0)
 Author: Aric McGriff
 Email: [email protected]
 Website: http://www.lcarssdk.org

diff --git a/lcarssdk/README.md b/lcarssdk/README.md
@@ -1,4 +1,4 @@
-LCARS SDK 15056.205
+LCARS SDK 15088.21
 ============
 
 The LCARS SDK is a development kit and environment umbrella designed specifically for generating canon quality and functional LCARS interfaces within a webview.  Utilizing a webview the LCARS SDK can be applied to cross-modern internet browsers and both mobile and desktop applications.  Anywhere a webview is in place the SDK could be used.

diff --git a/lcarssdk/addons/levelBar/levelBar.css b/lcarssdk/addons/levelBar/levelBar.css
@@ -1,4 +1,4 @@
-/** LCARS SDK 15056.205
+/** LCARS SDK 15088.21
 * This file is a part of the LCARS SDK.
 * https://github.com/AricwithanA/LCARS-SDK/blob/master/LICENSE.md
 * For more information please go to http://www.lcarssdk.org.
@@ -14,11 +14,10 @@
 	display: -webkit-flex;     /* NEW - Chrome */
 	display: flex;   
 	-webkit-box-orient:horizontal; -moz-box-orient:horizontal; box-orient:horizontal; -webkit-flex-direction:row; -ms-flex-direction:row; -moz-flex-direction:row; flex-direction:row;
-    flex-direction:row-reverse;
+    flex-direction:row;
     padding:6px 0px 6px 0px;
 }
 
-.sdk.levelBar.vertical{-webkit-box-orient:vertical; -moz-box-orient:vertical; box-orient:vertical; -webkit-flex-direction:column; -ms-flex-direction:column; -moz-flex-direction:column; flex-direction:column;}
 
 .sdk.levelBar > .cap{ 
 	-webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
@@ -28,8 +27,18 @@
 	flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
 }
 
-.sdk.levelBar .bar{position:relative; text-align:right;  width:calc(100% - 5px);  height:100%; -webkit-transition:width .75s linear; transition:width .75s linear; width:0px; }
-.sdk.levelBar .cap{border-right:5px solid #ffffff;  height:100%; margin-right:5px;background-color:transparent !important; position:relative; box-shadow: 0 0 0px rgba(0, 0, 0, 0);} 
+.sdk.levelBar .bar{position:relative; text-align:left; width:calc(100% - 5px);  height:100%; -webkit-transition:width .75s linear; transition:width .75s linear; min-width:25px;} 
+.sdk.levelBar .cap{border-left:5px solid #ffffff;  height:100%; margin:0 0 0 5px;background-color:transparent !important; position:relative; box-shadow: 0 0 0px rgba(0, 0, 0, 0);} 
 
+.sdk.levelBar.reverse{flex-direction:row-reverse;}
+.sdk.levelBar.reverse .bar{text-align:right;}
+.sdk.levelBar.reverse .cap{border:none; border-right:5px solid #ffffff;margin:0 5px 0 0;}
 
 
+.sdk.levelBar.vertical{-webkit-box-orient:vertical; -moz-box-orient:vertical; box-orient:vertical; -webkit-flex-direction:column; -ms-flex-direction:column; -moz-flex-direction:column; flex-direction:column-reverse; width:60px; height:100%;}
+.sdk.levelBar.vertical .bar{position:relative; text-align:left; width:100%; height:calc(100% - 5px);  height:100%; -webkit-transition:height .75s linear; transition:height .75s linear; }
+.sdk.levelBar.vertical .cap{border:none; border-bottom:5px solid #ffffff; height:100%; margin: 0 0 5px 0; background-color:transparent !important; position:relative; box-shadow: 0 0 0px rgba(0, 0, 0, 0);}
+
+.sdk.levelBar.vertical.reverse{flex-direction:column; min-height:35px;}
+.sdk.levelBar.vertical.reverse .bar:before{bottom:auto; top:8px;}
+.sdk.levelBar.vertical.reverse .cap{border:none; border-top:5px solid #ffffff; height:100%; margin: 5px 0 0 0;}
diff --git a/lcarssdk/addons/levelBar/levelBar.js b/lcarssdk/addons/levelBar/levelBar.js
@@ -1,4 +1,4 @@
-/** LCARS SDK 15056.205
+/** LCARS SDK 15088.21
 * This file is a part of the LCARS SDK.
 * https://github.com/AricwithanA/LCARS-SDK/blob/master/LICENSE.md
 * For more information please go to http://www.lcarssdk.org.
@@ -100,7 +100,13 @@ LCARS.levelBar = {
                     }    
 
                 }else if(typeof args.args.level === 'number'){
-                    $(elemBar).css('width', 'calc('+args.args.level + '% - 10px)');             
+
+                    if(allObjects[args.elemID].orient === 'vertical' || args.args.direction === 'vertical'){
+                        $(elemBar).css('height', 'calc('+args.args.level + '% - 10px)');     
+                    }else{
+                        $(elemBar).css('width', 'calc('+args.args.level + '% - 10px)');     
+                    }
+
                     allObjects[args.elemID].level = args.args.level;
                     if(allObjects[args.elemID].labelLink === 'label'){      
                         LCARS.settings.set(args.element, {label:''+args.args.level+''});

diff --git a/lcarssdk/addons/scrollbutton/scrollbutton.css b/lcarssdk/addons/scrollbutton/scrollbutton.css
@@ -1,4 +1,4 @@
-/** LCARS SDK 15056.205
+/** LCARS SDK 15088.21
 * This file is a part of the LCARS SDK.
 * https://github.com/AricwithanA/LCARS-SDK/blob/master/LICENSE.md
 * For more information please go to http://www.lcarssdk.org.

diff --git a/lcarssdk/addons/scrollbutton/scrollbutton.js b/lcarssdk/addons/scrollbutton/scrollbutton.js
@@ -1,4 +1,4 @@
-/** LCARS SDK 15056.205
+/** LCARS SDK 15088.21
 * This file is a part of the LCARS SDK.
 * https://github.com/AricwithanA/LCARS-SDK/blob/master/LICENSE.md
 * For more information please go to http://www.lcarssdk.org.

diff --git a/lcarssdk/addons/themes/theme_ussNotAffiliated.css b/lcarssdk/addons/themes/theme_ussNotAffiliated.css
@@ -1,4 +1,4 @@
-/** LCARS SDK 15056.205
+/** LCARS SDK 15088.21
 * This file is a part of the LCARS SDK.
 * https://github.com/AricwithanA/LCARS-SDK/blob/master/LICENSE.md
 * For more information please go to http://www.lcarssdk.org.
@@ -42,7 +42,7 @@
 
 
 .secondary1:not(.complexButton){background-color:#00cc99; border-color:#00cc99;}
-.secondary3:not(.complexButton){background-color:#009999; border-color:#009999;}
+.secondary2:not(.complexButton){background-color:#009999; border-color:#009999;}
 .secondary3:not(.complexButton){background-color:#006666; border-color:#006666;}
 .secondary4:not(.complexButton){background-color:#003333; border-color:#003333;}
 

diff --git a/lcarssdk/css/lcarssdk.css b/lcarssdk/css/lcarssdk.css
@@ -1,6 +1,6 @@
 @charset "utf-8";
 
-/** LCARS SDK 15056.205
+/** LCARS SDK 15088.21
 * This file is a part of the LCARS SDK.
 * https://github.com/AricwithanA/LCARS-SDK/blob/master/LICENSE.md
 * For more information please go to http://www.lcarssdk.org.
@@ -62,10 +62,10 @@ time, mark, audio, video, input {
 }
 
 * {
-    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
-    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
-	-webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
-    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
+    -webkit-touch-callout: none;               
+    -webkit-user-select: none;
+	-webkit-text-size-adjust: none;            
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
 	-webkit-box-sizing: border-box;
 	box-sizing: border-box;
 	-moz-box-sizing: border-box;
@@ -79,9 +79,9 @@ time, mark, audio, video, input {
 .blockFont{font-family:'LCARS Block'; font-size:inherit;}
 
 html{overflow:hidden;}
-body{background-color:#000000;	height: 100%; width:100%; overflow:hidden; position: fixed; -webkit-transform:translate3d(0,0,0);}
+body{background-color:#000000;	height: 100%; width:100%; overflow:hidden; position: fixed; }
 
-.scaler, .stepper{-webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -ms-transform-origin:0% 0%; overflow:hidden;} 
+.scale, .childScale{-webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -ms-transform-origin:0% 0%; overflow:hidden;} 
 
 ol, ul{list-style: none;}
 blockquote, q{quotes: none;	}
@@ -184,8 +184,8 @@ pre{white-space: pre-wrap;
 .block{position:absolute; height:60px; width:25px; background-color:inherit; -webkit-box-sizing:content-box; box-sizing:content-box; }
 .wrapper{position:absolute;}
 .content{position:absolute; color:#ffffff;}
-.title{position:absolute; background-color:#000000; padding-left:10px; padding-right:10px; color:#ffffff; font-size: 82px; height:60px; line-height: .82;}
-.numericBlock{background-color:#000000 !important; padding-left: 0px; text-align: right; font-size: 60px; line-height: 1; height:inherit; color:#ffffff; position:relative; -webkit-box-sizing: border-box; letter-spacing:5px; min-width:25px; width:auto; font-family:'LCARS Block'; margin:0px !important;}
+.title{position:absolute; background-color:#000000; color:#ffffff; font-size: 82px; height:60px; line-height: .82;}
+.numericBlock{background-color:#000000 !important; padding-left: 0px; text-align: right; font-size: 60px; line-height: 1; height:inherit; color:#ffffff; position:relative; letter-spacing:5px; min-width:25px; width:auto; font-family:'LCARS Block'; margin:0px !important;}
 .oval{position:absolute; border-radius:100%; width:45px; height:25px;}
 
 
@@ -477,7 +477,6 @@ pre{white-space: pre-wrap;
 .column{overflow:hidden;}
 .column>*{width:100%; position:relative; margin-top:5px;}
 .column.flexv>.complexButton>*{height:auto;}
-
 .column>*:first-child{margin-top:0px;}
 
 .row{overflow:hidden;}
@@ -486,69 +485,6 @@ pre{white-space: pre-wrap;
 
 
 
-/* Active State Animation */
-@-webkit-keyframes active {
-     0% {background-color:#ffffff;  color:#000000; border-color:#ffffff;}
-     100% {background-color:#ffffff; color:#000000; border-color:#ffffff;}
-}
-@keyframes active {
-     0% {background-color:#ffffff; color:#000000; border-color:#ffffff;}
-     100% {background-color:#ffffff;  color:#000000; border-color:#ffffff;}
-}
-
-/* Active State Parameters */
-
-/* Mouse-Desktop */
-html:not(.ie):not(.touch) .complexButton:not(.disabled):not(.noEvent):active :not(.numericBlock):not(.wrapper), 
-html:not(.touch) .button:not(.disabled):not(.noEvent):active, 
-html:not(.touch) .elbow:not(.disabled):not(.noEvent):active{-webkit-animation: active 1.25s linear infinite !important; animation: active 1.25s linear infinite !important;}
-
-html:not(.touch) .complexButton:active, html:not(.touch) .complexButton:active .block.numericBlock{-webkit-animation: none !important; animation: none !important;}
-
-
-/** Mobile/Touch
-*   Webviews add a 'pause' between touchstart and CSS :active. To ensure the state
-*   is applied and for the correct timing, three contact points are applied.
-*   
-*   First is the native CSS, which triggers after a pause and disappears slower.
-*   This is needed because touchstart/end/cancel trigger faster both when adding
-*   the .active class and removing it.  
-*
-*   Second is the typical .active class setting.  Third remedies a slight flicker
-*   when touching an element just slightly or really quickly. 
-*/
-
-html.touch:not(.ie) .complexButton:not(.disabled):not(.noEvent):active :not(.numericBlock):not(.wrapper), 
-html.touch:not(.ie) .button:not(.disabled):not(.noEvent):active, 
-html.touch:not(.ie) .elbow:not(.disabled):not(.noEvent):active{-webkit-animation: none !important; animation: none !important;}
-
-html.touch:not(.ie) .complexButton:active, html.touch:not(.ie) .complexButton:active .block.numericBlock{-webkit-animation: none !important; animation: none !important;}
-
-html.touch.touch:not(.ie) .complexButton:not(.disabled):not(.noEvent).active> :not(.numericBlock),  
-html.touch:not(.ie) .button:not(.disabled):not(.noEvent).active, 
-html.touch:not(.ie) .elbow:not(.disabled):not(.noEvent).active{-webkit-animation: active 1.25s linear infinite !important; animation: active 1.25s linear infinite !important;}
-
-html.touch:not(.ie) .complexButton.active, html.touch:not(.ie) .complexButton.active .block.numericBlock{-webkit-animation: none !important; animation: none !important;}
-
-html.touch:not(.ie) .complexButton:not(.disabled):not(.noEvent).active:active> :not(.numericBlock),  
-html.touch:not(.ie) .button:not(.disabled):not(.noEvent).active:active, 
-html.touch:not(.ie) .elbow:not(.disabled):not(.noEvent).active:active{-webkit-animation: active 1.25s linear infinite !important; animation: active 1.25s linear infinite !important;}
-
-html.touch:not(.ie) .complexButton.active:active, html.touch:not(.ie) .complexButton.active:active .block.numericBlock{-webkit-animation: none !important; animation: none !important;}
-
-
-/* IE since child mouse events do not trigger parent css states and MS won't change it.  Screw you IE.*/
-.ie .elbow:not(.disabled):not(.noEvent).active,
-.ie .complexButton:not(.disabled):not(.noEvent).active .cap, 
-.ie .complexButton:not(.disabled):not(.noEvent).active .block:not(.numericBlock), 
-.ie .complexButton:not(.disabled):not(.noEvent).active .bar,
-.ie .complexButton:not(.disabled):not(.noEvent).active .button{-webkit-animation: active 1.25s linear infinite !important; animation: active 1.25s linear infinite !important;}  
-
-.ie .complexButton.active, .ie .complexButton.active .numericBlock{-webkit-animation: none !important; animation: none !important;}
-
-
-
-
 
 /*Basic States*/
 .disabled{background-color:#505050 !important; border-color:#505050 !important; pointer-events:none; -webkit-animation:none !important; animation:none!important; cursor:default;}

diff --git a/lcarssdk/css/sdktemplates.css b/lcarssdk/css/sdktemplates.css
@@ -1,4 +1,4 @@
-/** LCARS SDK 15056.205
+/** LCARS SDK 15088.21
 * This file is a part of the LCARS SDK.
 * https://github.com/AricwithanA/LCARS-SDK/blob/master/LICENSE.md
 * For more information please go to http://www.lcarssdk.org.

diff --git a/lcarssdk/js/arrive.js b/lcarssdk/js/arrive.js