OnLoad checks now for supporting animations. .animations-on css-context

#13
viT-1 · Sep 22, 2016 · 55f8a25 · 55f8a25
1 parent 5ed205c
commit 55f8a25
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 9 deletions.
diff --git a/css/original/base-layScreen-mobile.css b/css/original/base-layScreen-mobile.css
@@ -1,5 +1,5 @@
 /**** Touch-devices */
-*[ly-touch = 'true'] .iYandex[ly-userName = 'firstLetter'] {
+.touch-on .iYandex[ly-userName = 'firstLetter'] {
 	font-weight: bolder;
 }
 /* Touch-devices ****/

diff --git a/css/original/iGallery.css b/css/original/iGallery.css
@@ -65,7 +65,9 @@
 .iGallery[ly-hldDetails ~= 'bhvrHover'] {
 	max-height: 0;
 	height: 0;
-
+}
+
+.animate-on .iGallery[ly-hldDetails ~= 'bhvrHover'] {
 	-webkit-animation: fadeOut 0.3s ease;
 	animation: fadeOut 0.3s ease;
 }

diff --git a/js/onload.js b/js/onload.js
@@ -1,12 +1,38 @@
+var strIsSupportedPostfix = 'on',
+strDoesntSupportedPostfix = 'off';
+
 function initBodySettings(){
 	var o_html = document.documentElement;
 
-	removeAttrVal( o_html, 'class', 'no-js' );
+	toggleAttrVal( o_html, 'class', 'js-off', 'js-on' );
+	addAttrVal( o_html, 'class', 'touch-' + isTouchSupported() );
+	addAttrVal( o_html, 'class', 'animations-' + isAnimationsSupported() );
+}
+
+function isTouchSupported() {
+	var supports = Boolean(
+		( 'ontouchstart' in window)
+		|| (navigator.msMaxTouchPoints > 0)
+		|| (window.DocumentTouch && document instanceof DocumentTouch)
+	);
 
-	if (( 'ontouchstart' in window) || (navigator.msMaxTouchPoints > 0) || (window.DocumentTouch && document instanceof DocumentTouch)){
-		addAttrVal( o_html, 'ly-touch', 'true' );
-	}
-	else {
-		addAttrVal( o_html, 'ly-touch', 'false' );
+	return supports ? strIsSupportedPostfixString : strDoesntSupportedPostfix;
+}
+
+function isAnimationsSupported() {
+	var domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
+    elm = document.documentElement,
+	supports = false;
+
+	if( elm.style.animationName ) { supports = true; }    
+	if( supports === false ) {
+		for( var i = 0; i < domPrefixes.length; i++ ) {
+			if( elm.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
+				supports = true;
+				break;
+			}
+		}
 	}
+
+	return supports ? strIsSupportedPostfixString : strDoesntSupportedPostfix;
 }
diff --git a/xsl/original/base-layScreen.xsl b/xsl/original/base-layScreen.xsl
@@ -15,7 +15,7 @@
 />
 
 <xsl:template match="html">
-	<html class="no-js {@class}">
+	<html class="js-off {@class}">
 		<xsl:apply-templates select="@* | *" />
 	</html>
 </xsl:template>