Browse Source
origami: origami is now SHAPE. Working on new button styles to match new GE page. Added doc page. Working on default doc styling for 'semantic'
origami: origami is now SHAPE. Working on new button styles to match new GE page. Added doc page. Working on default doc styling for 'semantic'
Former-commit-id:pull/258/heada60ef77ed9Former-commit-id:2698daad9a
Jack Lukic
12 years ago
17 changed files with 2691 additions and 103 deletions
Split View
Diff Options
-
0README.md
-
0build/shape.min.css
-
0build/shape.min.js
-
6component.json
-
1dependencies/jquery.js.REMOVED.git-id
-
185examples/example.css
-
87examples/example.js
-
1examples/fonts/neutraface-bold.otf.REMOVED.git-id
-
1examples/fonts/neutraface-book.otf.REMOVED.git-id
-
1examples/fonts/neutraface-demi.otf.REMOVED.git-id
-
1examples/fonts/neutraface-light.otf.REMOVED.git-id
-
109examples/index.html
-
1087examples/ui/button.css
-
530examples/ui/panel.css
-
594examples/ui/state.js
-
58src/shape.css
-
133src/shape.js
@ -0,0 +1 @@ |
|||
c508b0af276ef6d67a302391fd4f07d960597be9 |
|||
@ -0,0 +1,185 @@ |
|||
/******************************* |
|||
CSS Reset |
|||
*******************************/ |
|||
|
|||
html, body, div, form, fieldset, legend, label, ul, li, menu, button { |
|||
margin: 0px; |
|||
padding: 0px; |
|||
background: none; |
|||
} |
|||
|
|||
article, |
|||
aside, |
|||
details, |
|||
figcaption, |
|||
figure, |
|||
footer, |
|||
header, |
|||
hgroup, |
|||
nav, |
|||
section { |
|||
display: block |
|||
} |
|||
|
|||
table { |
|||
border-collapse: collapse; |
|||
border-spacing: 0px; |
|||
} |
|||
th, td { |
|||
text-align: left; |
|||
vertical-align: top; |
|||
} |
|||
th, td, caption { |
|||
font-weight:normal; |
|||
margin: 0px; |
|||
padding: 0px; |
|||
} |
|||
img, |
|||
iframe { |
|||
border: 0px; |
|||
} |
|||
:focus, input:focus, button:focus, button:active, button:hover { |
|||
outline: 0px; |
|||
} |
|||
button { |
|||
display: block; |
|||
outline: 0px; |
|||
border: 0px; |
|||
} |
|||
ul, li { |
|||
list-style-type: none; |
|||
} |
|||
p { |
|||
margin: 0px; |
|||
} |
|||
html { |
|||
font-size: 100%; |
|||
-webkit-text-size-adjust: 100%; |
|||
-ms-text-size-adjust: 100%; |
|||
} |
|||
|
|||
/******************************* |
|||
Example |
|||
*******************************/ |
|||
@font-face { |
|||
font-family: 'Neutraface'; |
|||
src: |
|||
url("fonts/neutraface-book.otf") format('opentype') |
|||
; |
|||
font-weight: normal; |
|||
font-style: normal; |
|||
} |
|||
@font-face { |
|||
font-family: 'Neutraface Bold'; |
|||
src: |
|||
url("fonts/neutraface-bold.otf") format('opentype') |
|||
; |
|||
font-weight: normal; |
|||
font-style: normal; |
|||
} |
|||
|
|||
#example { |
|||
font-family: "Neutraface", "Helvetica Neue", "Arial", sans-serif; |
|||
background-color: #FCFCFC; |
|||
} |
|||
#example h1, |
|||
#example h2, |
|||
#example h3, |
|||
#example h4, |
|||
#example h5, |
|||
#example .ui { |
|||
font-family: "Neutraface Bold", "Helvetica Neue", "Arial", sans-serif; |
|||
} |
|||
|
|||
#example h2 { |
|||
margin: 60px 0px 20px; |
|||
} |
|||
#example h3 { |
|||
margin: 40px 0px 15px; |
|||
} |
|||
#example pre { |
|||
background-color: #F0F0F0; |
|||
} |
|||
|
|||
#example .shortcuts { |
|||
float: right; |
|||
clear: both; |
|||
} |
|||
|
|||
#example .container { |
|||
width: 1000px; |
|||
margin: 0px auto; |
|||
} |
|||
|
|||
#example .demo.shape { |
|||
|
|||
} |
|||
|
|||
#example .demo.shape .side { |
|||
|
|||
width: 300px; |
|||
height: 300px; |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
|
|||
background-color: #22C1FC; |
|||
|
|||
color: #FFFFFF; |
|||
|
|||
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); |
|||
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); |
|||
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); |
|||
} |
|||
#example .demo.shape .side b { |
|||
display: block; |
|||
position: absolute; |
|||
top: 50%; |
|||
width: 100%; |
|||
font-size: 80px; |
|||
margin-top: -48px; |
|||
text-align: center; |
|||
} |
|||
|
|||
#example .demo.shape .up.side, |
|||
#example .demo.shape .down.side { |
|||
background-color: #E6E6E6; |
|||
color: #737373; |
|||
} |
|||
|
|||
/* Shapes */ |
|||
#example .demo.rectangle.shape .side { |
|||
width: 500px; |
|||
height: 300px; |
|||
} |
|||
#example .demo.rectangle.shape .up.side, |
|||
#example .demo.rectangle.shape .down.side { |
|||
height: 100px; |
|||
} |
|||
#example .demo.rectangle.shape .left.side, |
|||
#example .demo.rectangle.shape .right.side { |
|||
width: 300px; |
|||
} |
|||
|
|||
|
|||
#example .demo.irregular.shape .side { |
|||
padding: 0px; |
|||
} |
|||
#example .demo.irregular.shape .side:nth-child(1n) { |
|||
width: 514px; |
|||
height: 210px; |
|||
} |
|||
#example .demo.irregular.shape .side:nth-child(2n) { |
|||
width: 126px; |
|||
height: 115px; |
|||
} |
|||
#example .demo.irregular.shape .side:nth-child(3n) { |
|||
width: 864px; |
|||
height: 510px; |
|||
} |
|||
#example .demo.irregular.shape .side:nth-child(4n) { |
|||
width: 322px; |
|||
height: 210px; |
|||
} |
|||
@ -0,0 +1,87 @@ |
|||
// namespace
|
|||
var shape = { |
|||
handler: {} |
|||
}; |
|||
|
|||
// ready event
|
|||
shape.ready = function() { |
|||
|
|||
// selector cache
|
|||
var |
|||
$demo = $('.demo'), |
|||
$ui = $('.ui'), |
|||
$directionButton = $('.direction .button'), |
|||
$shapeButton = $('.shape .button'), |
|||
// alias
|
|||
handler |
|||
; |
|||
|
|||
// event handlers
|
|||
handler = { |
|||
rotate: function() { |
|||
var |
|||
direction = $(this).data('direction') || false, |
|||
animation = $(this).data('animation') || false |
|||
; |
|||
if(direction && animation) { |
|||
$('.active.side') |
|||
.next() |
|||
.attr('class', direction + ' side') |
|||
; |
|||
$demo |
|||
.shape(animation + '.' + direction) |
|||
; |
|||
} |
|||
}, |
|||
|
|||
removeShape: function(){ |
|||
var |
|||
shape = $(this).data('shape') || false |
|||
; |
|||
if(shape) { |
|||
$demo |
|||
.removeClass(shape) |
|||
; |
|||
} |
|||
}, |
|||
|
|||
changeShape: function() { |
|||
var |
|||
$shape = $(this), |
|||
$otherShapes = $shape.siblings(), |
|||
shape = $shape.data('shape') |
|||
; |
|||
$shape |
|||
.addClass('active') |
|||
; |
|||
$otherShapes |
|||
.removeClass('active') |
|||
.each(handler.removeShape) |
|||
; |
|||
$demo |
|||
.addClass(shape) |
|||
; |
|||
} |
|||
}; |
|||
|
|||
// attach events
|
|||
$ui |
|||
.state() |
|||
; |
|||
$demo |
|||
.shape() |
|||
; |
|||
$directionButton |
|||
.on('click', handler.rotate) |
|||
; |
|||
$shapeButton |
|||
.on('click', handler.changeShape) |
|||
; |
|||
|
|||
}; |
|||
|
|||
|
|||
// attach ready event
|
|||
$(document) |
|||
.ready(shape.ready) |
|||
; |
|||
@ -0,0 +1 @@ |
|||
a095aa8f6a54db7141b4605fd0bdb7af3f20a1d5 |
|||
@ -0,0 +1 @@ |
|||
4e7ae56252713dd21979f725b872b745b5f1405d |
|||
@ -0,0 +1 @@ |
|||
45683d0b7594aa05d78d89c45fc89a3f1be44ed7 |
|||
@ -0,0 +1 @@ |
|||
b1f286e072c69b5042008ad89cffe52793868fa9 |
|||
@ -0,0 +1,109 @@ |
|||
<!DOCTYPE HTML> |
|||
<html> |
|||
<head> |
|||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
|||
<title>Shape Examples</title> |
|||
|
|||
<link rel="stylesheet" href="ui/state.js" type="text/css" media="screen" /> |
|||
<link rel="stylesheet" href="ui/panel.css" type="text/css" media="screen" /> |
|||
<link rel="stylesheet" href="ui/button.css" type="text/css" media="screen" /> |
|||
|
|||
<link rel="stylesheet" href="../src/shape.css" type="text/css" media="screen" /> |
|||
|
|||
<link rel="stylesheet" href="example.css" type="text/css" media="screen" /> |
|||
|
|||
<script src="../dependencies/jquery.js" type="text/javascript"></script> |
|||
<script src="ui/state.js" type="text/javascript"></script> |
|||
|
|||
<script src="../dependencies/transform2d.js" type="text/javascript"></script> |
|||
<script src="../dependencies/transform3d.js" type="text/javascript"></script> |
|||
<script src="../src/shape.js" type="text/javascript"></script> |
|||
|
|||
<script src="example.js" type="text/javascript"></script> |
|||
|
|||
</head> |
|||
|
|||
<body id="example"> |
|||
<div class="container"> |
|||
|
|||
<h1>Shape</h1> |
|||
<p>Shape is a plugin for 3D transitioning elements. </p> |
|||
|
|||
<h2>Examples</h2> |
|||
|
|||
<h3>Regular Shape</h3> |
|||
<div class="demo square shape module"> |
|||
<div class="shape"> |
|||
<div class="active side"> |
|||
<b>1</b> |
|||
</div> |
|||
<div class="side"> |
|||
<b>2</b> |
|||
</div> |
|||
<div class="side"> |
|||
<b>3</b> |
|||
</div> |
|||
<div class="side"> |
|||
<b>4</b> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<h3>Shape</h3> |
|||
<div class="ui shape buttons"> |
|||
<div class="active ui button" data-shape="square">Square</div> |
|||
<div class="ui button" data-shape="rectangle">Rectangle</div> |
|||
<div class="ui button" data-shape="irregular">Irregular</div> |
|||
</div> |
|||
|
|||
<h3>Flip</h3> |
|||
<div class="ui direction buttons"> |
|||
<div class="ui button" data-animation="flip" data-direction="left">Left</div> |
|||
<div class="ui button" data-animation="flip" data-direction="right">Right</div> |
|||
<div class="ui button" data-animation="flip" data-direction="up">Up</div> |
|||
<div class="ui button" data-animation="flip" data-direction="down">Down</div> |
|||
</div> |
|||
|
|||
<h2>Usage</h2> |
|||
|
|||
Usage: |
|||
// the plugin must be initialized once before methods can be accessed |
|||
<pre> |
|||
<code> |
|||
$('.shape') |
|||
.shape() |
|||
; |
|||
<code> |
|||
</pre> |
|||
|
|||
// transion automatically assumed next side is the next sibling (or first if last element) |
|||
<pre> |
|||
<code> |
|||
$('.shape') |
|||
.shape('flip.up') |
|||
; |
|||
<code> |
|||
</pre> |
|||
|
|||
// to manually set the next side to appear use a selector or jQuery object |
|||
<pre> |
|||
<code> |
|||
$('.shape') |
|||
.shape('set.nextSide', '.second') |
|||
.shape('flip.up') |
|||
; |
|||
<code> |
|||
</pre> |
|||
|
|||
// any internal method can be invoked programmatically |
|||
<pre> |
|||
<code> |
|||
$('.shape') |
|||
.shape('repaint') |
|||
; |
|||
<code> |
|||
</pre> |
|||
</div> |
|||
</body> |
|||
|
|||
</html> |
|||
1087
examples/ui/button.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,530 @@ |
|||
/******************************* |
|||
UI Panel |
|||
*******************************/ |
|||
|
|||
.ui.panel { |
|||
margin: 0px 0px 25px; |
|||
height: 41px; |
|||
|
|||
border: 1px solid #DADADA; |
|||
border: 1px solid rgba(0, 0, 0, 0.12); |
|||
|
|||
-webkit-border-radius: 4px; |
|||
-moz-border-radius: 4px; |
|||
border-radius: 4px; |
|||
|
|||
background-color: #FAFAFA; |
|||
background: -webkit-linear-gradient(top, #FAFAFA 0%, #ECECEC 100%); |
|||
background: -moz-linear-gradient(top, #FAFAFA 0%, #ECECEC 100%); |
|||
background: -o-linear-gradient(top, #FAFAFA 0%, #ECECEC 100%); |
|||
background: -ms-linear-gradient(top, #FAFAFA 0%, #ECECEC 100%); |
|||
background: linear-gradient(top, #FAFAFA 0%, #ECECEC 100%); |
|||
|
|||
} |
|||
|
|||
.ui.panel li { |
|||
position: relative; |
|||
cursor: pointer; |
|||
float: left; |
|||
|
|||
line-height: 1; |
|||
padding: 14px 35px; |
|||
vertical-align: middle; |
|||
|
|||
font-size: 13px; |
|||
font-weight: bold; |
|||
|
|||
color: #555555; |
|||
|
|||
-webkit-box-shadow: |
|||
1px 0px 0px rgba(255, 255, 255, 0.5) inset, |
|||
-1px 0px 0px rgba(0, 0, 0, 0.06) |
|||
; |
|||
-moz-box-shadow: |
|||
1px 0px 0px rgba(255, 255, 255, 0.5) inset, |
|||
-1px 0px 0px rgba(0, 0, 0, 0.06) |
|||
; |
|||
box-shadow: |
|||
1px 0px 0px rgba(255, 255, 255, 0.5) inset, |
|||
-1px 0px 0px rgba(0, 0, 0, 0.06) |
|||
; |
|||
|
|||
background-color: #FAFAFA; |
|||
background: -webkit-linear-gradient(top, #FAFAFA 0%, #ECECEC 100%); |
|||
background: -moz-linear-gradient(top, #FAFAFA 0%, #ECECEC 100%); |
|||
background: -o-linear-gradient(top, #FAFAFA 0%, #ECECEC 100%); |
|||
background: -ms-linear-gradient(top, #FAFAFA 0%, #ECECEC 100%); |
|||
background: linear-gradient(top, #FAFAFA 0%, #ECECEC 100%); |
|||
|
|||
-webkit-user-select: none; |
|||
-moz-user-select: none; |
|||
-ms-user-select: none; |
|||
user-select: none; |
|||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); |
|||
|
|||
-webkit-transition: color 0.3s linear; |
|||
-moz-transition: color 0.3s linear; |
|||
-o-transition: color 0.3s linear; |
|||
-ms-transition: color 0.3s linear; |
|||
transition: color 0.3s linear; |
|||
} |
|||
.ui.panel li a { |
|||
color: #555555; |
|||
} |
|||
|
|||
.ui.panel li:first-child { |
|||
-webkit-border-radius: 4px 0px 0px 4px; |
|||
-moz-border-radius: 4px 0px 0px 4px; |
|||
border-radius: 4px 0px 0px 4px; |
|||
} |
|||
|
|||
/* Icons */ |
|||
.ui.panel i { |
|||
line-height: 1; |
|||
margin-right: 0.5em; |
|||
} |
|||
|
|||
/* left arrow icons */ |
|||
.ui.panel i.icon.left, |
|||
.ui.panel i.icon.left-open, |
|||
.ui.panel i.icon.left-dir { |
|||
margin: 0em 0.5em 0em; |
|||
} |
|||
/* right positioned icons */ |
|||
.ui.panel i.icon.up, |
|||
.ui.panel i.icon.up-open, |
|||
.ui.panel i.icon.up-dir, |
|||
.ui.panel i.icon.down, |
|||
.ui.panel i.icon.down-open, |
|||
.ui.panel i.icon.down-dir, |
|||
.ui.panel i.icon.right, |
|||
.ui.panel i.icon.right-open, |
|||
.ui.panel i.icon.right-dir { |
|||
margin: 0em 0em 0em 0.5em; |
|||
} |
|||
|
|||
/* States */ |
|||
.ui.panel li.hover { |
|||
background: -webkit-linear-gradient(top, #F6F6F6 0%, #EAEAEA 100%); |
|||
background: -moz-linear-gradient(top, #F6F6F6 0%, #EAEAEA 100%); |
|||
background: -o-linear-gradient(top, #F6F6F6 0%, #EAEAEA 100%); |
|||
background: -ms-linear-gradient(top, #F6F6F6 0%, #EAEAEA 100%); |
|||
background: linear-gradient(top, #F6F6F6 0%, #EAEAEA 100%); |
|||
color: #333333; |
|||
} |
|||
.ui.panel li.hover a { |
|||
color: #333333; |
|||
} |
|||
|
|||
.ui.panel li.down, |
|||
.ui.panel li.active { |
|||
|
|||
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8); |
|||
|
|||
-webkit-box-shadow: |
|||
0px 1px 5px rgba(0, 0, 0, 0.1) inset, |
|||
0px 0px 0px 1px #DDDDDD inset, |
|||
0px 0px 0px 1px #CCCCCC |
|||
; |
|||
-moz-box-shadow: |
|||
0px 1px 5px rgba(0, 0, 0, 0.1) inset, |
|||
0px 0px 0px 1px #DDDDDD inset, |
|||
0px 0px 0px 1px #CCCCCC |
|||
; |
|||
box-shadow: |
|||
0px 1px 5px rgba(0, 0, 0, 0.1) inset, |
|||
0px 0px 0px 1px #DDDDDD inset, |
|||
0px 0px 0px 1px #CCCCCC |
|||
; |
|||
|
|||
background-color: #EAEAEA; |
|||
background: -webkit-linear-gradient(top, #EAEAEA 0%, #ECECEC 100%); |
|||
background: -moz-linear-gradient(top, #EAEAEA 0%, #ECECEC 100%); |
|||
background: -o-linear-gradient(top, #EAEAEA 0%, #ECECEC 100%); |
|||
background: -ms-linear-gradient(top, #EAEAEA 0%, #ECECEC 100%); |
|||
background: linear-gradient(top, #EAEAEA 0%, #ECECEC 100%); |
|||
|
|||
} |
|||
.ui.panel li.active, |
|||
.ui.panel li.active.hover { |
|||
cursor: default; |
|||
color: #333333; |
|||
} |
|||
.ui.panel li.active a, |
|||
.ui.panel li.active.hover a { |
|||
color: #333333; |
|||
} |
|||
|
|||
/*------------------- |
|||
Pointing |
|||
--------------------*/ |
|||
|
|||
.ui.pointing.panel li.active:after { |
|||
position: absolute; |
|||
bottom: -6px; |
|||
left: 50%; |
|||
content: ""; |
|||
|
|||
margin-left: -5px; |
|||
width: 12px; |
|||
height: 12px; |
|||
|
|||
-webkit-box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.2) inset; |
|||
-moz-box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.2) inset; |
|||
box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.2) inset; |
|||
|
|||
background-color: #ECECEC; |
|||
background-image: none; |
|||
|
|||
-webkit-transform: rotate(45deg); |
|||
-moz-transform: rotate(45deg); |
|||
transform: rotate(45deg); |
|||
z-index: 2; |
|||
} |
|||
|
|||
.ui.vertical.pointing.panel li.active:after { |
|||
position: absolute; |
|||
top: 50%; |
|||
right: -6px; |
|||
bottom: auto; |
|||
left: auto; |
|||
|
|||
-webkit-box-shadow: -1px 1px 1px 0 rgba(0, 0, 0, 0.2) inset; |
|||
-moz-box-shadow: -1px 1px 1px 0 rgba(0, 0, 0, 0.2) inset; |
|||
box-shadow: -1px 1px 1px 0 rgba(0, 0, 0, 0.2) inset; |
|||
|
|||
margin-top: -7px; |
|||
width: 12px; |
|||
height: 12px; |
|||
} |
|||
.ui.simple.pointing.panel li.active:after { |
|||
background-color: #ECECEC; |
|||
background-image: none; |
|||
} |
|||
.ui.vertical.pointing.panel li.active:after { |
|||
background: -webkit-linear-gradient(top, #E9E9E9, #EBEBEB); |
|||
background: -moz-linear-gradient(top, #E9E9E9, #EBEBEB); |
|||
background: -o-linear-gradient(top, #E9E9E9, #EBEBEB); |
|||
background: -ms-linear-gradient(top, #E9E9E9, #EBEBEB); |
|||
background: linear-gradient(top, #E9E9E9, #EBEBEB); |
|||
} |
|||
.ui.simple.vertical.pointing.panel li.active:after { |
|||
background: -webkit-linear-gradient(top, #F2F2F2, #ECECEC); |
|||
background: -moz-linear-gradient(top, #F2F2F2, #ECECEC); |
|||
background: -o-linear-gradient(top, #F2F2F2, #ECECEC); |
|||
background: -ms-linear-gradient(top, #F2F2F2, #ECECEC); |
|||
background: linear-gradient(top, #F2F2F2, #ECECEC); |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Alerts |
|||
--------------------*/ |
|||
|
|||
.ui.panel li .alert { |
|||
position: absolute; |
|||
top: -8px; |
|||
left: 75%; |
|||
|
|||
background-color: #EEEEEE; |
|||
padding: 3px 5px; |
|||
|
|||
background: -webkit-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%); |
|||
background: -moz-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%); |
|||
background: -o-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%); |
|||
background: -ms-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%); |
|||
background: linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%); |
|||
|
|||
border: 1px solid #E5E5E5; |
|||
|
|||
border-radius: 5px; |
|||
|
|||
-webkit-box-shadow: |
|||
0px 1px 0px rgba(0, 0, 0, 0.3), |
|||
0px 1px 0px rgba(255, 255, 255, 0.6) inset |
|||
; |
|||
-moz-box-shadow: |
|||
0px 1px 0px rgba(0, 0, 0, 0.3), |
|||
0px 1px 0px rgba(255, 255, 255, 0.6) inset |
|||
; |
|||
box-shadow: |
|||
0px 1px 0px rgba(0, 0, 0, 0.3), |
|||
0px 1px 0px rgba(255, 255, 255, 0.6) inset |
|||
; |
|||
|
|||
font-size: 11px; |
|||
line-height: 1; |
|||
text-transform: uppercase; |
|||
color: #555555; |
|||
z-index: 100; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Attached |
|||
--------------------*/ |
|||
|
|||
.attached.ui.panel { |
|||
margin: 0px; |
|||
-webkit-border-radius: 4px 4px 0px 0px; |
|||
-moz-border-radius: 4px 4px 0px 0px; |
|||
border-radius: 4px 4px 0px 0px; |
|||
} |
|||
.attached.ui.panel li:first-child { |
|||
-webkit-border-radius: 4px 0px 0px 0px; |
|||
-moz-border-radius: 4px 0px 0px 0px; |
|||
border-radius: 4px 0px 0px 0px; |
|||
} |
|||
.attached.ui.panel li:last-child { |
|||
-webkit-border-radius: 0px 4px 0px 0px; |
|||
-moz-border-radius: 0px 4px 0px 0px; |
|||
border-radius: 0px 4px 0px 0px; |
|||
} |
|||
|
|||
/* Bottom Side */ |
|||
.bottom.attached.ui.panel { |
|||
margin-top: -1px; |
|||
-webkit-border-radius: 0px 0px 4px 4px; |
|||
-moz-border-radius: 0px 0px 4px 4px; |
|||
border-radius: 0px 0px 4px 4px; |
|||
} |
|||
.bottom.attached.ui.panel li:first-child { |
|||
-webkit-border-radius: 0px 0px 0px 4px; |
|||
-moz-border-radius: 0px 0px 0px 4px; |
|||
border-radius: 0px 0px 0px 4px; |
|||
} |
|||
.bottom.attached.ui.panel li:last-child { |
|||
-webkit-border-radius: 0px 0px 4px 0px; |
|||
-moz-border-radius: 0px 0px 4px 0px; |
|||
border-radius: 0px 0px 4px 0px; |
|||
} |
|||
|
|||
/*------------------- |
|||
Vertical |
|||
--------------------*/ |
|||
|
|||
.vertical.ui.panel { |
|||
float: left; |
|||
width: 150px; |
|||
height: auto; |
|||
} |
|||
.vertical.ui.panel li { |
|||
float: none; |
|||
border-top: 1px solid #DDDDDD; |
|||
border-top: 1px solid rgba(0, 0, 0, 0.08); |
|||
padding: 12px 15px; |
|||
} |
|||
.vertical.ui.panel li:first-child { |
|||
border-top: 1px solid transparent; |
|||
-webkit-border-radius: 4px 4px 0px 0px; |
|||
-moz-border-radius: 4px 4px 0px 0px; |
|||
border-radius: 4px 4px 0px 0px; |
|||
} |
|||
.vertical.ui.panel li:last-child { |
|||
-webkit-border-radius: 0px 0px 4px 4px; |
|||
-moz-border-radius: 0px 0px 4px 4px; |
|||
border-radius: 0px 0px 4px 4px; |
|||
} |
|||
.vertical.ui.panel li.down, |
|||
.vertical.ui.panel li.active { |
|||
border-top: 1px solid #CCCCCC; |
|||
} |
|||
|
|||
.vertical.fluid.ui.panel { |
|||
height: auto; |
|||
} |
|||
.bottom.attached.vertical.ui.panel li:first-child { |
|||
-moz-border-radius: 0px; |
|||
-webkit-border-radius: 0px; |
|||
border-radius: 0px; |
|||
} |
|||
.bottom.attached.vertical.ui.panel li:last-child { |
|||
-moz-border-radius: 0px 0px 4px 4px; |
|||
-webkit-border-radius: 0px 0px 4px 4px; |
|||
border-radius: 0px 0px 4px 4px; |
|||
} |
|||
.attached.vertical.ui.panel li:first-child:last-child { |
|||
-moz-border-radius: 4px; |
|||
-webkit-border-radius: 4px; |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
/*------------------- |
|||
Simple |
|||
--------------------*/ |
|||
.simple.ui.panel { |
|||
background-image: -webkit-linear-gradient(top , #FFFFFF 0px, #F6F6F6 100%); |
|||
background-image: -moz-linear-gradient(top , #FFFFFF 0px, #F6F6F6 100%); |
|||
background-image: -o-linear-gradient(top , #FFFFFF 0px, #F6F6F6 100%); |
|||
background-image: -ms-linear-gradient(top , #FFFFFF 0px, #F6F6F6 100%); |
|||
background-image: linear-gradient(top , #FFFFFF 0px, #F6F6F6 100%); |
|||
|
|||
border-color: #EDEDED #E6E6E6 #E6E6E6 #EDEDED; |
|||
border-color: rgba(0, 0, 0, 0.09) rgba(0, 0, 0, 0.12) rgba(0, 0, 0, 0.12) rgba(0, 0, 0, 0.09); |
|||
} |
|||
.simple.ui.panel li { |
|||
background-image: -webkit-linear-gradient(top , #FFFFFF 0px, #F6F6F6 100%); |
|||
background-image: -moz-linear-gradient(top , #FFFFFF 0px, #F6F6F6 100%); |
|||
background-image: -o-linear-gradient(top , #FFFFFF 0px, #F6F6F6 100%); |
|||
background-image: -ms-linear-gradient(top , #FFFFFF 0px, #F6F6F6 100%); |
|||
background-image: linear-gradient(top , #FFFFFF 0px, #F6F6F6 100%); |
|||
} |
|||
.simple.ui.panel li.hover { |
|||
background-image: -webkit-linear-gradient(top , #FFFFFF 0px, #FCFCFC 100%); |
|||
background-image: -moz-linear-gradient(top , #FFFFFF 0px, #FCFCFC 100%); |
|||
background-image: -o-linear-gradient(top , #FFFFFF 0px, #FCFCFC 100%); |
|||
background-image: -ms-linear-gradient(top , #FFFFFF 0px, #FCFCFC 100%); |
|||
background-image: linear-gradient(top , #FFFFFF 0px, #FCFCFC 100%); |
|||
} |
|||
.simple.ui.panel li.down, |
|||
.simple.ui.panel li.active { |
|||
background-image: -webkit-linear-gradient(top , #F2F2F2 0px, #ECECEC 100%); |
|||
background-image: -moz-linear-gradient(top , #F2F2F2 0px, #ECECEC 100%); |
|||
background-image: -o-linear-gradient(top , #F2F2F2 0px, #ECECEC 100%); |
|||
background-image: -ms-linear-gradient(top , #F2F2F2 0px, #ECECEC 100%); |
|||
background-image: linear-gradient(top , #F2F2F2 0px, #ECECEC 100%); |
|||
|
|||
-webkit-box-shadow: |
|||
0px 1px 3px rgba(0, 0, 0, 0.05) inset, |
|||
0px 0px 0px 1px rgba(0, 0, 0, 0.1), |
|||
0px -1px 0px 0px rgba(0, 0, 0, 0.05) inset |
|||
; |
|||
-moz-box-shadow: |
|||
0px 1px 3px rgba(0, 0, 0, 0.05) inset, |
|||
0px 0px 0px 1px rgba(0, 0, 0, 0.1), |
|||
0px -1px 0px 0px rgba(0, 0, 0, 0.05) inset |
|||
; |
|||
box-shadow: |
|||
0px 1px 3px rgba(0, 0, 0, 0.05) inset, |
|||
0px 0px 0px 1px rgba(0, 0, 0, 0.1), |
|||
0px -1px 0px 0px rgba(0, 0, 0, 0.05) inset |
|||
; |
|||
} |
|||
|
|||
.ui.simple.panel li.active, |
|||
.ui.simple.panel li.active.hover { |
|||
cursor: default; |
|||
color: #333333; |
|||
} |
|||
.ui.simple.panel li.active a, |
|||
.ui.simple.panel li.active.hover a { |
|||
color: #333333; |
|||
} |
|||
|
|||
.simple.vertical.ui.panel li.down, |
|||
.simple.vertical.ui.panel li.active { |
|||
border-top: 1px solid #DDDDDD; |
|||
border-left: none; |
|||
border-right: none; |
|||
border-bottom: none; |
|||
} |
|||
|
|||
/*------------------- |
|||
Fluid |
|||
--------------------*/ |
|||
|
|||
.ui.panel.fluid { |
|||
width: 100%; |
|||
height: 43px; |
|||
} |
|||
.ui.panel.fluid, |
|||
.ui.panel.fluid li { |
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
text-align: center; |
|||
} |
|||
.ui.panel.fluid li { |
|||
padding-left: 0px !important; |
|||
padding-right: 0px !important; |
|||
} |
|||
.ui.panel.two.fluid li { |
|||
width: 50%; |
|||
} |
|||
.ui.panel.three.fluid li { |
|||
width: 33.333%; |
|||
} |
|||
.ui.panel.four.fluid li { |
|||
width: 25%; |
|||
} |
|||
.ui.panel.five.fluid li { |
|||
width: 20%; |
|||
} |
|||
.ui.panel.six.fluid li { |
|||
width: 16.666%; |
|||
} |
|||
.ui.panel.seven.fluid li { |
|||
width: 14.285%; |
|||
} |
|||
.ui.panel.eight.fluid li { |
|||
width: 12.500%; |
|||
} |
|||
.ui.panel.nine.fluid li { |
|||
width: 11.11%; |
|||
} |
|||
.ui.panel.ten.fluid li { |
|||
width: 10.0%; |
|||
} |
|||
.ui.panel.eleven.fluid li { |
|||
width: 9.09%; |
|||
} |
|||
.ui.panel.twelve.fluid li { |
|||
width: 8.333%; |
|||
} |
|||
|
|||
/*------------------- |
|||
Resizes |
|||
--------------------*/ |
|||
|
|||
.small.ui.panel { |
|||
height: 32px; |
|||
margin: 0px 0px 15px; |
|||
} |
|||
.small.fluid.ui.panel { |
|||
height: 34px; |
|||
} |
|||
.small.ui.panel li { |
|||
font-size: 12px; |
|||
font-weight: bold; |
|||
padding: 10px 25px; |
|||
} |
|||
|
|||
/* Small Vertical Panel */ |
|||
.small.vertical.ui.panel, |
|||
.small.vertical.ui.panel li { |
|||
height: auto; |
|||
} |
|||
.small.vertical.ui.panel li { |
|||
padding: 5px 9px; |
|||
} |
|||
.small.vertical.ui.panel li.down, |
|||
.small.vertical.ui.panel li.active { |
|||
border-top: 1px solid #CCCCCC; |
|||
} |
|||
|
|||
.large.ui.panel { |
|||
height: 47px; |
|||
} |
|||
.large.fluid.ui.panel { |
|||
height: 49px; |
|||
} |
|||
.large.ui.panel li { |
|||
font-size: 15px; |
|||
font-weight: bold; |
|||
padding: 16px 35px; |
|||
} |
|||
|
|||
/* Large Vertical Panel */ |
|||
.large.vertical.ui.panel, |
|||
.large.vertical.ui.panel li { |
|||
height: auto; |
|||
} |
|||
.large.vertical.ui.panel li { |
|||
padding: 15px 20px; |
|||
} |
|||
.large.vertical.ui.panel li.down, |
|||
.large.vertical.ui.panel li.active { |
|||
border-top: 1px solid #CCCCCC; |
|||
} |
|||
|
|||
@ -0,0 +1,594 @@ |
|||
/* ****************************** |
|||
Module |
|||
State |
|||
Change text based on state context |
|||
Hover/Pressed/Active/Inactive |
|||
Author: Jack Lukic |
|||
Last revision: May 2012 |
|||
|
|||
State text module is used to apply text to a given node |
|||
depending on the elements "state" |
|||
|
|||
State is either defined as "active" or "inactive" depending |
|||
on the returned value of a test function |
|||
|
|||
Usage: |
|||
|
|||
$button |
|||
.state({ |
|||
states: { |
|||
active: true |
|||
}, |
|||
text: { |
|||
inactive: 'Follow', |
|||
active : 'Following', |
|||
enable : 'Add', |
|||
disable : 'Remove' |
|||
} |
|||
}) |
|||
; |
|||
|
|||
"Follow", turns to "Add" on hover, then "Following" on active |
|||
and finally "Remove" on active hover |
|||
|
|||
This plugin works in correlation to API module and will, by default, |
|||
use deffered object accept/reject to determine state. |
|||
|
|||
****************************** */ |
|||
|
|||
;(function ( $, window, document, undefined ) { |
|||
|
|||
$.fn.state = function(parameters) { |
|||
var |
|||
|
|||
$allModules = $(this), |
|||
|
|||
// make arguments available
|
|||
query = arguments[0], |
|||
passedArguments = [].slice.call(arguments, 1), |
|||
invokedResponse |
|||
; |
|||
$allModules |
|||
.each(function() { |
|||
var |
|||
$module = $(this), |
|||
|
|||
settings = $.extend(true, {}, $.fn.state.settings, parameters), |
|||
|
|||
selector = $module.selector || '', |
|||
element = this, |
|||
instance = $module.data('module-' + settings.namespace), |
|||
methodInvoked = (typeof query == 'string'), |
|||
|
|||
// shortcuts
|
|||
namespace = settings.namespace, |
|||
metadata = settings.metadata, |
|||
className = settings.className, |
|||
states = settings.states, |
|||
text = settings.text, |
|||
|
|||
module |
|||
; |
|||
module = { |
|||
|
|||
initialize: function() { |
|||
module.verbose('Initializing module for', element); |
|||
|
|||
// allow module to guess desired state based on element
|
|||
if(settings.automatic) { |
|||
module.add.defaults(); |
|||
} |
|||
|
|||
// bind events with delegated events
|
|||
if(settings.context && selector !== '') { |
|||
if( module.allows('hover') ) { |
|||
$(element, settings.context) |
|||
.on(selector, 'mouseenter.' + namespace, module.hover.enable) |
|||
.on(selector, 'mouseleave.' + namespace, module.hover.disable) |
|||
; |
|||
} |
|||
if( module.allows('pressed') ) { |
|||
$(element, settings.context) |
|||
.on(selector, 'mousedown.' + namespace, module.pressed.enable) |
|||
.on(selector, 'mouseup.' + namespace, module.pressed.disable) |
|||
; |
|||
} |
|||
if( module.allows('focus') ) { |
|||
$(element, settings.context) |
|||
.on(selector, 'focus.' + namespace, module.focus.enable) |
|||
.on(selector, 'blur.' + namespace, module.focus.disable) |
|||
; |
|||
} |
|||
$(settings.context) |
|||
.on(selector, 'mouseover.' + namespace, module.text.change) |
|||
.on(selector, 'mouseout.' + namespace, module.text.reset) |
|||
.on(selector, 'click.' + namespace, module.toggle) |
|||
; |
|||
|
|||
} |
|||
else { |
|||
if( module.allows('hover') ) { |
|||
$module |
|||
.on('mouseenter.' + namespace, module.hover.enable) |
|||
.on('mouseleave.' + namespace, module.hover.disable) |
|||
; |
|||
} |
|||
if( module.allows('pressed') ) { |
|||
$module |
|||
.on('mousedown.' + namespace, module.pressed.enable) |
|||
.on('mouseup.' + namespace, module.pressed.disable) |
|||
; |
|||
} |
|||
if( module.allows('focus') ) { |
|||
$module |
|||
.on('focus.' + namespace, module.focus.enable) |
|||
.on('blur.' + namespace, module.focus.disable) |
|||
; |
|||
} |
|||
$module |
|||
.on('mouseover.' + namespace, module.text.change) |
|||
.on('mouseout.' + namespace, module.text.reset) |
|||
.on('click.' + namespace, module.toggle) |
|||
; |
|||
} |
|||
$module |
|||
.data('module-' + namespace, module) |
|||
; |
|||
}, |
|||
|
|||
destroy: function() { |
|||
module.verbose('Destroying previous module for', element); |
|||
$module |
|||
.off('.' + namespace) |
|||
; |
|||
}, |
|||
|
|||
refresh: function() { |
|||
module.verbose('Refreshing selector cache for', element); |
|||
$module = $(element); |
|||
}, |
|||
|
|||
add: { |
|||
defaults: function() { |
|||
var |
|||
userStates = parameters && $.isPlainObject(parameters.states) |
|||
? parameters.states |
|||
: {} |
|||
; |
|||
$.each(settings.defaults, function(type, typeStates) { |
|||
if( module.is[type] !== undefined && module.is[type]() ) { |
|||
module.verbose('Adding default states for detected type:', type, element); |
|||
$.extend(settings.states, typeStates, userStates); |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
is: { |
|||
|
|||
active: function() { |
|||
return $module.hasClass(className.active); |
|||
}, |
|||
loading: function() { |
|||
return $module.hasClass(className.loading); |
|||
}, |
|||
inactive: function() { |
|||
return !( $module.hasClass(className.active) ); |
|||
}, |
|||
|
|||
enabled: function() { |
|||
return !( $module.is(settings.filter.active) ); |
|||
}, |
|||
disabled: function() { |
|||
return ( $module.is(settings.filter.active) ); |
|||
}, |
|||
textEnabled: function() { |
|||
return !( $module.is(settings.filter.text) ); |
|||
}, |
|||
|
|||
// definitions for automatic type detection
|
|||
button: function() { |
|||
return $module.is('.button:not(a, .submit)'); |
|||
}, |
|||
input: function() { |
|||
return $module.is('input'); |
|||
} |
|||
}, |
|||
|
|||
allows: function(state) { |
|||
return states[state] || false; |
|||
}, |
|||
enable: function(state) { |
|||
if(module.allows(state)) { |
|||
$module.addClass( className[state] ); |
|||
} |
|||
}, |
|||
disable: function(state) { |
|||
if(module.allows(state)) { |
|||
$module.removeClass( className[state] ); |
|||
} |
|||
}, |
|||
textFor: function(state) { |
|||
return text[state] || false; |
|||
}, |
|||
|
|||
focus : { |
|||
enable: function() { |
|||
$module.addClass(className.focus); |
|||
}, |
|||
disable: function() { |
|||
$module.removeClass(className.focus); |
|||
} |
|||
}, |
|||
|
|||
hover : { |
|||
enable: function() { |
|||
$module.addClass(className.hover); |
|||
}, |
|||
disable: function() { |
|||
$module.removeClass(className.hover); |
|||
} |
|||
}, |
|||
|
|||
pressed : { |
|||
enable: function() { |
|||
$module |
|||
.addClass(className.pressed) |
|||
.one('mouseleave', module.pressed.disable) |
|||
; |
|||
}, |
|||
disable: function() { |
|||
$module.removeClass(className.pressed); |
|||
} |
|||
}, |
|||
|
|||
// determines method for state activation
|
|||
toggle: function() { |
|||
var |
|||
apiRequest = $module.data(metadata.promise) |
|||
; |
|||
if( module.allows('active') && module.is.enabled() ) { |
|||
module.refresh(); |
|||
if(apiRequest !== undefined) { |
|||
module.listenTo(apiRequest); |
|||
} |
|||
else { |
|||
module.change(); |
|||
} |
|||
} |
|||
}, |
|||
|
|||
listenTo: function(apiRequest) { |
|||
module.debug('API request detected, waiting for state signal'); |
|||
if(apiRequest) { |
|||
if(text.loading) { |
|||
module.text.update(text.loading); |
|||
} |
|||
$.when(apiRequest) |
|||
.then(function() { |
|||
if(apiRequest.state() == 'resolved') { |
|||
module.debug('API request succeeded'); |
|||
settings.activateTest = function(){ return true; }; |
|||
settings.deactivateTest = function(){ return true; }; |
|||
} |
|||
else { |
|||
module.debug('API request failed'); |
|||
settings.activateTest = function(){ return false; }; |
|||
settings.deactivateTest = function(){ return false; }; |
|||
} |
|||
module.change(); |
|||
}) |
|||
; |
|||
} |
|||
// xhr exists but set to false, beforeSend killed the xhr
|
|||
else { |
|||
settings.activateTest = function(){ return false; }; |
|||
settings.deactivateTest = function(){ return false; }; |
|||
} |
|||
}, |
|||
|
|||
// checks whether active/inactive state can be given
|
|||
change: function() { |
|||
module.debug('Determining state change direction'); |
|||
// inactive to active change
|
|||
if( module.is.inactive() ) { |
|||
module.activate(); |
|||
} |
|||
else { |
|||
module.deactivate(); |
|||
} |
|||
if(settings.sync) { |
|||
module.sync(); |
|||
} |
|||
settings.onChange(); |
|||
}, |
|||
|
|||
activate: function() { |
|||
if( $.proxy(settings.activateTest, element)() ) { |
|||
module.debug('Setting state to active'); |
|||
$module |
|||
.addClass(className.active) |
|||
; |
|||
module.text.update(text.active); |
|||
} |
|||
}, |
|||
|
|||
deactivate: function() { |
|||
if($.proxy(settings.deactivateTest, element)() ) { |
|||
module.debug('Setting state to inactive'); |
|||
$module |
|||
.removeClass(className.active) |
|||
; |
|||
module.text.update(text.inactive); |
|||
} |
|||
}, |
|||
|
|||
sync: function() { |
|||
module.verbose('Syncing other buttons to current state'); |
|||
if( module.is.active() ) { |
|||
$allModules |
|||
.not($module) |
|||
.state('activate'); |
|||
} |
|||
else { |
|||
$allModules |
|||
.not($module) |
|||
.state('deactivate') |
|||
; |
|||
} |
|||
}, |
|||
|
|||
text: { |
|||
|
|||
// finds text node to update
|
|||
get: function() { |
|||
return (settings.textFilter) |
|||
? $module.find(settings.textFilter).text() |
|||
: $module.html() |
|||
; |
|||
}, |
|||
|
|||
change: function() { |
|||
if( module.is.textEnabled() ) { |
|||
if( module.is.active() ) { |
|||
if(text.hover) { |
|||
module.verbose('Changing text to hover text', text.hover); |
|||
module.text.update(text.hover); |
|||
} |
|||
else if(text.disable) { |
|||
module.verbose('Changing text to disable text', text.disable); |
|||
module.text.update(text.disable); |
|||
} |
|||
} |
|||
else { |
|||
if(text.hover) { |
|||
module.verbose('Changing text to hover text', text.disable); |
|||
module.text.update(text.hover); |
|||
} |
|||
else if(text.enable){ |
|||
module.verbose('Changing text to enable text', text.disable); |
|||
module.text.update(text.enable); |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
|
|||
// on mouseout sets text to previous value
|
|||
reset : function() { |
|||
var |
|||
activeText = text.active || $module.data(metadata.storedText), |
|||
inactiveText = text.inactive || $module.data(metadata.storedText) |
|||
; |
|||
if( module.is.textEnabled() ) { |
|||
if( module.is.active() && activeText) { |
|||
module.verbose('Resetting active text', activeText); |
|||
module.text.update(activeText); |
|||
} |
|||
else if(inactiveText) { |
|||
module.verbose('Resetting inactive text', activeText); |
|||
module.text.update(inactiveText); |
|||
} |
|||
} |
|||
}, |
|||
|
|||
update: function(text) { |
|||
var |
|||
currentText = module.text.get() |
|||
; |
|||
if(text && text !== currentText) { |
|||
module.debug('Updating text to', text); |
|||
if(settings.textFilter) { |
|||
$module |
|||
.data(metadata.storedText, text) |
|||
.find(settings.textFilter) |
|||
.text(text) |
|||
; |
|||
} |
|||
else { |
|||
$module |
|||
.data(metadata.storedText, text) |
|||
.html(text) |
|||
; |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
/* standard module */ |
|||
setting: function(name, value) { |
|||
if(value === undefined) { |
|||
return settings[name]; |
|||
} |
|||
settings[name] = value; |
|||
}, |
|||
verbose: function() { |
|||
if(settings.verbose) { |
|||
module.debug.apply(this, arguments); |
|||
} |
|||
}, |
|||
debug: function() { |
|||
var |
|||
output = [], |
|||
message = settings.moduleName + ': ' + arguments[0], |
|||
variables = [].slice.call( arguments, 1 ), |
|||
log = console.info || console.log || function(){} |
|||
; |
|||
log = Function.prototype.bind.call(log, console); |
|||
if(settings.debug) { |
|||
output.push(message); |
|||
log.apply(console, output.concat(variables) ); |
|||
} |
|||
}, |
|||
error: function() { |
|||
var |
|||
output = [], |
|||
errorMessage = settings.moduleName + ': ' + arguments[0], |
|||
variables = [].slice.call( arguments, 1 ), |
|||
log = console.warn || console.log || function(){} |
|||
; |
|||
log = Function.prototype.bind.call(log, console); |
|||
if(settings.debug) { |
|||
output.push(errorMessage); |
|||
output.concat(variables); |
|||
log.apply(console, output.concat(variables) ); |
|||
} |
|||
}, |
|||
invoke: function(query, context, passedArguments) { |
|||
var |
|||
maxDepth, |
|||
found |
|||
; |
|||
passedArguments = passedArguments || [].slice.call( arguments, 2 ); |
|||
if(typeof query == 'string' && instance !== undefined) { |
|||
query = query.split('.'); |
|||
maxDepth = query.length - 1; |
|||
$.each(query, function(depth, value) { |
|||
if( $.isPlainObject( instance[value] ) && (depth != maxDepth) ) { |
|||
instance = instance[value]; |
|||
return true; |
|||
} |
|||
else if( instance[value] !== undefined ) { |
|||
found = instance[value]; |
|||
return true; |
|||
} |
|||
module.error(settings.errors.method); |
|||
return false; |
|||
}); |
|||
} |
|||
if ( $.isFunction( found ) ) { |
|||
return found.apply(context, passedArguments); |
|||
} |
|||
// return retrieved variable or chain
|
|||
return found; |
|||
} |
|||
}; |
|||
|
|||
// check for invoking internal method
|
|||
if(methodInvoked) { |
|||
invokedResponse = module.invoke(query, this, passedArguments); |
|||
} |
|||
// otherwise initialize
|
|||
else { |
|||
if(instance !== undefined) { |
|||
module.destroy(); |
|||
} |
|||
module.initialize(); |
|||
} |
|||
}) |
|||
; |
|||
// chain or return queried method
|
|||
return (invokedResponse !== undefined) |
|||
? invokedResponse |
|||
: this |
|||
; |
|||
}; |
|||
|
|||
$.fn.state.settings = { |
|||
|
|||
// module info
|
|||
moduleName : 'State Module', |
|||
|
|||
// debug output
|
|||
debug : true, |
|||
// verbose debug output
|
|||
verbose : false, |
|||
|
|||
namespace : 'state', |
|||
|
|||
// callback occurs on state change
|
|||
onChange: function() {}, |
|||
|
|||
// state test functions
|
|||
activateTest : function() { return true; }, |
|||
deactivateTest : function() { return true; }, |
|||
|
|||
// whether to automatically map default states
|
|||
automatic: true, |
|||
// activate / deactivate changes all elements instantiated at same time
|
|||
sync: false, |
|||
|
|||
// selector filter
|
|||
filter : { |
|||
text : '.loading, .disabled', |
|||
active : '.disabled' |
|||
}, |
|||
|
|||
textFilter : false, |
|||
context : false, |
|||
// errors
|
|||
errors: { |
|||
method : 'The method you called is not defined.' |
|||
}, |
|||
|
|||
// metadata
|
|||
metadata: { |
|||
promise : 'promise', |
|||
storedText : 'stored-text' |
|||
}, |
|||
|
|||
// change class on state
|
|||
className: { |
|||
focus : 'focus', |
|||
hover : 'hover', |
|||
pressed : 'down', |
|||
active : 'active', |
|||
loading : 'loading' |
|||
}, |
|||
|
|||
defaults : { |
|||
input: { |
|||
hover : true, |
|||
focus : true, |
|||
pressed : true, |
|||
loading : false, |
|||
active : false |
|||
}, |
|||
button: { |
|||
hover : true, |
|||
focus : false, |
|||
pressed : true, |
|||
active : false, |
|||
loading : true |
|||
} |
|||
}, |
|||
|
|||
states : { |
|||
hover : true, |
|||
focus : true, |
|||
pressed : true, |
|||
loading : false, |
|||
active : false |
|||
}, |
|||
|
|||
text : { |
|||
hover : false, |
|||
active : false, |
|||
inactive : false, |
|||
enable : false, |
|||
disable : false |
|||
} |
|||
|
|||
}; |
|||
|
|||
|
|||
|
|||
})( jQuery, window , document ); |
|||
Write
Preview
Loading…
Cancel
Save