lukechilds
/
Semantic-UI-Docs
mirror of https://github.com/lukechilds/Semantic-UI-Docs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

comitting failed 3dtransform attempt for posterity 

Former-commit-id: b6e3be51e9a39d7847f0473e5efb9ffe12319063
Former-commit-id: 31b4b21048caba07a16207c5932a8a46a1ef8e1f
beta
jlukic 11 years ago
parent
c67d97d9fa
commit
97517646bc
9 changed files with 464 additions and 123 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
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