Bootstrap redesign
This commit is contained in:
Gina Trapani
686
css/bootstrap-responsive.css
vendored
Normal file
686
css/bootstrap-responsive.css
vendored
Normal file
@@ -0,0 +1,686 @@
|
|||||||
|
/*!
|
||||||
|
* Bootstrap Responsive v2.0.2
|
||||||
|
*
|
||||||
|
* Copyright 2012 Twitter, Inc
|
||||||
|
* Licensed under the Apache License v2.0
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Designed and built with all the love in the world @twitter by @mdo and @fat.
|
||||||
|
*/
|
||||||
|
.clearfix {
|
||||||
|
*zoom: 1;
|
||||||
|
}
|
||||||
|
.clearfix:before,
|
||||||
|
.clearfix:after {
|
||||||
|
display: table;
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
.clearfix:after {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
.hide-text {
|
||||||
|
overflow: hidden;
|
||||||
|
text-indent: 100%;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.input-block-level {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 28px;
|
||||||
|
/* Make inputs at least the height of their button counterpart */
|
||||||
|
|
||||||
|
/* Makes inputs behave like true block-level elements */
|
||||||
|
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
-ms-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
.visible-phone {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.visible-tablet {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.visible-desktop {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.hidden-phone {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.hidden-tablet {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.hidden-desktop {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
.visible-phone {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.hidden-phone {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.hidden-desktop {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.visible-desktop {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 768px) and (max-width: 979px) {
|
||||||
|
.visible-tablet {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.hidden-tablet {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.hidden-desktop {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.visible-desktop {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.nav-collapse {
|
||||||
|
-webkit-transform: translate3d(0, 0, 0);
|
||||||
|
}
|
||||||
|
.page-header h1 small {
|
||||||
|
display: block;
|
||||||
|
line-height: 18px;
|
||||||
|
}
|
||||||
|
input[type="checkbox"],
|
||||||
|
input[type="radio"] {
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
.form-horizontal .control-group > label {
|
||||||
|
float: none;
|
||||||
|
width: auto;
|
||||||
|
padding-top: 0;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.form-horizontal .controls {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
.form-horizontal .control-list {
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
.form-horizontal .form-actions {
|
||||||
|
padding-left: 10px;
|
||||||
|
padding-right: 10px;
|
||||||
|
}
|
||||||
|
.modal {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
left: 10px;
|
||||||
|
right: 10px;
|
||||||
|
width: auto;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.modal.fade.in {
|
||||||
|
top: auto;
|
||||||
|
}
|
||||||
|
.modal-header .close {
|
||||||
|
padding: 10px;
|
||||||
|
margin: -10px;
|
||||||
|
}
|
||||||
|
.carousel-caption {
|
||||||
|
position: static;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
body {
|
||||||
|
padding-left: 20px;
|
||||||
|
padding-right: 20px;
|
||||||
|
}
|
||||||
|
.navbar-fixed-top {
|
||||||
|
margin-left: -20px;
|
||||||
|
margin-right: -20px;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
.row-fluid {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.row {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
.row > [class*="span"],
|
||||||
|
.row-fluid > [class*="span"] {
|
||||||
|
float: none;
|
||||||
|
display: block;
|
||||||
|
width: auto;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.thumbnails [class*="span"] {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
input[class*="span"],
|
||||||
|
select[class*="span"],
|
||||||
|
textarea[class*="span"],
|
||||||
|
.uneditable-input {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 28px;
|
||||||
|
/* Make inputs at least the height of their button counterpart */
|
||||||
|
|
||||||
|
/* Makes inputs behave like true block-level elements */
|
||||||
|
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
-ms-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.input-prepend input[class*="span"],
|
||||||
|
.input-append input[class*="span"] {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 768px) and (max-width: 979px) {
|
||||||
|
.row {
|
||||||
|
margin-left: -20px;
|
||||||
|
*zoom: 1;
|
||||||
|
}
|
||||||
|
.row:before,
|
||||||
|
.row:after {
|
||||||
|
display: table;
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
.row:after {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
[class*="span"] {
|
||||||
|
float: left;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
.container,
|
||||||
|
.navbar-fixed-top .container,
|
||||||
|
.navbar-fixed-bottom .container {
|
||||||
|
width: 724px;
|
||||||
|
}
|
||||||
|
.span12 {
|
||||||
|
width: 724px;
|
||||||
|
}
|
||||||
|
.span11 {
|
||||||
|
width: 662px;
|
||||||
|
}
|
||||||
|
.span10 {
|
||||||
|
width: 600px;
|
||||||
|
}
|
||||||
|
.span9 {
|
||||||
|
width: 538px;
|
||||||
|
}
|
||||||
|
.span8 {
|
||||||
|
width: 476px;
|
||||||
|
}
|
||||||
|
.span7 {
|
||||||
|
width: 414px;
|
||||||
|
}
|
||||||
|
.span6 {
|
||||||
|
width: 352px;
|
||||||
|
}
|
||||||
|
.span5 {
|
||||||
|
width: 290px;
|
||||||
|
}
|
||||||
|
.span4 {
|
||||||
|
width: 228px;
|
||||||
|
}
|
||||||
|
.span3 {
|
||||||
|
width: 166px;
|
||||||
|
}
|
||||||
|
.span2 {
|
||||||
|
width: 104px;
|
||||||
|
}
|
||||||
|
.span1 {
|
||||||
|
width: 42px;
|
||||||
|
}
|
||||||
|
.offset12 {
|
||||||
|
margin-left: 764px;
|
||||||
|
}
|
||||||
|
.offset11 {
|
||||||
|
margin-left: 702px;
|
||||||
|
}
|
||||||
|
.offset10 {
|
||||||
|
margin-left: 640px;
|
||||||
|
}
|
||||||
|
.offset9 {
|
||||||
|
margin-left: 578px;
|
||||||
|
}
|
||||||
|
.offset8 {
|
||||||
|
margin-left: 516px;
|
||||||
|
}
|
||||||
|
.offset7 {
|
||||||
|
margin-left: 454px;
|
||||||
|
}
|
||||||
|
.offset6 {
|
||||||
|
margin-left: 392px;
|
||||||
|
}
|
||||||
|
.offset5 {
|
||||||
|
margin-left: 330px;
|
||||||
|
}
|
||||||
|
.offset4 {
|
||||||
|
margin-left: 268px;
|
||||||
|
}
|
||||||
|
.offset3 {
|
||||||
|
margin-left: 206px;
|
||||||
|
}
|
||||||
|
.offset2 {
|
||||||
|
margin-left: 144px;
|
||||||
|
}
|
||||||
|
.offset1 {
|
||||||
|
margin-left: 82px;
|
||||||
|
}
|
||||||
|
.row-fluid {
|
||||||
|
width: 100%;
|
||||||
|
*zoom: 1;
|
||||||
|
}
|
||||||
|
.row-fluid:before,
|
||||||
|
.row-fluid:after {
|
||||||
|
display: table;
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
.row-fluid:after {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
.row-fluid > [class*="span"] {
|
||||||
|
float: left;
|
||||||
|
margin-left: 2.762430939%;
|
||||||
|
}
|
||||||
|
.row-fluid > [class*="span"]:first-child {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
.row-fluid > .span12 {
|
||||||
|
width: 99.999999993%;
|
||||||
|
}
|
||||||
|
.row-fluid > .span11 {
|
||||||
|
width: 91.436464082%;
|
||||||
|
}
|
||||||
|
.row-fluid > .span10 {
|
||||||
|
width: 82.87292817100001%;
|
||||||
|
}
|
||||||
|
.row-fluid > .span9 {
|
||||||
|
width: 74.30939226%;
|
||||||
|
}
|
||||||
|
.row-fluid > .span8 {
|
||||||
|
width: 65.74585634900001%;
|
||||||
|
}
|
||||||
|
.row-fluid > .span7 {
|
||||||
|
width: 57.182320438000005%;
|
||||||
|
}
|
||||||
|
.row-fluid > .span6 {
|
||||||
|
width: 48.618784527%;
|
||||||
|
}
|
||||||
|
.row-fluid > .span5 {
|
||||||
|
width: 40.055248616%;
|
||||||
|
}
|
||||||
|
.row-fluid > .span4 {
|
||||||
|
width: 31.491712705%;
|
||||||
|
}
|
||||||
|
.row-fluid > .span3 {
|
||||||
|
width: 22.928176794%;
|
||||||
|
}
|
||||||
|
.row-fluid > .span2 {
|
||||||
|
width: 14.364640883%;
|
||||||
|
}
|
||||||
|
.row-fluid > .span1 {
|
||||||
|
width: 5.801104972%;
|
||||||
|
}
|
||||||
|
input,
|
||||||
|
textarea,
|
||||||
|
.uneditable-input {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
input.span12, textarea.span12, .uneditable-input.span12 {
|
||||||
|
width: 714px;
|
||||||
|
}
|
||||||
|
input.span11, textarea.span11, .uneditable-input.span11 {
|
||||||
|
width: 652px;
|
||||||
|
}
|
||||||
|
input.span10, textarea.span10, .uneditable-input.span10 {
|
||||||
|
width: 590px;
|
||||||
|
}
|
||||||
|
input.span9, textarea.span9, .uneditable-input.span9 {
|
||||||
|
width: 528px;
|
||||||
|
}
|
||||||
|
input.span8, textarea.span8, .uneditable-input.span8 {
|
||||||
|
width: 466px;
|
||||||
|
}
|
||||||
|
input.span7, textarea.span7, .uneditable-input.span7 {
|
||||||
|
width: 404px;
|
||||||
|
}
|
||||||
|
input.span6, textarea.span6, .uneditable-input.span6 {
|
||||||
|
width: 342px;
|
||||||
|
}
|
||||||
|
input.span5, textarea.span5, .uneditable-input.span5 {
|
||||||
|
width: 280px;
|
||||||
|
}
|
||||||
|
input.span4, textarea.span4, .uneditable-input.span4 {
|
||||||
|
width: 218px;
|
||||||
|
}
|
||||||
|
input.span3, textarea.span3, .uneditable-input.span3 {
|
||||||
|
width: 156px;
|
||||||
|
}
|
||||||
|
input.span2, textarea.span2, .uneditable-input.span2 {
|
||||||
|
width: 94px;
|
||||||
|
}
|
||||||
|
input.span1, textarea.span1, .uneditable-input.span1 {
|
||||||
|
width: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 979px) {
|
||||||
|
body {
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
.navbar-fixed-top {
|
||||||
|
position: static;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
}
|
||||||
|
.navbar-fixed-top .navbar-inner {
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
.navbar .container {
|
||||||
|
width: auto;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.navbar .brand {
|
||||||
|
padding-left: 10px;
|
||||||
|
padding-right: 10px;
|
||||||
|
margin: 0 0 0 -5px;
|
||||||
|
}
|
||||||
|
.navbar .nav-collapse {
|
||||||
|
clear: left;
|
||||||
|
}
|
||||||
|
.navbar .nav {
|
||||||
|
float: none;
|
||||||
|
margin: 0 0 9px;
|
||||||
|
}
|
||||||
|
.navbar .nav > li {
|
||||||
|
float: none;
|
||||||
|
}
|
||||||
|
.navbar .nav > li > a {
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
.navbar .nav > .divider-vertical {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.navbar .nav .nav-header {
|
||||||
|
color: #999999;
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
.navbar .nav > li > a,
|
||||||
|
.navbar .dropdown-menu a {
|
||||||
|
padding: 6px 15px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #999999;
|
||||||
|
-webkit-border-radius: 3px;
|
||||||
|
-moz-border-radius: 3px;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
.navbar .dropdown-menu li + li a {
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
.navbar .nav > li > a:hover,
|
||||||
|
.navbar .dropdown-menu a:hover {
|
||||||
|
background-color: #222222;
|
||||||
|
}
|
||||||
|
.navbar .dropdown-menu {
|
||||||
|
position: static;
|
||||||
|
top: auto;
|
||||||
|
left: auto;
|
||||||
|
float: none;
|
||||||
|
display: block;
|
||||||
|
max-width: none;
|
||||||
|
margin: 0 15px;
|
||||||
|
padding: 0;
|
||||||
|
background-color: transparent;
|
||||||
|
border: none;
|
||||||
|
-webkit-border-radius: 0;
|
||||||
|
-moz-border-radius: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
-webkit-box-shadow: none;
|
||||||
|
-moz-box-shadow: none;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
.navbar .dropdown-menu:before,
|
||||||
|
.navbar .dropdown-menu:after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.navbar .dropdown-menu .divider {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.navbar-form,
|
||||||
|
.navbar-search {
|
||||||
|
float: none;
|
||||||
|
padding: 9px 15px;
|
||||||
|
margin: 9px 0;
|
||||||
|
border-top: 1px solid #222222;
|
||||||
|
border-bottom: 1px solid #222222;
|
||||||
|
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||||
|
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||||
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
.navbar .nav.pull-right {
|
||||||
|
float: none;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
.navbar-static .navbar-inner {
|
||||||
|
padding-left: 10px;
|
||||||
|
padding-right: 10px;
|
||||||
|
}
|
||||||
|
.btn-navbar {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.nav-collapse {
|
||||||
|
overflow: hidden;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 980px) {
|
||||||
|
.nav-collapse.collapse {
|
||||||
|
height: auto !important;
|
||||||
|
overflow: visible !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
.row {
|
||||||
|
margin-left: -30px;
|
||||||
|
*zoom: 1;
|
||||||
|
}
|
||||||
|
.row:before,
|
||||||
|
.row:after {
|
||||||
|
display: table;
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
.row:after {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
[class*="span"] {
|
||||||
|
float: left;
|
||||||
|
margin-left: 30px;
|
||||||
|
}
|
||||||
|
.container,
|
||||||
|
.navbar-fixed-top .container,
|
||||||
|
.navbar-fixed-bottom .container {
|
||||||
|
width: 1170px;
|
||||||
|
}
|
||||||
|
.span12 {
|
||||||
|
width: 1170px;
|
||||||
|
}
|
||||||
|
.span11 {
|
||||||
|
width: 1070px;
|
||||||
|
}
|
||||||
|
.span10 {
|
||||||
|
width: 970px;
|
||||||
|
}
|
||||||
|
.span9 {
|
||||||
|
width: 870px;
|
||||||
|
}
|
||||||
|
.span8 {
|
||||||
|
width: 770px;
|
||||||
|
}
|
||||||
|
.span7 {
|
||||||
|
width: 670px;
|
||||||
|
}
|
||||||
|
.span6 {
|
||||||
|
width: 570px;
|
||||||
|
}
|
||||||
|
.span5 {
|
||||||
|
width: 470px;
|
||||||
|
}
|
||||||
|
.span4 {
|
||||||
|
width: 370px;
|
||||||
|
}
|
||||||
|
.span3 {
|
||||||
|
width: 270px;
|
||||||
|
}
|
||||||
|
.span2 {
|
||||||
|
width: 170px;
|
||||||
|
}
|
||||||
|
.span1 {
|
||||||
|
width: 70px;
|
||||||
|
}
|
||||||
|
.offset12 {
|
||||||
|
margin-left: 1230px;
|
||||||
|
}
|
||||||
|
.offset11 {
|
||||||
|
margin-left: 1130px;
|
||||||
|
}
|
||||||
|
.offset10 {
|
||||||
|
margin-left: 1030px;
|
||||||
|
}
|
||||||
|
.offset9 {
|
||||||
|
margin-left: 930px;
|
||||||
|
}
|
||||||
|
.offset8 {
|
||||||
|
margin-left: 830px;
|
||||||
|
}
|
||||||
|
.offset7 {
|
||||||
|
margin-left: 730px;
|
||||||
|
}
|
||||||
|
.offset6 {
|
||||||
|
margin-left: 630px;
|
||||||
|
}
|
||||||
|
.offset5 {
|
||||||
|
margin-left: 530px;
|
||||||
|
}
|
||||||
|
.offset4 {
|
||||||
|
margin-left: 430px;
|
||||||
|
}
|
||||||
|
.offset3 {
|
||||||
|
margin-left: 330px;
|
||||||
|
}
|
||||||
|
.offset2 {
|
||||||
|
margin-left: 230px;
|
||||||
|
}
|
||||||
|
.offset1 {
|
||||||
|
margin-left: 130px;
|
||||||
|
}
|
||||||
|
.row-fluid {
|
||||||
|
width: 100%;
|
||||||
|
*zoom: 1;
|
||||||
|
}
|
||||||
|
.row-fluid:before,
|
||||||
|
.row-fluid:after {
|
||||||
|
display: table;
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
.row-fluid:after {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
.row-fluid > [class*="span"] {
|
||||||
|
float: left;
|
||||||
|
margin-left: 2.564102564%;
|
||||||
|
}
|
||||||
|
.row-fluid > [class*="span"]:first-child {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
.row-fluid > .span12 {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.row-fluid > .span11 {
|
||||||
|
width: 91.45299145300001%;
|
||||||
|
}
|
||||||
|
.row-fluid > .span10 {
|
||||||
|
width: 82.905982906%;
|
||||||
|
}
|
||||||
|
.row-fluid > .span9 {
|
||||||
|
width: 74.358974359%;
|
||||||
|
}
|
||||||
|
.row-fluid > .span8 {
|
||||||
|
width: 65.81196581200001%;
|
||||||
|
}
|
||||||
|
.row-fluid > .span7 {
|
||||||
|
width: 57.264957265%;
|
||||||
|
}
|
||||||
|
.row-fluid > .span6 {
|
||||||
|
width: 48.717948718%;
|
||||||
|
}
|
||||||
|
.row-fluid > .span5 {
|
||||||
|
width: 40.170940171000005%;
|
||||||
|
}
|
||||||
|
.row-fluid > .span4 {
|
||||||
|
width: 31.623931624%;
|
||||||
|
}
|
||||||
|
.row-fluid > .span3 {
|
||||||
|
width: 23.076923077%;
|
||||||
|
}
|
||||||
|
.row-fluid > .span2 {
|
||||||
|
width: 14.529914530000001%;
|
||||||
|
}
|
||||||
|
.row-fluid > .span1 {
|
||||||
|
width: 5.982905983%;
|
||||||
|
}
|
||||||
|
input,
|
||||||
|
textarea,
|
||||||
|
.uneditable-input {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
input.span12, textarea.span12, .uneditable-input.span12 {
|
||||||
|
width: 1160px;
|
||||||
|
}
|
||||||
|
input.span11, textarea.span11, .uneditable-input.span11 {
|
||||||
|
width: 1060px;
|
||||||
|
}
|
||||||
|
input.span10, textarea.span10, .uneditable-input.span10 {
|
||||||
|
width: 960px;
|
||||||
|
}
|
||||||
|
input.span9, textarea.span9, .uneditable-input.span9 {
|
||||||
|
width: 860px;
|
||||||
|
}
|
||||||
|
input.span8, textarea.span8, .uneditable-input.span8 {
|
||||||
|
width: 760px;
|
||||||
|
}
|
||||||
|
input.span7, textarea.span7, .uneditable-input.span7 {
|
||||||
|
width: 660px;
|
||||||
|
}
|
||||||
|
input.span6, textarea.span6, .uneditable-input.span6 {
|
||||||
|
width: 560px;
|
||||||
|
}
|
||||||
|
input.span5, textarea.span5, .uneditable-input.span5 {
|
||||||
|
width: 460px;
|
||||||
|
}
|
||||||
|
input.span4, textarea.span4, .uneditable-input.span4 {
|
||||||
|
width: 360px;
|
||||||
|
}
|
||||||
|
input.span3, textarea.span3, .uneditable-input.span3 {
|
||||||
|
width: 260px;
|
||||||
|
}
|
||||||
|
input.span2, textarea.span2, .uneditable-input.span2 {
|
||||||
|
width: 160px;
|
||||||
|
}
|
||||||
|
input.span1, textarea.span1, .uneditable-input.span1 {
|
||||||
|
width: 60px;
|
||||||
|
}
|
||||||
|
.thumbnails {
|
||||||
|
margin-left: -30px;
|
||||||
|
}
|
||||||
|
.thumbnails > li {
|
||||||
|
margin-left: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
584
css/bootstrap.min.css
vendored
Normal file
584
css/bootstrap.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
122
css/style.css
Normal file
122
css/style.css
Normal file
@@ -0,0 +1,122 @@
|
|||||||
|
html {
|
||||||
|
background:#151515;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
padding-top:50px;
|
||||||
|
color:#777;
|
||||||
|
background:#eee;
|
||||||
|
}
|
||||||
|
body, p, li, input, button, select, textarea {
|
||||||
|
font-family:;'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
body, p, li {
|
||||||
|
font-size:14px;
|
||||||
|
line-height:20px;
|
||||||
|
}
|
||||||
|
h1, h2, h3 {letter-spacing: -1px;}
|
||||||
|
|
||||||
|
/* Links */
|
||||||
|
a {color:#18D;}
|
||||||
|
a:hover {color:#26B;}
|
||||||
|
|
||||||
|
/* Titles */
|
||||||
|
h1 {font-family:Courier;color: #196DB5;font-size:26px;font-weight:300;text-shadow: 0 1px -1px white;}
|
||||||
|
h1 a {color:white;}
|
||||||
|
h1 a:hover {color:white;text-decoration:none;}
|
||||||
|
h2 {color: #555;font-size:22px;font-weight:300;margin-bottom:10px;text-shadow: 0 1px -1px white;}
|
||||||
|
h3 {font-weight:normal;color:#444;margin-bottom: 10px;}
|
||||||
|
h4 {color: #444;margin-bottom: 2px;margin-top:10px;line-height:20px;}
|
||||||
|
h5 {color: #444;line-height:20px;}
|
||||||
|
h6 {line-height:20px; color:#AAA;}
|
||||||
|
.bold {font-weight:bold;}
|
||||||
|
.italic {font-style:italic;}
|
||||||
|
|
||||||
|
/* Hero unit */
|
||||||
|
.hero-unit {
|
||||||
|
background:#151515;
|
||||||
|
border-bottom: 1px solid white;
|
||||||
|
-webkit-border-radius: 0;
|
||||||
|
-moz-border-radius:0;
|
||||||
|
border-radius: 0;
|
||||||
|
margin: 0;
|
||||||
|
margin-top:-50px;
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
.hero-unit .container {
|
||||||
|
padding: 40px 0 30px 0;
|
||||||
|
text-shadow:0 -1px 1px black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-unit h1{color:#E9E9E9;font-size:40px;margin-top:12px;letter-spacing:-2px;text-shadow: 0 -1px -1px black;}
|
||||||
|
.hero-unit h2, .hero-unit h4 {color:#808080;line-height:24px;text-shadow: 0 -1px -1px black;}
|
||||||
|
.hero-unit h1 > img {vertical-align:top;}
|
||||||
|
.hero-unit ul.unstyled li {border-bottom:1px solid #000;border-top:1px solid #2B2B2B;padding:15px 0 15px 15px;}
|
||||||
|
.hero-unit ul.unstyled li:first-child {border-top:0;}
|
||||||
|
.hero-unit ul.unstyled, .hero-unit hr {border-bottom:1px solid #2B2B2B;}
|
||||||
|
.hero-unit .buttons {
|
||||||
|
margin: 10px -15px 0 -15px;
|
||||||
|
padding:20px 0;
|
||||||
|
}
|
||||||
|
.hero-unit hr {border-top:1px solid #000;}
|
||||||
|
.hero-unit .buttons a, .hero-unit iframe {vertical-align:middle;}
|
||||||
|
.hero-unit .divider-vertical {
|
||||||
|
height:20px;
|
||||||
|
width:1px;
|
||||||
|
display:inline-block;
|
||||||
|
background-color:black;
|
||||||
|
border-right:1px solid #333;
|
||||||
|
vertical-align:middle;
|
||||||
|
margin:0 6px;
|
||||||
|
}
|
||||||
|
.hero-unit .github-btn-large .gh-btn, .hero-unit .github-btn-large .gh-count {
|
||||||
|
padding: 2px 10px 2px 8px !important;
|
||||||
|
font-size: 15px !important;
|
||||||
|
}
|
||||||
|
.hero-unit .btn-large {
|
||||||
|
padding: 3px 10px 3px 6px;
|
||||||
|
line-height: 22px;
|
||||||
|
}
|
||||||
|
.hero-unit .stitched {
|
||||||
|
outline: 1px dashed #444;
|
||||||
|
outline-offset: -5px;
|
||||||
|
background: #2B2B2B;
|
||||||
|
border-radius: 4px 4px 4px 4px;
|
||||||
|
-webkit-border-radius: 4px;
|
||||||
|
-moz-border-radius:4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Section */
|
||||||
|
.section {
|
||||||
|
background: white;
|
||||||
|
margin: -20px -20px 35px -20px;
|
||||||
|
padding:19px;
|
||||||
|
border:1px solid #DDD;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*Footer*/
|
||||||
|
.footer {
|
||||||
|
background: #151515;
|
||||||
|
padding: 20px 0 10px 0;
|
||||||
|
box-shadow: inset 0 15px 10px rgba(0,0,0,0.6);
|
||||||
|
-webkit-box-shadow: inset 0 15px 10px rgba(0,0,0,0.6);
|
||||||
|
-moz-box-shadow:inset 0 15px 10px rgba(0,0,0,0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer a {
|
||||||
|
color:white;
|
||||||
|
font-weight:normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer bottom */
|
||||||
|
.footer.footer-btm {
|
||||||
|
background:#151515;
|
||||||
|
border-top: 1px solid #222;
|
||||||
|
color:#555;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
border: 0;
|
||||||
|
-ms-interpolation-mode: bicubic;
|
||||||
|
}
|
||||||
BIN
images/app-store-amazon-available.png
Normal file
BIN
images/app-store-amazon-available.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
BIN
images/app-store-available.png
Normal file
BIN
images/app-store-available.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
BIN
images/app-store-google-available.png
Normal file
BIN
images/app-store-google-available.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
BIN
images/blank.gif
BIN
images/blank.gif
Binary file not shown.
|
Before Width: | Height: | Size: 43 B |
BIN
images/close.gif
BIN
images/close.gif
Binary file not shown.
|
Before Width: | Height: | Size: 222 B |
Binary file not shown.
|
Before Width: | Height: | Size: 979 B |
Binary file not shown.
|
Before Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 145 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB |
BIN
images/mobileappsheader.png
Normal file
BIN
images/mobileappsheader.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
BIN
images/next.gif
BIN
images/next.gif
Binary file not shown.
|
Before Width: | Height: | Size: 305 B |
Binary file not shown.
|
Before Width: | Height: | Size: 354 B |
BIN
images/prev.gif
BIN
images/prev.gif
Binary file not shown.
|
Before Width: | Height: | Size: 307 B |
Binary file not shown.
|
Before Width: | Height: | Size: 371 B |
Binary file not shown.
|
Before Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
BIN
images/todotxt-apps_lrg.png
Normal file
BIN
images/todotxt-apps_lrg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 157 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 98 KiB |
250
index.html
250
index.html
@@ -1,117 +1,163 @@
|
|||||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd">
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||||||
|
|
||||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
|
<title>Todo.txt: Future-proof task tracking in a file you control</title>
|
||||||
<meta name="description" content="Track your tasks and projects in a plain text file, todo.txt. A todo.txt is software and operating system agnostic; it's searchable, portable, lightweight and easily manipulated." />
|
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css"/>
|
||||||
<meta name="keywords" content="Todo.txt, To do list" />
|
<link rel="stylesheet" type="text/css" href="/css/bootstrap-responsive.css"/>
|
||||||
<meta name="robots" content="all,follow" />
|
<link rel="stylesheet" type="text/css" href="/css/style.css"/>
|
||||||
<meta name="author" content="Gina Trapani" />
|
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
|
||||||
<link rel="shortcut icon" href="favicon.png" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<script type="text/javascript" src="js/prototype.js"></script>
|
<meta name="description" content="Track your tasks and projects in a plain text file, todo.txt. A todo.txt is software and operating system agnostic; it's searchable, portable, lightweight and easily manipulated." />
|
||||||
|
<meta name="keywords" content="Todo.txt, To do list" />
|
||||||
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
|
<meta name="robots" content="all,follow" />
|
||||||
<script type="text/javascript" src="js/lightbox.js"></script>
|
<meta name="author" content="Gina Trapani" />
|
||||||
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
|
<link rel="shortcut icon" href="favicon.png" />
|
||||||
<link type="text/css" rel="stylesheet" href="css/basic.css" title="Basic style" />
|
|
||||||
|
|
||||||
<title>Todo.txt: Future-proof task tracking in a file you control</title>
|
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
|
||||||
|
|
||||||
<div id="page">
|
<body id="body">
|
||||||
|
<div class="hero-unit">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="span10">
|
||||||
|
<a href="/" title="Todo.txt"><img src="/images/todotxt_logo_2011.png" alt="Todo.txt" width="100" style="float:left;margin-right:10px"/></a>
|
||||||
|
<h1><a href="/">Todo.txt</a></h1>
|
||||||
|
<h2>Get organized in plain text</h2>
|
||||||
|
</div>
|
||||||
|
<div class="span2">
|
||||||
|
<br><br>
|
||||||
|
<a href="https://twitter.com/todotxtapps" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">Follow @todotxtapps</a>
|
||||||
|
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="container content">
|
||||||
|
<div class="section">
|
||||||
|
<div class="row">
|
||||||
|
<div class="span12">
|
||||||
|
<span class="hidden-phone"><img src="/images/todotxt-apps_lrg.png" alt="Todo.txt apps" width="768" style="float:right;margin-bottom:5px"/></span>
|
||||||
|
<h3>If you have a file called todo.txt on your computer right now, you're in the right place.</h3>
|
||||||
|
<p>So many power users try dozens of complicated todo list software applications, only to go right back to their trusty todo.txt file. It's simple, straightforward, and readable by every text editor ever made.</p>
|
||||||
|
|
||||||
<div id="content">
|
<p>But it's not as easy as it should be to open todo.txt, make a change, and save it—especially on your touchscreen device and at the command line. Todo.txt apps solve that problem.</p>
|
||||||
|
|
||||||
<h2 id="intro" style="padding-top:50px">Todo.txt Apps</h2>
|
<h3>Simplicity is todo.txt's core value.</h3>
|
||||||
|
|
||||||
<a href="/" class="logo"><img src="images/todotxt_logo_2011.png" alt="" alt="Todo.txt" align="left" style="margin-right:15px;margin-bottom:15px;margin-top:15px"/></a>
|
<p>You're not going to find many checkboxes, drop-downs, reminders, or date pickers here.</p>
|
||||||
<p style="padding-top:10px">If you've got a file called <code>todo.txt</code> on your computer right now, you're in the right place.</p>
|
|
||||||
|
|
||||||
<p>So many power users try dozens of complicated todo list software applications, only to go right back to their trusty <code>todo.txt</code>. It's simple, straighforward, and readable by every text editor ever made.</p>
|
<p>Todo.txt apps are minimal, todo.txt-focused editors which help you manage your plain text todo list with as few keystrokes and taps possible.</p></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<p>But it's not as easy as it should be to open <code>todo.txt</code>, make a change, and save it—especially on your touchscreen device and at the command line. Todo.txt apps solve that problem.</p>
|
<div class="section">
|
||||||
|
<div class="row">
|
||||||
<p>You're not going to find many checkboxes, dropdowns, reminders, or date pickers here. Todo.txt apps are minimal <code>todo.txt</code>-focused editors which help you manage your plain text todo list with as few keystrokes and taps possible.</p>
|
<div class="span4">
|
||||||
|
<h2>On Your Phone and Tablet</h2>
|
||||||
|
<span class="hidden-phone"><p><img src="/images/mobileappsheader.png" alt="Todo.txt mobile apps" /></p></span>
|
||||||
<br clear="all"/>
|
<p>Your todo.txt file isn't useful if it's not always at your fingertips. The Todo.txt mobile apps make it easy to view and update your todo list on the go.</p>
|
||||||
<h2 id="screencast"><a name="cli"></a>Todo.txt Command Line Interface</h2>
|
<p>Currently coupled with <a href="http://dropbox.com">Dropbox</a>, Todo.txt Touch helps you manage your todo.txt on your touchscreen mobile device and automatically syncs your changes to all your devices.</p>
|
||||||
<p>With a simple but powerful shell script called <code>todo.sh</code>, you can interact with <code>todo.txt</code> at the command line for quick and easy, Unix-y access.</p>
|
<h4>iPhone, iPod Touch, and iPad users:</h4>
|
||||||
|
<p><a href="http://itunes.apple.com/us/app/todo.txt-touch/id491342186?ls=1&mt=8" title="Available on the App Store"><img src="/images/app-store-available.png" alt="Available on the App Store"></a></p>
|
||||||
<div style="float:right"><iframe src="http://player.vimeo.com/video/3263629?byline=0&portrait=0" width="400" height="302" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe></div>
|
<p>Todo.txt for iOS is proudly <a href="https://github.com/ginatrapani/todo.txt-touch-ios">open source</a>.</p>
|
||||||
<div style="float:left;width:300px">
|
<h4>Android users:</h4>
|
||||||
<a href="http://github.com/ginatrapani/todo.txt-cli/downloads" id="download">Download Todo.txt CLI</a>
|
<p><a href="https://play.google.com/store/apps/details?id=com.todotxt.todotxttouch&hl=en" title="Android app on Google Play"><img src="/images/app-store-google-available.png" alt="Android app on Google Play"></a> <a href="http://www.amazon.com/o/ASIN/B004MNQTVU/ref=nosim/lifehackerboo-20" title="Available at Amazon Appstore for Android"><img src="/images/app-store-amazon-available.png" alt="Available at Amazon Appstore for Android"></a></p>
|
||||||
<br><br>Find out more:
|
<p>Todo.txt for Android is proudly <a href="https://github.com/ginatrapani/todo.txt-touch">open source</a>.</p>
|
||||||
<ul>
|
</div>
|
||||||
<li><b><a href="http://wiki.github.com/ginatrapani/todo.txt-cli">Documentation</a></b>—everything you need to know about how to use Todo.txt CLI</li>
|
<div class="span4">
|
||||||
<li><b><a href="http://groups.yahoo.com/group/todotxt/" title="Mailing List">Mailing List</a></b>—ask the Todo.txt community</li>
|
<h2>At the Command Line</h2>
|
||||||
</ul>
|
<p>With a simple but powerful shell script called todo.sh, you can interact with todo.txt at the command line for quick and easy, Unix-y access.</p>
|
||||||
</div>
|
<p><span class="hidden-phone"><iframe src="http://player.vimeo.com/video/3263629?byline=0&portrait=0" width="340" height="250" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe></span></p>
|
||||||
<br clear="all"/>
|
<p>The Todo.txt CLI supports archiving completed tasks to done.txt and priority/context tab autocompletion.</p><br>
|
||||||
|
<p><a href="http://github.com/ginatrapani/todo.txt-cli/downloads" class="btn-large btn-success" title="Download Todo.txt CLI">Download Todo.txt CLI »</a></p><br>
|
||||||
<h2 id="support"><a name="android"></a>Todo.txt Touch for Android</h2>
|
<p>Find out more:</p>
|
||||||
|
<p><ul>
|
||||||
<div style="float:right"><img src="images/todotouch1.jpeg" style="border:solid black 1px;margin:5px"></div>
|
<li><a href="http://wiki.github.com/ginatrapani/todo.txt-cli">Documentation</a>—everything you need to know about how to use Todo.txt CLI</li>
|
||||||
<div style="float:left;width:350px">
|
<li><a href="http://groups.yahoo.com/group/todotxt/">Mailing List</a>—ask the Todo.txt community</li>
|
||||||
<p>Typing commands on your touchscreen device isn't easy or fun, and neither is syncing files from your phone back to your computer.</p>
|
</ul>
|
||||||
<p>Currently coupled with <a href="http://dropbox.com">Dropbox</a>, Todo.txt Touch helps you manage your <code>todo.txt</code> on the go and automatically syncs the file to all your devices.</p>
|
</p>
|
||||||
<br><br><br>
|
</div>
|
||||||
<a href="https://market.android.com/details?id=com.todotxt.todotxttouch&hl=en" id="download">Get Todo.txt Touch for Android</a>
|
<div class="span4">
|
||||||
<p>Also available in the <a href="http://www.amazon.com/o/ASIN/B004MNQTVU/ref=nosim/lifehackerboo-20">Amazon Appstore</a>.</p>
|
<h2>Useful in Every Text Editor Ever Made</h2>
|
||||||
<br><br><br>
|
<p>Countless productivity apps and sites store your tasks in their own proprietary database and file format. But you can open a todo.txt file with every text editor under the sun, regardless of operating system or vendor.</p>
|
||||||
<p>Like all the Todo.txt apps, Todo.txt Touch for Android is open source. Browse and submit a patch to the app's <a href="https://github.com/ginatrapani/todo.txt-touch">source code on GitHub</a>. See a list of <a href="https://github.com/ginatrapani/todo.txt-touch/issues">upcoming features</a> in the project issue tracker. <a href="http://groups.yahoo.com/group/todotxt/">Get in touch with the Todo.txt community</a> if you're interested in helping enhance Todo.txt Touch for Android.</p>
|
<p>A todo.txt file future-proofs your task list and stores it in a text file YOU control. It isn't dependent on any software or platform to be useful.</p>
|
||||||
</div>
|
<p>The todo.txt format is <a href="https://github.com/ginatrapani/todo.txt-cli/wiki/The-Todo.txt-Format">a simple set of rules</a> that make todo.txt both human and machine-readable. The todo.txt format supports priorities, creation and completion dates, projects and contexts. That's all you need to be productive.</p>
|
||||||
<br clear="all"/>
|
<p><a href="/todo.txt">See an example Todo.txt file</a>.</p>
|
||||||
<h2 id="support"><a name="ios"></a>Todo.txt Touch for iOS</h2>
|
<h3>Community-built, Community-supported</h3>
|
||||||
|
<p>These apps are built and maintained by Todo.txt users just like you. We believe in the power of portable file formats, data ownership, and getting things done in plain text.</p>
|
||||||
<div style="float:right"><img src="images/todotxt-touch-ios.png" style="border:solid black 1px;margin:5px"></div>
|
<p>Got a question about Todo.txt?</p>
|
||||||
<div style="float:left;width:350px">
|
<p><a class="btn btn-info" href="http://groups.yahoo.com/group/todotxt/" title="Ask the Community">Ask the community »</a></p><br>
|
||||||
<p><span style="color:red;font-weight:bold;">New!</span> Todo.txt Touch is now available for your iPhone, iPod touch, and iPad in the iTunes Store.</p>
|
</div>
|
||||||
|
</div>
|
||||||
<br><br><br>
|
</div>
|
||||||
<a href="http://itunes.apple.com/us/app/todo.txt-touch/id491342186?ls=1&mt=8" id="download">Get Todo.txt Touch for iOS</a>
|
|
||||||
<br><br><br>
|
<div class="section">
|
||||||
|
<div class="row">
|
||||||
|
<div class="span12">
|
||||||
<p>Like all the Todo.txt apps, Todo.txt Touch for iOS is open source. Browse and submit a patch to the app's <a href="https://github.com/ginatrapani/todo.txt-touch-ios">source code on GitHub</a>. See a list of <a href="https://github.com/ginatrapani/todo.txt-touch-ios/issues">upcoming features</a> in the project issue tracker. <a href="http://groups.yahoo.com/group/todotxt/">Get in touch with the Todo.txt community</a> if you're interested in helping enhance Todo.txt Touch for iOS.</p></div>
|
<h2>Community Apps</h2>
|
||||||
|
<p>In addition to the official Todo.txt apps, community members have built more apps and add-ons that work with Todo.txt.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="span3">
|
||||||
<br clear="all">
|
<h3>Web</h3>
|
||||||
<h2><a name="why"></a>Why Todo.txt</h2>
|
<h4><a href="https://github.com/infews/bulldog">Bulldog</a></h4>
|
||||||
|
<p>HTML5 task manager, built on todo.txt, by <a href="https://github.com/infews">Davis W. Frank</a>.</p>
|
||||||
<p>Countless apps and sites store your tasks in their own proprietary database and file format. But you can open a <code>todo.txt</code> file with every text editor under the sun, regardless of operating system or vendor. A <code>todo.txt</code> file future-proofs your task list and stores it in a text file YOU control. That's why a <code>todo.txt</code> file is the discerning nerd's task manager of choice.</p>
|
<h4><a href="http://keenpin.com/">Keenpin</a></h4>
|
||||||
|
<p>A beautiful todo.txt web template engine.</p>
|
||||||
<p>Todo.txt apps are for power users who spend a lot of time at the command line and on their touchscreen phone or tablet. The apps make it easy to add, update and prioritize tasks, tag them with project names and contexts, search, filter, and most importantly, mark your them done.</p>
|
</div>
|
||||||
|
<div class="span3">
|
||||||
<p>You want to focus on getting stuff done instead of rearranging your todo list. That's why Todo.txt apps' features are purposefully limited. Todo.txt apps aren't for users who want tons of complicated task manager features, like due dates, reminders, sub-lists, and auto-updating next actions. Do only as much work as you need to to keep yourself on track. That's this project's goal.</p>
|
<h3>Mobile</h3>
|
||||||
|
<h4><a href="http://www.windowsphone.com/en-US/apps/50b1ca07-7e23-4963-a0ba-1536e6913543">Todo.txt for Windows Phone 7</a></h4>
|
||||||
|
<p>Todo.txt for Windows Phone 7 is a task manager based on the todo.txt file format, by <a href="https://github.com/hartez">E.Z. Hart</a>.</p>
|
||||||
<h2 id="author"><a name="authors"></a>Authors</h2>
|
<h4><a href="https://developer.palm.com/appredirect/?packageid=com.monkeystew.todotxtenyo.beta">Todo.txt Enyo</a></h4>
|
||||||
|
<p>A webOS application for managing your todo.txt file written using the EnyoJS framework, by <a href="https://github.com/thrrgilag">thrrgilag</a>.</p>
|
||||||
<p>Unless otherwise noted, Todo.txt apps published herein are authored by <a href="http://ginatrapani.org/" title="Gina Trapani: The Official Site">Gina Trapani</a> in collaboration with <a href="https://github.com/ginatrapani/todo.txt-cli/contributors">Todo.txt</a> <a href="https://github.com/ginatrapani/todo.txt-touch-ios/contributors">community</a> <a href="https://github.com/ginatrapani/todo.txt-touch/contributors">members</a> and released under the <a href="http://www.gnu.org/copyleft/gpl.html">GNU General Public License</a>.</p>
|
</div>
|
||||||
<p>Todo.txt's icon designed by <a href="http://twitter.com/eJohnR">John Rowley</a>.</p>
|
<div class="span3">
|
||||||
<p>The first version of the Todo.txt CLI script was originally published in 2006 on <a href="http://lifehacker.com/software/top/geek-to-live--readerwritten-todotxt-manager-173018.php">on Lifehacker.com</a>.</p>
|
<h3>Desktop</h3>
|
||||||
|
<h4><a href="http://benrhughes.com/todotxt.net/">Todotxt.net</a></h4>
|
||||||
<p>All software comes as is with no warranty. Do back up your todo.txt before you read another word. Support available on the <a href="http://groups.yahoo.com/group/todotxt/">Todo.txt community mailing list</a>.</p>
|
<p>A minimalist, keyboard-driven Windows GUI for your todo.txt file, by <a href="http://benrhughes.com/">Ben Hughes</a>.</p>
|
||||||
|
</div>
|
||||||
<div id="footer"><p>Copyright © 2009-2012
|
<div class="span3">
|
||||||
<a href="http://ginatrapani.org/" title="Gina Trapani: The Official Site">Gina Trapani</a>. Follow <a href="http://twitter.com/todotxtapps">@todotxtapps on Twitter</a>.<br /><br />
|
<h3>Developer Tools</h3>
|
||||||
</p></div>
|
<h4><a href="https://github.com/samwho/todo-txt-gem">Todo.txt Gem</a></h4>
|
||||||
|
<p>A RubyGem for parsing todo.txt files, by <a href="https://github.com/samwho">Sam Rose</a>.</p>
|
||||||
|
<h3>Command Line Add-ons</h3>
|
||||||
|
<h4><a href="btn btn-info">Todo.sh Add-on and Filters Directory</a></h4>
|
||||||
|
<p>A collection of add-ons, custom actions, and filters that enhance the Todo.txt CLI script, authored by community members.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer">
|
||||||
|
<div class="fill">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<p>Unless otherwise noted, Todo.txt apps published herein are authored by <a href="http://ginatrapani.org/" title="Gina Trapani: The Official Site">Gina Trapani</a> in collaboration with <a href="https://github.com/ginatrapani/todo.txt-cli/contributors">Todo.txt</a> <a href="https://github.com/ginatrapani/todo.txt-touch-ios/contributors">community</a> <a href="https://github.com/ginatrapani/todo.txt-touch/contributors">members</a> and released under the <a href="http://www.gnu.org/copyleft/gpl.html">GNU General Public License</a>.</p>
|
||||||
|
<p>Todo.txt's icon designed by <a href="http://twitter.com/eJohnR">John Rowley</a>.</p>
|
||||||
|
<p>The first version of the Todo.txt CLI script was originally published in 2006 on <a href="http://lifehacker.com/software/top/geek-to-live--readerwritten-todotxt-manager-173018.php">on Lifehacker.com</a>.</p>
|
||||||
|
|
||||||
|
<p>All software comes as is with no warranty. Do back up your todo.txt before you read another word. Support is available on the <a href="http://groups.yahoo.com/group/todotxt/">Todo.txt community mailing list</a>.</p>
|
||||||
|
</p>
|
||||||
|
<p>Copyright © 2006-2012 <a href="http://ginatrapani.org/" title="Gina Trapani: The Official Site">Gina Trapani</a>.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer footer-btm">
|
||||||
|
<div class="fill">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<p>If you want to get it done, first write it down.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
|
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
|
||||||
</script>
|
</script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
_uacct = "UA-436966-1";
|
_uacct = "UA-436966-1";
|
||||||
urchinTracker();
|
urchinTracker();
|
||||||
</script>
|
</script>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
903
js/effects.js
vendored
903
js/effects.js
vendored
@@ -1,903 +0,0 @@
|
|||||||
// Copyright (c) 2005 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
|
|
||||||
// Contributors:
|
|
||||||
// Justin Palmer (http://encytemedia.com/)
|
|
||||||
// Mark Pilgrim (http://diveintomark.org/)
|
|
||||||
// Martin Bialasinki
|
|
||||||
//
|
|
||||||
// See scriptaculous.js for full license.
|
|
||||||
|
|
||||||
/* ------------- element ext -------------- */
|
|
||||||
|
|
||||||
// converts rgb() and #xxx to #xxxxxx format,
|
|
||||||
// returns self (or first argument) if not convertable
|
|
||||||
String.prototype.parseColor = function() {
|
|
||||||
var color = '#';
|
|
||||||
if(this.slice(0,4) == 'rgb(') {
|
|
||||||
var cols = this.slice(4,this.length-1).split(',');
|
|
||||||
var i=0; do { color += parseInt(cols[i]).toColorPart() } while (++i<3);
|
|
||||||
} else {
|
|
||||||
if(this.slice(0,1) == '#') {
|
|
||||||
if(this.length==4) for(var i=1;i<4;i++) color += (this.charAt(i) + this.charAt(i)).toLowerCase();
|
|
||||||
if(this.length==7) color = this.toLowerCase();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return(color.length==7 ? color : (arguments[0] || this));
|
|
||||||
}
|
|
||||||
|
|
||||||
Element.collectTextNodes = function(element) {
|
|
||||||
return $A($(element).childNodes).collect( function(node) {
|
|
||||||
return (node.nodeType==3 ? node.nodeValue :
|
|
||||||
(node.hasChildNodes() ? Element.collectTextNodes(node) : ''));
|
|
||||||
}).flatten().join('');
|
|
||||||
}
|
|
||||||
|
|
||||||
Element.collectTextNodesIgnoreClass = function(element, className) {
|
|
||||||
return $A($(element).childNodes).collect( function(node) {
|
|
||||||
return (node.nodeType==3 ? node.nodeValue :
|
|
||||||
((node.hasChildNodes() && !Element.hasClassName(node,className)) ?
|
|
||||||
Element.collectTextNodes(node) : ''));
|
|
||||||
}).flatten().join('');
|
|
||||||
}
|
|
||||||
|
|
||||||
Element.setStyle = function(element, style) {
|
|
||||||
element = $(element);
|
|
||||||
for(k in style) element.style[k.camelize()] = style[k];
|
|
||||||
}
|
|
||||||
|
|
||||||
Element.setContentZoom = function(element, percent) {
|
|
||||||
Element.setStyle(element, {fontSize: (percent/100) + 'em'});
|
|
||||||
if(navigator.appVersion.indexOf('AppleWebKit')>0) window.scrollBy(0,0);
|
|
||||||
}
|
|
||||||
|
|
||||||
Element.getOpacity = function(element){
|
|
||||||
var opacity;
|
|
||||||
if (opacity = Element.getStyle(element, 'opacity'))
|
|
||||||
return parseFloat(opacity);
|
|
||||||
if (opacity = (Element.getStyle(element, 'filter') || '').match(/alpha\(opacity=(.*)\)/))
|
|
||||||
if(opacity[1]) return parseFloat(opacity[1]) / 100;
|
|
||||||
return 1.0;
|
|
||||||
}
|
|
||||||
|
|
||||||
Element.setOpacity = function(element, value){
|
|
||||||
element= $(element);
|
|
||||||
if (value == 1){
|
|
||||||
Element.setStyle(element, { opacity:
|
|
||||||
(/Gecko/.test(navigator.userAgent) && !/Konqueror|Safari|KHTML/.test(navigator.userAgent)) ?
|
|
||||||
0.999999 : null });
|
|
||||||
if(/MSIE/.test(navigator.userAgent))
|
|
||||||
Element.setStyle(element, {filter: Element.getStyle(element,'filter').replace(/alpha\([^\)]*\)/gi,'')});
|
|
||||||
} else {
|
|
||||||
if(value < 0.00001) value = 0;
|
|
||||||
Element.setStyle(element, {opacity: value});
|
|
||||||
if(/MSIE/.test(navigator.userAgent))
|
|
||||||
Element.setStyle(element,
|
|
||||||
{ filter: Element.getStyle(element,'filter').replace(/alpha\([^\)]*\)/gi,'') +
|
|
||||||
'alpha(opacity='+value*100+')' });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Element.getInlineOpacity = function(element){
|
|
||||||
return $(element).style.opacity || '';
|
|
||||||
}
|
|
||||||
|
|
||||||
Element.childrenWithClassName = function(element, className) {
|
|
||||||
return $A($(element).getElementsByTagName('*')).select(
|
|
||||||
function(c) { return Element.hasClassName(c, className) });
|
|
||||||
}
|
|
||||||
|
|
||||||
Array.prototype.call = function() {
|
|
||||||
var args = arguments;
|
|
||||||
this.each(function(f){ f.apply(this, args) });
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
var Effect = {
|
|
||||||
tagifyText: function(element) {
|
|
||||||
var tagifyStyle = 'position:relative';
|
|
||||||
if(/MSIE/.test(navigator.userAgent)) tagifyStyle += ';zoom:1';
|
|
||||||
element = $(element);
|
|
||||||
$A(element.childNodes).each( function(child) {
|
|
||||||
if(child.nodeType==3) {
|
|
||||||
child.nodeValue.toArray().each( function(character) {
|
|
||||||
element.insertBefore(
|
|
||||||
Builder.node('span',{style: tagifyStyle},
|
|
||||||
character == ' ' ? String.fromCharCode(160) : character),
|
|
||||||
child);
|
|
||||||
});
|
|
||||||
Element.remove(child);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
multiple: function(element, effect) {
|
|
||||||
var elements;
|
|
||||||
if(((typeof element == 'object') ||
|
|
||||||
(typeof element == 'function')) &&
|
|
||||||
(element.length))
|
|
||||||
elements = element;
|
|
||||||
else
|
|
||||||
elements = $(element).childNodes;
|
|
||||||
|
|
||||||
var options = Object.extend({
|
|
||||||
speed: 0.1,
|
|
||||||
delay: 0.0
|
|
||||||
}, arguments[2] || {});
|
|
||||||
var masterDelay = options.delay;
|
|
||||||
|
|
||||||
$A(elements).each( function(element, index) {
|
|
||||||
new effect(element, Object.extend(options, { delay: index * options.speed + masterDelay }));
|
|
||||||
});
|
|
||||||
},
|
|
||||||
PAIRS: {
|
|
||||||
'slide': ['SlideDown','SlideUp'],
|
|
||||||
'blind': ['BlindDown','BlindUp'],
|
|
||||||
'appear': ['Appear','Fade']
|
|
||||||
},
|
|
||||||
toggle: function(element, effect) {
|
|
||||||
element = $(element);
|
|
||||||
effect = (effect || 'appear').toLowerCase();
|
|
||||||
var options = Object.extend({
|
|
||||||
queue: { position:'end', scope:(element.id || 'global') }
|
|
||||||
}, arguments[2] || {});
|
|
||||||
Effect[Element.visible(element) ?
|
|
||||||
Effect.PAIRS[effect][1] : Effect.PAIRS[effect][0]](element, options);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
var Effect2 = Effect; // deprecated
|
|
||||||
|
|
||||||
/* ------------- transitions ------------- */
|
|
||||||
|
|
||||||
Effect.Transitions = {}
|
|
||||||
|
|
||||||
Effect.Transitions.linear = function(pos) {
|
|
||||||
return pos;
|
|
||||||
}
|
|
||||||
Effect.Transitions.sinoidal = function(pos) {
|
|
||||||
return (-Math.cos(pos*Math.PI)/2) + 0.5;
|
|
||||||
}
|
|
||||||
Effect.Transitions.reverse = function(pos) {
|
|
||||||
return 1-pos;
|
|
||||||
}
|
|
||||||
Effect.Transitions.flicker = function(pos) {
|
|
||||||
return ((-Math.cos(pos*Math.PI)/4) + 0.75) + Math.random()/4;
|
|
||||||
}
|
|
||||||
Effect.Transitions.wobble = function(pos) {
|
|
||||||
return (-Math.cos(pos*Math.PI*(9*pos))/2) + 0.5;
|
|
||||||
}
|
|
||||||
Effect.Transitions.pulse = function(pos) {
|
|
||||||
return (Math.floor(pos*10) % 2 == 0 ?
|
|
||||||
(pos*10-Math.floor(pos*10)) : 1-(pos*10-Math.floor(pos*10)));
|
|
||||||
}
|
|
||||||
Effect.Transitions.none = function(pos) {
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
Effect.Transitions.full = function(pos) {
|
|
||||||
return 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ------------- core effects ------------- */
|
|
||||||
|
|
||||||
Effect.ScopedQueue = Class.create();
|
|
||||||
Object.extend(Object.extend(Effect.ScopedQueue.prototype, Enumerable), {
|
|
||||||
initialize: function() {
|
|
||||||
this.effects = [];
|
|
||||||
this.interval = null;
|
|
||||||
},
|
|
||||||
_each: function(iterator) {
|
|
||||||
this.effects._each(iterator);
|
|
||||||
},
|
|
||||||
add: function(effect) {
|
|
||||||
var timestamp = new Date().getTime();
|
|
||||||
|
|
||||||
var position = (typeof effect.options.queue == 'string') ?
|
|
||||||
effect.options.queue : effect.options.queue.position;
|
|
||||||
|
|
||||||
switch(position) {
|
|
||||||
case 'front':
|
|
||||||
// move unstarted effects after this effect
|
|
||||||
this.effects.findAll(function(e){ return e.state=='idle' }).each( function(e) {
|
|
||||||
e.startOn += effect.finishOn;
|
|
||||||
e.finishOn += effect.finishOn;
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
case 'end':
|
|
||||||
// start effect after last queued effect has finished
|
|
||||||
timestamp = this.effects.pluck('finishOn').max() || timestamp;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
effect.startOn += timestamp;
|
|
||||||
effect.finishOn += timestamp;
|
|
||||||
this.effects.push(effect);
|
|
||||||
if(!this.interval)
|
|
||||||
this.interval = setInterval(this.loop.bind(this), 40);
|
|
||||||
},
|
|
||||||
remove: function(effect) {
|
|
||||||
this.effects = this.effects.reject(function(e) { return e==effect });
|
|
||||||
if(this.effects.length == 0) {
|
|
||||||
clearInterval(this.interval);
|
|
||||||
this.interval = null;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
loop: function() {
|
|
||||||
var timePos = new Date().getTime();
|
|
||||||
this.effects.invoke('loop', timePos);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
Effect.Queues = {
|
|
||||||
instances: $H(),
|
|
||||||
get: function(queueName) {
|
|
||||||
if(typeof queueName != 'string') return queueName;
|
|
||||||
|
|
||||||
if(!this.instances[queueName])
|
|
||||||
this.instances[queueName] = new Effect.ScopedQueue();
|
|
||||||
|
|
||||||
return this.instances[queueName];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Effect.Queue = Effect.Queues.get('global');
|
|
||||||
|
|
||||||
Effect.DefaultOptions = {
|
|
||||||
transition: Effect.Transitions.sinoidal,
|
|
||||||
duration: 1.0, // seconds
|
|
||||||
fps: 25.0, // max. 25fps due to Effect.Queue implementation
|
|
||||||
sync: false, // true for combining
|
|
||||||
from: 0.0,
|
|
||||||
to: 1.0,
|
|
||||||
delay: 0.0,
|
|
||||||
queue: 'parallel'
|
|
||||||
}
|
|
||||||
|
|
||||||
Effect.Base = function() {};
|
|
||||||
Effect.Base.prototype = {
|
|
||||||
position: null,
|
|
||||||
start: function(options) {
|
|
||||||
this.options = Object.extend(Object.extend({},Effect.DefaultOptions), options || {});
|
|
||||||
this.currentFrame = 0;
|
|
||||||
this.state = 'idle';
|
|
||||||
this.startOn = this.options.delay*1000;
|
|
||||||
this.finishOn = this.startOn + (this.options.duration*1000);
|
|
||||||
this.event('beforeStart');
|
|
||||||
if(!this.options.sync)
|
|
||||||
Effect.Queues.get(typeof this.options.queue == 'string' ?
|
|
||||||
'global' : this.options.queue.scope).add(this);
|
|
||||||
},
|
|
||||||
loop: function(timePos) {
|
|
||||||
if(timePos >= this.startOn) {
|
|
||||||
if(timePos >= this.finishOn) {
|
|
||||||
this.render(1.0);
|
|
||||||
this.cancel();
|
|
||||||
this.event('beforeFinish');
|
|
||||||
if(this.finish) this.finish();
|
|
||||||
this.event('afterFinish');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
var pos = (timePos - this.startOn) / (this.finishOn - this.startOn);
|
|
||||||
var frame = Math.round(pos * this.options.fps * this.options.duration);
|
|
||||||
if(frame > this.currentFrame) {
|
|
||||||
this.render(pos);
|
|
||||||
this.currentFrame = frame;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
render: function(pos) {
|
|
||||||
if(this.state == 'idle') {
|
|
||||||
this.state = 'running';
|
|
||||||
this.event('beforeSetup');
|
|
||||||
if(this.setup) this.setup();
|
|
||||||
this.event('afterSetup');
|
|
||||||
}
|
|
||||||
if(this.state == 'running') {
|
|
||||||
if(this.options.transition) pos = this.options.transition(pos);
|
|
||||||
pos *= (this.options.to-this.options.from);
|
|
||||||
pos += this.options.from;
|
|
||||||
this.position = pos;
|
|
||||||
this.event('beforeUpdate');
|
|
||||||
if(this.update) this.update(pos);
|
|
||||||
this.event('afterUpdate');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
cancel: function() {
|
|
||||||
if(!this.options.sync)
|
|
||||||
Effect.Queues.get(typeof this.options.queue == 'string' ?
|
|
||||||
'global' : this.options.queue.scope).remove(this);
|
|
||||||
this.state = 'finished';
|
|
||||||
},
|
|
||||||
event: function(eventName) {
|
|
||||||
if(this.options[eventName + 'Internal']) this.options[eventName + 'Internal'](this);
|
|
||||||
if(this.options[eventName]) this.options[eventName](this);
|
|
||||||
},
|
|
||||||
inspect: function() {
|
|
||||||
return '#<Effect:' + $H(this).inspect() + ',options:' + $H(this.options).inspect() + '>';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Effect.Parallel = Class.create();
|
|
||||||
Object.extend(Object.extend(Effect.Parallel.prototype, Effect.Base.prototype), {
|
|
||||||
initialize: function(effects) {
|
|
||||||
this.effects = effects || [];
|
|
||||||
this.start(arguments[1]);
|
|
||||||
},
|
|
||||||
update: function(position) {
|
|
||||||
this.effects.invoke('render', position);
|
|
||||||
},
|
|
||||||
finish: function(position) {
|
|
||||||
this.effects.each( function(effect) {
|
|
||||||
effect.render(1.0);
|
|
||||||
effect.cancel();
|
|
||||||
effect.event('beforeFinish');
|
|
||||||
if(effect.finish) effect.finish(position);
|
|
||||||
effect.event('afterFinish');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
Effect.Opacity = Class.create();
|
|
||||||
Object.extend(Object.extend(Effect.Opacity.prototype, Effect.Base.prototype), {
|
|
||||||
initialize: function(element) {
|
|
||||||
this.element = $(element);
|
|
||||||
// make this work on IE on elements without 'layout'
|
|
||||||
if(/MSIE/.test(navigator.userAgent) && (!this.element.hasLayout))
|
|
||||||
Element.setStyle(this.element, {zoom: 1});
|
|
||||||
var options = Object.extend({
|
|
||||||
from: Element.getOpacity(this.element) || 0.0,
|
|
||||||
to: 1.0
|
|
||||||
}, arguments[1] || {});
|
|
||||||
this.start(options);
|
|
||||||
},
|
|
||||||
update: function(position) {
|
|
||||||
Element.setOpacity(this.element, position);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
Effect.Move = Class.create();
|
|
||||||
Object.extend(Object.extend(Effect.Move.prototype, Effect.Base.prototype), {
|
|
||||||
initialize: function(element) {
|
|
||||||
this.element = $(element);
|
|
||||||
var options = Object.extend({
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
mode: 'relative'
|
|
||||||
}, arguments[1] || {});
|
|
||||||
this.start(options);
|
|
||||||
},
|
|
||||||
setup: function() {
|
|
||||||
// Bug in Opera: Opera returns the "real" position of a static element or
|
|
||||||
// relative element that does not have top/left explicitly set.
|
|
||||||
// ==> Always set top and left for position relative elements in your stylesheets
|
|
||||||
// (to 0 if you do not need them)
|
|
||||||
Element.makePositioned(this.element);
|
|
||||||
this.originalLeft = parseFloat(Element.getStyle(this.element,'left') || '0');
|
|
||||||
this.originalTop = parseFloat(Element.getStyle(this.element,'top') || '0');
|
|
||||||
if(this.options.mode == 'absolute') {
|
|
||||||
// absolute movement, so we need to calc deltaX and deltaY
|
|
||||||
this.options.x = this.options.x - this.originalLeft;
|
|
||||||
this.options.y = this.options.y - this.originalTop;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
update: function(position) {
|
|
||||||
Element.setStyle(this.element, {
|
|
||||||
left: this.options.x * position + this.originalLeft + 'px',
|
|
||||||
top: this.options.y * position + this.originalTop + 'px'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// for backwards compatibility
|
|
||||||
Effect.MoveBy = function(element, toTop, toLeft) {
|
|
||||||
return new Effect.Move(element,
|
|
||||||
Object.extend({ x: toLeft, y: toTop }, arguments[3] || {}));
|
|
||||||
};
|
|
||||||
|
|
||||||
Effect.Scale = Class.create();
|
|
||||||
Object.extend(Object.extend(Effect.Scale.prototype, Effect.Base.prototype), {
|
|
||||||
initialize: function(element, percent) {
|
|
||||||
this.element = $(element)
|
|
||||||
var options = Object.extend({
|
|
||||||
scaleX: true,
|
|
||||||
scaleY: true,
|
|
||||||
scaleContent: true,
|
|
||||||
scaleFromCenter: false,
|
|
||||||
scaleMode: 'box', // 'box' or 'contents' or {} with provided values
|
|
||||||
scaleFrom: 100.0,
|
|
||||||
scaleTo: percent
|
|
||||||
}, arguments[2] || {});
|
|
||||||
this.start(options);
|
|
||||||
},
|
|
||||||
setup: function() {
|
|
||||||
this.restoreAfterFinish = this.options.restoreAfterFinish || false;
|
|
||||||
this.elementPositioning = Element.getStyle(this.element,'position');
|
|
||||||
|
|
||||||
this.originalStyle = {};
|
|
||||||
['top','left','width','height','fontSize'].each( function(k) {
|
|
||||||
this.originalStyle[k] = this.element.style[k];
|
|
||||||
}.bind(this));
|
|
||||||
|
|
||||||
this.originalTop = this.element.offsetTop;
|
|
||||||
this.originalLeft = this.element.offsetLeft;
|
|
||||||
|
|
||||||
var fontSize = Element.getStyle(this.element,'font-size') || '100%';
|
|
||||||
['em','px','%'].each( function(fontSizeType) {
|
|
||||||
if(fontSize.indexOf(fontSizeType)>0) {
|
|
||||||
this.fontSize = parseFloat(fontSize);
|
|
||||||
this.fontSizeType = fontSizeType;
|
|
||||||
}
|
|
||||||
}.bind(this));
|
|
||||||
|
|
||||||
this.factor = (this.options.scaleTo - this.options.scaleFrom)/100;
|
|
||||||
|
|
||||||
this.dims = null;
|
|
||||||
if(this.options.scaleMode=='box')
|
|
||||||
this.dims = [this.element.offsetHeight, this.element.offsetWidth];
|
|
||||||
if(/^content/.test(this.options.scaleMode))
|
|
||||||
this.dims = [this.element.scrollHeight, this.element.scrollWidth];
|
|
||||||
if(!this.dims)
|
|
||||||
this.dims = [this.options.scaleMode.originalHeight,
|
|
||||||
this.options.scaleMode.originalWidth];
|
|
||||||
},
|
|
||||||
update: function(position) {
|
|
||||||
var currentScale = (this.options.scaleFrom/100.0) + (this.factor * position);
|
|
||||||
if(this.options.scaleContent && this.fontSize)
|
|
||||||
Element.setStyle(this.element, {fontSize: this.fontSize * currentScale + this.fontSizeType });
|
|
||||||
this.setDimensions(this.dims[0] * currentScale, this.dims[1] * currentScale);
|
|
||||||
},
|
|
||||||
finish: function(position) {
|
|
||||||
if (this.restoreAfterFinish) Element.setStyle(this.element, this.originalStyle);
|
|
||||||
},
|
|
||||||
setDimensions: function(height, width) {
|
|
||||||
var d = {};
|
|
||||||
if(this.options.scaleX) d.width = width + 'px';
|
|
||||||
if(this.options.scaleY) d.height = height + 'px';
|
|
||||||
if(this.options.scaleFromCenter) {
|
|
||||||
var topd = (height - this.dims[0])/2;
|
|
||||||
var leftd = (width - this.dims[1])/2;
|
|
||||||
if(this.elementPositioning == 'absolute') {
|
|
||||||
if(this.options.scaleY) d.top = this.originalTop-topd + 'px';
|
|
||||||
if(this.options.scaleX) d.left = this.originalLeft-leftd + 'px';
|
|
||||||
} else {
|
|
||||||
if(this.options.scaleY) d.top = -topd + 'px';
|
|
||||||
if(this.options.scaleX) d.left = -leftd + 'px';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Element.setStyle(this.element, d);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
Effect.Highlight = Class.create();
|
|
||||||
Object.extend(Object.extend(Effect.Highlight.prototype, Effect.Base.prototype), {
|
|
||||||
initialize: function(element) {
|
|
||||||
this.element = $(element);
|
|
||||||
var options = Object.extend({ startcolor: '#ffff99' }, arguments[1] || {});
|
|
||||||
this.start(options);
|
|
||||||
},
|
|
||||||
setup: function() {
|
|
||||||
// Prevent executing on elements not in the layout flow
|
|
||||||
if(Element.getStyle(this.element, 'display')=='none') { this.cancel(); return; }
|
|
||||||
// Disable background image during the effect
|
|
||||||
this.oldStyle = {
|
|
||||||
backgroundImage: Element.getStyle(this.element, 'background-image') };
|
|
||||||
Element.setStyle(this.element, {backgroundImage: 'none'});
|
|
||||||
if(!this.options.endcolor)
|
|
||||||
this.options.endcolor = Element.getStyle(this.element, 'background-color').parseColor('#ffffff');
|
|
||||||
if(!this.options.restorecolor)
|
|
||||||
this.options.restorecolor = Element.getStyle(this.element, 'background-color');
|
|
||||||
// init color calculations
|
|
||||||
this._base = $R(0,2).map(function(i){ return parseInt(this.options.startcolor.slice(i*2+1,i*2+3),16) }.bind(this));
|
|
||||||
this._delta = $R(0,2).map(function(i){ return parseInt(this.options.endcolor.slice(i*2+1,i*2+3),16)-this._base[i] }.bind(this));
|
|
||||||
},
|
|
||||||
update: function(position) {
|
|
||||||
Element.setStyle(this.element,{backgroundColor: $R(0,2).inject('#',function(m,v,i){
|
|
||||||
return m+(Math.round(this._base[i]+(this._delta[i]*position)).toColorPart()); }.bind(this)) });
|
|
||||||
},
|
|
||||||
finish: function() {
|
|
||||||
Element.setStyle(this.element, Object.extend(this.oldStyle, {
|
|
||||||
backgroundColor: this.options.restorecolor
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
Effect.ScrollTo = Class.create();
|
|
||||||
Object.extend(Object.extend(Effect.ScrollTo.prototype, Effect.Base.prototype), {
|
|
||||||
initialize: function(element) {
|
|
||||||
this.element = $(element);
|
|
||||||
this.start(arguments[1] || {});
|
|
||||||
},
|
|
||||||
setup: function() {
|
|
||||||
Position.prepare();
|
|
||||||
var offsets = Position.cumulativeOffset(this.element);
|
|
||||||
if(this.options.offset) offsets[1] += this.options.offset;
|
|
||||||
var max = window.innerHeight ?
|
|
||||||
window.height - window.innerHeight :
|
|
||||||
document.body.scrollHeight -
|
|
||||||
(document.documentElement.clientHeight ?
|
|
||||||
document.documentElement.clientHeight : document.body.clientHeight);
|
|
||||||
this.scrollStart = Position.deltaY;
|
|
||||||
this.delta = (offsets[1] > max ? max : offsets[1]) - this.scrollStart;
|
|
||||||
},
|
|
||||||
update: function(position) {
|
|
||||||
Position.prepare();
|
|
||||||
window.scrollTo(Position.deltaX,
|
|
||||||
this.scrollStart + (position*this.delta));
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
/* ------------- combination effects ------------- */
|
|
||||||
|
|
||||||
Effect.Fade = function(element) {
|
|
||||||
var oldOpacity = Element.getInlineOpacity(element);
|
|
||||||
var options = Object.extend({
|
|
||||||
from: Element.getOpacity(element) || 1.0,
|
|
||||||
to: 0.0,
|
|
||||||
afterFinishInternal: function(effect) { with(Element) {
|
|
||||||
if(effect.options.to!=0) return;
|
|
||||||
hide(effect.element);
|
|
||||||
setStyle(effect.element, {opacity: oldOpacity}); }}
|
|
||||||
}, arguments[1] || {});
|
|
||||||
return new Effect.Opacity(element,options);
|
|
||||||
}
|
|
||||||
|
|
||||||
Effect.Appear = function(element) {
|
|
||||||
var options = Object.extend({
|
|
||||||
from: (Element.getStyle(element, 'display') == 'none' ? 0.0 : Element.getOpacity(element) || 0.0),
|
|
||||||
to: 1.0,
|
|
||||||
beforeSetup: function(effect) { with(Element) {
|
|
||||||
setOpacity(effect.element, effect.options.from);
|
|
||||||
show(effect.element); }}
|
|
||||||
}, arguments[1] || {});
|
|
||||||
return new Effect.Opacity(element,options);
|
|
||||||
}
|
|
||||||
|
|
||||||
Effect.Puff = function(element) {
|
|
||||||
element = $(element);
|
|
||||||
var oldStyle = { opacity: Element.getInlineOpacity(element), position: Element.getStyle(element, 'position') };
|
|
||||||
return new Effect.Parallel(
|
|
||||||
[ new Effect.Scale(element, 200,
|
|
||||||
{ sync: true, scaleFromCenter: true, scaleContent: true, restoreAfterFinish: true }),
|
|
||||||
new Effect.Opacity(element, { sync: true, to: 0.0 } ) ],
|
|
||||||
Object.extend({ duration: 1.0,
|
|
||||||
beforeSetupInternal: function(effect) { with(Element) {
|
|
||||||
setStyle(effect.effects[0].element, {position: 'absolute'}); }},
|
|
||||||
afterFinishInternal: function(effect) { with(Element) {
|
|
||||||
hide(effect.effects[0].element);
|
|
||||||
setStyle(effect.effects[0].element, oldStyle); }}
|
|
||||||
}, arguments[1] || {})
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
Effect.BlindUp = function(element) {
|
|
||||||
element = $(element);
|
|
||||||
Element.makeClipping(element);
|
|
||||||
return new Effect.Scale(element, 0,
|
|
||||||
Object.extend({ scaleContent: false,
|
|
||||||
scaleX: false,
|
|
||||||
restoreAfterFinish: true,
|
|
||||||
afterFinishInternal: function(effect) { with(Element) {
|
|
||||||
[hide, undoClipping].call(effect.element); }}
|
|
||||||
}, arguments[1] || {})
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
Effect.BlindDown = function(element) {
|
|
||||||
element = $(element);
|
|
||||||
var oldHeight = Element.getStyle(element, 'height');
|
|
||||||
var elementDimensions = Element.getDimensions(element);
|
|
||||||
return new Effect.Scale(element, 100,
|
|
||||||
Object.extend({ scaleContent: false,
|
|
||||||
scaleX: false,
|
|
||||||
scaleFrom: 0,
|
|
||||||
scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
|
|
||||||
restoreAfterFinish: true,
|
|
||||||
afterSetup: function(effect) { with(Element) {
|
|
||||||
makeClipping(effect.element);
|
|
||||||
setStyle(effect.element, {height: '0px'});
|
|
||||||
show(effect.element);
|
|
||||||
}},
|
|
||||||
afterFinishInternal: function(effect) { with(Element) {
|
|
||||||
undoClipping(effect.element);
|
|
||||||
setStyle(effect.element, {height: oldHeight});
|
|
||||||
}}
|
|
||||||
}, arguments[1] || {})
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
Effect.SwitchOff = function(element) {
|
|
||||||
element = $(element);
|
|
||||||
var oldOpacity = Element.getInlineOpacity(element);
|
|
||||||
return new Effect.Appear(element, {
|
|
||||||
duration: 0.4,
|
|
||||||
from: 0,
|
|
||||||
transition: Effect.Transitions.flicker,
|
|
||||||
afterFinishInternal: function(effect) {
|
|
||||||
new Effect.Scale(effect.element, 1, {
|
|
||||||
duration: 0.3, scaleFromCenter: true,
|
|
||||||
scaleX: false, scaleContent: false, restoreAfterFinish: true,
|
|
||||||
beforeSetup: function(effect) { with(Element) {
|
|
||||||
[makePositioned,makeClipping].call(effect.element);
|
|
||||||
}},
|
|
||||||
afterFinishInternal: function(effect) { with(Element) {
|
|
||||||
[hide,undoClipping,undoPositioned].call(effect.element);
|
|
||||||
setStyle(effect.element, {opacity: oldOpacity});
|
|
||||||
}}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
Effect.DropOut = function(element) {
|
|
||||||
element = $(element);
|
|
||||||
var oldStyle = {
|
|
||||||
top: Element.getStyle(element, 'top'),
|
|
||||||
left: Element.getStyle(element, 'left'),
|
|
||||||
opacity: Element.getInlineOpacity(element) };
|
|
||||||
return new Effect.Parallel(
|
|
||||||
[ new Effect.Move(element, {x: 0, y: 100, sync: true }),
|
|
||||||
new Effect.Opacity(element, { sync: true, to: 0.0 }) ],
|
|
||||||
Object.extend(
|
|
||||||
{ duration: 0.5,
|
|
||||||
beforeSetup: function(effect) { with(Element) {
|
|
||||||
makePositioned(effect.effects[0].element); }},
|
|
||||||
afterFinishInternal: function(effect) { with(Element) {
|
|
||||||
[hide, undoPositioned].call(effect.effects[0].element);
|
|
||||||
setStyle(effect.effects[0].element, oldStyle); }}
|
|
||||||
}, arguments[1] || {}));
|
|
||||||
}
|
|
||||||
|
|
||||||
Effect.Shake = function(element) {
|
|
||||||
element = $(element);
|
|
||||||
var oldStyle = {
|
|
||||||
top: Element.getStyle(element, 'top'),
|
|
||||||
left: Element.getStyle(element, 'left') };
|
|
||||||
return new Effect.Move(element,
|
|
||||||
{ x: 20, y: 0, duration: 0.05, afterFinishInternal: function(effect) {
|
|
||||||
new Effect.Move(effect.element,
|
|
||||||
{ x: -40, y: 0, duration: 0.1, afterFinishInternal: function(effect) {
|
|
||||||
new Effect.Move(effect.element,
|
|
||||||
{ x: 40, y: 0, duration: 0.1, afterFinishInternal: function(effect) {
|
|
||||||
new Effect.Move(effect.element,
|
|
||||||
{ x: -40, y: 0, duration: 0.1, afterFinishInternal: function(effect) {
|
|
||||||
new Effect.Move(effect.element,
|
|
||||||
{ x: 40, y: 0, duration: 0.1, afterFinishInternal: function(effect) {
|
|
||||||
new Effect.Move(effect.element,
|
|
||||||
{ x: -20, y: 0, duration: 0.05, afterFinishInternal: function(effect) { with(Element) {
|
|
||||||
undoPositioned(effect.element);
|
|
||||||
setStyle(effect.element, oldStyle);
|
|
||||||
}}}) }}) }}) }}) }}) }});
|
|
||||||
}
|
|
||||||
|
|
||||||
Effect.SlideDown = function(element) {
|
|
||||||
element = $(element);
|
|
||||||
Element.cleanWhitespace(element);
|
|
||||||
// SlideDown need to have the content of the element wrapped in a container element with fixed height!
|
|
||||||
var oldInnerBottom = Element.getStyle(element.firstChild, 'bottom');
|
|
||||||
var elementDimensions = Element.getDimensions(element);
|
|
||||||
return new Effect.Scale(element, 100, Object.extend({
|
|
||||||
scaleContent: false,
|
|
||||||
scaleX: false,
|
|
||||||
scaleFrom: 0,
|
|
||||||
scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
|
|
||||||
restoreAfterFinish: true,
|
|
||||||
afterSetup: function(effect) { with(Element) {
|
|
||||||
makePositioned(effect.element);
|
|
||||||
makePositioned(effect.element.firstChild);
|
|
||||||
if(window.opera) setStyle(effect.element, {top: ''});
|
|
||||||
makeClipping(effect.element);
|
|
||||||
setStyle(effect.element, {height: '0px'});
|
|
||||||
show(element); }},
|
|
||||||
afterUpdateInternal: function(effect) { with(Element) {
|
|
||||||
setStyle(effect.element.firstChild, {bottom:
|
|
||||||
(effect.dims[0] - effect.element.clientHeight) + 'px' }); }},
|
|
||||||
afterFinishInternal: function(effect) { with(Element) {
|
|
||||||
undoClipping(effect.element);
|
|
||||||
undoPositioned(effect.element.firstChild);
|
|
||||||
undoPositioned(effect.element);
|
|
||||||
setStyle(effect.element.firstChild, {bottom: oldInnerBottom}); }}
|
|
||||||
}, arguments[1] || {})
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
Effect.SlideUp = function(element) {
|
|
||||||
element = $(element);
|
|
||||||
Element.cleanWhitespace(element);
|
|
||||||
var oldInnerBottom = Element.getStyle(element.firstChild, 'bottom');
|
|
||||||
return new Effect.Scale(element, 0,
|
|
||||||
Object.extend({ scaleContent: false,
|
|
||||||
scaleX: false,
|
|
||||||
scaleMode: 'box',
|
|
||||||
scaleFrom: 100,
|
|
||||||
restoreAfterFinish: true,
|
|
||||||
beforeStartInternal: function(effect) { with(Element) {
|
|
||||||
makePositioned(effect.element);
|
|
||||||
makePositioned(effect.element.firstChild);
|
|
||||||
if(window.opera) setStyle(effect.element, {top: ''});
|
|
||||||
makeClipping(effect.element);
|
|
||||||
show(element); }},
|
|
||||||
afterUpdateInternal: function(effect) { with(Element) {
|
|
||||||
setStyle(effect.element.firstChild, {bottom:
|
|
||||||
(effect.dims[0] - effect.element.clientHeight) + 'px' }); }},
|
|
||||||
afterFinishInternal: function(effect) { with(Element) {
|
|
||||||
[hide, undoClipping].call(effect.element);
|
|
||||||
undoPositioned(effect.element.firstChild);
|
|
||||||
undoPositioned(effect.element);
|
|
||||||
setStyle(effect.element.firstChild, {bottom: oldInnerBottom}); }}
|
|
||||||
}, arguments[1] || {})
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Bug in opera makes the TD containing this element expand for a instance after finish
|
|
||||||
Effect.Squish = function(element) {
|
|
||||||
return new Effect.Scale(element, window.opera ? 1 : 0,
|
|
||||||
{ restoreAfterFinish: true,
|
|
||||||
beforeSetup: function(effect) { with(Element) {
|
|
||||||
makeClipping(effect.element); }},
|
|
||||||
afterFinishInternal: function(effect) { with(Element) {
|
|
||||||
hide(effect.element);
|
|
||||||
undoClipping(effect.element); }}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
Effect.Grow = function(element) {
|
|
||||||
element = $(element);
|
|
||||||
var options = Object.extend({
|
|
||||||
direction: 'center',
|
|
||||||
moveTransistion: Effect.Transitions.sinoidal,
|
|
||||||
scaleTransition: Effect.Transitions.sinoidal,
|
|
||||||
opacityTransition: Effect.Transitions.full
|
|
||||||
}, arguments[1] || {});
|
|
||||||
var oldStyle = {
|
|
||||||
top: element.style.top,
|
|
||||||
left: element.style.left,
|
|
||||||
height: element.style.height,
|
|
||||||
width: element.style.width,
|
|
||||||
opacity: Element.getInlineOpacity(element) };
|
|
||||||
|
|
||||||
var dims = Element.getDimensions(element);
|
|
||||||
var initialMoveX, initialMoveY;
|
|
||||||
var moveX, moveY;
|
|
||||||
|
|
||||||
switch (options.direction) {
|
|
||||||
case 'top-left':
|
|
||||||
initialMoveX = initialMoveY = moveX = moveY = 0;
|
|
||||||
break;
|
|
||||||
case 'top-right':
|
|
||||||
initialMoveX = dims.width;
|
|
||||||
initialMoveY = moveY = 0;
|
|
||||||
moveX = -dims.width;
|
|
||||||
break;
|
|
||||||
case 'bottom-left':
|
|
||||||
initialMoveX = moveX = 0;
|
|
||||||
initialMoveY = dims.height;
|
|
||||||
moveY = -dims.height;
|
|
||||||
break;
|
|
||||||
case 'bottom-right':
|
|
||||||
initialMoveX = dims.width;
|
|
||||||
initialMoveY = dims.height;
|
|
||||||
moveX = -dims.width;
|
|
||||||
moveY = -dims.height;
|
|
||||||
break;
|
|
||||||
case 'center':
|
|
||||||
initialMoveX = dims.width / 2;
|
|
||||||
initialMoveY = dims.height / 2;
|
|
||||||
moveX = -dims.width / 2;
|
|
||||||
moveY = -dims.height / 2;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
return new Effect.Move(element, {
|
|
||||||
x: initialMoveX,
|
|
||||||
y: initialMoveY,
|
|
||||||
duration: 0.01,
|
|
||||||
beforeSetup: function(effect) { with(Element) {
|
|
||||||
hide(effect.element);
|
|
||||||
makeClipping(effect.element);
|
|
||||||
makePositioned(effect.element);
|
|
||||||
}},
|
|
||||||
afterFinishInternal: function(effect) {
|
|
||||||
new Effect.Parallel(
|
|
||||||
[ new Effect.Opacity(effect.element, { sync: true, to: 1.0, from: 0.0, transition: options.opacityTransition }),
|
|
||||||
new Effect.Move(effect.element, { x: moveX, y: moveY, sync: true, transition: options.moveTransition }),
|
|
||||||
new Effect.Scale(effect.element, 100, {
|
|
||||||
scaleMode: { originalHeight: dims.height, originalWidth: dims.width },
|
|
||||||
sync: true, scaleFrom: window.opera ? 1 : 0, transition: options.scaleTransition, restoreAfterFinish: true})
|
|
||||||
], Object.extend({
|
|
||||||
beforeSetup: function(effect) { with(Element) {
|
|
||||||
setStyle(effect.effects[0].element, {height: '0px'});
|
|
||||||
show(effect.effects[0].element); }},
|
|
||||||
afterFinishInternal: function(effect) { with(Element) {
|
|
||||||
[undoClipping, undoPositioned].call(effect.effects[0].element);
|
|
||||||
setStyle(effect.effects[0].element, oldStyle); }}
|
|
||||||
}, options)
|
|
||||||
)
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
Effect.Shrink = function(element) {
|
|
||||||
element = $(element);
|
|
||||||
var options = Object.extend({
|
|
||||||
direction: 'center',
|
|
||||||
moveTransistion: Effect.Transitions.sinoidal,
|
|
||||||
scaleTransition: Effect.Transitions.sinoidal,
|
|
||||||
opacityTransition: Effect.Transitions.none
|
|
||||||
}, arguments[1] || {});
|
|
||||||
var oldStyle = {
|
|
||||||
top: element.style.top,
|
|
||||||
left: element.style.left,
|
|
||||||
height: element.style.height,
|
|
||||||
width: element.style.width,
|
|
||||||
opacity: Element.getInlineOpacity(element) };
|
|
||||||
|
|
||||||
var dims = Element.getDimensions(element);
|
|
||||||
var moveX, moveY;
|
|
||||||
|
|
||||||
switch (options.direction) {
|
|
||||||
case 'top-left':
|
|
||||||
moveX = moveY = 0;
|
|
||||||
break;
|
|
||||||
case 'top-right':
|
|
||||||
moveX = dims.width;
|
|
||||||
moveY = 0;
|
|
||||||
break;
|
|
||||||
case 'bottom-left':
|
|
||||||
moveX = 0;
|
|
||||||
moveY = dims.height;
|
|
||||||
break;
|
|
||||||
case 'bottom-right':
|
|
||||||
moveX = dims.width;
|
|
||||||
moveY = dims.height;
|
|
||||||
break;
|
|
||||||
case 'center':
|
|
||||||
moveX = dims.width / 2;
|
|
||||||
moveY = dims.height / 2;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
return new Effect.Parallel(
|
|
||||||
[ new Effect.Opacity(element, { sync: true, to: 0.0, from: 1.0, transition: options.opacityTransition }),
|
|
||||||
new Effect.Scale(element, window.opera ? 1 : 0, { sync: true, transition: options.scaleTransition, restoreAfterFinish: true}),
|
|
||||||
new Effect.Move(element, { x: moveX, y: moveY, sync: true, transition: options.moveTransition })
|
|
||||||
], Object.extend({
|
|
||||||
beforeStartInternal: function(effect) { with(Element) {
|
|
||||||
[makePositioned, makeClipping].call(effect.effects[0].element) }},
|
|
||||||
afterFinishInternal: function(effect) { with(Element) {
|
|
||||||
[hide, undoClipping, undoPositioned].call(effect.effects[0].element);
|
|
||||||
setStyle(effect.effects[0].element, oldStyle); }}
|
|
||||||
}, options)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
Effect.Pulsate = function(element) {
|
|
||||||
element = $(element);
|
|
||||||
var options = arguments[1] || {};
|
|
||||||
var oldOpacity = Element.getInlineOpacity(element);
|
|
||||||
var transition = options.transition || Effect.Transitions.sinoidal;
|
|
||||||
var reverser = function(pos){ return transition(1-Effect.Transitions.pulse(pos)) };
|
|
||||||
reverser.bind(transition);
|
|
||||||
return new Effect.Opacity(element,
|
|
||||||
Object.extend(Object.extend({ duration: 3.0, from: 0,
|
|
||||||
afterFinishInternal: function(effect) { Element.setStyle(effect.element, {opacity: oldOpacity}); }
|
|
||||||
}, options), {transition: reverser}));
|
|
||||||
}
|
|
||||||
|
|
||||||
Effect.Fold = function(element) {
|
|
||||||
element = $(element);
|
|
||||||
var oldStyle = {
|
|
||||||
top: element.style.top,
|
|
||||||
left: element.style.left,
|
|
||||||
width: element.style.width,
|
|
||||||
height: element.style.height };
|
|
||||||
Element.makeClipping(element);
|
|
||||||
return new Effect.Scale(element, 5, Object.extend({
|
|
||||||
scaleContent: false,
|
|
||||||
scaleX: false,
|
|
||||||
afterFinishInternal: function(effect) {
|
|
||||||
new Effect.Scale(element, 1, {
|
|
||||||
scaleContent: false,
|
|
||||||
scaleY: false,
|
|
||||||
afterFinishInternal: function(effect) { with(Element) {
|
|
||||||
[hide, undoClipping].call(effect.element);
|
|
||||||
setStyle(effect.element, oldStyle);
|
|
||||||
}} });
|
|
||||||
}}, arguments[1] || {}));
|
|
||||||
}
|
|
||||||
689
js/lightbox.js
689
js/lightbox.js
@@ -1,689 +0,0 @@
|
|||||||
// -----------------------------------------------------------------------------------
|
|
||||||
//
|
|
||||||
// Lightbox v2.02
|
|
||||||
// by Lokesh Dhakar - http://www.huddletogether.com
|
|
||||||
// 3/31/06
|
|
||||||
//
|
|
||||||
// For more information on this script, visit:
|
|
||||||
// http://huddletogether.com/projects/lightbox2/
|
|
||||||
//
|
|
||||||
// Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
|
|
||||||
//
|
|
||||||
// Credit also due to those who have helped, inspired, and made their code available to the public.
|
|
||||||
// Including: Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.org), Thomas Fuchs(mir.aculo.us), and others.
|
|
||||||
//
|
|
||||||
//
|
|
||||||
// -----------------------------------------------------------------------------------
|
|
||||||
/*
|
|
||||||
|
|
||||||
Table of Contents
|
|
||||||
-----------------
|
|
||||||
Configuration
|
|
||||||
Global Variables
|
|
||||||
|
|
||||||
Extending Built-in Objects
|
|
||||||
- Object.extend(Element)
|
|
||||||
- Array.prototype.removeDuplicates()
|
|
||||||
- Array.prototype.empty()
|
|
||||||
|
|
||||||
Lightbox Class Declaration
|
|
||||||
- initialize()
|
|
||||||
- start()
|
|
||||||
- changeImage()
|
|
||||||
- resizeImageContainer()
|
|
||||||
- showImage()
|
|
||||||
- updateDetails()
|
|
||||||
- updateNav()
|
|
||||||
- enableKeyboardNav()
|
|
||||||
- disableKeyboardNav()
|
|
||||||
- keyboardAction()
|
|
||||||
- preloadNeighborImages()
|
|
||||||
- end()
|
|
||||||
|
|
||||||
Miscellaneous Functions
|
|
||||||
- getPageScroll()
|
|
||||||
- getPageSize()
|
|
||||||
- getKey()
|
|
||||||
- listenKey()
|
|
||||||
- showSelectBoxes()
|
|
||||||
- hideSelectBoxes()
|
|
||||||
- pause()
|
|
||||||
- initLightbox()
|
|
||||||
|
|
||||||
Function Calls
|
|
||||||
- addLoadEvent(initLightbox)
|
|
||||||
|
|
||||||
*/
|
|
||||||
// -----------------------------------------------------------------------------------
|
|
||||||
|
|
||||||
//
|
|
||||||
// Configuration
|
|
||||||
//
|
|
||||||
var fileLoadingImage = "images/loading.gif";
|
|
||||||
var fileBottomNavCloseImage = "images/closelabel.gif";
|
|
||||||
|
|
||||||
var resizeSpeed = 7; // controls the speed of the image resizing (1=slowest and 10=fastest)
|
|
||||||
|
|
||||||
var borderSize = 10; //if you adjust the padding in the CSS, you will need to update this variable
|
|
||||||
|
|
||||||
// -----------------------------------------------------------------------------------
|
|
||||||
|
|
||||||
//
|
|
||||||
// Global Variables
|
|
||||||
//
|
|
||||||
var imageArray = new Array;
|
|
||||||
var activeImage;
|
|
||||||
|
|
||||||
if(resizeSpeed > 10){ resizeSpeed = 10;}
|
|
||||||
if(resizeSpeed < 1){ resizeSpeed = 1;}
|
|
||||||
resizeDuration = (11 - resizeSpeed) * 0.15;
|
|
||||||
|
|
||||||
// -----------------------------------------------------------------------------------
|
|
||||||
|
|
||||||
//
|
|
||||||
// Additional methods for Element added by SU, Couloir
|
|
||||||
// - further additions by Lokesh Dhakar (huddletogether.com)
|
|
||||||
//
|
|
||||||
Object.extend(Element, {
|
|
||||||
getWidth: function(element) {
|
|
||||||
element = $(element);
|
|
||||||
return element.offsetWidth;
|
|
||||||
},
|
|
||||||
setWidth: function(element,w) {
|
|
||||||
element = $(element);
|
|
||||||
element.style.width = w +"px";
|
|
||||||
},
|
|
||||||
setHeight: function(element,h) {
|
|
||||||
element = $(element);
|
|
||||||
element.style.height = h +"px";
|
|
||||||
},
|
|
||||||
setTop: function(element,t) {
|
|
||||||
element = $(element);
|
|
||||||
element.style.top = t +"px";
|
|
||||||
},
|
|
||||||
setSrc: function(element,src) {
|
|
||||||
element = $(element);
|
|
||||||
element.src = src;
|
|
||||||
},
|
|
||||||
setHref: function(element,href) {
|
|
||||||
element = $(element);
|
|
||||||
element.href = href;
|
|
||||||
},
|
|
||||||
setInnerHTML: function(element,content) {
|
|
||||||
element = $(element);
|
|
||||||
element.innerHTML = content;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// -----------------------------------------------------------------------------------
|
|
||||||
|
|
||||||
//
|
|
||||||
// Extending built-in Array object
|
|
||||||
// - array.removeDuplicates()
|
|
||||||
// - array.empty()
|
|
||||||
//
|
|
||||||
Array.prototype.removeDuplicates = function () {
|
|
||||||
for(i = 1; i < this.length; i++){
|
|
||||||
if(this[i][0] == this[i-1][0]){
|
|
||||||
this.splice(i,1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// -----------------------------------------------------------------------------------
|
|
||||||
|
|
||||||
Array.prototype.empty = function () {
|
|
||||||
for(i = 0; i <= this.length; i++){
|
|
||||||
this.shift();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// -----------------------------------------------------------------------------------
|
|
||||||
|
|
||||||
//
|
|
||||||
// Lightbox Class Declaration
|
|
||||||
// - initialize()
|
|
||||||
// - start()
|
|
||||||
// - changeImage()
|
|
||||||
// - resizeImageContainer()
|
|
||||||
// - showImage()
|
|
||||||
// - updateDetails()
|
|
||||||
// - updateNav()
|
|
||||||
// - enableKeyboardNav()
|
|
||||||
// - disableKeyboardNav()
|
|
||||||
// - keyboardNavAction()
|
|
||||||
// - preloadNeighborImages()
|
|
||||||
// - end()
|
|
||||||
//
|
|
||||||
// Structuring of code inspired by Scott Upton (http://www.uptonic.com/)
|
|
||||||
//
|
|
||||||
var Lightbox = Class.create();
|
|
||||||
|
|
||||||
Lightbox.prototype = {
|
|
||||||
|
|
||||||
// initialize()
|
|
||||||
// Constructor runs on completion of the DOM loading. Loops through anchor tags looking for
|
|
||||||
// 'lightbox' references and applies onclick events to appropriate links. The 2nd section of
|
|
||||||
// the function inserts html at the bottom of the page which is used to display the shadow
|
|
||||||
// overlay and the image container.
|
|
||||||
//
|
|
||||||
initialize: function() {
|
|
||||||
if (!document.getElementsByTagName){ return; }
|
|
||||||
var anchors = document.getElementsByTagName('a');
|
|
||||||
|
|
||||||
// loop through all anchor tags
|
|
||||||
for (var i=0; i<anchors.length; i++){
|
|
||||||
var anchor = anchors[i];
|
|
||||||
|
|
||||||
var relAttribute = String(anchor.getAttribute('rel'));
|
|
||||||
|
|
||||||
// use the string.match() method to catch 'lightbox' references in the rel attribute
|
|
||||||
if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
|
|
||||||
anchor.onclick = function () {myLightbox.start(this); return false;}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// The rest of this code inserts html at the bottom of the page that looks similar to this:
|
|
||||||
//
|
|
||||||
// <div id="overlay"></div>
|
|
||||||
// <div id="lightbox">
|
|
||||||
// <div id="outerImageContainer">
|
|
||||||
// <div id="imageContainer">
|
|
||||||
// <img id="lightboxImage">
|
|
||||||
// <div style="" id="hoverNav">
|
|
||||||
// <a href="#" id="prevLink"></a>
|
|
||||||
// <a href="#" id="nextLink"></a>
|
|
||||||
// </div>
|
|
||||||
// <div id="loading">
|
|
||||||
// <a href="#" id="loadingLink">
|
|
||||||
// <img src="images/loading.gif">
|
|
||||||
// </a>
|
|
||||||
// </div>
|
|
||||||
// </div>
|
|
||||||
// </div>
|
|
||||||
// <div id="imageDataContainer">
|
|
||||||
// <div id="imageData">
|
|
||||||
// <div id="imageDetails">
|
|
||||||
// <span id="caption"></span>
|
|
||||||
// <span id="numberDisplay"></span>
|
|
||||||
// </div>
|
|
||||||
// <div id="bottomNav">
|
|
||||||
// <a href="#" id="bottomNavClose">
|
|
||||||
// <img src="images/close.gif">
|
|
||||||
// </a>
|
|
||||||
// </div>
|
|
||||||
// </div>
|
|
||||||
// </div>
|
|
||||||
// </div>
|
|
||||||
|
|
||||||
|
|
||||||
var objBody = document.getElementsByTagName("body").item(0);
|
|
||||||
|
|
||||||
var objOverlay = document.createElement("div");
|
|
||||||
objOverlay.setAttribute('id','overlay');
|
|
||||||
objOverlay.style.display = 'none';
|
|
||||||
objOverlay.onclick = function() { myLightbox.end(); return false; }
|
|
||||||
objBody.appendChild(objOverlay);
|
|
||||||
|
|
||||||
var objLightbox = document.createElement("div");
|
|
||||||
objLightbox.setAttribute('id','lightbox');
|
|
||||||
objLightbox.style.display = 'none';
|
|
||||||
objBody.appendChild(objLightbox);
|
|
||||||
|
|
||||||
var objOuterImageContainer = document.createElement("div");
|
|
||||||
objOuterImageContainer.setAttribute('id','outerImageContainer');
|
|
||||||
objLightbox.appendChild(objOuterImageContainer);
|
|
||||||
|
|
||||||
var objImageContainer = document.createElement("div");
|
|
||||||
objImageContainer.setAttribute('id','imageContainer');
|
|
||||||
objOuterImageContainer.appendChild(objImageContainer);
|
|
||||||
|
|
||||||
var objLightboxImage = document.createElement("img");
|
|
||||||
objLightboxImage.setAttribute('id','lightboxImage');
|
|
||||||
objImageContainer.appendChild(objLightboxImage);
|
|
||||||
|
|
||||||
var objHoverNav = document.createElement("div");
|
|
||||||
objHoverNav.setAttribute('id','hoverNav');
|
|
||||||
objImageContainer.appendChild(objHoverNav);
|
|
||||||
|
|
||||||
var objPrevLink = document.createElement("a");
|
|
||||||
objPrevLink.setAttribute('id','prevLink');
|
|
||||||
objPrevLink.setAttribute('href','#');
|
|
||||||
objHoverNav.appendChild(objPrevLink);
|
|
||||||
|
|
||||||
var objNextLink = document.createElement("a");
|
|
||||||
objNextLink.setAttribute('id','nextLink');
|
|
||||||
objNextLink.setAttribute('href','#');
|
|
||||||
objHoverNav.appendChild(objNextLink);
|
|
||||||
|
|
||||||
var objLoading = document.createElement("div");
|
|
||||||
objLoading.setAttribute('id','loading');
|
|
||||||
objImageContainer.appendChild(objLoading);
|
|
||||||
|
|
||||||
var objLoadingLink = document.createElement("a");
|
|
||||||
objLoadingLink.setAttribute('id','loadingLink');
|
|
||||||
objLoadingLink.setAttribute('href','#');
|
|
||||||
objLoadingLink.onclick = function() { myLightbox.end(); return false; }
|
|
||||||
objLoading.appendChild(objLoadingLink);
|
|
||||||
|
|
||||||
var objLoadingImage = document.createElement("img");
|
|
||||||
objLoadingImage.setAttribute('src', fileLoadingImage);
|
|
||||||
objLoadingLink.appendChild(objLoadingImage);
|
|
||||||
|
|
||||||
var objImageDataContainer = document.createElement("div");
|
|
||||||
objImageDataContainer.setAttribute('id','imageDataContainer');
|
|
||||||
objImageDataContainer.className = 'clearfix';
|
|
||||||
objLightbox.appendChild(objImageDataContainer);
|
|
||||||
|
|
||||||
var objImageData = document.createElement("div");
|
|
||||||
objImageData.setAttribute('id','imageData');
|
|
||||||
objImageDataContainer.appendChild(objImageData);
|
|
||||||
|
|
||||||
var objImageDetails = document.createElement("div");
|
|
||||||
objImageDetails.setAttribute('id','imageDetails');
|
|
||||||
objImageData.appendChild(objImageDetails);
|
|
||||||
|
|
||||||
var objCaption = document.createElement("span");
|
|
||||||
objCaption.setAttribute('id','caption');
|
|
||||||
objImageDetails.appendChild(objCaption);
|
|
||||||
|
|
||||||
var objNumberDisplay = document.createElement("span");
|
|
||||||
objNumberDisplay.setAttribute('id','numberDisplay');
|
|
||||||
objImageDetails.appendChild(objNumberDisplay);
|
|
||||||
|
|
||||||
var objBottomNav = document.createElement("div");
|
|
||||||
objBottomNav.setAttribute('id','bottomNav');
|
|
||||||
objImageData.appendChild(objBottomNav);
|
|
||||||
|
|
||||||
var objBottomNavCloseLink = document.createElement("a");
|
|
||||||
objBottomNavCloseLink.setAttribute('id','bottomNavClose');
|
|
||||||
objBottomNavCloseLink.setAttribute('href','#');
|
|
||||||
objBottomNavCloseLink.onclick = function() { myLightbox.end(); return false; }
|
|
||||||
objBottomNav.appendChild(objBottomNavCloseLink);
|
|
||||||
|
|
||||||
var objBottomNavCloseImage = document.createElement("img");
|
|
||||||
objBottomNavCloseImage.setAttribute('src', fileBottomNavCloseImage);
|
|
||||||
objBottomNavCloseLink.appendChild(objBottomNavCloseImage);
|
|
||||||
},
|
|
||||||
|
|
||||||
//
|
|
||||||
// start()
|
|
||||||
// Display overlay and lightbox. If image is part of a set, add siblings to imageArray.
|
|
||||||
//
|
|
||||||
start: function(imageLink) {
|
|
||||||
|
|
||||||
hideSelectBoxes();
|
|
||||||
|
|
||||||
// stretch overlay to fill page and fade in
|
|
||||||
var arrayPageSize = getPageSize();
|
|
||||||
Element.setHeight('overlay', arrayPageSize[1]);
|
|
||||||
new Effect.Appear('overlay', { duration: 0.2, from: 0.0, to: 0.8 });
|
|
||||||
|
|
||||||
imageArray = [];
|
|
||||||
imageNum = 0;
|
|
||||||
|
|
||||||
if (!document.getElementsByTagName){ return; }
|
|
||||||
var anchors = document.getElementsByTagName('a');
|
|
||||||
|
|
||||||
// if image is NOT part of a set..
|
|
||||||
if((imageLink.getAttribute('rel') == 'lightbox')){
|
|
||||||
// add single image to imageArray
|
|
||||||
imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title')));
|
|
||||||
} else {
|
|
||||||
// if image is part of a set..
|
|
||||||
|
|
||||||
// loop through anchors, find other images in set, and add them to imageArray
|
|
||||||
for (var i=0; i<anchors.length; i++){
|
|
||||||
var anchor = anchors[i];
|
|
||||||
if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))){
|
|
||||||
imageArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title')));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
imageArray.removeDuplicates();
|
|
||||||
while(imageArray[imageNum][0] != imageLink.getAttribute('href')) { imageNum++;}
|
|
||||||
}
|
|
||||||
|
|
||||||
// calculate top offset for the lightbox and display
|
|
||||||
var arrayPageSize = getPageSize();
|
|
||||||
var arrayPageScroll = getPageScroll();
|
|
||||||
var lightboxTop = arrayPageScroll[1] + (arrayPageSize[3] / 15);
|
|
||||||
|
|
||||||
Element.setTop('lightbox', lightboxTop);
|
|
||||||
Element.show('lightbox');
|
|
||||||
|
|
||||||
this.changeImage(imageNum);
|
|
||||||
},
|
|
||||||
|
|
||||||
//
|
|
||||||
// changeImage()
|
|
||||||
// Hide most elements and preload image in preparation for resizing image container.
|
|
||||||
//
|
|
||||||
changeImage: function(imageNum) {
|
|
||||||
|
|
||||||
activeImage = imageNum; // update global var
|
|
||||||
|
|
||||||
// hide elements during transition
|
|
||||||
Element.show('loading');
|
|
||||||
Element.hide('lightboxImage');
|
|
||||||
Element.hide('hoverNav');
|
|
||||||
Element.hide('prevLink');
|
|
||||||
Element.hide('nextLink');
|
|
||||||
Element.hide('imageDataContainer');
|
|
||||||
Element.hide('numberDisplay');
|
|
||||||
|
|
||||||
imgPreloader = new Image();
|
|
||||||
|
|
||||||
// once image is preloaded, resize image container
|
|
||||||
imgPreloader.onload=function(){
|
|
||||||
Element.setSrc('lightboxImage', imageArray[activeImage][0]);
|
|
||||||
myLightbox.resizeImageContainer(imgPreloader.width, imgPreloader.height);
|
|
||||||
}
|
|
||||||
imgPreloader.src = imageArray[activeImage][0];
|
|
||||||
},
|
|
||||||
|
|
||||||
//
|
|
||||||
// resizeImageContainer()
|
|
||||||
//
|
|
||||||
resizeImageContainer: function( imgWidth, imgHeight) {
|
|
||||||
|
|
||||||
// get current height and width
|
|
||||||
this.wCur = Element.getWidth('outerImageContainer');
|
|
||||||
this.hCur = Element.getHeight('outerImageContainer');
|
|
||||||
|
|
||||||
// scalars based on change from old to new
|
|
||||||
this.xScale = ((imgWidth + (borderSize * 2)) / this.wCur) * 100;
|
|
||||||
this.yScale = ((imgHeight + (borderSize * 2)) / this.hCur) * 100;
|
|
||||||
|
|
||||||
// calculate size difference between new and old image, and resize if necessary
|
|
||||||
wDiff = (this.wCur - borderSize * 2) - imgWidth;
|
|
||||||
hDiff = (this.hCur - borderSize * 2) - imgHeight;
|
|
||||||
|
|
||||||
if(!( hDiff == 0)){ new Effect.Scale('outerImageContainer', this.yScale, {scaleX: false, duration: resizeDuration, queue: 'front'}); }
|
|
||||||
if(!( wDiff == 0)){ new Effect.Scale('outerImageContainer', this.xScale, {scaleY: false, delay: resizeDuration, duration: resizeDuration}); }
|
|
||||||
|
|
||||||
// if new and old image are same size and no scaling transition is necessary,
|
|
||||||
// do a quick pause to prevent image flicker.
|
|
||||||
if((hDiff == 0) && (wDiff == 0)){
|
|
||||||
if (navigator.appVersion.indexOf("MSIE")!=-1){ pause(250); } else { pause(100);}
|
|
||||||
}
|
|
||||||
|
|
||||||
Element.setHeight('prevLink', imgHeight);
|
|
||||||
Element.setHeight('nextLink', imgHeight);
|
|
||||||
Element.setWidth( 'imageDataContainer', imgWidth + (borderSize * 2));
|
|
||||||
|
|
||||||
this.showImage();
|
|
||||||
},
|
|
||||||
|
|
||||||
//
|
|
||||||
// showImage()
|
|
||||||
// Display image and begin preloading neighbors.
|
|
||||||
//
|
|
||||||
showImage: function(){
|
|
||||||
Element.hide('loading');
|
|
||||||
new Effect.Appear('lightboxImage', { duration: 0.5, queue: 'end', afterFinish: function(){ myLightbox.updateDetails(); } });
|
|
||||||
this.preloadNeighborImages();
|
|
||||||
},
|
|
||||||
|
|
||||||
//
|
|
||||||
// updateDetails()
|
|
||||||
// Display caption, image number, and bottom nav.
|
|
||||||
//
|
|
||||||
updateDetails: function() {
|
|
||||||
|
|
||||||
Element.show('caption');
|
|
||||||
Element.setInnerHTML( 'caption', imageArray[activeImage][1]);
|
|
||||||
|
|
||||||
// if image is part of set display 'Image x of x'
|
|
||||||
if(imageArray.length > 1){
|
|
||||||
Element.show('numberDisplay');
|
|
||||||
Element.setInnerHTML( 'numberDisplay', "Image " + eval(activeImage + 1) + " of " + imageArray.length);
|
|
||||||
}
|
|
||||||
|
|
||||||
new Effect.Parallel(
|
|
||||||
[ new Effect.SlideDown( 'imageDataContainer', { sync: true, duration: resizeDuration + 0.25, from: 0.0, to: 1.0 }),
|
|
||||||
new Effect.Appear('imageDataContainer', { sync: true, duration: 1.0 }) ],
|
|
||||||
{ duration: 0.65, afterFinish: function() { myLightbox.updateNav();} }
|
|
||||||
);
|
|
||||||
},
|
|
||||||
|
|
||||||
//
|
|
||||||
// updateNav()
|
|
||||||
// Display appropriate previous and next hover navigation.
|
|
||||||
//
|
|
||||||
updateNav: function() {
|
|
||||||
|
|
||||||
Element.show('hoverNav');
|
|
||||||
|
|
||||||
// if not first image in set, display prev image button
|
|
||||||
if(activeImage != 0){
|
|
||||||
Element.show('prevLink');
|
|
||||||
document.getElementById('prevLink').onclick = function() {
|
|
||||||
myLightbox.changeImage(activeImage - 1); return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// if not last image in set, display next image button
|
|
||||||
if(activeImage != (imageArray.length - 1)){
|
|
||||||
Element.show('nextLink');
|
|
||||||
document.getElementById('nextLink').onclick = function() {
|
|
||||||
myLightbox.changeImage(activeImage + 1); return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this.enableKeyboardNav();
|
|
||||||
},
|
|
||||||
|
|
||||||
//
|
|
||||||
// enableKeyboardNav()
|
|
||||||
//
|
|
||||||
enableKeyboardNav: function() {
|
|
||||||
document.onkeydown = this.keyboardAction;
|
|
||||||
},
|
|
||||||
|
|
||||||
//
|
|
||||||
// disableKeyboardNav()
|
|
||||||
//
|
|
||||||
disableKeyboardNav: function() {
|
|
||||||
document.onkeydown = '';
|
|
||||||
},
|
|
||||||
|
|
||||||
//
|
|
||||||
// keyboardAction()
|
|
||||||
//
|
|
||||||
keyboardAction: function(e) {
|
|
||||||
if (e == null) { // ie
|
|
||||||
keycode = event.keyCode;
|
|
||||||
} else { // mozilla
|
|
||||||
keycode = e.which;
|
|
||||||
}
|
|
||||||
|
|
||||||
key = String.fromCharCode(keycode).toLowerCase();
|
|
||||||
|
|
||||||
if((key == 'x') || (key == 'o') || (key == 'c')){ // close lightbox
|
|
||||||
myLightbox.end();
|
|
||||||
} else if(key == 'p'){ // display previous image
|
|
||||||
if(activeImage != 0){
|
|
||||||
myLightbox.disableKeyboardNav();
|
|
||||||
myLightbox.changeImage(activeImage - 1);
|
|
||||||
}
|
|
||||||
} else if(key == 'n'){ // display next image
|
|
||||||
if(activeImage != (imageArray.length - 1)){
|
|
||||||
myLightbox.disableKeyboardNav();
|
|
||||||
myLightbox.changeImage(activeImage + 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
//
|
|
||||||
// preloadNeighborImages()
|
|
||||||
// Preload previous and next images.
|
|
||||||
//
|
|
||||||
preloadNeighborImages: function(){
|
|
||||||
|
|
||||||
if((imageArray.length - 1) > activeImage){
|
|
||||||
preloadNextImage = new Image();
|
|
||||||
preloadNextImage.src = imageArray[activeImage + 1][0];
|
|
||||||
}
|
|
||||||
if(activeImage > 0){
|
|
||||||
preloadPrevImage = new Image();
|
|
||||||
preloadPrevImage.src = imageArray[activeImage - 1][0];
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
//
|
|
||||||
// end()
|
|
||||||
//
|
|
||||||
end: function() {
|
|
||||||
this.disableKeyboardNav();
|
|
||||||
Element.hide('lightbox');
|
|
||||||
new Effect.Fade('overlay', { duration: 0.2});
|
|
||||||
showSelectBoxes();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// -----------------------------------------------------------------------------------
|
|
||||||
|
|
||||||
//
|
|
||||||
// getPageScroll()
|
|
||||||
// Returns array with x,y page scroll values.
|
|
||||||
// Core code from - quirksmode.org
|
|
||||||
//
|
|
||||||
function getPageScroll(){
|
|
||||||
|
|
||||||
var yScroll;
|
|
||||||
|
|
||||||
if (self.pageYOffset) {
|
|
||||||
yScroll = self.pageYOffset;
|
|
||||||
} else if (document.documentElement && document.documentElement.scrollTop){ // Explorer 6 Strict
|
|
||||||
yScroll = document.documentElement.scrollTop;
|
|
||||||
} else if (document.body) {// all other Explorers
|
|
||||||
yScroll = document.body.scrollTop;
|
|
||||||
}
|
|
||||||
|
|
||||||
arrayPageScroll = new Array('',yScroll)
|
|
||||||
return arrayPageScroll;
|
|
||||||
}
|
|
||||||
|
|
||||||
// -----------------------------------------------------------------------------------
|
|
||||||
|
|
||||||
//
|
|
||||||
// getPageSize()
|
|
||||||
// Returns array with page width, height and window width, height
|
|
||||||
// Core code from - quirksmode.org
|
|
||||||
// Edit for Firefox by pHaez
|
|
||||||
//
|
|
||||||
function getPageSize(){
|
|
||||||
|
|
||||||
var xScroll, yScroll;
|
|
||||||
|
|
||||||
if (window.innerHeight && window.scrollMaxY) {
|
|
||||||
xScroll = document.body.scrollWidth;
|
|
||||||
yScroll = window.innerHeight + window.scrollMaxY;
|
|
||||||
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
|
|
||||||
xScroll = document.body.scrollWidth;
|
|
||||||
yScroll = document.body.scrollHeight;
|
|
||||||
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
|
|
||||||
xScroll = document.body.offsetWidth;
|
|
||||||
yScroll = document.body.offsetHeight;
|
|
||||||
}
|
|
||||||
|
|
||||||
var windowWidth, windowHeight;
|
|
||||||
if (self.innerHeight) { // all except Explorer
|
|
||||||
windowWidth = self.innerWidth;
|
|
||||||
windowHeight = self.innerHeight;
|
|
||||||
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
|
|
||||||
windowWidth = document.documentElement.clientWidth;
|
|
||||||
windowHeight = document.documentElement.clientHeight;
|
|
||||||
} else if (document.body) { // other Explorers
|
|
||||||
windowWidth = document.body.clientWidth;
|
|
||||||
windowHeight = document.body.clientHeight;
|
|
||||||
}
|
|
||||||
|
|
||||||
// for small pages with total height less then height of the viewport
|
|
||||||
if(yScroll < windowHeight){
|
|
||||||
pageHeight = windowHeight;
|
|
||||||
} else {
|
|
||||||
pageHeight = yScroll;
|
|
||||||
}
|
|
||||||
|
|
||||||
// for small pages with total width less then width of the viewport
|
|
||||||
if(xScroll < windowWidth){
|
|
||||||
pageWidth = windowWidth;
|
|
||||||
} else {
|
|
||||||
pageWidth = xScroll;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
|
|
||||||
return arrayPageSize;
|
|
||||||
}
|
|
||||||
|
|
||||||
// -----------------------------------------------------------------------------------
|
|
||||||
|
|
||||||
//
|
|
||||||
// getKey(key)
|
|
||||||
// Gets keycode. If 'x' is pressed then it hides the lightbox.
|
|
||||||
//
|
|
||||||
function getKey(e){
|
|
||||||
if (e == null) { // ie
|
|
||||||
keycode = event.keyCode;
|
|
||||||
} else { // mozilla
|
|
||||||
keycode = e.which;
|
|
||||||
}
|
|
||||||
key = String.fromCharCode(keycode).toLowerCase();
|
|
||||||
|
|
||||||
if(key == 'x'){
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// -----------------------------------------------------------------------------------
|
|
||||||
|
|
||||||
//
|
|
||||||
// listenKey()
|
|
||||||
//
|
|
||||||
function listenKey () { document.onkeypress = getKey; }
|
|
||||||
|
|
||||||
// ---------------------------------------------------
|
|
||||||
|
|
||||||
function showSelectBoxes(){
|
|
||||||
selects = document.getElementsByTagName("select");
|
|
||||||
for (i = 0; i != selects.length; i++) {
|
|
||||||
selects[i].style.visibility = "visible";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ---------------------------------------------------
|
|
||||||
|
|
||||||
function hideSelectBoxes(){
|
|
||||||
selects = document.getElementsByTagName("select");
|
|
||||||
for (i = 0; i != selects.length; i++) {
|
|
||||||
selects[i].style.visibility = "hidden";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ---------------------------------------------------
|
|
||||||
|
|
||||||
//
|
|
||||||
// pause(numberMillis)
|
|
||||||
// Pauses code execution for specified time. Uses busy code, not good.
|
|
||||||
// Code from http://www.faqts.com/knowledge_base/view.phtml/aid/1602
|
|
||||||
//
|
|
||||||
function pause(numberMillis) {
|
|
||||||
var now = new Date();
|
|
||||||
var exitTime = now.getTime() + numberMillis;
|
|
||||||
while (true) {
|
|
||||||
now = new Date();
|
|
||||||
if (now.getTime() > exitTime)
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ---------------------------------------------------
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
function initLightbox() { myLightbox = new Lightbox(); }
|
|
||||||
Event.observe(window, 'load', initLightbox, false);
|
|
||||||
1785
js/prototype.js
vendored
1785
js/prototype.js
vendored
File diff suppressed because it is too large
Load Diff
@@ -1,45 +0,0 @@
|
|||||||
// Copyright (c) 2005 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
|
|
||||||
//
|
|
||||||
// Permission is hereby granted, free of charge, to any person obtaining
|
|
||||||
// a copy of this software and associated documentation files (the
|
|
||||||
// "Software"), to deal in the Software without restriction, including
|
|
||||||
// without limitation the rights to use, copy, modify, merge, publish,
|
|
||||||
// distribute, sublicense, and/or sell copies of the Software, and to
|
|
||||||
// permit persons to whom the Software is furnished to do so, subject to
|
|
||||||
// the following conditions:
|
|
||||||
//
|
|
||||||
// The above copyright notice and this permission notice shall be
|
|
||||||
// included in all copies or substantial portions of the Software.
|
|
||||||
//
|
|
||||||
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
|
||||||
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
|
||||||
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
|
||||||
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
|
||||||
// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
|
||||||
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
|
||||||
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
|
||||||
|
|
||||||
var Scriptaculous = {
|
|
||||||
Version: '1.5.1',
|
|
||||||
require: function(libraryName) {
|
|
||||||
// inserting via DOM fails in Safari 2.0, so brute force approach
|
|
||||||
document.write('<script type="text/javascript" src="'+libraryName+'"></script>');
|
|
||||||
},
|
|
||||||
load: function() {
|
|
||||||
if((typeof Prototype=='undefined') ||
|
|
||||||
parseFloat(Prototype.Version.split(".")[0] + "." +
|
|
||||||
Prototype.Version.split(".")[1]) < 1.4)
|
|
||||||
throw("script.aculo.us requires the Prototype JavaScript framework >= 1.4.0");
|
|
||||||
|
|
||||||
$A(document.getElementsByTagName("script")).findAll( function(s) {
|
|
||||||
return (s.src && s.src.match(/scriptaculous\.js(\?.*)?$/))
|
|
||||||
}).each( function(s) {
|
|
||||||
var path = s.src.replace(/scriptaculous\.js(\?.*)?$/,'');
|
|
||||||
var includes = s.src.match(/\?.*load=([a-z,]*)/);
|
|
||||||
(includes ? includes[1] : 'builder,effects,dragdrop,controls,slider').split(',').each(
|
|
||||||
function(include) { Scriptaculous.require(path+include+'.js') });
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Scriptaculous.load();
|
|
||||||
Reference in New Issue
Block a user