From 97517646bc3fe75940e09e271f16cdf494913cec Mon Sep 17 00:00:00 2001 From: jlukic Date: Wed, 21 Aug 2013 17:26:56 -0400 Subject: [PATCH] comitting failed 3dtransform attempt for posterity Former-commit-id: b6e3be51e9a39d7847f0473e5efb9ffe12319063 Former-commit-id: 31b4b21048caba07a16207c5932a8a46a1ef8e1f --- build/minified/modules/sidebar.js | 97 +++++++++++++++---- build/packaged/modules/sidebar.js | 97 +++++++++++++++---- build/uncompressed/modules/sidebar.css | 16 ++- build/uncompressed/modules/sidebar.js | 97 +++++++++++++++---- node/src/documents/modules/popup.html | 44 ++++----- .../components/semantic/modules/sidebar.css | 16 ++- .../components/semantic/modules/sidebar.js | 97 +++++++++++++++---- src/modules/sidebar.js | 97 +++++++++++++++---- src/modules/sidebar.less | 26 +++-- 9 files changed, 464 insertions(+), 123 deletions(-) diff --git a/build/minified/modules/sidebar.js b/build/minified/modules/sidebar.js index 35528e6d0..9873aff86 100644 --- a/build/minified/modules/sidebar.js +++ b/build/minified/modules/sidebar.js @@ -135,20 +135,38 @@ $.fn.sidebar = function(parameters) { add: { bodyCSS: function() { var - style = '', - direction = module.get.direction(), - moduleSize = (module.is.vertical()) + style = '', + direction = module.get.direction(), + distance = (module.is.vertical()) ? $module.outerHeight() : $module.outerWidth() ; if(direction !== className.bottom) { style = '' + '' ; + if(settings.useTransform) { + style += '' + + 'body.pushed {' + + module.get.transform(direction, distance) + + '}' + + '' + ; + } + else { + style += '' + + 'body.pushed {' + + ' margin-' + direction + ': ' + distance + 'px !important;' + + '}' + + '' + ; + } } $head.append(style); module.refresh(); @@ -202,6 +220,49 @@ $.fn.sidebar = function(parameters) { return className.left; } }, + transform: function(direction, distance) { + if(direction && distance) { + if(direction == className.left) { + return '' + + module.get.transformProperty() + ': translate3d(' + distance + 'px, 0px, 0px);' + + 'margin-right: ' + distance + 'px !important;' + ; + } + if(direction == className.right) { + return '' + + module.get.transformProperty() + ': translate3d(-' + distance + 'px, 0px, 0px);' + + 'margin-left: ' + distance + 'px !important;' + ; + } + if(direction == className.top) { + return '' + + module.get.transformProperty() + ': translate3d(0px, ' + distance + 'px, 0px);' + ; + } + if(direction == className.bottom) { + return '' + + module.get.transformProperty() + ': translate3d(0px, -' + distance + 'px, 0px);' + ; + } + } + }, + transformProperty: function() { + var + element = document.createElement('element'), + properties = { + 'transform' :'transform', + 'msTransform' :'-ms-transform', + 'MozTransform' :'-moz-transform', + 'WebkitTransform' :'-webkit-transform' + }, + property + ; + for(property in properties){ + if( element.style[property] !== undefined ){ + return properties[property]; + } + } + }, transitionEvent: function() { var element = document.createElement('element'), @@ -413,21 +474,23 @@ $.fn.sidebar = function(parameters) { $.fn.sidebar.settings = { - moduleName : 'Sidebar', - namespace : 'sidebar', + moduleName : 'Sidebar', + namespace : 'sidebar', + + useTransform : true, - verbose : true, - debug : true, - performance : true, + verbose : true, + debug : true, + performance : true, - overlay : false, + overlay : false, - side : 'left', - duration : 500, + side : 'left', + duration : 500, - onChange : function(){}, - onShow : function(){}, - onHide : function(){}, + onChange : function(){}, + onShow : function(){}, + onHide : function(){}, className: { active : 'active', diff --git a/build/packaged/modules/sidebar.js b/build/packaged/modules/sidebar.js index 35528e6d0..9873aff86 100644 --- a/build/packaged/modules/sidebar.js +++ b/build/packaged/modules/sidebar.js @@ -135,20 +135,38 @@ $.fn.sidebar = function(parameters) { add: { bodyCSS: function() { var - style = '', - direction = module.get.direction(), - moduleSize = (module.is.vertical()) + style = '', + direction = module.get.direction(), + distance = (module.is.vertical()) ? $module.outerHeight() : $module.outerWidth() ; if(direction !== className.bottom) { style = '' + '' ; + if(settings.useTransform) { + style += '' + + 'body.pushed {' + + module.get.transform(direction, distance) + + '}' + + '' + ; + } + else { + style += '' + + 'body.pushed {' + + ' margin-' + direction + ': ' + distance + 'px !important;' + + '}' + + '' + ; + } } $head.append(style); module.refresh(); @@ -202,6 +220,49 @@ $.fn.sidebar = function(parameters) { return className.left; } }, + transform: function(direction, distance) { + if(direction && distance) { + if(direction == className.left) { + return '' + + module.get.transformProperty() + ': translate3d(' + distance + 'px, 0px, 0px);' + + 'margin-right: ' + distance + 'px !important;' + ; + } + if(direction == className.right) { + return '' + + module.get.transformProperty() + ': translate3d(-' + distance + 'px, 0px, 0px);' + + 'margin-left: ' + distance + 'px !important;' + ; + } + if(direction == className.top) { + return '' + + module.get.transformProperty() + ': translate3d(0px, ' + distance + 'px, 0px);' + ; + } + if(direction == className.bottom) { + return '' + + module.get.transformProperty() + ': translate3d(0px, -' + distance + 'px, 0px);' + ; + } + } + }, + transformProperty: function() { + var + element = document.createElement('element'), + properties = { + 'transform' :'transform', + 'msTransform' :'-ms-transform', + 'MozTransform' :'-moz-transform', + 'WebkitTransform' :'-webkit-transform' + }, + property + ; + for(property in properties){ + if( element.style[property] !== undefined ){ + return properties[property]; + } + } + }, transitionEvent: function() { var element = document.createElement('element'), @@ -413,21 +474,23 @@ $.fn.sidebar = function(parameters) { $.fn.sidebar.settings = { - moduleName : 'Sidebar', - namespace : 'sidebar', + moduleName : 'Sidebar', + namespace : 'sidebar', + + useTransform : true, - verbose : true, - debug : true, - performance : true, + verbose : true, + debug : true, + performance : true, - overlay : false, + overlay : false, - side : 'left', - duration : 500, + side : 'left', + duration : 500, - onChange : function(){}, - onShow : function(){}, - onHide : function(){}, + onChange : function(){}, + onShow : function(){}, + onHide : function(){}, className: { active : 'active', diff --git a/build/uncompressed/modules/sidebar.css b/build/uncompressed/modules/sidebar.css index 78f9ee239..ba06cda00 100644 --- a/build/uncompressed/modules/sidebar.css +++ b/build/uncompressed/modules/sidebar.css @@ -8,11 +8,17 @@ Sidebar *******************************/ body { - -webkit-transition: padding 0.3s ease; - -moz-transition: padding 0.3s ease; - -o-transition: padding 0.3s ease; - -ms-transition: padding 0.3s ease; - transition: padding 0.3s ease; + -webkit-transition: margin 0.3s ease, -webkit-transform 0.3s ease; + -moz-transition: margin 0.3s ease, -moz-transform 0.3s ease; + -o-transition: margin 0.3s ease, + transform 0.3s ease + ; + -ms-transition: margin 0.3s ease, + transform 0.3s ease + ; + transition: margin 0.3s ease, + transform 0.3s ease + ; } .ui.sidebar { position: fixed; diff --git a/build/uncompressed/modules/sidebar.js b/build/uncompressed/modules/sidebar.js index 35528e6d0..9873aff86 100644 --- a/build/uncompressed/modules/sidebar.js +++ b/build/uncompressed/modules/sidebar.js @@ -135,20 +135,38 @@ $.fn.sidebar = function(parameters) { add: { bodyCSS: function() { var - style = '', - direction = module.get.direction(), - moduleSize = (module.is.vertical()) + style = '', + direction = module.get.direction(), + distance = (module.is.vertical()) ? $module.outerHeight() : $module.outerWidth() ; if(direction !== className.bottom) { style = '' + '' ; + if(settings.useTransform) { + style += '' + + 'body.pushed {' + + module.get.transform(direction, distance) + + '}' + + '' + ; + } + else { + style += '' + + 'body.pushed {' + + ' margin-' + direction + ': ' + distance + 'px !important;' + + '}' + + '' + ; + } } $head.append(style); module.refresh(); @@ -202,6 +220,49 @@ $.fn.sidebar = function(parameters) { return className.left; } }, + transform: function(direction, distance) { + if(direction && distance) { + if(direction == className.left) { + return '' + + module.get.transformProperty() + ': translate3d(' + distance + 'px, 0px, 0px);' + + 'margin-right: ' + distance + 'px !important;' + ; + } + if(direction == className.right) { + return '' + + module.get.transformProperty() + ': translate3d(-' + distance + 'px, 0px, 0px);' + + 'margin-left: ' + distance + 'px !important;' + ; + } + if(direction == className.top) { + return '' + + module.get.transformProperty() + ': translate3d(0px, ' + distance + 'px, 0px);' + ; + } + if(direction == className.bottom) { + return '' + + module.get.transformProperty() + ': translate3d(0px, -' + distance + 'px, 0px);' + ; + } + } + }, + transformProperty: function() { + var + element = document.createElement('element'), + properties = { + 'transform' :'transform', + 'msTransform' :'-ms-transform', + 'MozTransform' :'-moz-transform', + 'WebkitTransform' :'-webkit-transform' + }, + property + ; + for(property in properties){ + if( element.style[property] !== undefined ){ + return properties[property]; + } + } + }, transitionEvent: function() { var element = document.createElement('element'), @@ -413,21 +474,23 @@ $.fn.sidebar = function(parameters) { $.fn.sidebar.settings = { - moduleName : 'Sidebar', - namespace : 'sidebar', + moduleName : 'Sidebar', + namespace : 'sidebar', + + useTransform : true, - verbose : true, - debug : true, - performance : true, + verbose : true, + debug : true, + performance : true, - overlay : false, + overlay : false, - side : 'left', - duration : 500, + side : 'left', + duration : 500, - onChange : function(){}, - onShow : function(){}, - onHide : function(){}, + onChange : function(){}, + onShow : function(){}, + onHide : function(){}, className: { active : 'active', diff --git a/node/src/documents/modules/popup.html b/node/src/documents/modules/popup.html index dba529346..15f81eefc 100755 --- a/node/src/documents/modules/popup.html +++ b/node/src/documents/modules/popup.html @@ -29,7 +29,7 @@ type : 'UI Module'

Popup

A standard popup

- +

Variations

@@ -37,14 +37,14 @@ type : 'UI Module'

Size

A popup can be large or small

- - + +

Inverted

A popup can have its colors inverted

- +
@@ -60,7 +60,7 @@ type : 'UI Module'

Including metadata

Frequently used metadata like, title, content, html, or arrowOffset or variation, can be included in html metadata

- +
Specifying Content

Popups can specify content in three ways:

@@ -72,7 +72,7 @@ type : 'UI Module'

- +

Examples

@@ -80,32 +80,32 @@ type : 'UI Module'

Positioning

A popup can be positioned to any side of an element. If space is not available, it will automatically search for a similar alternative position to use.

- - - - - - - - + + + + + + + +

Title

A popup can be formatted with a title

- +

HTML

A popup can be formatted with html

- +
-
+

Transitions

A popup can have different transitions. Any transition with both an in and out animation can be specified. The following are just a few examples.

- +

$('.fade.icon') @@ -114,8 +114,8 @@ type : 'UI Module' ;
-
- +
+

$('.slide.icon') @@ -124,8 +124,8 @@ type : 'UI Module' ;
-
- +
+

$('.flip.icon') diff --git a/node/src/files/components/semantic/modules/sidebar.css b/node/src/files/components/semantic/modules/sidebar.css index 78f9ee239..ba06cda00 100644 --- a/node/src/files/components/semantic/modules/sidebar.css +++ b/node/src/files/components/semantic/modules/sidebar.css @@ -8,11 +8,17 @@ Sidebar *******************************/ body { - -webkit-transition: padding 0.3s ease; - -moz-transition: padding 0.3s ease; - -o-transition: padding 0.3s ease; - -ms-transition: padding 0.3s ease; - transition: padding 0.3s ease; + -webkit-transition: margin 0.3s ease, -webkit-transform 0.3s ease; + -moz-transition: margin 0.3s ease, -moz-transform 0.3s ease; + -o-transition: margin 0.3s ease, + transform 0.3s ease + ; + -ms-transition: margin 0.3s ease, + transform 0.3s ease + ; + transition: margin 0.3s ease, + transform 0.3s ease + ; } .ui.sidebar { position: fixed; diff --git a/node/src/files/components/semantic/modules/sidebar.js b/node/src/files/components/semantic/modules/sidebar.js index 35528e6d0..9873aff86 100644 --- a/node/src/files/components/semantic/modules/sidebar.js +++ b/node/src/files/components/semantic/modules/sidebar.js @@ -135,20 +135,38 @@ $.fn.sidebar = function(parameters) { add: { bodyCSS: function() { var - style = '', - direction = module.get.direction(), - moduleSize = (module.is.vertical()) + style = '', + direction = module.get.direction(), + distance = (module.is.vertical()) ? $module.outerHeight() : $module.outerWidth() ; if(direction !== className.bottom) { style = '' + '' ; + if(settings.useTransform) { + style += '' + + 'body.pushed {' + + module.get.transform(direction, distance) + + '}' + + '' + ; + } + else { + style += '' + + 'body.pushed {' + + ' margin-' + direction + ': ' + distance + 'px !important;' + + '}' + + '' + ; + } } $head.append(style); module.refresh(); @@ -202,6 +220,49 @@ $.fn.sidebar = function(parameters) { return className.left; } }, + transform: function(direction, distance) { + if(direction && distance) { + if(direction == className.left) { + return '' + + module.get.transformProperty() + ': translate3d(' + distance + 'px, 0px, 0px);' + + 'margin-right: ' + distance + 'px !important;' + ; + } + if(direction == className.right) { + return '' + + module.get.transformProperty() + ': translate3d(-' + distance + 'px, 0px, 0px);' + + 'margin-left: ' + distance + 'px !important;' + ; + } + if(direction == className.top) { + return '' + + module.get.transformProperty() + ': translate3d(0px, ' + distance + 'px, 0px);' + ; + } + if(direction == className.bottom) { + return '' + + module.get.transformProperty() + ': translate3d(0px, -' + distance + 'px, 0px);' + ; + } + } + }, + transformProperty: function() { + var + element = document.createElement('element'), + properties = { + 'transform' :'transform', + 'msTransform' :'-ms-transform', + 'MozTransform' :'-moz-transform', + 'WebkitTransform' :'-webkit-transform' + }, + property + ; + for(property in properties){ + if( element.style[property] !== undefined ){ + return properties[property]; + } + } + }, transitionEvent: function() { var element = document.createElement('element'), @@ -413,21 +474,23 @@ $.fn.sidebar = function(parameters) { $.fn.sidebar.settings = { - moduleName : 'Sidebar', - namespace : 'sidebar', + moduleName : 'Sidebar', + namespace : 'sidebar', + + useTransform : true, - verbose : true, - debug : true, - performance : true, + verbose : true, + debug : true, + performance : true, - overlay : false, + overlay : false, - side : 'left', - duration : 500, + side : 'left', + duration : 500, - onChange : function(){}, - onShow : function(){}, - onHide : function(){}, + onChange : function(){}, + onShow : function(){}, + onHide : function(){}, className: { active : 'active', diff --git a/src/modules/sidebar.js b/src/modules/sidebar.js index 35528e6d0..9873aff86 100755 --- a/src/modules/sidebar.js +++ b/src/modules/sidebar.js @@ -135,20 +135,38 @@ $.fn.sidebar = function(parameters) { add: { bodyCSS: function() { var - style = '', - direction = module.get.direction(), - moduleSize = (module.is.vertical()) + style = '', + direction = module.get.direction(), + distance = (module.is.vertical()) ? $module.outerHeight() : $module.outerWidth() ; if(direction !== className.bottom) { style = '' + '' ; + if(settings.useTransform) { + style += '' + + 'body.pushed {' + + module.get.transform(direction, distance) + + '}' + + '' + ; + } + else { + style += '' + + 'body.pushed {' + + ' margin-' + direction + ': ' + distance + 'px !important;' + + '}' + + '' + ; + } } $head.append(style); module.refresh(); @@ -202,6 +220,49 @@ $.fn.sidebar = function(parameters) { return className.left; } }, + transform: function(direction, distance) { + if(direction && distance) { + if(direction == className.left) { + return '' + + module.get.transformProperty() + ': translate3d(' + distance + 'px, 0px, 0px);' + + 'margin-right: ' + distance + 'px !important;' + ; + } + if(direction == className.right) { + return '' + + module.get.transformProperty() + ': translate3d(-' + distance + 'px, 0px, 0px);' + + 'margin-left: ' + distance + 'px !important;' + ; + } + if(direction == className.top) { + return '' + + module.get.transformProperty() + ': translate3d(0px, ' + distance + 'px, 0px);' + ; + } + if(direction == className.bottom) { + return '' + + module.get.transformProperty() + ': translate3d(0px, -' + distance + 'px, 0px);' + ; + } + } + }, + transformProperty: function() { + var + element = document.createElement('element'), + properties = { + 'transform' :'transform', + 'msTransform' :'-ms-transform', + 'MozTransform' :'-moz-transform', + 'WebkitTransform' :'-webkit-transform' + }, + property + ; + for(property in properties){ + if( element.style[property] !== undefined ){ + return properties[property]; + } + } + }, transitionEvent: function() { var element = document.createElement('element'), @@ -413,21 +474,23 @@ $.fn.sidebar = function(parameters) { $.fn.sidebar.settings = { - moduleName : 'Sidebar', - namespace : 'sidebar', + moduleName : 'Sidebar', + namespace : 'sidebar', + + useTransform : true, - verbose : true, - debug : true, - performance : true, + verbose : true, + debug : true, + performance : true, - overlay : false, + overlay : false, - side : 'left', - duration : 500, + side : 'left', + duration : 500, - onChange : function(){}, - onShow : function(){}, - onHide : function(){}, + onChange : function(){}, + onShow : function(){}, + onHide : function(){}, className: { active : 'active', diff --git a/src/modules/sidebar.less b/src/modules/sidebar.less index decb48fb5..477210e89 100755 --- a/src/modules/sidebar.less +++ b/src/modules/sidebar.less @@ -10,11 +10,26 @@ *******************************/ body { - -webkit-transition: padding 0.3s ease; - -moz-transition: padding 0.3s ease; - -o-transition: padding 0.3s ease; - -ms-transition: padding 0.3s ease; - transition: padding 0.3s ease; + -webkit-transition: + margin 0.3s ease, + -webkit-transform 0.3s ease + ; + -moz-transition: + margin 0.3s ease, + -moz-transform 0.3s ease + ; + -o-transition: + margin 0.3s ease, + transform 0.3s ease + ; + -ms-transition: + margin 0.3s ease, + transform 0.3s ease + ; + transition: + margin 0.3s ease, + transform 0.3s ease + ; } .ui.sidebar { @@ -117,7 +132,6 @@ body { transform: translateY(-100%); } - /******************************* Variations *******************************/