Skip to content

Exactmins #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 12 commits into
base: master
Choose a base branch
from
Open

Exactmins #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
d5597d0
ADDED exactmins
victor-perez Apr 16, 2016
e15bd74
version++
victor-perez Apr 17, 2016
ba25e92
Merge pull request #1 from victor-perez/exactmins
victor-perez Apr 17, 2016
55b075b
# This is a combination of 2 commits.
victor-perez Apr 20, 2016
663cc21
merge
victor-perez Apr 20, 2016
95946b0
ADDED option: appendto
victor-perez Apr 20, 2016
7d566ba
Merge pull request #2 from victor-perez/option_target
victor-perez Apr 20, 2016
eab3565
version++
victor-perez Apr 20, 2016
d7e5cdc
ADDED cancelbtn
victor-perez Apr 25, 2016
0753c6a
Merge pull request #3 from victor-perez/cancelbtn
victor-perez Apr 25, 2016
7a6fd30
Update bower.json
victor-perez Apr 25, 2016
431a657
version++
victor-perez Apr 25, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions Gulpfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,4 +36,5 @@ gulp.task('watch', function () {
})
});

gulp.task('build', ['js', 'sass']);

4 changes: 3 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,9 @@ autoclose: false, // auto close when minute is selected
ampmclickable: false, // set am/pm button on itself
darktheme: false, // set to dark theme
twelvehour: true, // change to 12 hour AM/PM clock from 24 hour
vibrate: true // vibrate the device when dragging clock hand
vibrate: true, // vibrate the device when dragging clock hand
exactmins: true, // enable exact minutes, if false you can only click 5, 10, 15 etc.
appendto: null // append the picker to another element than default ( you can use, query selector string or DOM element)
```

## Screenshots:
Expand Down
2 changes: 1 addition & 1 deletion bower.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
Copy link

@danswater danswater Apr 18, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can you also update the entry point of main property?

  "main": [
     "./dist/js/materialize.clockpicker.js",
     "./dist/css/materialize.clockpicker.css"
   ],

this is also useful when injecting files to index.html e.g when using gulp-inject

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@danswater good one, I will change that.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@victor-perez, Thanks! I am amazed that you're still online right now.

"version": "1.0.0",
"version": "1.0.3",
"name": "materialize-clockpicker",
"homepage": "https://github.com/chingyawhao/materialize-clockpicker",
"authors": [
Expand Down
2 changes: 1 addition & 1 deletion dist/js/materialize.clockpicker.js
View file
Open in desktop

Large diffs are not rendered by default.

104 changes: 74 additions & 30 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link type="text/css" rel="stylesheet" href="bower_components/Materialize/dist/css/materialize.min.css" media="screen,projection" />
<link type="text/css" rel="stylesheet" href="dist/css/materialize.clockpicker.css" media="screen,projection" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/Materialize/dist/js/materialize.min.js"></script>
<script src="dist/js/materialize.clockpicker.js"></script>
Expand All @@ -15,10 +16,21 @@

<body>
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo">Materialize Timepicker</a>
<div class="nav-wrapper">
<a href="#" class="brand-logo center">Materialize Timepicker</a>
<a href="#" data-activates="slide-out" id="menu" class="button-collapse show-on-large">
<i class="material-icons">menu</i>
</a>
</div>
</nav>
<div id="slide-out" class="side-nav">
<form class="row">
<div class="input-field col s12">
<label for="timepicker_appendTo">Time options - appendTo</label>
<input id="timepicker_appendTo" class="timepicker" type="time">
</div>
</form>
</div>
</nav>
<div class="container">
<div class="row">
<form class="col s12">
Expand All @@ -28,126 +40,158 @@
<input id="timepicker_ampm" class="timepicker" type="time">
</div>
</div>

<div class="row">
<div class="input-field col s12">
<label for="timepicker_ampm_dark">Time am/pm ( dark theme )</label>
<input id="timepicker_ampm_dark" class="timepicker" type="time">
</div>
</div>

<div class="row">
<div class="input-field col s12">
<label for="timepicker_24">Time 24h </label>
<input id="timepicker_24" class="timepicker" type="time">
</div>
</div>

<div class="row">
<div class="input-field col s12">
<label for="timepicker_24_dark">Time 24h ( dark theme ) </label>
<input id="timepicker_24_dark" class="timepicker" type="time">
</div>
</div>

<div class="row">
<div class="input-field col s12">
<label for="timepicker_default">Time options - default: 'now' </label>
<input id="timepicker_default" class="timepicker" type="time">
</div>
</div>

<div class="row">
<div class="input-field col s12">
<label for="timepicker_fromnow">Time options - fromnow: 5 * 1000 * 60 </label>
<input id="timepicker_fromnow" class="timepicker" type="time">
</div>
</div>

<div class="row">
<div class="input-field col s12">
<label for="timepicker_donetext">Time options - donetext: 'set'</label>
<input id="timepicker_donetext" class="timepicker" type="time">
</div>
</div>

<div class="row">
<div class="input-field col s12">
<label for="timepicker_autoclose">Time options - autoclose: true</label>
<input id="timepicker_autoclose" class="timepicker" type="time">
</div>
</div>


<div class="row">
<div class="input-field col s12">
<label for="timepicker_ampmclickable">Time options - ampmclickable: true</label>
<input id="timepicker_ampmclickable" class="timepicker" type="time">
</div>
</div>

<div class="row">
<div class="input-field col s12">
<label for="timepicker_ampmclickable_dark">Time options - ampmclickable: true ( dark theme ) </label>
<input id="timepicker_ampmclickable_dark" class="timepicker" type="time">
</div>
</div>



<div class="row">
<div class="input-field col s12">
<label for="timepicker_vibrate">Time options - vibrate: true</label>
<input id="timepicker_vibrate" class="timepicker" type="time">
</div>
</div>
<div class="row">
<div class="input-field col s12">
<label for="timepicker_exactmins">Time options - exactmins: false</label>
<input id="timepicker_exactmins" class="timepicker" type="time">
</div>
</div>

<div class="row">
<div class="input-field col s12">
<label for="timepicker_exactmins_now">Time options - exactmins: false, default: 'now'</label>
<input id="timepicker_exactmins_now" class="timepicker" type="time">
</div>
</div>

<div class="row">
<div class="input-field col s12">
<label for="timepicker_cancelbtn">Time options - cancelbtn: true, canceltext: 'close'</label>
<input id="timepicker_cancelbtn" class="timepicker" type="time">
</div>
</div>
</form>
</div>
</div>
<script type="text/javascript">
//am/pm
$('#timepicker_ampm').pickatime();
$('#timepicker_ampm_dark').pickatime({
darktheme: true
darktheme: true
});
//24
$('#timepicker_24').pickatime({
twelvehour: false
twelvehour: false
});
$('#timepicker_24_dark').pickatime({
darktheme: true,
twelvehour: false
darktheme: true,
twelvehour: false
});
//default
$('#timepicker_default').pickatime({
default: 'now'
default: 'now'
});
//fromnow
$('#timepicker_fromnow').pickatime({
default: 'now',
fromnow: 5 * 1000 * 60
default: 'now',
fromnow: 5 * 1000 * 60
});
//donetext
$('#timepicker_donetext').pickatime({
donetext: 'set'
donetext: 'set'
});
//autoclose
$('#timepicker_autoclose').pickatime({
autoclose: true
autoclose: true
});
//ampmclickable
$('#timepicker_ampmclickable').pickatime({
ampmclickable: true
ampmclickable: true
});
$('#timepicker_ampmclickable_dark').pickatime({
ampmclickable: true,
darktheme: true
$('#timepicker_ampmclickable_dark').pickatime({
ampmclickable: true,
darktheme: true
});
//vibrate
$('#timepicker_vibrate').pickatime({
vibrate: true
vibrate: true
});
$('#timepicker_test').pickatime({
vibrate: true
});
//menu
$('#menu').sideNav({
menuWidth: '40%'
});
//appendTo
$('#timepicker_appendTo').pickatime({
appendto: document.body
});
//exactmins
$('#timepicker_exactmins').pickatime({
exactmins: false
});
//exactmin + now
$('#timepicker_exactmins_now').pickatime({
exactmins: false,
default: 'now'
});
//cancelbtn
$('#timepicker_cancelbtn').pickatime({
cancelbtn: true,
canceltext: 'close'
});

</script>
</body>

Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "materialize-clockpicker",
"version": "1.0.0",
"version": "1.0.3",
"description": "A materialize clockpicker",
"main": "js/materialize.clockpicker.js",
"repository": {
Expand Down
52 changes: 46 additions & 6 deletions src/js/materialize.clockpicker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,6 +180,8 @@
self.amOrPm = 'PM';
}).appendTo(this.spanAmPm);
}
} else {
this.amPmBlock.remove();
}
//force input to type ( disable type=time )
input.attr('type','text');
Expand All @@ -188,7 +190,15 @@
popover.addClass('darktheme');

// If autoclose is not setted, append a button
$('<button type="button" class="btn-flat clockpicker-button" tabindex="' + (options.twelvehour? '3' : '1') + '">' + options.donetext + '</button>').click($.proxy(this.done, this)).appendTo(this.footer);
$('<button type="button" class="waves-effect wave-light btn-flat clockpicker-button" tabindex="' + (options.twelvehour? '3' : '1') + '">' + options.donetext + '</button>').click($.proxy(this.done, this)).appendTo(this.footer);

//if cancel button
if (options.cancelbtn) {
$('<button type="button" class="waves-effect waves-red btn-flat clockpicker-button red-text" tabindex="' + (options.twelvehour? '4' : '2') + '">' + options.canceltext + '</button>')
.click($.proxy(this.hide, this))
.prependTo(this.footer);
}


this.spanHours.click($.proxy(this.toggleView, this, 'hours'));
this.spanMinutes.click($.proxy(this.toggleView, this, 'minutes'));
Expand Down Expand Up @@ -250,7 +260,7 @@
// Clicking on minutes view space
plate.on(mousedownEvent, function(e) {
if ($(e.target).closest('.clockpicker-tick').length === 0)
mousedown(e, true);
mousedown(e, options.exactmins);
});

// Mousedown or touchstart
Expand Down Expand Up @@ -291,7 +301,7 @@
// Clicking in chrome on windows will trigger a mousemove event
return;
moved = true;
self.setHand(x, y, false, true);
self.setHand(x, y, !options.exactmins, true);
});

// Mouseup on document
Expand Down Expand Up @@ -376,9 +386,13 @@
donetext: 'Done', // done button text
autoclose: false, // auto close when minute is selected
ampmclickable: false, // set am/pm button on itself
darktheme: false, // set to dark theme
darktheme: false, // set to dark theme
twelvehour: true, // change to 12 hour AM/PM clock from 24 hour
vibrate: true // vibrate the device when dragging clock hand
vibrate: true, // vibrate the device when dragging clock hand
exactmins: true, // enable exact minutes, if false you can only click 5, 10, 15 etc.
appendto: null, // append the picker to another element than default ( you can use, query selector string or DOM element)
cancelbtn: false, // show cancel button
canceltext: 'cancel' // text of the cancel button
};

// Show or hide popover
Expand All @@ -405,6 +419,9 @@
if (this.isShown) {
return;
}
if (e) {
e.preventDefault();
}
raiseCallback(this.options.beforeShow);
$(':input').each(function() {
$(this).attr('tabindex', -1);
Expand All @@ -417,7 +434,11 @@
$(document.body).css('overflow', 'hidden');
if (!this.isAppended) {
// Append popover to body
this.popover.insertAfter(this.input);
if (this.options.appendto) {
$(this.options.appendto).append(this.popover);
} else {
this.popover.insertAfter(this.input);
}
if(this.options.twelvehour) {
this.amOrPm = 'PM';
if(!this.options.ampmclickable) {
Expand Down Expand Up @@ -449,6 +470,25 @@
now.getHours(),
now.getMinutes()
];
//set exact minutes
if (!this.options.exactmins && value[1] % 5) {
//go down
if (value[1] % 5 < 3) {
value[1] -= value[1] % 5;
//go up
} else {
value[1] += (5 - (value[1] % 5));
}
//next hour
if (value[1] === 60) {
value[0]++;
value[1] = 0;
}
//24 -> 0
if (value[0] === 24) {
value[0] = 0;
}
}
}
this.hours = + value[0] || 0;
this.minutes = + value[1] || 0;
Expand Down