Skip to content

cards
cards
Commit 0049233b authored by Curtis Adam's avatar Curtis Adam
Browse files
Options

Transfer the Pomodoro code to .cards

parent 479bacf5
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 558 additions and 22 deletions
.jshintrc
View file @ 0049233b
......@@ -56,6 +56,8 @@
"module": true,
"expect": true,
"Hammer": true,
"Counts": true
"Counts": true,
"sweetAlert": true,
"swal": true
}
}
.meteor/packages
View file @ 0049233b
......@@ -73,3 +73,4 @@ mikowals:batch-insert
mizzao:jquery-ui
dsyko:jquery-ui-touch-punch
simple:json-routes
kevohagan:sweetalert
.meteor/versions
View file @ 0049233b
......@@ -89,6 +89,7 @@ iron:middleware-stack@1.1.0
iron:router@1.1.2
iron:url@1.1.0
jquery@1.11.11
kevohagan:sweetalert@1.0.0
launch-screen@1.1.1
less@2.7.12
livedata@1.0.18
......
imports/api/pomodoroTimer.js
View file @ 0049233b
This diff is collapsed.
imports/ui/pomodoroTimer/pomodoroTimer.html
View file @ 0049233b
<template name="pomodoroTimer">
<div id="pomodoroTimer" class="container-fluid">
<div class="row">
<div class="col-xs-12 text-center">
<h2 class="text-center" id="instructions">click clock to <span class="green">start</span></h2>
<!--the whole clock and hands and arcs are all contained in the same svg viewbox-->
<svg id="clock" viewBox="0 0 100 100">
<!--drop shadow from http://demosthenes.info/ . Have to do the shadow using svg, or it wouldn't be able to follow the triangle hands-->
<filter id="drop-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="1.5"/>
<feOffset dx="2" dy="2" result="offsetblur"/>
<feFlood flood-color="rgba(0,0,0,0.25)"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<!--have to put the filter in a style attribute so the url works-->
<circle id="face" style="filter:url(#drop-shadow);" cx="50" cy="50" r="40"/>
<g id="hands" style="filter:url(#drop-shadow);">
<polygon id="pomodoroHour" points="50,25 53,50 47,50"/>
<polygon id="pomodoroMin" points="50,10 53,50 47,50"/>
</g>
<circle id="handCircle" cx="50" cy="50" r="3"/>
<!--these paths show the pomodoros and breaks around the circle and are assigned attributes in the javascript-->
<path id="progressArc"/>
<path id="pomArc"/>
<path id="breakArc"/>
</svg>
</div>
</div>
<!--empty audio tag to make the sounds work on chrome for android-->
<audio id="chromeMobile" preload="auto">
<source src="" type="audio/mp3"/>
</audio>
<audio id="bell" preload="auto">
<source src="http://www.myinstants.com/media/sounds/boxing-bell.mp3" type="audio/mp3"/>
</audio>
<audio id="failure" preload="auto">
<source src="http://www.myinstants.com/media/sounds/you-have-failed.mp3" type="audio/mp3"/>
</audio>
<!-- <audio id="failure" preload="auto">
<source src="http://www.myinstants.com/media/sounds/sadtrombone.swf.mp3" type="audio/mp3" />
</audio> -->
<audio id="success" preload="auto">
<source src="http://www.myinstants.com/media/sounds/039-a-victory-fanfare.mp3" type="audio/mp3"/>
</audio>
</div>
</template>
<template name="pomodoroTimerModal">
<!--this is the modal, hidden by default, that pops up when the user clicks the clock. Not too complicated.-->
<div id="pomodoroTimerModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h3 class="modal-title" id="modalTitle">Choose your goal!</h3>
</div>
<div class="modal-body">
<form id="input" autocomplete="off">
<div class="form-group">
<div id="goalDiv">
<label for="pomQuantity">How many
<a href="#" data-toggle="tooltip"
title='A "Pomodoro" is a work / break cycle. Default: 25 mins work and 5 mins break. After 4 pomodoros: 15 mins break.'>
<b>pomodoros<i class="fa fa-question-circle"></i></b></a> will you
do?</label>
<input type="number" class="form-control quantity" id="pomQuantity" min="1" max="16"
value=1>
<input class="numSlider" type=range min=1 max=16 value=1 id="pomNumSlider" step=1>
<p id="workTime"></p>
</div>
<div id="settings" style="display: none">
<label for="workLength" style="float:left;"><i class="fa fa-briefcase"></i>
Work</label>
<input type="number" class="form-control quantity" id="workLength" min="1" max="59"
value="25">
<input class="numSlider" type="range" min="1" max="59" value="25" id="workSlider"
step="1">
<label for="playLength" style="float:left;"><i class="fa fa-coffee"></i>
Relax</label>
<input type="number" class="form-control quantity" id="playLength" min="1" max="59"
value="5">
<input class="numSlider" type="range" min="1" max="59" value="5" id="playSlider"
step="1">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" id="settingsBtn" class="btn btn-info fa fa-gear hvr-bounce-in"
style="float:left;"> Settings
</button>
<button type="button" id="startPom" class="btn btn-success" data-dismiss="modal">Let's go!
</button>
</div>
</div>
</div>
</div>
</template>
imports/ui/pomodoroTimer/pomodoroTimer.js
View file @ 0049233b
......@@ -8,21 +8,21 @@ import {PomodoroTimer} from "../../api/pomodoroTimer";
* pomodoroTimer
* ############################################################################
*/
let promodoroInterval;
Template.pomodoroTimer.onCreated(function () {
PomodoroTimer.initialize();
});
Template.pomodoroTimer.onRendered(function () {
});
Template.pomodoroTimer.onDestroyed(function () {
});
Template.pomodoroTimer.helpers({
/*This initializes the tooltip over "pomodoro" in the startup modal.*/
$('[data-toggle="tooltip"]').tooltip();
if (promodoroInterval === undefined) {
promodoroInterval = setInterval(function () {
PomodoroTimer.interval();
}, 1000);
}
});
Template.pomodoroTimer.events({
'click #clock': function () {
PomodoroTimer.clickClock();
}
});
/*
......@@ -31,17 +31,32 @@ Template.pomodoroTimer.events({
* ############################################################################
*/
Template.pomodoroTimerModal.onCreated(function () {
});
Template.pomodoroTimerModal.onRendered(function () {
});
Template.pomodoroTimerModal.onDestroyed(function () {
});
Template.pomodoroTimerModal.helpers({
$("#pomodoroTimerModal").on('hidden.bs.modal', function () {
PomodoroTimer.start();
});
});
Template.pomodoroTimerModal.events({
'input #pomNumSlider': function () {
PomodoroTimer.updatePomNumSlider();
},
'input #pomQuantity': function () {
PomodoroTimer.updatePomQuantity();
},
'click #settingsBtn': function () {
PomodoroTimer.updateSettingsBtn();
},
'input #workLength': function () {
PomodoroTimer.updateWorkLength();
},
'input #workSlider': function () {
PomodoroTimer.updateWorkSlider();
},
'input #playLength': function () {
PomodoroTimer.updatePlayLength();
},
'input #playSlider': function () {
PomodoroTimer.updatePlaySlider();
}
});
imports/ui/pomodoroTimer/pomodoroTimer.scss
View file @ 0049233b
#pomodoroTimer {
h2,
h3,
h4 {
/*This font seemed a good fit to the simple geometric style I was going for.*/
font-family: 'Righteous', cursive !important;
}
#instructions {
/*have to make it important to override the bootstrap css*/
color: white !important;
}
h3 {
color: #FF9F30 !important;
text-align: center;
}
a:visited {
color: #FE5E3E !important;
}
a:hover {
text-decoration: none !important;
}
#face {
fill: #33D275;
}
.green {
color: #33D275;
}
#hour,
#min,
#sec,
#handCircle {
fill: #FDE016;
}
#pomArc {
stroke: #FF9F30;
}
#breakArc {
stroke: #178FFF;
}
#pomArc,
#breakArc {
stroke-width: 8px;
fill: none;
}
#progressArc {
fill: none;
stroke: #FE5E3E;
stroke-width: 2px;
}
b {
color: #FE5E3E;
}
#clock {
max-height: 87vh;
cursor: pointer;
/*width:100vw;*/
}
label {
width: 100vw;
color: #178FFF;
}
.numSlider {
margin-left: 5% !important;
width: 71% !important;
position: relative !important;
display: inline-block !important;
vertical-align: middle !important;
}
.quantity {
margin-bottom: 10px !important;
display: inline-block !important;
width: 17% !important;
}
#input {
text-align: center;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment