version 1.0.0

yagrand3z · Dec 6, 2013 · 4826245 · 4826245
1 parent f5ef99a
commit 4826245
Show file tree

Hide file tree

Showing 10 changed files with 261 additions and 0 deletions.
diff --git a/digits.png b/digits.png
diff --git a/img/digit-lg.png b/img/digit-lg.png
diff --git a/img/digit-md.png b/img/digit-md.png
diff --git a/img/digit-sm.png b/img/digit-sm.png
diff --git a/img/digit-xs.png b/img/digit-xs.png
diff --git a/index.html b/index.html
@@ -0,0 +1,96 @@
+<!doctype html>
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+<!--<base href="" /><!-- -->
+<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+<title>jquery.xdRetroClock Demo Flip Count Down Retro Clock </title>
+<meta name="description" content="retro flip clock plugin for jQuery.">
+<meta name="keywords" content="Плагин jQuery, retro часы, flip часы,jQuery, plugin, count down">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>-->
+<script type="text/javascript" src="jquery.min.js"></script>
+<script type="text/javascript" src="jquery.xdretroclock.js"></script>
+<link rel="stylesheet" type="text/css" href="jquery.xdretroclock.css" />
+<script>
+$(function(){
+	$('#retroclockbox1').xdretroclock();
+	$('#retroclockbox2').xdretroclock({showHour:false,showMinute:false,showSecond:true});
+	$('#retroclockbox3').xdretroclock({tzoneOffset:3,showSecond:false});
+	$('#retroclockbox4').xdretroclock({am:true});
+	$('#retroclockbox5').xdretroclock({speedFlip:50});
+	$('#retroclockbox6').xdretroclock({time:function(){
+		return new Date('5/10/2012 12:34:23');
+	}});
+})
+</script>
+</head>
+<body>
+<div id="main">
+	<header>
+		<h1>jquery.xdRetroClock Plugin</h1>
+		<p><a href="http://xdsoft.net/jqplugins/xdretroclock/">Page project</a>&nbsp;|&nbsp;<a href="https://github.com/xdan/xdretroclock/archive/master.zip">Download</a></p>
+		<p>Unusual retro clock count down plugin for jQuery</p>
+	</header>
+	<h2>Fast start</h2>
+	<p>Add in html page</p><pre style="width:535px;">
+&lt;script type=&quot;text/javascript&quot; src=&quot;jquery.min.js&quot;&gt;&lt;/script&gt;
+&lt;script type=&quot;text/javascript&quot; src=&quot;jquery.xdretroclock.js&quot;&gt;&lt;/script&gt;
+&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;jquery.xdretroclock.css&quot; /&gt;</pre>
+	<p>add div element</p>
+<pre style="width:535px;">&lt;div id=&quot;retroclockbox1&quot;&gt;&lt;/div&gt;</pre>
+	<p>and init xdretroclock</p>
+	<pre >$(function(){
+	$('#retroclockbox1').xdretroclock();
+})</pre>
+<p>Result</p>
+<div id="retroclockbox1"></div>
+<h2>Settings</h2>
+<p>- Hide second or minute or hour</p>
+<pre >$(function(){
+	$('#retroclockbox1').xdretroclock({showHour:false,showMinute:false,showSecond:true});
+})</pre>
+<div id="retroclockbox2"></div>
+<p>- offset timezone</p>
+<pre >$(function(){
+	$('#retroclockbox3').xdretroclock({tzoneOffset:3,showSecond:false});
+})</pre>
+<div id="retroclockbox3"></div>
+<p>- am,pm format hours</p>
+<pre >$(function(){
+	$('#retroclockbox4').xdretroclock({am:true});
+})</pre>
+<div id="retroclockbox4"></div>
+<p>- speed animate flip digit (multiply 6 must by less than 1000) default 100</p>
+<pre >$(function(){
+	$('#retroclockbox5').xdretroclock({speedFlip:50});
+})</pre>
+<div id="retroclockbox5"></div>
+<p>- set time</p>
+<pre >$(function(){
+	$('#retroclockbox6').xdretroclock({time:function(){
+		return new Date('5.10.2012 12:34:23');
+	}});
+})</pre>
+<div id="retroclockbox6"></div>
+<footer>
+	<p>Licensed under the <a href="http://www.gnu.org/licenses/gpl.html">GPL v3</a> Project page <a href="http://xdsoft.net/jqplugins/xdRetroClock/">Link</a> 
+	Author: <a href="http://xdsoft.net/contacts.html">Chupurnov Valeriy</a> ([email protected])</p>
+</footer>
+<style>
+body{margin:0px; padding:0px;}
+#main{margin:0px auto; padding:0px; width:900px;position:relative;}
+pre{
+	background:#F7F7F9;padding:10px;
+	border: 1px solid #E1E1E8;
+	border-radius: 3px;
+	color: #222222;
+}
+#langbox{
+	position:absolute;
+	top:10px;
+	right:10px;
+}
+</style>
+</div>
+</body>
+</html>
diff --git a/jquery.min.js b/jquery.min.js
diff --git a/jquery.xdretroclock.css b/jquery.xdretroclock.css
@@ -0,0 +1,18 @@
+.retroclock{}
+.retroclock .xddigit{
+	width:53px; 
+	height:77px;
+	overflow:hidden;
+	float:left;
+}
+.retroclock .xddigit div{
+	background:url(digits.png) no-repeat;
+	background-size:auto 4620px;
+	height:4620px;
+}
+.retroclock .rcSeparator{
+	font-size: 54px;
+	margin: 10px 7px;
+	color: #3c3c3c;
+	float:left;
+}
diff --git a/jquery.xdretroclock.js b/jquery.xdretroclock.js
@@ -0,0 +1,113 @@
+/*
+	Script: jQuery.xdretroclock.js
+	Plug-in for jQuery retro clock
+*/
+
+/*
+	Author:
+		Valeriy Chupurnov <[email protected]>, <http://xdan.ru>
+	License:
+		LGPL - Lesser General Public License
+
+	Posted <http://xdan.ru/project/xdretroclock/index.html>
+*/
+(function($){
+jQuery.fn.xdRetroClock = jQuery.fn.xdretroclock = function(options){
+	var settings = {
+		digitImages: 6,
+		digitWidth: 53,
+		digitHeight: 77,
+		showHour:true,
+		showMinute:true,
+		showSecond:true,
+		am:false,
+		tzoneOffset:0,
+		speedFlip:100,
+		time:function(){
+			return new Date();
+		},
+	};
+	var getmt =  function (up){
+		return (-(((up)?up-1:9)*options.digitImages-1)*options.digitHeight);
+	}
+	var div = function(val, by){
+		return (val - val % by) / by;
+	}
+	var current = {
+		"h1": -1,
+		"h2": -1,
+		"m1": -1,
+		"m2": -1,
+		"s1": -1,
+		"s2": -1
+	};
+	options = $.extend(settings,options);
+	var setmargin = function($box, mt, rec){
+		if( rec==1 )$box.css('margin-top',mt+'px');
+		$box.css('margin-top',(mt-options.digitHeight)+'px' );
+		if( rec<options.digitImages )
+			setTimeout(function(){
+				setmargin($box,mt-options.digitHeight,++rec);	
+			},options.speedFlip);
+	}
+
+	var calcTime = function($box){
+		var now = options.time();
+		var	h = (now.getHours()+options.tzoneOffset)%(options.am?12:24),
+		h1 = div(h,10),
+		h2 = h%10,
+		m1 = div(now.getMinutes() , 10),
+		m2 = now.getMinutes() % 10,
+		s1 = div(now.getSeconds() , 10),
+		s2 = now.getSeconds() % 10;
+		if( options.showHour && h2 != current.h2 ){
+			setmargin($box.find('.hourRight div'),getmt(h2),1);
+			current.h2 = h2;
+		}
+		if( options.showHour && h1 != current.h1){
+			setmargin($box.find('.hourLeft div'),getmt(h1),1);
+			current.h1 = h1;
+		}
+		if( options.showMinute && m2 != current.m2){
+			setmargin($box.find('.minuteRight div'),getmt(m2),1);
+			current.m2 = m2;
+		}
+		if( options.showMinute && m1 != current.m1){
+			setmargin($box.find('.minuteLeft div'),getmt(m1),1);
+			current.m1 = m1;
+		}
+
+	    if ( options.showSecond && s2 != current.s2){
+			setmargin($box.find('.secondRight div'),getmt(s2),1);
+			current.s2 = s2;
+		}
+		if ( options.showSecond && s1 != current.s1){
+			setmargin($box.find('.secondLeft div'),getmt(s1),1);
+			current.s1 = s1;
+		}
+	}
+	return this.each(function(){
+		var $box = $(this);
+		$box.addClass('retroclock')
+		if( options.showHour )
+			$box.append('<div class="xddigit hourLeft"><div></div></div>')
+				.append('<di  class="xddigit hourRight"><div></div></div>');
+		if( options.showHour && (options.showMinute || options.showSecond) )
+			$box.append('<div class="rcSeparator">:</div>');
+		if( options.showMinute )
+			$box.append('<div class="xddigit minuteLeft"><div></div></div>')
+				.append('<div class="xddigit minuteRight"><div></div></div>');
+		if( options.showMinute && options.showSecond )
+			$box.append('<div class="rcSeparator">:</div>');
+		if( options.showSecond )
+			$box.append('<div class="xddigit secondLeft"><div></div></div>')
+				.append('<div class="xddigit secondRight"><div></div></div>');
+		if( options.showHour || options.showMinute || options.showSecond )
+			$box.append('<div style="clear:both;float:none;"></div>');
+		setInterval(function(){
+			calcTime($box);
+		},1000)
+		calcTime($box);
+	});
+}
+})(jQuery);
diff --git a/xdretroclock.jquery.json b/xdretroclock.jquery.json
@@ -0,0 +1,30 @@
+{
+    "name": "xdretroclock",
+    "title": "jQuery Clock or Timer plugin in retro flip-count down style",
+    "description": "jQuery Clock or Timer plugin in retro flip-count down style",
+    "keywords": [
+        "time",
+        "timer",
+        "clock",
+		"form"
+    ],
+    "version": "1.0.0",
+    "author": {
+		"name": 	"Chupurnov Valeriy",
+		"email": 	"[email protected]",
+		"url": 		"http://xdsoft.net/contacts.html"
+    },
+    "licenses": [
+        {
+            "type": "MIT",
+            "url": "https://github.com/xdan/xdretroclock/blob/master/MIT-LICENSE.txt"
+        }
+    ],
+    "bugs": "https://github.com/xdan/xdretroclock/issues",
+    "homepage": "http://xdsoft.net/jqplugins/xdretroclock/",
+    "docs": "http://xdsoft.net/jqplugins/xdretroclock/",
+    "download": "https://github.com/xdan/xdretroclock/archive/master.zip",
+    "dependencies": {
+        "jquery": ">=1.7"
+    }
+}