[ { "path": ".gitignore", "content": "/TimeCircles.zip" }, { "path": "MIT.txt", "content": "The MIT License (MIT)\n\nCopyright (c) 2013 Wim Barelds\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE." }, { "path": "README.bower.md", "content": "# Method for installing TimeCircles in your project using bower (http://bower.io)\n\nIf you don't have node.js, npm and bower installed, please fallback to the installation method described in README.md or install them before going any further. \nThis method assumes that you have basic knowledge of these tools and already have them installed and available on a cli based shell.\n \nIf you don't already use bower in your project, type the following command in a cli shell at the root of your project and answer all the questions asked :\n \n bower init\n \nOnce bower is installed, in a cli shell at the root of your project, type the following :\n \n bower install timecircles --save\n \nAnd then, in your html files, include the following in the `` section : \n \n \n \n \n \nReplace `bower_components dir` with the relative path to the bower install directory configured in your project's bower.json file (`bower_components` at the root of your site by default).\n \nIf you prefer using a public CDN for jquery, you could replace the first line by :\n \n \n" }, { "path": "README.md", "content": "> Unfortunately I am limited in what I can do with these pages. For better formatted documentation, see: http://git.wimbarelds.nl/TimeCircles/readme.php\r\n\r\n# TimeCircles documentation\r\nTimeCircles is a jQuery plugin that provides a nice looking way to either count down towards a certain time, or to count up from a certain time. The goal for TimeCircles is to provide a simple yet dynamic tool that makes it very easy to provide visitors an attractive countdown or timer.\r\n\r\nThis documentation will provide some examples of how to use TimeCircles. Usage of TimeCircles can be very simple, but for those willing to work a little harder can also provide more sophisticated functionality. The examples aim to provide a good basic idea of how various features can be used without overcomplicating things.\r\n\r\n## General use\r\n\r\nThe first thing to do is to include the JavaScript files for jQuery and TimeCircles, as well as the TimeCircles stylesheet. These should ideally be included in the head of your html file.\r\n\r\n \r\n \r\n \r\n\r\nWhen the necessary files have been included, it's very simple to set up TimeCircles on your page, simply target the element you wish to use with jQuery, and execute the TimeCircles function on it. This will create TimeCircles inside the targeted element, counting up from 0 (when the page was opened).\r\n\r\n> **Important note:** TimeCircles will automatically make its self the size of whatever element you place it in. If you do not have a height set, it will attempt to determine a height based on the element's width. For the best results however, it's recommended to set both the width and height.\r\n\r\n### Setting your reference time\r\n\r\nOf course, you might not want to start counting up from 0. Perhaps you're counting down the time until a wedding, or alternatively counting how long you've been with your girlfriend (or whatever else really). Really, TimeCircles is most useful if you're using it with some reference time and/or date.\r\n\r\nSetting up your reference date and time is also fairly simple. The best way to do it is to simply include it in the html element you've set aside for TimeCircles. Create an attribute called `data-date` and provide a value in the format of `yyyy-mm-dd hh:mm:ss`\r\n\r\n
\r\n\r\n### Creating a stopwatch\r\n\r\nIt is also possible that you want to use TimeCircles to count down a specific amount of time, like 15 minutes. This works similarly as creating a reference time, however here the attribute data-timer is used, and the value is the time to count down from (in seconds).\r\n\r\n
\r\n\r\n## Options\r\n\r\nIt's nice that TimeCircles comes in yellow, green, blue, and red- but wouldn't it be even nicer if it came in the color theme of your own website? Alternatively, wouldn't it be great if you could change other aspects of the way it looks? Perhaps change the language of the text to whatever you want?\r\n\r\nTo customize TimeCircles to fit precisely what you're looking for you can use the options. In this section we will look into what options are available and what each option means.\r\n\r\n### start `(default: true)`\r\n\r\nThis option determines whether or not TimeCircles should start immediately. If for example you wish to create a stopwatch that starts when the user clicks a button, you'll want to set this to false.\r\n\r\n $(\".example\").TimeCircles({start: false}); \r\n\r\n### animation `(default: \"smooth\")`\r\n\r\nThe way the circles animate can be either a constant gradual rotating, slowly moving from one second to the other. Or it can be set to jump from one unit to the next, only changing the circle when the number within it also changes. The first type is called `\"smooth\"`, the second type is called `\"ticks\"`.\r\n\r\n $(\".example\").TimeCircles({animation_interval: \"smooth\"});\r\n\r\n### count_past_zero `(default: true)`\r\n\r\nThis option is only really useful for when counting down. What it does is either give you the option to stop the timer, or start counting up after you've hit the predefined date (or your stopwatch hits zero).\r\n\r\n $(\".example\").TimeCircles({count_past_zero: false}); \r\n\r\n### circle_bg_color `(default: \"#60686F\")`\r\n\r\nThis option determines the color of the background circle.\r\n\r\n $(\".example\").TimeCircles({circle_bg_color: \"#000000\"}); \r\n\r\n### use_background `(default: true)`\r\n\r\nThis options sets whether any background circle should be drawn at all. Disabling this option could be used in isolation, or you could use a background of your own to place behind TimeCircles.\r\n\r\n $(\".example\").TimeCircles({use_background: false}); \r\n\r\n### fg_width `(default: 0.1)`\r\n\r\nThis option sets the width of the foreground circle. The width is set relative to the size of the circle as a whole. A value of 0.1 means 10%, so if your TimeCircles are 100 pixels high, the foreground circle will be 10 percent of that (10 pixels).\r\n\r\n $(\".example\").TimeCircles({fg_width: 0.05});\r\n\r\n### bg_width `(default: 1.2)`\r\n\r\nThis option sets the width of the background circle. The width of the background circle is set relative to the width of the foreground circle. A value of 1 means 100%, so a value of 1 would mean having a width equal to your foreground ring. Higher and you get wider, lower you get thinner.\r\n\r\n $(\".example\").TimeCircles({bg_width: 0.5}); \r\n\r\n### text_size `(default: 0.07)`\r\n\r\nThis option sets the font size of the text (Days/Hours/Minutes/etc.) in the circles. The size is set relative to the size of the circle as a whole. A value of 1 means 100%, so a value of 1 would mean having a width equal to your foreground ring.\r\n\r\n $(\".example\").TimeCircles({text_size: 0.1});\r\n\r\n### number_size `(default: 0.28)`\r\n\r\nThis option sets the font size of the numbers in the circles. The size is set relative to the size of the circle as a whole. A value of 1 means 100%, so a value of 1 would mean having a width equal to your foreground ring.\r\n\r\n $(\".example\").TimeCircles({number_size: 0.25});\r\n\r\n### total_duration `(default: \"Auto\")`\r\n\r\nThis option can be set to change how much time will fill the largest visible circle. Normally this is the Days circle, but this can be any of the other circles depending on visible settings. Valid for this variable are \"Auto\", \"Years\", \"Months\", \"Days\", \"Hours\", \"Minutes\" or any numeric value (ie: 30 for thirty seconds).\r\n\r\n $(\".example\").TimeCircles({total_duration: \"Auto\"});\r\n\r\n### direction `(default: \"Clockwise\")`\r\n\r\nThis option can be set to change the direction in which the circles fill up. Valid values for this are \"Clockwise\", \"Counter-clockwise\" or \"Both\".\r\n\r\n $(\".example\").TimeCircles({direction: \"Clockwise\"});\r\n\r\n### start_angle `(default: 0)`\r\n\r\nThis option can be set to change the starting point from which the circles will fill up. This should be an integer value between 0 and 360. 0 is from the top, 90 from the right, 180 from the bottom and 270 from the left.\r\n\r\n $(\".example\").TimeCircles({start_angle: 0});\r\n\r\n### time\r\n\r\nThe time option is actually a group of options that allows you to control the options of each time unit independently. As such, within time each unit of time has its own sub-category. These categories are: Days, Hours, Minutes, and Seconds. The options available within each category are as follows:\r\n\r\n* **show:** Determines whether the time unit should be shown at all\r\n* **text:** Determines the text shown below the time. Useful for use on non-English websites\r\n* **color:** Determines the color of the foreground circle of the time unit\r\n\r\n```\r\n $(\".example\").TimeCircles({ time: {\r\n Days: { color: \"#C0C8CF\" },\r\n Hours: { color: \"#C0C8CF\" },\r\n Minutes: { color: \"#C0C8CF\" },\r\n Seconds: { color: \"#C0C8CF\" }\r\n }});\r\n```\r\n\r\n## Functions\r\n\r\nFunctions will allow you to interact with your TimeCircles as they're running. Generally speaking, this functionality is most often used by other developers who want their own JavaScript to interact with TimeCircles. However, if you're not a developer yourself, there are still a few functions that are quite simple to use and shouldn't be too hard to tackle.\r\n\r\nBefore we go into what each function does however, it should be pointed out how these functions can be used. Unlike quite a lot of other jQuery plugins, TimeCircles does not return a jQuery object after instantiating. Instead, it returns a TimeCircles object. This means that function chaining will work slightly differently than it does for other jQuery plugins. To find out more about how to chain other jQuery plugins and functions, have a look at the `end()` function.\r\n\r\nTimeCircles functions themselves (with the exception of the `end()` function) will return the TimeCircles object. This allows you to chain several functions into each other. IE: You could chain `start()` straight into `addEventListener(callback)`.\r\n\r\n### start() , stop() and restart()\r\n\r\nThese are the most basic functions provided. They allow you to temporarily stop TimeCircles or restart it. Start will unpause the timer when it's stopped, restart will restart it from its original value. If you're using TimeCircles to count down to a certain point in the future, upon unpausing the countdown will jump ahead.\r\n\r\n**HTML**\r\n\r\n
\r\n \r\n \r\n \r\n\r\n**JavaScript**\r\n\r\n $(\".example.stopwatch\").TimeCircles();\r\n $(\".start\").click(function(){ $(\".example.stopwatch\").TimeCircles().start(); });\r\n $(\".stop\").click(function(){ $(\".example.stopwatch\").TimeCircles().stop(); });\r\n $(\".restart\").click(function(){ $(\".example.stopwatch\").TimeCircles().restart(); });\r\n\r\n### destroy()\r\n\r\nIf for some reason, you need to get rid of your TimeCircles, or you want to allow users to remove them at the click of a button; you can do that with destroy.\r\n\r\n $(\".example\").TimeCircles().destroy();\r\n\r\n### rebuild()\r\n\r\nSome options or variables are only initialized once, at the time of creating TimeCircles (For example, the width and height, or which circles are being shown). If you change these settings later on, you can have everything reinitialized anew by using `.rebuild()`\r\n\r\n $(\".example\").TimeCircles().rebuild();\r\n\r\n### getTime()\r\n\r\nRetrieves the number of seconds left (or since) the zero point. Values until zero are positive, values after zero are negative.\r\n\r\n $(\".example\").TimeCircles().getTime();\r\n\r\n### addListener `(callback, type = \"visible\")`\r\n\r\nThe most powerful interactions with TimeCircles can be achieved using listeners. Using listeners, you can make a ticking sound play every second, or you can make a sound whenever a minute passes. You could even use it to trigger some alarm or whole other JavaScript when the timer hits zero.\r\n\r\nThe `type` parameter allows you to listen to either only the events from the visible TimeCircles, or all TimeCircles. Correct values are \"visible\" or \"all\". The default value is \"visible\", but through using \"all\" you can listen to the circles you're hiding (if you're hiding any of course).\r\n\r\nTo add a listener, use the `addListener(callback, type)` function. Callback is a function you pass to the event listener. The callback will then be triggered for each event. Three parameters are passed to your callback function, namely:\r\n\r\n* **unit:** The time unit in string format. So, \"Days\"/\"Hours\"/\"Minutes\"/\"Seconds\".\r\n* **value:** The new value of the time unit that changed. I.e.: 15.\r\n* **total:** This is the total time left (or elapsed) since the zero point.\r\n```\r\n$(\".example\").TimeCircles({count_past_zero: false}).addListener(countdownComplete);\r\n\t\r\nfunction countdownComplete(unit, value, total){\r\n\tif(total<=0){\r\n\t\t$(this).fadeOut('slow').replaceWith(\"

Time's Up!

\");\r\n\t}\r\n}\r\n```\r\n### end()\r\n\r\nTo allow you to chain TimeCircles to other jQuery functions, you can use the end() function. The end function returns the jQuery object and allows you to trigger jQuery functions as desired.\r\n\r\n $(\".example\").TimeCircles().end().fadeOut(); \r\n" }, { "path": "bower.json", "content": "{\n \"name\": \"timecircles\",\n \"version\": \"1.5.3\",\n \"homepage\": \"http://git.wimbarelds.nl/TimeCircles/\",\n \"authors\": [\n \"Wim Barelds \"\n ],\n \"description\": \"TimeCircles is a jQuery plugin that provides a nice looking way to either count down towards a certain time, or to count up from a certain time. The goal for TimeCircles is to provide a simple yet dynamic tool that makes it very easy to provide visitors an attractive countdown or timer.\",\n \"main\": \"inc/TimeCircles.js\",\n \"moduleType\": [\n \"globals\"\n ],\n \"keywords\": [\n \"timer\",\n \"stopwatch\",\n \"count\",\n \"countdown\",\n \"time\",\n \"date\",\n \"datetime\",\n \"clock\",\n \"comingsoon\",\n \"ui\",\n \"construction\"\n ],\n \"license\": \"MIT\",\n \"ignore\": [\n \"**/.*\",\n \"node_modules\",\n \"bower_components\",\n \"test\",\n \"tests\"\n ],\n \"dependencies\": {\n \"jquery\": \">=1.9.1\"\n }\n}\n" }, { "path": "composer.json", "content": "{\n \"name\": \"rockerox/timecircles\",\n \"description\": \"TimeCircles is a jQuery plugin that provides a nice looking way to either count down towards a certain time, or to count up from a certain time. The goal for TimeCircles is to provide a simple yet dynamic tool that makes it very easy to provide visitors an attractive countdown or timer.\",\n \"type\": \"component\",\n \"authors\": [\n {\n \"name\": \"Wim Barelds\",\n \"email\": \"wim.barelds@gmail.com\"\n }\n ],\n \"require\": {\n \"components/jquery\": \">=1.11.1\"\n }\n}\n" }, { "path": "inc/TimeCircles.css", "content": "/**\r\n *\tThis element is created inside your target element\r\n *\tIt is used so that your own element will not need to be altered\r\n **/\r\n.time_circles {\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n}\r\n\r\n/**\r\n *\tThis is all the elements used to house all text used\r\n * in time circles\r\n **/\r\n.time_circles > div {\r\n position: absolute;\r\n text-align: center;\r\n}\r\n\r\n/**\r\n *\tTitles (Days, Hours, etc)\r\n **/\r\n.time_circles > div > h4 {\r\n margin: 0;\r\n padding: 0;\r\n text-align: center;\r\n text-transform: uppercase;\r\n font-family: 'Century Gothic', Arial;\r\n line-height: 1;\r\n}\r\n\r\n/**\r\n *\tTime numbers, ie: 12\r\n **/\r\n.time_circles > div > span {\r\n margin: 0;\r\n padding: 0;\r\n display: block;\r\n width: 100%;\r\n text-align: center;\r\n font-family: 'Century Gothic', Arial;\r\n line-height: 1;\r\n font-weight: bold;\r\n}\r\n" }, { "path": "inc/TimeCircles.js", "content": "/**\r\n * Basic structure: TC_Class is the public class that is returned upon being called\r\n * \r\n * So, if you do\r\n * var tc = $(\".timer\").TimeCircles();\r\n * \r\n * tc will contain an instance of the public TimeCircles class. It is important to\r\n * note that TimeCircles is not chained in the conventional way, check the\r\n * documentation for more info on how TimeCircles can be chained.\r\n * \r\n * After being called/created, the public TimerCircles class will then- for each element\r\n * within it's collection, either fetch or create an instance of the private class.\r\n * Each function called upon the public class will be forwarded to each instance\r\n * of the private classes within the relevant element collection\r\n **/\r\n(function($) {\r\n\r\n var useWindow = window;\r\n \r\n // From https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys\r\n if (!Object.keys) {\r\n Object.keys = (function() {\r\n 'use strict';\r\n var hasOwnProperty = Object.prototype.hasOwnProperty,\r\n hasDontEnumBug = !({toString: null}).propertyIsEnumerable('toString'),\r\n dontEnums = [\r\n 'toString',\r\n 'toLocaleString',\r\n 'valueOf',\r\n 'hasOwnProperty',\r\n 'isPrototypeOf',\r\n 'propertyIsEnumerable',\r\n 'constructor'\r\n ],\r\n dontEnumsLength = dontEnums.length;\r\n\r\n return function(obj) {\r\n if (typeof obj !== 'object' && (typeof obj !== 'function' || obj === null)) {\r\n throw new TypeError('Object.keys called on non-object');\r\n }\r\n\r\n var result = [], prop, i;\r\n\r\n for (prop in obj) {\r\n if (hasOwnProperty.call(obj, prop)) {\r\n result.push(prop);\r\n }\r\n }\r\n\r\n if (hasDontEnumBug) {\r\n for (i = 0; i < dontEnumsLength; i++) {\r\n if (hasOwnProperty.call(obj, dontEnums[i])) {\r\n result.push(dontEnums[i]);\r\n }\r\n }\r\n }\r\n return result;\r\n };\r\n }());\r\n }\r\n \r\n // Used to disable some features on IE8\r\n var limited_mode = false;\r\n var tick_duration = 200; // in ms\r\n \r\n var debug = (location.hash === \"#debug\");\r\n function debug_log(msg) {\r\n if (debug) {\r\n console.log(msg);\r\n }\r\n }\r\n\r\n var allUnits = [\"Days\", \"Hours\", \"Minutes\", \"Seconds\"];\r\n var nextUnits = {\r\n Seconds: \"Minutes\",\r\n Minutes: \"Hours\",\r\n Hours: \"Days\",\r\n Days: \"Years\"\r\n };\r\n var secondsIn = {\r\n Seconds: 1,\r\n Minutes: 60,\r\n Hours: 3600,\r\n Days: 86400,\r\n Months: 2678400,\r\n Years: 31536000\r\n };\r\n\r\n /**\r\n * Converts hex color code into object containing integer values for the r,g,b use\r\n * This function (hexToRgb) originates from:\r\n * http://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb\r\n * @param {string} hex color code\r\n */\r\n function hexToRgb(hex) {\r\n\r\n // Verify already RGB (e.g. \"rgb(0,0,0)\") or RGBA (e.g. \"rgba(0,0,0,0.5)\")\r\n var rgba = /^rgba?\\(([\\d]+),([\\d]+),([\\d]+)(,([\\d\\.]+))?\\)$/;\r\n if(rgba.test(hex)) {\r\n var result = rgba.exec(hex);\r\n return {\r\n r: parseInt(result[1]),\r\n g: parseInt(result[2]),\r\n b: parseInt(result[3]),\r\n a: parseInt(result[5] ? result[5] : 1)\r\n };\r\n }\r\n\r\n // Expand shorthand form (e.g. \"03F\") to full form (e.g. \"0033FF\")\r\n var shorthandRegex = /^#?([a-f\\d])([a-f\\d])([a-f\\d])$/i;\r\n hex = hex.replace(shorthandRegex, function(m, r, g, b) {\r\n return r + r + g + g + b + b;\r\n });\r\n\r\n var result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\r\n return result ? {\r\n r: parseInt(result[1], 16),\r\n g: parseInt(result[2], 16),\r\n b: parseInt(result[3], 16)\r\n } : null;\r\n }\r\n \r\n function isCanvasSupported() {\r\n var elem = document.createElement('canvas');\r\n return !!(elem.getContext && elem.getContext('2d'));\r\n }\r\n\r\n /**\r\n * Function s4() and guid() originate from:\r\n * http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript\r\n */\r\n function s4() {\r\n return Math.floor((1 + Math.random()) * 0x10000)\r\n .toString(16)\r\n .substring(1);\r\n }\r\n\r\n /**\r\n * Creates a unique id\r\n * @returns {String}\r\n */\r\n function guid() {\r\n return s4() + s4() + '-' + s4() + '-' + s4() + '-' +\r\n s4() + '-' + s4() + s4() + s4();\r\n }\r\n\r\n /**\r\n * Array.prototype.indexOf fallback for IE8\r\n * @param {Mixed} mixed\r\n * @returns {Number}\r\n */\r\n if (!Array.prototype.indexOf) {\r\n Array.prototype.indexOf = function(elt /*, from*/)\r\n {\r\n var len = this.length >>> 0;\r\n\r\n var from = Number(arguments[1]) || 0;\r\n from = (from < 0)\r\n ? Math.ceil(from)\r\n : Math.floor(from);\r\n if (from < 0)\r\n from += len;\r\n\r\n for (; from < len; from++)\r\n {\r\n if (from in this &&\r\n this[from] === elt)\r\n return from;\r\n }\r\n return -1;\r\n };\r\n }\r\n\r\n function parse_date(str) {\r\n var match = str.match(/^[0-9]{4}-[0-9]{2}-[0-9]{2}\\s[0-9]{1,2}:[0-9]{2}:[0-9]{2}$/);\r\n if (match !== null && match.length > 0) {\r\n var parts = str.split(\" \");\r\n var date = parts[0].split(\"-\");\r\n var time = parts[1].split(\":\");\r\n return new Date(date[0], date[1] - 1, date[2], time[0], time[1], time[2]);\r\n }\r\n // Fallback for different date formats\r\n var d = Date.parse(str);\r\n if (!isNaN(d))\r\n return d;\r\n d = Date.parse(str.replace(/-/g, '/').replace('T', ' '));\r\n if (!isNaN(d))\r\n return d;\r\n // Cant find anything\r\n return new Date();\r\n }\r\n\r\n function parse_times(diff, old_diff, total_duration, units, floor) {\r\n var raw_time = {};\r\n var raw_old_time = {};\r\n var time = {};\r\n var pct = {};\r\n var old_pct = {};\r\n var old_time = {};\r\n\r\n var greater_unit = null;\r\n for(var i = 0; i < units.length; i++) {\r\n var unit = units[i];\r\n var maxUnits;\r\n\r\n if (greater_unit === null) {\r\n maxUnits = total_duration / secondsIn[unit];\r\n }\r\n else {\r\n maxUnits = secondsIn[greater_unit] / secondsIn[unit];\r\n }\r\n\r\n var curUnits = (diff / secondsIn[unit]);\r\n var oldUnits = (old_diff / secondsIn[unit]);\r\n \r\n if(floor) {\r\n if(curUnits > 0) curUnits = Math.floor(curUnits);\r\n else curUnits = Math.ceil(curUnits);\r\n if(oldUnits > 0) oldUnits = Math.floor(oldUnits);\r\n else oldUnits = Math.ceil(oldUnits);\r\n }\r\n \r\n if (unit !== \"Days\") {\r\n curUnits = curUnits % maxUnits;\r\n oldUnits = oldUnits % maxUnits;\r\n }\r\n\r\n raw_time[unit] = curUnits;\r\n time[unit] = Math.abs(curUnits);\r\n raw_old_time[unit] = oldUnits;\r\n old_time[unit] = Math.abs(oldUnits);\r\n pct[unit] = Math.abs(curUnits) / maxUnits;\r\n old_pct[unit] = Math.abs(oldUnits) / maxUnits;\r\n\r\n greater_unit = unit;\r\n }\r\n\r\n return {\r\n raw_time: raw_time,\r\n raw_old_time: raw_old_time,\r\n time: time,\r\n old_time: old_time,\r\n pct: pct,\r\n old_pct: old_pct\r\n };\r\n }\r\n\r\n var TC_Instance_List = {};\r\n function updateUsedWindow() {\r\n if(typeof useWindow.TC_Instance_List !== \"undefined\") {\r\n TC_Instance_List = useWindow.TC_Instance_List;\r\n }\r\n else {\r\n useWindow.TC_Instance_List = TC_Instance_List;\r\n }\r\n initializeAnimationFrameHandler(useWindow);\r\n };\r\n \r\n function initializeAnimationFrameHandler(w) {\r\n var vendors = ['webkit', 'moz'];\r\n for (var x = 0; x < vendors.length && !w.requestAnimationFrame; ++x) {\r\n w.requestAnimationFrame = w[vendors[x] + 'RequestAnimationFrame'];\r\n w.cancelAnimationFrame = w[vendors[x] + 'CancelAnimationFrame'];\r\n }\r\n\r\n if (!w.requestAnimationFrame || !w.cancelAnimationFrame) {\r\n w.requestAnimationFrame = function(callback, element, instance) {\r\n if (typeof instance === \"undefined\")\r\n instance = {data: {last_frame: 0}};\r\n var currTime = new Date().getTime();\r\n var timeToCall = Math.max(0, 16 - (currTime - instance.data.last_frame));\r\n var id = w.setTimeout(function() {\r\n callback(currTime + timeToCall);\r\n }, timeToCall);\r\n instance.data.last_frame = currTime + timeToCall;\r\n return id;\r\n };\r\n w.cancelAnimationFrame = function(id) {\r\n clearTimeout(id);\r\n };\r\n }\r\n };\r\n \r\n\r\n var TC_Instance = function(element, options) {\r\n this.element = element;\r\n this.container;\r\n this.listeners = null;\r\n this.data = {\r\n paused: false,\r\n last_frame: 0,\r\n animation_frame: null,\r\n interval_fallback: null,\r\n timer: false,\r\n total_duration: null,\r\n prev_time: null,\r\n drawn_units: [],\r\n text_elements: {\r\n Days: null,\r\n Hours: null,\r\n Minutes: null,\r\n Seconds: null\r\n },\r\n attributes: {\r\n canvas: null,\r\n context: null,\r\n item_size: null,\r\n line_width: null,\r\n radius: null,\r\n outer_radius: null\r\n },\r\n state: {\r\n fading: {\r\n Days: false,\r\n Hours: false,\r\n Minutes: false,\r\n Seconds: false\r\n }\r\n }\r\n };\r\n\r\n this.config = null;\r\n this.setOptions(options);\r\n this.initialize();\r\n };\r\n\r\n TC_Instance.prototype.clearListeners = function() {\r\n this.listeners = { all: [], visible: [] };\r\n };\r\n \r\n TC_Instance.prototype.addTime = function(seconds_to_add) {\r\n if(this.data.attributes.ref_date instanceof Date) {\r\n var d = this.data.attributes.ref_date;\r\n d.setSeconds(d.getSeconds() + seconds_to_add);\r\n }\r\n else if(!isNaN(this.data.attributes.ref_date)) {\r\n this.data.attributes.ref_date += (seconds_to_add * 1000);\r\n }\r\n };\r\n \r\n TC_Instance.prototype.initialize = function(clear_listeners) {\r\n // Initialize drawn units\r\n this.data.drawn_units = [];\r\n for(var i = 0; i < Object.keys(this.config.time).length; i++) {\r\n var unit = Object.keys(this.config.time)[i];\r\n if (this.config.time[unit].show) {\r\n this.data.drawn_units.push(unit);\r\n }\r\n }\r\n\r\n // Avoid stacking\r\n $(this.element).children('div.time_circles').remove();\r\n\r\n if (typeof clear_listeners === \"undefined\")\r\n clear_listeners = true;\r\n if (clear_listeners || this.listeners === null) {\r\n this.clearListeners();\r\n }\r\n this.container = $(\"
\");\r\n this.container.addClass('time_circles');\r\n this.container.appendTo(this.element);\r\n \r\n // Determine the needed width and height of TimeCircles\r\n var height = this.element.offsetHeight;\r\n var width = this.element.offsetWidth;\r\n if (height === 0)\r\n height = $(this.element).height();\r\n if (width === 0)\r\n width = $(this.element).width();\r\n\r\n if (height === 0 && width > 0)\r\n height = width / this.data.drawn_units.length;\r\n else if (width === 0 && height > 0)\r\n width = height * this.data.drawn_units.length;\r\n \r\n // Create our canvas and set it to the appropriate size\r\n var canvasElement = document.createElement('canvas');\r\n canvasElement.width = width;\r\n canvasElement.height = height;\r\n \r\n // Add canvas elements\r\n this.data.attributes.canvas = $(canvasElement);\r\n this.data.attributes.canvas.appendTo(this.container);\r\n \r\n // Check if the browser has browser support\r\n var canvasSupported = isCanvasSupported();\r\n // If the browser doesn't have browser support, check if explorer canvas is loaded\r\n // (A javascript library that adds canvas support to browsers that don't have it)\r\n if(!canvasSupported && typeof G_vmlCanvasManager !== \"undefined\") {\r\n G_vmlCanvasManager.initElement(canvasElement);\r\n limited_mode = true;\r\n canvasSupported = true;\r\n }\r\n if(canvasSupported) {\r\n this.data.attributes.context = canvasElement.getContext('2d');\r\n }\r\n\r\n this.data.attributes.item_size = Math.min(width / this.data.drawn_units.length, height);\r\n this.data.attributes.line_width = this.data.attributes.item_size * this.config.fg_width;\r\n this.data.attributes.radius = ((this.data.attributes.item_size * 0.8) - this.data.attributes.line_width) / 2;\r\n this.data.attributes.outer_radius = this.data.attributes.radius + 0.5 * Math.max(this.data.attributes.line_width, this.data.attributes.line_width * this.config.bg_width);\r\n\r\n // Prepare Time Elements\r\n var i = 0;\r\n for (var key in this.data.text_elements) {\r\n if (!this.config.time[key].show)\r\n continue;\r\n\r\n var textElement = $(\"
\");\r\n textElement.addClass('textDiv_' + key);\r\n textElement.css(\"top\", Math.round(0.35 * this.data.attributes.item_size));\r\n textElement.css(\"left\", Math.round(i++ * this.data.attributes.item_size));\r\n textElement.css(\"width\", this.data.attributes.item_size);\r\n textElement.appendTo(this.container);\r\n\r\n var headerElement = $(\"

\");\r\n headerElement.text(this.config.time[key].text); // Options\r\n headerElement.css(\"font-size\", Math.round(this.config.text_size * this.data.attributes.item_size));\r\n headerElement.appendTo(textElement);\r\n\r\n var numberElement = $(\"\");\r\n numberElement.css(\"font-size\", Math.round(this.config.number_size * this.data.attributes.item_size));\r\n numberElement.appendTo(textElement);\r\n\r\n this.data.text_elements[key] = numberElement;\r\n }\r\n\r\n this.start();\r\n if (!this.config.start) {\r\n this.data.paused = true;\r\n }\r\n \r\n // Set up interval fallback\r\n var _this = this;\r\n this.data.interval_fallback = useWindow.setInterval(function(){\r\n _this.update.call(_this, true);\r\n }, 100);\r\n };\r\n\r\n TC_Instance.prototype.update = function(nodraw) {\r\n if(typeof nodraw === \"undefined\") {\r\n nodraw = false;\r\n }\r\n else if(nodraw && this.data.paused) {\r\n return;\r\n }\r\n \r\n if(limited_mode) {\r\n //Per unit clearing doesn't work in IE8 using explorer canvas, so do it in one time. The downside is that radial fade cant be used\r\n this.data.attributes.context.clearRect(0, 0, this.data.attributes.canvas[0].width, this.data.attributes.canvas[0].hright);\r\n }\r\n var diff, old_diff;\r\n\r\n var prevDate = this.data.prev_time;\r\n var curDate = new Date();\r\n this.data.prev_time = curDate;\r\n\r\n if (prevDate === null)\r\n prevDate = curDate;\r\n\r\n // If not counting past zero, and time < 0, then simply draw the zero point once, and call stop\r\n if (!this.config.count_past_zero) {\r\n if (curDate > this.data.attributes.ref_date) {\r\n for(var i = 0; i < this.data.drawn_units.length; i++) {\r\n var key = this.data.drawn_units[i];\r\n\r\n // Set the text value\r\n this.data.text_elements[key].text(\"0\");\r\n var x = (i * this.data.attributes.item_size) + (this.data.attributes.item_size / 2);\r\n var y = this.data.attributes.item_size / 2;\r\n var color = this.config.time[key].color;\r\n this.drawArc(x, y, color, 0);\r\n }\r\n this.stop();\r\n return;\r\n }\r\n }\r\n\r\n // Compare current time with reference\r\n diff = (this.data.attributes.ref_date - curDate) / 1000;\r\n old_diff = (this.data.attributes.ref_date - prevDate) / 1000;\r\n\r\n var floor = this.config.animation !== \"smooth\";\r\n\r\n var visible_times = parse_times(diff, old_diff, this.data.total_duration, this.data.drawn_units, floor);\r\n var all_times = parse_times(diff, old_diff, secondsIn[\"Years\"], allUnits, floor);\r\n\r\n var i = 0;\r\n var j = 0;\r\n var lastKey = null;\r\n\r\n var cur_shown = this.data.drawn_units.slice();\r\n for (var i in allUnits) {\r\n var key = allUnits[i];\r\n\r\n // Notify (all) listeners\r\n if (Math.floor(all_times.raw_time[key]) !== Math.floor(all_times.raw_old_time[key])) {\r\n this.notifyListeners(key, Math.floor(all_times.time[key]), Math.floor(diff), \"all\");\r\n }\r\n\r\n if (cur_shown.indexOf(key) < 0)\r\n continue;\r\n\r\n // Notify (visible) listeners\r\n if (Math.floor(visible_times.raw_time[key]) !== Math.floor(visible_times.raw_old_time[key])) {\r\n this.notifyListeners(key, Math.floor(visible_times.time[key]), Math.floor(diff), \"visible\");\r\n }\r\n \r\n if(!nodraw) {\r\n // Set the text value\r\n this.data.text_elements[key].text(Math.floor(Math.abs(visible_times.time[key])));\r\n\r\n var x = (j * this.data.attributes.item_size) + (this.data.attributes.item_size / 2);\r\n var y = this.data.attributes.item_size / 2;\r\n var color = this.config.time[key].color;\r\n\r\n if (this.config.animation === \"smooth\") {\r\n if (lastKey !== null && !limited_mode) {\r\n if (Math.floor(visible_times.time[lastKey]) > Math.floor(visible_times.old_time[lastKey])) {\r\n this.radialFade(x, y, color, 1, key);\r\n this.data.state.fading[key] = true;\r\n }\r\n else if (Math.floor(visible_times.time[lastKey]) < Math.floor(visible_times.old_time[lastKey])) {\r\n this.radialFade(x, y, color, 0, key);\r\n this.data.state.fading[key] = true;\r\n }\r\n }\r\n if (!this.data.state.fading[key]) {\r\n this.drawArc(x, y, color, visible_times.pct[key]);\r\n }\r\n }\r\n else {\r\n this.animateArc(x, y, color, visible_times.pct[key], visible_times.old_pct[key], (new Date()).getTime() + tick_duration);\r\n }\r\n }\r\n lastKey = key;\r\n j++;\r\n }\r\n\r\n // Dont request another update if we should be paused\r\n if(this.data.paused || nodraw) {\r\n return;\r\n }\r\n \r\n // We need this for our next frame either way\r\n var _this = this;\r\n var update = function() {\r\n _this.update.call(_this);\r\n };\r\n\r\n // Either call next update immediately, or in a second\r\n if (this.config.animation === \"smooth\") {\r\n // Smooth animation, Queue up the next frame\r\n this.data.animation_frame = useWindow.requestAnimationFrame(update, _this.element, _this);\r\n }\r\n else {\r\n // Tick animation, Don't queue until very slightly after the next second happens\r\n var delay = (diff % 1) * 1000;\r\n if (delay < 0)\r\n delay = 1000 + delay;\r\n delay += 50;\r\n\r\n _this.data.animation_frame = useWindow.setTimeout(function() {\r\n _this.data.animation_frame = useWindow.requestAnimationFrame(update, _this.element, _this);\r\n }, delay);\r\n }\r\n };\r\n\r\n TC_Instance.prototype.animateArc = function(x, y, color, target_pct, cur_pct, animation_end) {\r\n if (this.data.attributes.context === null)\r\n return;\r\n\r\n var diff = cur_pct - target_pct;\r\n if (Math.abs(diff) > 0.5) {\r\n if (target_pct === 0) {\r\n this.radialFade(x, y, color, 1);\r\n }\r\n else {\r\n this.radialFade(x, y, color, 0);\r\n }\r\n }\r\n else {\r\n var progress = (tick_duration - (animation_end - (new Date()).getTime())) / tick_duration;\r\n if (progress > 1)\r\n progress = 1;\r\n\r\n var pct = (cur_pct * (1 - progress)) + (target_pct * progress);\r\n this.drawArc(x, y, color, pct);\r\n\r\n //var show_pct =\r\n if (progress >= 1)\r\n return;\r\n var _this = this;\r\n useWindow.requestAnimationFrame(function() {\r\n _this.animateArc(x, y, color, target_pct, cur_pct, animation_end);\r\n }, this.element);\r\n }\r\n };\r\n\r\n TC_Instance.prototype.drawArc = function(x, y, color, pct) {\r\n if (this.data.attributes.context === null)\r\n return;\r\n\r\n var clear_radius = Math.max(this.data.attributes.outer_radius, this.data.attributes.item_size / 2);\r\n if(!limited_mode) {\r\n this.data.attributes.context.clearRect(\r\n x - clear_radius,\r\n y - clear_radius,\r\n clear_radius * 2,\r\n clear_radius * 2\r\n );\r\n }\r\n \r\n if (this.config.use_background) {\r\n this.data.attributes.context.beginPath();\r\n this.data.attributes.context.arc(x, y, this.data.attributes.radius, 0, 2 * Math.PI, false);\r\n this.data.attributes.context.lineWidth = this.data.attributes.line_width * this.config.bg_width;\r\n\r\n // line color\r\n this.data.attributes.context.strokeStyle = this.config.circle_bg_color;\r\n this.data.attributes.context.stroke();\r\n }\r\n\r\n // Direction\r\n var startAngle, endAngle, counterClockwise;\r\n var defaultOffset = (-0.5 * Math.PI);\r\n var fullCircle = 2 * Math.PI;\r\n startAngle = defaultOffset + (this.config.start_angle / 360 * fullCircle);\r\n var offset = (2 * pct * Math.PI);\r\n\r\n if (this.config.direction === \"Both\") {\r\n counterClockwise = false;\r\n startAngle -= (offset / 2);\r\n endAngle = startAngle + offset;\r\n }\r\n else {\r\n if (this.config.direction === \"Clockwise\") {\r\n counterClockwise = false;\r\n endAngle = startAngle + offset;\r\n }\r\n else {\r\n counterClockwise = true;\r\n endAngle = startAngle - offset;\r\n }\r\n }\r\n\r\n this.data.attributes.context.beginPath();\r\n this.data.attributes.context.arc(x, y, this.data.attributes.radius, startAngle, endAngle, counterClockwise);\r\n this.data.attributes.context.lineWidth = this.data.attributes.line_width;\r\n\r\n // line color\r\n this.data.attributes.context.strokeStyle = color;\r\n this.data.attributes.context.stroke();\r\n };\r\n\r\n TC_Instance.prototype.radialFade = function(x, y, color, from, key) {\r\n // TODO: Make fade_time option\r\n var rgb = hexToRgb(color);\r\n var _this = this; // We have a few inner scopes here that will need access to our instance\r\n\r\n var step = 0.2 * ((from === 1) ? -1 : 1);\r\n var i;\r\n for (i = 0; from <= 1 && from >= 0; i++) {\r\n // Create inner scope so our variables are not changed by the time the Timeout triggers\r\n (function() {\r\n var delay = 50 * i;\r\n var rgba = \"rgba(\" + rgb.r + \", \" + rgb.g + \", \" + rgb.b + \", \" + (Math.round(from * 10) / 10) + \")\";\r\n useWindow.setTimeout(function() {\r\n _this.drawArc(x, y, rgba, 1);\r\n }, delay);\r\n }());\r\n from += step;\r\n }\r\n if (typeof key !== undefined) {\r\n useWindow.setTimeout(function() {\r\n _this.data.state.fading[key] = false;\r\n }, 50 * i);\r\n }\r\n };\r\n\r\n TC_Instance.prototype.timeLeft = function() {\r\n if (this.data.paused && typeof this.data.timer === \"number\") {\r\n return this.data.timer;\r\n }\r\n var now = new Date();\r\n return ((this.data.attributes.ref_date - now) / 1000);\r\n };\r\n\r\n TC_Instance.prototype.start = function() {\r\n useWindow.cancelAnimationFrame(this.data.animation_frame);\r\n useWindow.clearTimeout(this.data.animation_frame)\r\n\r\n // Check if a date was passed in html attribute or jquery data\r\n var attr_data_date = $(this.element).data('date');\r\n if (typeof attr_data_date === \"undefined\") {\r\n attr_data_date = $(this.element).attr('data-date');\r\n }\r\n if (typeof attr_data_date === \"string\") {\r\n this.data.attributes.ref_date = parse_date(attr_data_date);\r\n }\r\n // Check if this is an unpause of a timer\r\n else if (typeof this.data.timer === \"number\") {\r\n if (this.data.paused) {\r\n this.data.attributes.ref_date = (new Date()).getTime() + (this.data.timer * 1000);\r\n }\r\n }\r\n else {\r\n // Try to get data-timer\r\n var attr_data_timer = $(this.element).data('timer');\r\n if (typeof attr_data_timer === \"undefined\") {\r\n attr_data_timer = $(this.element).attr('data-timer');\r\n }\r\n if (typeof attr_data_timer === \"string\") {\r\n attr_data_timer = parseFloat(attr_data_timer);\r\n }\r\n if (typeof attr_data_timer === \"number\") {\r\n this.data.timer = attr_data_timer;\r\n this.data.attributes.ref_date = (new Date()).getTime() + (attr_data_timer * 1000);\r\n }\r\n else {\r\n // data-timer and data-date were both not set\r\n // use config date\r\n this.data.attributes.ref_date = this.config.ref_date;\r\n }\r\n }\r\n\r\n // Start running\r\n this.data.paused = false;\r\n this.update.call(this);\r\n };\r\n\r\n TC_Instance.prototype.restart = function() {\r\n this.data.timer = false;\r\n this.start();\r\n };\r\n\r\n TC_Instance.prototype.stop = function() {\r\n if (typeof this.data.timer === \"number\") {\r\n this.data.timer = this.timeLeft(this);\r\n }\r\n // Stop running\r\n this.data.paused = true;\r\n useWindow.cancelAnimationFrame(this.data.animation_frame);\r\n };\r\n\r\n TC_Instance.prototype.destroy = function() {\r\n this.clearListeners();\r\n this.stop();\r\n useWindow.clearInterval(this.data.interval_fallback);\r\n this.data.interval_fallback = null;\r\n \r\n this.container.remove();\r\n $(this.element).removeAttr('data-tc-id');\r\n $(this.element).removeData('tc-id');\r\n };\r\n\r\n TC_Instance.prototype.setOptions = function(options) {\r\n if (this.config === null) {\r\n this.default_options.ref_date = new Date();\r\n this.config = $.extend(true, {}, this.default_options);\r\n }\r\n $.extend(true, this.config, options);\r\n\r\n // Use window.top if use_top_frame is true\r\n if(this.config.use_top_frame) {\r\n useWindow = window.top;\r\n }\r\n else {\r\n useWindow = window;\r\n }\r\n updateUsedWindow();\r\n \r\n this.data.total_duration = this.config.total_duration;\r\n if (typeof this.data.total_duration === \"string\") {\r\n if (typeof secondsIn[this.data.total_duration] !== \"undefined\") {\r\n // If set to Years, Months, Days, Hours or Minutes, fetch the secondsIn value for that\r\n this.data.total_duration = secondsIn[this.data.total_duration];\r\n }\r\n else if (this.data.total_duration === \"Auto\") {\r\n // If set to auto, total_duration is the size of 1 unit, of the unit type bigger than the largest shown\r\n for(var i = 0; i < Object.keys(this.config.time).length; i++) {\r\n var unit = Object.keys(this.config.time)[i];\r\n if (this.config.time[unit].show) {\r\n this.data.total_duration = secondsIn[nextUnits[unit]];\r\n break;\r\n }\r\n }\r\n }\r\n else {\r\n // If it's a string, but neither of the above, user screwed up.\r\n this.data.total_duration = secondsIn[\"Years\"];\r\n console.error(\"Valid values for TimeCircles config.total_duration are either numeric, or (string) Years, Months, Days, Hours, Minutes, Auto\");\r\n }\r\n }\r\n };\r\n\r\n TC_Instance.prototype.addListener = function(f, context, type) {\r\n if (typeof f !== \"function\")\r\n return;\r\n if (typeof type === \"undefined\")\r\n type = \"visible\";\r\n this.listeners[type].push({func: f, scope: context});\r\n };\r\n\r\n TC_Instance.prototype.notifyListeners = function(unit, value, total, type) {\r\n for (var i = 0; i < this.listeners[type].length; i++) {\r\n var listener = this.listeners[type][i];\r\n listener.func.apply(listener.scope, [unit, value, total]);\r\n }\r\n };\r\n\r\n TC_Instance.prototype.default_options = {\r\n ref_date: new Date(),\r\n start: true,\r\n animation: \"smooth\",\r\n count_past_zero: true,\r\n circle_bg_color: \"#60686F\",\r\n use_background: true,\r\n fg_width: 0.1,\r\n bg_width: 1.2,\r\n text_size: 0.07,\r\n number_size: 0.28,\r\n total_duration: \"Auto\",\r\n direction: \"Clockwise\",\r\n use_top_frame: false,\r\n start_angle: 0,\r\n time: {\r\n Days: {\r\n show: true,\r\n text: \"Days\",\r\n color: \"#FC6\"\r\n },\r\n Hours: {\r\n show: true,\r\n text: \"Hours\",\r\n color: \"#9CF\"\r\n },\r\n Minutes: {\r\n show: true,\r\n text: \"Minutes\",\r\n color: \"#BFB\"\r\n },\r\n Seconds: {\r\n show: true,\r\n text: \"Seconds\",\r\n color: \"#F99\"\r\n }\r\n }\r\n };\r\n\r\n // Time circle class\r\n var TC_Class = function(elements, options) {\r\n this.elements = elements;\r\n this.options = options;\r\n this.foreach();\r\n };\r\n\r\n TC_Class.prototype.getInstance = function(element) {\r\n var instance;\r\n\r\n var cur_id = $(element).data(\"tc-id\");\r\n if (typeof cur_id === \"undefined\") {\r\n cur_id = guid();\r\n $(element).attr(\"data-tc-id\", cur_id);\r\n }\r\n if (typeof TC_Instance_List[cur_id] === \"undefined\") {\r\n var options = this.options;\r\n var element_options = $(element).data('options');\r\n if (typeof element_options === \"string\") {\r\n element_options = JSON.parse(element_options);\r\n }\r\n if (typeof element_options === \"object\") {\r\n options = $.extend(true, {}, this.options, element_options);\r\n }\r\n instance = new TC_Instance(element, options);\r\n TC_Instance_List[cur_id] = instance;\r\n }\r\n else {\r\n instance = TC_Instance_List[cur_id];\r\n if (typeof this.options !== \"undefined\") {\r\n instance.setOptions(this.options);\r\n }\r\n }\r\n return instance;\r\n };\r\n\r\n TC_Class.prototype.addTime = function(seconds_to_add) {\r\n this.foreach(function(instance) {\r\n instance.addTime(seconds_to_add);\r\n });\r\n };\r\n \r\n TC_Class.prototype.foreach = function(callback) {\r\n var _this = this;\r\n this.elements.each(function() {\r\n var instance = _this.getInstance(this);\r\n if (typeof callback === \"function\") {\r\n callback(instance);\r\n }\r\n });\r\n return this;\r\n };\r\n\r\n TC_Class.prototype.start = function() {\r\n this.foreach(function(instance) {\r\n instance.start();\r\n });\r\n return this;\r\n };\r\n\r\n TC_Class.prototype.stop = function() {\r\n this.foreach(function(instance) {\r\n instance.stop();\r\n });\r\n return this;\r\n };\r\n\r\n TC_Class.prototype.restart = function() {\r\n this.foreach(function(instance) {\r\n instance.restart();\r\n });\r\n return this;\r\n };\r\n\r\n TC_Class.prototype.rebuild = function() {\r\n this.foreach(function(instance) {\r\n instance.initialize(false);\r\n });\r\n return this;\r\n };\r\n\r\n TC_Class.prototype.getTime = function() {\r\n return this.getInstance(this.elements[0]).timeLeft();\r\n };\r\n\r\n TC_Class.prototype.addListener = function(f, type) {\r\n if (typeof type === \"undefined\")\r\n type = \"visible\";\r\n var _this = this;\r\n this.foreach(function(instance) {\r\n instance.addListener(f, _this.elements, type);\r\n });\r\n return this;\r\n };\r\n\r\n TC_Class.prototype.destroy = function() {\r\n this.foreach(function(instance) {\r\n instance.destroy();\r\n });\r\n return this;\r\n };\r\n\r\n TC_Class.prototype.end = function() {\r\n return this.elements;\r\n };\r\n\r\n $.fn.TimeCircles = function(options) {\r\n return new TC_Class(this, options);\r\n };\r\n}(jQuery));\r\n" }, { "path": "inc/readme.css", "content": ".example {\n width: 400px;\n height: 100px;\n margin-bottom: 10px;\n}\nsmall.codeType {\n position: absolute;\n top: -2px;\n right: 5px;\n font-weight: bold;\n color: #900;\n}\nh2,h3 {\n margin-top: 1.5em;\n}\n\npre {\n position: relative;\n}\n.code {\n position: relative;\n font-family: Monaco,Menlo,Consolas,\"Courier New\",monospace;\n font-size: 13px;\n line-height: 1.428571429;\n color: #000;\n white-space: pre-line;\n}\n\n.nav li {\n list-style: none;\n}\n.nav li a {\n color: #60686F;\n display: block;\n}\n.nav li a:hover {\n text-decoration: none;\n background-color: rgb(238, 238, 238);\n}\n.nav li.active > a {\n border-right: solid #C0C8CF 2px;\n font-weight: bold;\n}\n\n\n.nav li.active {\n}\n\n.nav li ul {\n display: none;\n}\n\n.nav li.active ul {\n display: block;\n}" }, { "path": "index.html", "content": "\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n

TimeCircle examples

\r\n

Time until 2014

\r\n
\r\n
\r\n \r\n \r\n
\r\n
\r\n

Counting down 15 minutes (900 seconds)

\r\n
\r\n \r\n \r\n
\r\n

Time since page was opened

\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n" }, { "path": "package.json", "content": "{\n \"name\": \"timecircles\",\n \"version\": \"1.5.3\",\n \"homepage\": \"http://git.wimbarelds.nl/TimeCircles/\",\n \"authors\": [\n \"Wim Barelds \"\n ],\n \"description\": \"TimeCircles is a jQuery plugin that provides a nice looking way to either count down towards a certain time, or to count up from a certain time. The goal for TimeCircles is to provide a simple yet dynamic tool that makes it very easy to provide visitors an attractive countdown or timer.\",\n \"main\": \"inc/TimeCircles.js\",\n \"moduleType\": [\n \"globals\"\n ],\n \"keywords\": [\n \"timer\",\n \"stopwatch\",\n \"count\",\n \"countdown\",\n \"time\",\n \"date\",\n \"datetime\",\n \"clock\",\n \"comingsoon\",\n \"ui\",\n \"construction\"\n ],\n \"license\": \"MIT\",\n \"ignore\": [\n \"**/.*\",\n \"node_modules\",\n \"bower_components\",\n \"test\",\n \"tests\"\n ],\n \"dependencies\": {\n \"jquery\": \">=1.9.1\"\n }\n}\n" }, { "path": "readme.html", "content": "\n\n \n TimeCircles Readme / documentation\n \n \n \n \n \n \n \n \n \n \n \n
\n
\n
\n \n
\n
\n

TimeCircles documentation

\n

\n TimeCircles is a jQuery plugin that provides a nice looking way to either count down towards a certain time, or to count up from a certain time.\n The goal for TimeCircles is to provide a simple yet dynamic tool that makes it very easy to provide visitors an attractive countdown or timer.\n

\n

\n This documentation will provide some examples of how to use TimeCircles.\n Usage of TimeCircles can be very simple, but for those willing to work a little harder can also provide more sophisticated functionality.\n The examples aim to provide a good basic idea of how various features can be used without overcomplicating things.\n

\n

General use

\n

\n The first thing to do is to include the javascript files for jQuery and TimeCircles, as well as the TimeCircles stylesheet.\n These should ideally be included in the head of your html file.\n

\n 
\nHTML<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>\n<script type="text/javascript" src="TimeCircles.js"></script>\n<link href="TimeCircles.css" rel="stylesheet">
\n

\n When the neccesary files have been included, it's very simple to set up TimeCircles on your page, simply target the element you wish to use with jQuery,\n and execute the TimeCircles function on it. This will create TimeCircles inside the targeted element, counting up from 0 (when the page was opened)\n

\n
\n
\n
\n
\n
Javascript$(\".example\").TimeCircles(); 
\n
\n
\n \n Important note:\n TimeCircles will automatically make it self the size of whatever element you place it in.\n If you do not have a height set, it will attempt to determine a height based on the element's width.\n For the best results however, it's recommended to set both the width and height.\n \n
\n

Setting your reference time

\n

\n Of course, you might not want to start counting up from 0. Perhaps you're counting down the time until a wedding,\n or alternatively counting how long you've been with your girlfriend (or whatever else really).\n Really, TimeCircles is most useful if you're using it with some reference time and/or date.\n

\n

\n Setting up your reference date and time is also fairly simple.\n The best way to do it is to simply include it in the html element you've set aside for TimeCircles.\n Create an attribute called data-date and provide a value in the format of yyyy-mm-dd hh:mm:ss\n

\n
\n
\n
\n
\n
HTML<div class="example" data-date="2014-01-01 00:00:00"></div>
\n
\n

Creating a stopwatch

\n

\n It is also possible that you want to use TimeCircles to count down a specific amount of time, like 15 minutes.\n This works similarly as creating a reference time, however here the attribute data-timer is used,\n and the value is the time to count down from (in seconds).\n

\n
\n
\n
\n
\n
HTML<div class="example" data-timer="900"></div>
\n
\n

Options

\n

\n It's nice that TimeCircles comes in yellow, green, blue, and red- but wouldn't it be even nicer if it came in the color theme of your own website?\n Alternatively, wouldn't it be great if you could change other aspects of the way it looks? Perhaps change the language of the text to whatever you want?\n

\n

\n To customize TimeCircles to fit precisely what you're looking for you can use the options. In this section we will look into what options are available and what each option means.\n

\n

start (default: true)

\n

\n This option determines whether or not TimeCircles should start immediately.\n If for example you wish to create a stopwatch that starts when the users clicks a button, you'll want to set this to false.\n

\n 
Javascript$(\".example\").TimeCircles({start: false}); 
\n

refresh_interval (default: 0.1)

\n

\n This option determines how frequently TimeCircles is updated. The value is expressed in seconds, so 0.1 means one tenth of a second.\n

\n 
Javascript$(\".example\").TimeCircles({refresh_interval: 1}); 
\n

count_past_zero (default: true)

\n

\n This option is only really useful for when counting down.\n What it does is either give you the option to stop the timer,\n or start counting up after you've hit the predefined date (or your stopwatch hits zero).\n

\n 
Javascript$(\".example\").TimeCircles({count_past_zero: false}); 
\n

circle_bg_color (default: "#60686F")

\n

\n This option determines the color of the background circle.\n

\n 
Javascript$(\".example\").TimeCircles({circle_bg_color: \"#000000\"}); 
\n

use_background (default: true)

\n

\n This options sets whether any background circle should be drawn at all.\n Disabling this option could be used in isolation, or you could use a background of your own to place behind TimeCircles.\n

\n 
Javascript$(\".example\").TimeCircles({use_background: false}); 
\n

fg_width (default: 0.1)

\n

\n This option sets the width of the foreground circle. The width is set relative to the size of the circle as a whole.\n A value of 0.1 means 10%, so if your TimeCircles are 100 pixels high, the foreground circle will be 10 percent of that (10 pixels).\n

\n 
Javascript$(\".example\").TimeCircles({fg_width: 0.05}); 
\n

bg_width (default: 1.2)

\n

\n This option sets the width of the backgroundground circle. The width of the background is set relative to the width of the foreground.\n A value of 1 means 100%, so a value of 1 would mean having a width equal to your foreground ring. Higher and you get wider, lower you get thinner.\n

\n 
Javascript$(\".example\").TimeCircles({bg_width: 0.5}); 
\n

time

\n

\n The time option is actually a group of options that allows you to control the options of each time unit independently.\n As such, within time each unit of time has its own sub-category. These categories are: Days, Hours, Minutes, and Seconds.\n The options available within each category are as follows:\n

\n
    \n
  • show: Determines whether the time unit should be shown at all
    • \n
  • text: Determines the text shown below the time. Useful for use on non-English websites
    • \n
  • color: Determines the color of the foreground circle of the time unit
    • \n
\n 
Javascript$(\".example\").TimeCircles({ time: {\n    Days: { color: \"#C0C8CF\" },\n    Hours: { color: \"#C0C8CF\" },\n    Minutes: { color: \"#C0C8CF\" },\n    Seconds: { color: \"#C0C8CF\" }\n}}); 
\n

Functions

\n

\n Functions will allow you to interact with your TimeCircles as they're running.\n Generally speaking, this functionality is most often used by other developers who want their own javascript to interact with TimeCircles.\n However, if you're not a developer yourself, there are still a few functions that are quite simple to use and shouldn't be too hard to tackle.\n

\n

\n Before we go into what each function does however, it should be pointed out how these functions can be used.\n Unlike quite a lot of other jQuery plugins, TimeCircles does not return a jQuery object after instantiating. Instead, it returns a TimeCircles object.\n This means that function chaining will work slightly differently than it does for other jQuery plugins.\n To find out more about how to chain other jQuery plugins and functions, have a look at the end() function.\n

\n

\n TimeCircles functions themselves (with the exception of the end() function) will return the TimeCircles object.\n This allows you to chain several functions into each other. IE: You could chain start() straight into addEventListener(callback).\n

\n

start() and stop()

\n

\n These are the most basic functions provided. They allow you to temporarily stop TimeCircles.\n This is especially useful when you're using TimeCircles as a sort of stopwatch (ie: counting down a certain number of seconds).\n If you're using TimeCircles to count down to a certain point in the future, obviously pausing TimeCircles isn't going to stop time itself.\n

\n
\n
HTML<div class="example stopwatch" data-timer="900"></div>\n<button class="btn btn-success start">Start</button>\n<button class="btn btn-success start">Stop</button>
\n
\n
\n \n \n
\n
Javascript$(\".example\").TimeCircles();\n$(\".stop\").click(function(){ $(\".example.stopwatch\").TimeCircles().stop(); });\n$(\".start\").click(function(){ $(\".example.stopwatch\").TimeCircles().start(); }); 
\n
\n

destroy()

\n

\n If for some reason, you need to get rid of your TimeCircles, or you want to allow users remove them at the click of a button; you can do that with destroy.\n

\n 
Javascript$(\".example\").TimeCircles().destroy(); 
\n

addListener (callback)

\n

\n The most powerful interactions with TimeCircles can be achieved using listeners.\n Using listeners, you can make a ticking sound play every second, or you can make a sound whenever a minute passes.\n You could even use it to trigger some alarm or whole other javascript when the timer hits zero.\n

\n

\n To add a listener, use the addEventListener(callback) function.\n Callback is a function you pass to the event listener. The callback will then be triggered for each event.\n Three parameters are passed to your callback function, namely:\n

\n
    \n
  • unit: The time unit in string format. So, \"Days\"/\"Hours\"/\"Minutes\"/\"Seconds\".
    • \n
  • value: The new value of the time unit that changed. I.e.: 15.
    • \n
  • total: This is the total time left (or elapsed) since the zero point.
    • \n
\n

end()

\n

\n To allow you to chain TimeCircles to other jQuery functions, you can use the end() function.\n The end function returns the jQuery object and allows you to trigger jQuery function as desired.\n

\n 
Javascript$(\".example\").TimeCircles().end().fadeOut(); 
\n

 

 

 

 

\n
\n
\n
\n \n" }, { "path": "timecircles.jquery.json", "content": "{\n \"name\": \"timecircles\",\n \"version\": \"1.5.3\",\n \"title\": \"jQuery TimeCircles\",\n \"author\": {\n \"name\" : \"Wim Barelds\",\n \"email\" : \"wim.barelds@gmail.com\",\n \"url\" : \"http://www.wimbarelds.nl/\"\n },\n \"licenses\": [\n {\n \"type\": \"MIT\",\n \"url\": \"http://git.wimbarelds.nl/TimeCircles/MIT.txt\"\n }\n ],\n \"dependencies\": {\n \"jquery\": \">= 1.9.1\"\n },\n \"description\": \"TimeCircles is a jQuery plugin that provides a nice looking way to either count down towards a certain time, or to count up from a certain time. The goal for TimeCircles is to provide a simple yet dynamic tool that makes it very easy to provide visitors an attractive countdown or timer.\",\n \"keywords\": [\"timer\", \"stopwatch\", \"count\", \"countdown\", \"time\", \"date\", \"datetime\", \"clock\", \"comingsoon\", \"ui\", \"construction\"],\n \"docs\": \"http://git.wimbarelds.nl/TimeCircles/readme.php\",\n \"demo\": \"http://git.wimbarelds.nl/TimeCircles/\",\n \"download\": \"http://git.wimbarelds.nl/TimeCircles/TimeCircles.zip\"\n}\n" } ]