Skip to content
This repository has been archived by the owner on Feb 7, 2022. It is now read-only.

Commit

Permalink
animation option for message
Browse files Browse the repository at this point in the history
updated version info
  • Loading branch information
terebentina committed Aug 29, 2013
1 parent 1c1dcd7 commit 704c447
Show file tree
Hide file tree
Showing 9 changed files with 280 additions and 33 deletions.
14 changes: 14 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,3 +1,17 @@

*.komodoproject
/.komodotools
.sass-cache
config.rb
.DS_Store
sco-message-error.html

sco-message-ok.html

sco-panes-fade.html

sco-panes-flip.html

sco-panes-slide.html

sco-tooltip.html
5 changes: 3 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# [Sco.js v1.0.2](http://terebentina.github.io/sco.js)
# [Sco.js v1.1.0](http://terebentina.github.io/sco.js)

A collection of jQuery plugins for the web. Inspired by Twitter Bootstrap js components, Sco.js plugins can be used as replacement for the bootstrap js. You can find a different approach for some of the bootstrap js as well as
other plugins that don't exist in bootstrap. Sco.js uses much less HTML markup than bootstrap and provides sane and intuitive defaults for its options so that you can get started in no time.
Expand All @@ -10,8 +10,9 @@ For extensive documentation and examples, check out http://terebentina.github.io

You can get started by choosing one of the following options:

* [Download the latest release](https://github.com/terebentina/sco.js/zipball/master).
* [Download from GitHub](https://github.com/terebentina/sco.js/zipball/master) or pick the latest stable tag.
* Clone the repo: `git clone git://github.com/terebentina/sco.js.git`.
* Get the latest version with Bower: `bower install sco.js --save`.

## Versioning

Expand Down
73 changes: 73 additions & 0 deletions css/sco.crop.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
.cropFrame {
overflow : hidden;
position : relative;
}
.cropImage {
position : absolute;
top : 0;
left : 0;
cursor : move;
max-width: none;
}
.cropControls {
background : #000;
width : 100%;
height : 26px;
position : absolute;
z-index : 100;
bottom : 0;
left : 0;
opacity : 0;
filter : alpha(opacity=0);
transition : opacity .25s linear;
-moz-transition : opacity .25s linear;
-webkit-transition : opacity .25s linear;
}
.hover .cropControls,
.cropFrame:hover .cropControls {
opacity : .6;
filter : alpha(opacity=60);
}
.cropControls span {
display : block;
float : left;
color : #fff;
font-size : 11px;
margin : 7px 0 0 5px;
}
.cropZoomIn,
.cropZoomOut {
display : block;
float : right;
margin : 4px 4px 0 0;
background : #fff;
color : #000;
border-radius : 9px;
width : 18px;
height : 18px;
line-height : 18px;
font-size : 18px;
font-weight : bold;
text-align : center;
text-decoration : none;
cursor : pointer;
/* IE SUCKS */
zoom : expression(this.runtimeStyle.zoom = "1", this.appendChild( document.createElement("b") ).className = "after")\9;
}
.cropZoomIn::after,
.cropZoomIn .after {
content : "+";
display : block;
}

.cropZoomOut::after,
.cropZoomOut .after {
vertical-align : top;
line-height : 14px;
font-size : 22px;
margin-left : -2px;
content : "-";
display : block;
}


91 changes: 91 additions & 0 deletions css/sco.message.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
#page_message {
display: none;
font-size: 15px;
overflow: visible;
text-align: center;
left: 0;
top: 0;
/* place over all elements, also over modals */
z-index: 10001;
width: 100%;
border-bottom: 1px solid;
color: white;
padding: 15px;
position: fixed;
}

.page_mess_error {
background-color: #de4343;
border-color: #ca2424;
}

.page_mess_ok {
background-color: #48bb5e;
border-color: #38984b;
}

.page_mess_animate {
background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.05) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.05) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.05) 75%, transparent 75%, transparent);
background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.05) 75%, transparent 75%, transparent);
-webkit-background-size: 10px 10px;
-moz-background-size: 10px 10px;
-o-background-size: 10px 10px;
background-size: 10px 10px;
-webkit-animation: animate-bg 3s linear infinite;
-moz-animation: animate-bg 3s linear infinite;
-ms-animation: animate-bg 3s linear infinite;
-o-animation: animate-bg 3s linear infinite;
animation: animate-bg 3s linear infinite;
}

@-moz-keyframes animate-bg {
from {
background-position: 0 0;
}

to {
background-position: -20px 0;
}
}

@-webkit-keyframes animate-bg {
from {
background-position: 0 0;
}

to {
background-position: -20px 0;
}
}

@-o-keyframes animate-bg {
from {
background-position: 0 0;
}

to {
background-position: -20px 0;
}
}

@-ms-keyframes animate-bg {
from {
background-position: 0 0;
}

to {
background-position: -20px 0;
}
}

@keyframes animate-bg {
from {
background-position: 0 0;
}

to {
background-position: -20px 0;
}
}
109 changes: 85 additions & 24 deletions css/scojs.css
Original file line number Diff line number Diff line change
@@ -1,33 +1,94 @@
/* sco.message.js */
#page_message {
-webkit-background-size: 40px 40px;
-moz-background-size: 40px 40px;
background-size: 40px 40px;
-moz-box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.4);
-webkit-box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.4);
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.4);
display: none;
font-size: 16px;
overflow: visible;
text-align: center;
left: 0;
top: 0;
/* place over all elements, also over modals */
z-index: 10001;
width: 100%;
border: 1px solid;
color: #fff;
padding: 15px;
position: fixed;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
display: none;
font-size: 15px;
overflow: visible;
text-align: center;
left: 0;
top: 0;
/* place over all elements, also over modals */
z-index: 10001;
width: 100%;
border-bottom: 1px solid;
color: white;
padding: 15px;
position: fixed;
}

.page_mess_error {
background-color: #de4343;
border-color: #c43d3d;
background-color: #de4343;
border-color: #ca2424;
}

.page_mess_ok {
background-color: #48bb5e;
border-color: #309343;
background-color: #48bb5e;
border-color: #38984b;
}

.page_mess_animate {
background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.05) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.05) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.05) 75%, transparent 75%, transparent);
background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.05) 75%, transparent 75%, transparent);
-webkit-background-size: 10px 10px;
-moz-background-size: 10px 10px;
-o-background-size: 10px 10px;
background-size: 10px 10px;
-webkit-animation: animate-bg 3s linear infinite;
-moz-animation: animate-bg 3s linear infinite;
-ms-animation: animate-bg 3s linear infinite;
-o-animation: animate-bg 3s linear infinite;
animation: animate-bg 3s linear infinite;
}

@-moz-keyframes animate-bg {
from {
background-position: 0 0;
}

to {
background-position: -20px 0;
}
}

@-webkit-keyframes animate-bg {
from {
background-position: 0 0;
}

to {
background-position: -20px 0;
}
}

@-o-keyframes animate-bg {
from {
background-position: 0 0;
}

to {
background-position: -20px 0;
}
}

@-ms-keyframes animate-bg {
from {
background-position: 0 0;
}

to {
background-position: -20px 0;
}
}

@keyframes animate-bg {
from {
background-position: 0 0;
}

to {
background-position: -20px 0;
}
}


Expand Down
5 changes: 3 additions & 2 deletions js/sco.crop.js
Original file line number Diff line number Diff line change
Expand Up @@ -90,8 +90,9 @@
.append($('<a/>', { 'class' : 'cropZoomIn' }).on('click.' + pluginName, $.proxy(this.zoomIn, this)))
.append($('<a/>', { 'class' : 'cropZoomOut' }).on('click.' + pluginName, $.proxy(this.zoomOut, this)));
}
this.$frame.append(controls);

if (controls !== false) {
this.$frame.append(controls);
}
}

$.extend(Crop.prototype, {
Expand Down
8 changes: 7 additions & 1 deletion js/sco.message.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,11 @@
if (!$selector.length) {
$selector = $('<div/>', {id: $[pluginName].options.id}).appendTo($[pluginName].options.appendTo);
}
if ($[pluginName].options.animate) {
$selector.addClass('page_mess_animate');
} else {
$selector.removeClass('page_mess_animate');
}
$selector.html(message);
if (type === undefined || type == $[pluginName].TYPE_ERROR) {
$selector.removeClass($[pluginName].options.okClass).addClass($[pluginName].options.errClass);
Expand All @@ -44,9 +49,10 @@

$.extend($[pluginName], {
options: {
id: 'page_message'
id: 'page_message'
,okClass: 'page_mess_ok'
,errClass: 'page_mess_error'
,animate: true
,delay: 4000
,appendTo: 'body' // where should the modal be appended to (default to document.body). Added for unit tests, not really needed in real life.
},
Expand Down
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "sco.js",
"version": "1.0.1",
"description": "Javascript extensions for Twitter Bootstrap. Rewrites bootstrap tabs, collapse, modal, tooltip components for easier usage and provides more plugins for your coding pleasure",
"version": "1.1.0",
"description": "Javascript extensions for Twitter Bootstrap. Rewrites bootstrap tabs, collapse, modal, tooltip components for easier usage and provides more plugins for your coding pleasure",
"dependencies": {
"jquery": ">=1.7.0"
}
Expand Down
4 changes: 2 additions & 2 deletions sco.js.jquery.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
"validation",
"countdown"
],
"version": "1.0.1",
"version": "1.1.0",
"author": {
"name": "Dan Caragea",
"url": "https://github.com/terebentina"
Expand All @@ -36,6 +36,6 @@
"homepage": "https://github.com/terebentina/sco.js",
"docs": "http://terebentina.github.io/sco.js",
"dependencies": {
"jquery": ">=1.5"
"jquery": ">=1.7"
}
}

0 comments on commit 704c447

Please sign in to comment.