richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

comitting failed 3dtransform attempt for posterity

pull/13/head
jlukic 11 years ago
parent
a0678058b3
commit
b6e3be51e9
9 changed files with 464 additions and 123 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 97
      build/minified/modules/sidebar.js
  2. 97
      build/packaged/modules/sidebar.js
  3. 16
      build/uncompressed/modules/sidebar.css
  4. 97
      build/uncompressed/modules/sidebar.js
  5. 44
      node/src/documents/modules/popup.html
  6. 16
      node/src/files/components/semantic/modules/sidebar.css
  7. 97
      node/src/files/components/semantic/modules/sidebar.js
  8. 97
      src/modules/sidebar.js
  9. 26
      src/modules/sidebar.less

97
build/minified/modules/sidebar.js
View File

@ -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 = ''
+ '<style type="text/css" title="' + namespace + '">'
+ 'body.pushed {'
+ ' padding-' + direction + ': ' + moduleSize + 'px !important;'
+ 'html {'
+ ' background-color: #3E3E3E'
+ '}'
+ 'body {'
+ ' box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.8);'
+ '}'
+ '</style>'
;
if(settings.useTransform) {
style += ''
+ 'body.pushed {'
+ module.get.transform(direction, distance)
+ '}'
+ '</style>'
;
}
else {
style += ''
+ 'body.pushed {'
+ ' margin-' + direction + ': ' + distance + 'px !important;'
+ '}'
+ '</style>'
;
}
}
$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',

97
build/packaged/modules/sidebar.js
View File

@ -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 = ''
+ '<style type="text/css" title="' + namespace + '">'
+ 'body.pushed {'
+ ' padding-' + direction + ': ' + moduleSize + 'px !important;'
+ 'html {'
+ ' background-color: #3E3E3E'
+ '}'
+ 'body {'
+ ' box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.8);'
+ '}'
+ '</style>'
;
if(settings.useTransform) {
style += ''
+ 'body.pushed {'
+ module.get.transform(direction, distance)
+ '}'
+ '</style>'
;
}
else {
style += ''
+ 'body.pushed {'
+ ' margin-' + direction + ': ' + distance + 'px !important;'
+ '}'
+ '</style>'
;
}
}
$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',

16
build/uncompressed/modules/sidebar.css
View File

@ -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;

97
build/uncompressed/modules/sidebar.js
View File

@ -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 = ''
+ '<style type="text/css" title="' + namespace + '">'
+ 'body.pushed {'
+ ' padding-' + direction + ': ' + moduleSize + 'px !important;'
+ 'html {'
+ ' background-color: #3E3E3E'
+ '}'
+ 'body {'
+ ' box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.8);'
+ '}'
+ '</style>'
;
if(settings.useTransform) {
style += ''
+ 'body.pushed {'
+ module.get.transform(direction, distance)
+ '}'
+ '</style>'
;
}
else {
style += ''
+ 'body.pushed {'
+ ' margin-' + direction + ': ' + distance + 'px !important;'
+ '}'
+ '</style>'
;
}
}
$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',

44
node/src/documents/modules/popup.html
View File

@ -29,7 +29,7 @@ type : 'UI Module'
<div class="example">
<h4 class="ui header">Popup</h4>
<p>A standard popup</p>
<i class="sketchy question icon link" data-content="Hello, I am a pop-up."></i>
<i class="sketchy circular question icon link" data-content="Hello, I am a pop-up."></i>
</div>
<h2 class="ui dividing header">Variations</h2>
@ -37,14 +37,14 @@ type : 'UI Module'
<div class="example">
<h4 class="ui header">Size</h4>
<p>A popup can be large or small</p>
<i class="sketchy question icon link" data-content="Hello. This is a small popup" data-variation="small"></i>
<i class="sketchy question icon link" data-content="Hello. This is a large popup" data-variation="large"></i>
<i class="sketchy circular question icon link" data-content="Hello. This is a small popup" data-variation="small"></i>
<i class="sketchy circular question icon link" data-content="Hello. This is a large popup" data-variation="large"></i>
</div>
<div class="example">
<h4 class="ui header">Inverted</h4>
<p>A popup can have its colors inverted</p>
<i class="sketchy question icon link" data-content="Hello. This is an inverted popup" data-variation="inverted"></i>
<i class="sketchy circular question icon link" data-content="Hello. This is an inverted popup" data-variation="inverted"></i>
</div>
@ -60,7 +60,7 @@ type : 'UI Module'
<h4 class="ui header">Including metadata</h4>
<p>Frequently used metadata like, title, content, html, or arrowOffset or variation, can be included in html metadata<p>
<div class="ui info icon ignored message">
<i class="icon sketchy question circle"></i>
<i class="icon sketchy circular question circle"></i>
<div class="content">
<div class="header">Specifying Content</div>
<p>Popups can specify content in three ways:<p>
@ -72,7 +72,7 @@ type : 'UI Module'
</div>
</div>
<div class="code" data-type="html">
<i class="sketchy question icon link" data-content="Here is some popup content." data-position="top left" data-variation="black"></i>
<i class="sketchy circular question icon link" data-content="Here is some popup content." data-position="top left" data-variation="black"></i>
</div>
<h2 class="ui dividing header">Examples</h2>
@ -80,32 +80,32 @@ type : 'UI Module'
<div class="example segment">
<h4 class="ui header">Positioning</h4>
<p>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.</p>
<i class="sketchy question icon link" data-content="Top Left" data-position="top left"></i>
<i class="sketchy question icon link" data-content="Top Center" data-position="top center"></i>
<i class="sketchy question icon link" data-content="Top Right" data-position="top right"></i>
<i class="sketchy question icon link" data-content="Left Center" data-position="left center"></i>
<i class="sketchy question icon link" data-content="Right Center" data-position="right center"></i>
<i class="sketchy question icon link" data-content="Bottom Left" data-position="bottom left"></i>
<i class="sketchy question icon link" data-content="Bottom Center" data-position="bottom center"></i>
<i class="sketchy question icon link" data-content="Bottom Right" data-position="bottom right"></i>
<i class="sketchy circular question icon link" data-content="Top Left" data-position="top left"></i>
<i class="sketchy circular question icon link" data-content="Top Center" data-position="top center"></i>
<i class="sketchy circular question icon link" data-content="Top Right" data-position="top right"></i>
<i class="sketchy circular question icon link" data-content="Left Center" data-position="left center"></i>
<i class="sketchy circular question icon link" data-content="Right Center" data-position="right center"></i>
<i class="sketchy circular question icon link" data-content="Bottom Left" data-position="bottom left"></i>
<i class="sketchy circular question icon link" data-content="Bottom Center" data-position="bottom center"></i>
<i class="sketchy circular question icon link" data-content="Bottom Right" data-position="bottom right"></i>
</div>
<div class="example segment">
<h4 class="ui header">Title</h4>
<p>A popup can be formatted with a title</p>
<i class="sketchy question icon link" data-title="Dog Breeds" data-content="There are many types of dogs. We don't have time to list them all"></i>
<i class="sketchy circular question icon link" data-title="Dog Breeds" data-content="There are many types of dogs. We don't have time to list them all"></i>
</div>
<div class="example segment">
<h4 class="ui header">HTML</h4>
<p>A popup can be formatted with html</p>
<i class="sketchy question icon link" data-html="<strike>I rescind my comment about cats</strike>"></i>
<i class="sketchy circular question icon link" data-html="<strike>I rescind my comment about cats</strike>"></i>
</div>
<div class="transition segment">
<div class="no example">
<h4 class="ui header">Transitions</h4>
<p>A popup can have different <a href="/modules/transition.html">transitions</a>. Any transition with both an in and out animation can be specified. The following are just a few examples.</p>
<i class="sketchy question icon fade link" data-content="This is a different transition"></i>
<i class="sketchy circular question icon fade link" data-content="This is a different transition"></i>
<br><br>
<div class="code" data-demo="true" data-title="Fade">
$('.fade.icon')
@ -114,8 +114,8 @@ type : 'UI Module'
;
</div>
</div>
<div class="another example">
<i class="sketchy question icon slide link" data-content="This is a different transition"></i>
<div class="no example">
<i class="sketchy circular question icon slide link" data-content="This is a different transition"></i>
<br><br>
<div class="code" data-demo="true" data-title="Slide Up">
$('.slide.icon')
@ -124,8 +124,8 @@ type : 'UI Module'
;
</div>
</div>
<div class="another example">
<i class="sketchy question icon flip link" data-content="This is a different transition"></i>
<div class="no example">
<i class="sketchy circular question icon flip link" data-content="This is a different transition"></i>
<br><br>
<div class="code" data-demo="true" data-title="Vertical Flip">
$('.flip.icon')

16
node/src/files/components/semantic/modules/sidebar.css
View File

@ -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;

97
node/src/files/components/semantic/modules/sidebar.js
View File

@ -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 = ''
+ '<style type="text/css" title="' + namespace + '">'
+ 'body.pushed {'
+ ' padding-' + direction + ': ' + moduleSize + 'px !important;'
+ 'html {'
+ ' background-color: #3E3E3E'
+ '}'
+ 'body {'
+ ' box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.8);'
+ '}'
+ '</style>'
;
if(settings.useTransform) {
style += ''
+ 'body.pushed {'
+ module.get.transform(direction, distance)
+ '}'
+ '</style>'
;
}
else {
style += ''
+ 'body.pushed {'
+ ' margin-' + direction + ': ' + distance + 'px !important;'
+ '}'
+ '</style>'
;
}
}
$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',

97
src/modules/sidebar.js
View File

@ -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 = ''
+ '<style type="text/css" title="' + namespace + '">'
+ 'body.pushed {'
+ ' padding-' + direction + ': ' + moduleSize + 'px !important;'
+ 'html {'
+ ' background-color: #3E3E3E'
+ '}'
+ 'body {'
+ ' box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.8);'
+ '}'
+ '</style>'
;
if(settings.useTransform) {
style += ''
+ 'body.pushed {'
+ module.get.transform(direction, distance)
+ '}'
+ '</style>'
;
}
else {
style += ''
+ 'body.pushed {'
+ ' margin-' + direction + ': ' + distance + 'px !important;'
+ '}'
+ '</style>'
;
}
}
$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',

26
src/modules/sidebar.less
View File

@ -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
*******************************/

Write Preview
Loading…
Cancel
Save