TimeDropper-Ex/index.html at master · Adam5Wu/TimeDropper-Ex · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=10,chrome=1">
		<title>TimeDropper-Ex</title>
		<!--link rel="stylesheet" type="text/css" href="https://bootswatch.com/slate/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="src/timedropper.slate.css" /-->
		<link rel="stylesheet" type="text/css" href="src/timedropper.css" />
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.min.js"></script>
		<script type="text/javascript" src="src/timedropper.js"></script>
		<script type="text/javascript" src="src/timedropper.lang.js"></script>
		<style type="text/css">
		#wrapper
		{
			max-width:800px;
			margin:0 auto;
            font-family:Tahoma,Verdana,sans-serif;
			line-height:1.5;
			font-size:14px;
		}
		.demo { margin:30px 20px 0 0; }
		button { color:black !important; }
		pre
		{
			font-size:12px;
			background:#eee;
			padding:0.5em;
		}
		</style>
	</head>
	<body>
		<div id="wrapper">
			<div style="margin-bottom:1em"><h1 style="display:inline">TimeDropper-Ex<h4 style="display:inline">
				<a href="https://github.com/Adam5Wu/TimeDropper-Ex">[Repository]</a>
			</h4></h1></div>
			<p>
				TimeDropper-Ex is a jQuery plugin for fast visual and interactive time entry.
			</p>
			<p>
				Requires
				<a href="http://jquery.com/" target=_blank>jQuery</a> 1.7.0+ (MIT LICENSE),
				<a href="http://momentjs.com/" target=_blank>MomentJS</a> 2.9.0+ (MIT LICENSE)
			</p>
			Compatible Browsers:
			<ul>
				<li>Google Chrome 40+
				<li>Mozilla Firefox 30+
				<li>Microsoft Edge
				<li>Microsoft Internet Explorer 10+
				<li>Opera 25+
				<li>Safari 5+
			</ul>
			<p>
				Supports multi-language, you can choose a pre-defined language or set it to auto-detect mode. <br>
				You can also define new languages, refer to <a href="src/timedropper.lang.js">the translations module</a> for example.
			</p>
			<p>
				Easily customizeable colors and style to adopt to arbitrary theme. <br>
				Refer to <a href="src/timedropper.slate.delta.css">the "Slate" delta CSS</a> for example.
			</p>
			<p><span style="padding:0.5em;border:1px solid grey;border-radius:1em">
				Interested in interactive date (range) entry? Checkout <a href="https://adam5wu.github.io/DateRange-Picker-Ex/">DateRange-Picker-Ex</a>.
			</span></p>
			<p><span style="padding:0.5em;border:1px solid grey;border-radius:1em">
				Interested in comprehensive datetime range entry? Checkout <a href="https://adam5wu.github.io/DateTimeRanger/">DateTimeRanger</a>.
			</span></p>
            <h2 id="installation">Installation</h2>
<pre>
&lt;link rel="stylesheet" type="text/css" href="dist/timedropper.min.css" />
&lt;!-- Optional "Slate" color theme -->
&lt;link rel="stylesheet" type="text/css" href="dist/timedropper.slate.delta.min.css" />
&lt;script type="text/javascript" src="jquery.min.js">&lt;/script>
&lt;script type="text/javascript" src="moment.min.js">&lt;/script>
&lt;script type="text/javascript" src="dist/timedropper.min.js">&lt;/script>
&lt;script type="text/javascript" src="dist/timedropper.lang.min.js">&lt;/script>
</pre>
            <h2 id="demonstrations">Demonstrations</h2>
			<div>
				<button id="add-slate">Use Slate Color Theme</button>
				<button id="remove-slate">Remove Slate Color Theme</button>
			</div>
			<div class="demo" style="display:inline-block;vertical-align:top">
			Inline, input reactive<br>
			<input type="text" id="clock1" />
			<div id="loc-clock1" style="border:1px dashed darkgray;line-height:0"></div>
			</div>
			<div class="demo" style="display:inline-block;vertical-align:top">
			Fade, English, from 10:10 AM<br>
			<input type="text" id="clock2" readonly />
			</div>
			<div class="demo" style="display:inline-block;vertical-align:top">
			Auto start (drop), follow time<br>
			<input type="text" id="clock3" readonly />
			</div>
		</div>
<script>
$('#add-slate').click(function () {
	$('head').append('<link rel="stylesheet" type="text/css" href="https://bootswatch.com/slate/bootstrap.min.css">');
	$('head').append('<link rel="stylesheet" type="text/css" href="src/timedropper.slate.delta.css" />');
});
$('#remove-slate').click(function () {
	$('link[rel=stylesheet][href*="slate"]').remove();
});
$("#clock1").timeDropper({
	animation: 'fade',
	inline: true,
	container: $('#loc-clock1'),
	dropTrigger: false,
	alwaysOpen: true
}).on('TDEx-dailing', function(e, data) {
	$(this).css('background', data.finish?'white':'lime');
});
$("#clock2").timeDropper({
	language: 'en',
	animation: 'fade',
	fetchTime: function() {
		return "10:10 AM";
	},
	setTime: function() {},
}).on('TDEx-update', function(e,data) {
	$(this).val(data.dailing?'Dailing...'+data.selector:data.time[1]);
}).on('TDEx-dailing', function(e, data) {
	if (data.finish) {
		$(this).val($(this).data('TDEx').getTime()[1]);
	}
});
$("#clock3").timeDropper({
	autoStart: true,
	fetchTime: function() {
		return "";
	}
});
</script>
	</body>
</html>