├── .eslintrc.json
├── .gitattributes
├── .github
└── workflows
│ ├── issue_stale.yml
│ └── lint.yml
├── .gitignore
├── .husky
└── pre-commit
├── .npmrc
├── .nvmrc
├── .prettierrc.json
├── CHANGELOG.md
├── LICENSE
├── README.md
├── assets
├── images
│ ├── timer.png
│ └── timer_long.png
└── js
│ ├── service.js
│ └── syotimer.examples.js
├── build
├── jquery.syotimer.d.ts
├── jquery.syotimer.js
├── jquery.syotimer.min.js
└── jquery.syotimer.min.js.map
├── index.d.ts
├── index.html
├── package-lock.json
├── package.json
├── resources
└── default.css
├── rollup.config.mjs
├── source
├── SyoTimer.ts
├── constants.ts
├── index.ts
├── localization.ts
├── types.ts
├── utils.spec.ts
└── utils.ts
├── tsconfig.json
├── tsconfig.lib.json
├── tsconfig.spec.json
└── vite.config.ts
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "browser": true,
4 | "es2021": true,
5 | "jquery": true
6 | },
7 | "extends": ["airbnb-base", "airbnb-typescript/base", "prettier"],
8 | "parser": "@typescript-eslint/parser",
9 | "parserOptions": {
10 | "ecmaVersion": 12,
11 | "sourceType": "module",
12 | "project": "./tsconfig.*?.json"
13 | },
14 | "plugins": ["@typescript-eslint", "prettier"],
15 | "rules": {
16 | "prettier/prettier": "error"
17 | },
18 | "overrides": [
19 | {
20 | "files": "{rollup.config.mjs,vite.config.ts}",
21 | "rules": {
22 | "import/no-extraneous-dependencies": [
23 | "error",
24 | {
25 | "devDependencies": true,
26 | "optionalDependencies": false
27 | }
28 | ]
29 | }
30 | }
31 | ]
32 | }
33 |
--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | * text=auto
2 |
3 | build/* text -diff
4 | yarn.lock text -diff
5 | package-lock.json text -diff
6 |
--------------------------------------------------------------------------------
/.github/workflows/issue_stale.yml:
--------------------------------------------------------------------------------
1 | name: Stale
2 |
3 | on:
4 | workflow_dispatch:
5 | schedule:
6 | # This runs every day 20 minutes before midnight: https://crontab.guru/#40_23_*_*_*
7 | - cron: '40 23 * * *'
8 |
9 | jobs:
10 | stale:
11 | runs-on: ubuntu-latest
12 | if: github.repository_owner == 'mrfratello'
13 | permissions:
14 | issues: write
15 | pull-requests: write
16 |
17 | steps:
18 | - uses: actions/stale@v9
19 | name: 'Close stale issues'
20 | with:
21 | stale-issue-message: 'This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days.'
22 | stale-pr-message: 'This PR is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days.'
23 | close-issue-message: 'This issue was closed because it has been stalled for 7 days with no activity.'
24 | close-pr-message: 'This PR was closed because it has been stalled for 7 days with no activity.'
25 |
--------------------------------------------------------------------------------
/.github/workflows/lint.yml:
--------------------------------------------------------------------------------
1 | name: Lint
2 |
3 | on:
4 | push:
5 | branches:
6 | - master
7 | pull_request:
8 |
9 | jobs:
10 | main:
11 | runs-on: ubuntu-latest
12 | steps:
13 | - name: get sources
14 | uses: actions/checkout@v4
15 | with:
16 | fetch-depth: 0
17 | - name: node version
18 | id: node_info
19 | run: echo "version=$(cat .nvmrc)" >> $GITHUB_OUTPUT
20 | shell: bash
21 | - name: setup node lts version
22 | uses: actions/setup-node@v3
23 | with:
24 | node-version: '${{ steps.node_info.outputs.version }}'
25 | - name: install dependencies
26 | run: npm ci
27 | shell: bash
28 |
29 | - name: lint
30 | run: npm run lint
31 | - name: test
32 | run: npm run test
33 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | Thumbs.db
3 | node_modules/
4 | .idea/
5 | npm-debug.log
6 | tmp/
--------------------------------------------------------------------------------
/.husky/pre-commit:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 | . "$(dirname "$0")/_/husky.sh"
3 |
4 | npm run lint
5 |
--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | save-exact=true
2 |
--------------------------------------------------------------------------------
/.nvmrc:
--------------------------------------------------------------------------------
1 | lts/hydrogen
--------------------------------------------------------------------------------
/.prettierrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "http://json.schemastore.org/prettierrc",
3 | "printWidth": 100,
4 | "singleQuote": true,
5 | "trailingComma": "all"
6 | }
7 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Changelog
2 |
3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
4 |
5 | ### [3.1.2](https://github.com/mrfratello/SyoTimer/compare/v3.1.1...v3.1.2) (2024-02-25)
6 |
7 | ### [3.1.1](https://github.com/mrfratello/SyoTimer/compare/v3.1.0...v3.1.1) (2021-09-15)
8 |
9 | ## [3.1.0](https://github.com/mrfratello/SyoTimer/compare/v3.0.0...v3.1.0) (2021-09-10)
10 |
11 |
12 | ### Features
13 |
14 | * add typescript and refactor source structure ([b1398c5](https://github.com/mrfratello/SyoTimer/commit/b1398c59978a2c91ae13f6aff29feade7b5d527f))
15 |
16 |
17 | ### Bug Fixes
18 |
19 | * use correct font types in default styles ([ffb3a78](https://github.com/mrfratello/SyoTimer/commit/ffb3a78f435bb3c764d39dbf80fe954200353958))
20 |
21 | ## [3.0.0](https://github.com/mrfratello/SyoTimer/compare/v2.1.3...v3.0.0) (2021-08-31)
22 |
23 |
24 | ### ⚠ BREAKING CHANGES
25 |
26 | * `$.syotimerLang[lang].handler` must be function with two arguments
27 | * API Changed:
28 |
29 | * use date (number, Date) property instead year, month, day, hour, minute, second props
30 | * remove properties timeZone and ignoreTransferTime
31 |
32 | ### Features
33 |
34 | * change api, update exaples ([d1abea1](https://github.com/mrfratello/SyoTimer/commit/d1abea14432e6fb4e86cbf8cc2499dc0eeb17e67))
35 | * change localization api ([cdd3436](https://github.com/mrfratello/SyoTimer/commit/cdd34366b18564f1880f53f3479f51cbd764e1ce))
36 |
37 | ### [2.1.1](https://github.com/mrfratello/SyoTimer/compare/v2.0.0...v2.1.1) (2019-10-17)
38 |
39 | ### Features
40 |
41 | * publish on npm
42 | * used universal module definition
43 | * added default CSS styles
44 |
45 | ### [2.0.0](https://github.com/mrfratello/SyoTimer/compare/v1.1.0...v2.0.0) (2017-06-24)
46 |
47 | ### Features
48 |
49 | * redesigned the structure of a plugin
50 | * `effectType` applies to all units
51 | * added possibility to sets an order of layout of units of the timer
52 | * added possibility to add new language
53 | * rename CSS classes by BEM methodology
54 |
55 | ### 1.1.0 (2016-07-30)
56 |
57 | ### Features
58 |
59 | * added time zone support
60 | * added support of the time transfer on summer/winter time
61 | * added methods support
62 | * added method of set value to option
63 | * added minified version of plugin
64 |
65 | ### 1.0.1 (2015-02-24)
66 |
67 | ### Features
68 |
69 | * added option for change effect of counting
70 | * added documentation
71 | * added examples
72 |
73 | ### 1.0.0 (2014-12-10)
74 |
75 | ### Features
76 |
77 | * first use timer on real web-site
78 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) [year] [fullname]
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # jQuery SyoTimer Plugin
2 |
3 | jQuery plugin of countdown on html page
4 |
5 | ## Demo
6 |
7 | [Examples of usage jQuery SyoTimer Plugin](https://mrfratello.github.io/SyoTimer)
8 |
9 | ## Features
10 |
11 | - Periodic counting with the specified period
12 | - Effects of change of indications of the countdown
13 | - The correct declension of nouns next to numeral numerals
14 | - An opportunity to add the language of countdown signatures which isn't included in the standard version of the plugin
15 | - Callback after the end of the countdown timer with the possibility of changing the structure of the timer
16 | - Custom formatting and styling timer
17 |
18 | ## Installing
19 |
20 | In a browser. Need download the [latest release](https://github.com/mrfratello/syotimer/releases/latest). And include the JavaScript file which you can find in the `build` folder:
21 |
22 | ```html
23 |
24 |
25 | ```
26 |
27 | Using npm:
28 |
29 | ```
30 | $ npm install jquery-syotimer
31 | ```
32 |
33 | Using yarn:
34 |
35 | ```
36 | $ yarn add jquery-syotimer
37 | ```
38 |
39 | ## Usage
40 |
41 | Syotimer plugin can be integrated with plain JavaScript or with different module loaders.
42 |
43 | Script Tag:
44 |
45 | ```html
46 |
51 | ```
52 |
53 | Common JS:
54 |
55 | ```javascript
56 | const $ = require("jquery");
57 | require("jquery-syotimer");
58 |
59 | $(".selector_to_countdown").syotimer();
60 | ```
61 |
62 | Bundlers (Webpack, etc):
63 |
64 | ```javascript
65 | import $ from "jquery";
66 | import "jquery-syotimer";
67 |
68 | $(".selector_to_countdown").syotimer();
69 | ```
70 |
71 | ## Markup
72 |
73 | Classes is named by [BEM methodology](https://en.bem.info/methodology/naming-convention/)
74 |
75 | ```html
76 |
77 |
78 |
79 |
80 |
1
81 |
day
82 |
83 |
84 |
1
85 |
hour
86 |
87 |
88 |
1
89 |
minute
90 |
91 |
92 |
1
93 |
second
94 |
95 |
96 |
97 |
98 | ```
99 |
100 | Example of css styles for syotimer in [resources/default.css](resources/default.css).
101 |
102 | ## Options
103 |
104 | | Option | Description | Type of Value | Default Value | Available Values |
105 | | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | ------------- | --------------------------------- |
106 | | `date` | date, which should count down timer | integer/Date | 0 | |
107 | | `layout` | sets an order of layout of units of the timer: days (d) of hours ('h'), minute ('m'), second ('s'). | string | 'dhms' | |
108 | | `doubleNumbers` | `true` - show hours, minutes and seconds with leading zeros (2 hours 5 minutes 4 seconds = 02:05:04) | boolean | true | |
109 | | `effectType` | The effect of changing the value of seconds | string | 'none' | 'none', 'opacity' |
110 | | `lang` | localization of a countdown signatures (days, hours, minutes, seconds) | string | 'eng' | see [Localization](#localization) |
111 | | `periodic` | `true` - the timer is periodic. If the date until which counts the timer is reached, the next value date which will count down the timer is incremented by the value `periodInterval` | boolean | false | |
112 | | `periodInterval` | the period of the timer in `periodUnit` (if `periodic` is set to `true`) | integer | 7 | >0 |
113 | | `periodUnit` | the unit of measurement period timer | string | 'd' | 'd', 'h', 'm', 's' |
114 |
115 | ## Methods
116 |
117 | The use of the methods has the following syntax:
118 |
119 | ```javascript
120 | $('.your_selector_to_countdown').syotimer(nameOfMethod, param1, param2, ... , paramN);
121 | ```
122 |
123 | ### setOption
124 |
125 | `setOption` - assigns a value to the option
126 |
127 | **Parameters:**
128 |
129 | 1. Name of option
130 | 1. Value
131 |
132 | **Code examples:**
133 |
134 | ```javascript
135 | $(".your_selector_to_countdown").syotimer("setOption", "effectType", "opacity");
136 | ```
137 |
138 | ## Localization
139 |
140 | ### Default languages
141 |
142 | By default the supported plugin languages:
143 |
144 | | Language | Value of `lang` option |
145 | | ---------- | ---------------------- |
146 | | English | 'eng' |
147 | | Russian | 'rus' |
148 | | Spanish | 'spa' |
149 | | Portuguese | 'por' |
150 | | Hebrew | 'heb' |
151 |
152 | ### Adding new language
153 |
154 | It is very simple to execute localization of a plugin under the language.
155 | You need to add the translations of signatures to timer elements as the parameter of an object of `$.syotimerLang`.
156 | Then you need determine a new language in the syotimer options. For example we will add support of Spanish
157 | (though this language is supported by default):
158 |
159 | ```javascript
160 | $.syotimerLang.spa = {
161 | seconds: ["segundo", "segundos"],
162 | minute: ["minuto", "minutos"],
163 | hour: ["hora", "horas"],
164 | day: ["dia", "dias"],
165 | };
166 |
167 | $(".your_selector_to_countdown").syotimer({
168 | lang: "spa",
169 | });
170 | ```
171 |
172 | ### Inducement of a noun after a numeral
173 |
174 | At the majority of languages a simple algorithm of determination of inducement of a noun after a numeral.
175 | If numeral is equal `1` then need input first element from array. Otherwise - second element.
176 |
177 | But there are languages in which more difficult rules of determination of the correct inducement of nouns after a numeral (for example, Russian).
178 |
179 | For example, consider a completely synthetic language (let it be called "Nenglish").
180 | It is very similar to English but there are significant differences in the spelling of nouns after numerals.
181 | Namely, the difference in the suffixes of these nouns:
182 |
183 | - if the number ends with the digit `1` then to the noun added the suffix "one" (21 secondone, 1 minuteone, ...);
184 | - if the number ends with the digit `5` then the suffix is equal "five" (35 hourfive, 5 secondfive);
185 | - otherwise the suffix is equal to "s" (24 minutes, 3 days).
186 |
187 | To add a Nenglish in Syotimer need first add all possible variants of a writing of the captions of the items of the plugin.
188 | The abbreviated name of the language will take "neng":
189 |
190 | ```javascript
191 | $.syotimerLang.neng = {
192 | second: ["secondone", "secondfive", "seconds"],
193 | minute: ["minuteone", "minutefive", "minutes"],
194 | hour: ["hourone", "hourfive", "hours"],
195 | day: ["dayone", "dayfive", "days"],
196 | handler: function nengNumeral(number, words) {
197 | var lastDigit = number % 10;
198 | var index = 2;
199 | if (lastDigit === 1) {
200 | index = 0;
201 | } else if (lastDigit === 5) {
202 | index = 1;
203 | }
204 | return words[index];
205 | },
206 | };
207 | ```
208 |
209 | The "handler" must contain a function that receive the two arguments: a number and an array of nouns.
210 | This method should return the the noun.
211 |
212 | Then only have to specify the language when you create the instance Syotimer:
213 |
214 | ```javascript
215 | $(".your_selector_to_countdown").syotimer({
216 | lang: "neng",
217 | });
218 | ```
219 |
220 | ## Requirements
221 |
222 | jQuery SyoTimer Plugin has been tested with jQuery 1.7+ on all major browsers:
223 |
224 | - Firefox 2+ (Win, Mac, Linux);
225 | - IE8+ (Win);
226 | - Chrome 6+ (Win, Mac, Linux, Android, iPhone);
227 | - Safari 3.2+ (Win, Mac, iPhone);
228 | - Opera 8+ (Win, Mac, Linux, Android, iPhone).
229 |
230 | Gratitude to [Yuri Danilchenko](https://github.com/yuri-danilchenko) and Elena Levin.
231 |
--------------------------------------------------------------------------------
/assets/images/timer.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mrfratello/SyoTimer/b7a8c8d5e371c9262d74d0ee141aca601b969efe/assets/images/timer.png
--------------------------------------------------------------------------------
/assets/images/timer_long.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mrfratello/SyoTimer/b7a8c8d5e371c9262d74d0ee141aca601b969efe/assets/images/timer_long.png
--------------------------------------------------------------------------------
/assets/js/service.js:
--------------------------------------------------------------------------------
1 | jQuery(function ($) {
2 | $("pre")
3 | .hide()
4 | .before(
5 | ''
6 | );
7 |
8 | $(".toggle-source-code").on("click", function () {
9 | var button = $(this),
10 | code = button.next("pre");
11 | if (button.hasClass("toggle-source-code_action_show")) {
12 | button
13 | .removeClass("toggle-source-code_action_show")
14 | .addClass("toggle-source-code_action_hide");
15 | code.slideDown();
16 | } else if (button.hasClass("toggle-source-code_action_hide")) {
17 | button
18 | .removeClass("toggle-source-code_action_hide")
19 | .addClass("toggle-source-code_action_show");
20 | code.slideUp();
21 | }
22 | });
23 | });
24 |
--------------------------------------------------------------------------------
/assets/js/syotimer.examples.js:
--------------------------------------------------------------------------------
1 | jQuery(function ($) {
2 | /* Simple Timer. The countdown to 20:30 2035.05.09 */
3 | $('#simple-timer').syotimer({
4 | date: new Date(2035, 4, 9, 20, 30),
5 | });
6 |
7 | /* Timer with Head and Foot. Countdown is over */
8 | $('#expired-timer').syotimer({
9 | date: new Date(1990, 0),
10 | headTitle: '
Timer with header and footer. Countdown is over
',
11 | footTitle: 'Footer of timer.',
12 | });
13 |
14 | /* Callback after the end of the countdown timer */
15 | $('#expired-timer_event').syotimer({
16 | date: new Date(2000, 11, 31),
17 | headTitle: '
Timer with header and footer. Countdown is over
',
18 | footTitle: 'Footer of timer.',
19 | afterDeadline: function (syotimer) {
20 | syotimer.bodyBlock.html('
The countdown is finished 00:00 2000.12.31
');
21 | syotimer.headBlock.html('
Callback after the end of the countdown timer
');
22 | syotimer.footBlock.html(
23 | '' + 'Footer of timer after countdown is finished' + '',
24 | );
25 | },
26 | });
27 |
28 | /* Periodic Timer. Period is equal 3 minutes. Effect of fading in */
29 | $('#periodic-timer_period_minutes').syotimer({
30 | date: new Date(2015, 0, 1),
31 | layout: 'hms',
32 | doubleNumbers: false,
33 | effectType: 'opacity',
34 |
35 | periodUnit: 'm',
36 | periodic: true,
37 | periodInterval: 3,
38 | });
39 |
40 | /* Periodic Timer. Period is equal 10 days */
41 | $('#periodic-timer_period_days').syotimer({
42 | date: new Date(2015, 0, 1, 20),
43 | layout: 'hms',
44 | periodic: true,
45 | periodInterval: 10,
46 | periodUnit: 'd',
47 | });
48 |
49 | /* Demonstrate layout. Period is equal 2 hours. Display only seconds */
50 | $('#layout-timer_only-seconds').syotimer({
51 | layout: 's',
52 | periodic: true,
53 | periodInterval: 2,
54 | periodUnit: 'h',
55 | });
56 |
57 | /* Demonstrate layout. Period is equal 2 days and 5 hours.
58 | Units of countdown in reverse order */
59 | $('#layout-timer_reversed-units').syotimer({
60 | layout: 'smhd',
61 | effectType: 'opacity',
62 |
63 | periodic: true,
64 | periodInterval: 53,
65 | periodUnit: 'h',
66 | });
67 |
68 | /* Demonstrate layout. Period is equal 2 days and 5 hours.
69 | Display only days and minutes in reverse order */
70 | $('#layout-timer_mixed-units').syotimer({
71 | layout: 'md',
72 |
73 | periodic: true,
74 | periodInterval: 1777,
75 | periodUnit: 'm',
76 | });
77 |
78 | /* Periodic Timer. Countdown timer with given time zone */
79 | $('#periodic-timer_timezone_given').syotimer({
80 | date: new Date('2000-07-01T18:00:00.000+02:00'),
81 | layout: 'hms',
82 |
83 | periodic: true,
84 | periodInterval: 1,
85 | periodUnit: 'd',
86 | });
87 |
88 | /**
89 | * Periodic Timer.
90 | * Change options: doubleNumbers, effect type, language
91 | */
92 | var changeOptionsTimer = $('#periodic-timer_change-options');
93 | var effectTypeEl = $('#select-effect');
94 | var formatNumberEl = $('#select-format-number');
95 | var languageEl = $('#select-language');
96 |
97 | changeOptionsTimer.syotimer({
98 | periodic: true,
99 | periodInterval: 10,
100 | periodUnit: 'd',
101 | });
102 |
103 | effectTypeEl.on('change', function () {
104 | var effectType = $('option:selected', this).val();
105 | changeOptionsTimer.syotimer('setOption', 'effectType', effectType);
106 | });
107 |
108 | formatNumberEl.on('change', function () {
109 | var formatNumberValue = $('option:selected', this).val();
110 | var doubleNumbers = formatNumberValue === 'true';
111 | changeOptionsTimer.syotimer('setOption', 'doubleNumbers', doubleNumbers);
112 | });
113 |
114 | languageEl.on('change', function () {
115 | var language = $('option:selected', this).val();
116 | changeOptionsTimer.syotimer('setOption', 'lang', language);
117 | });
118 |
119 | /**
120 | * Localization in timer.
121 | * Add new language
122 | */
123 |
124 | // Adding of a words for signatures of countdown
125 | $.syotimerLang.neng = {
126 | second: ['secondone', 'secondfive', 'seconds'],
127 | minute: ['minuteone', 'minutefive', 'minutes'],
128 | hour: ['hourone', 'hourfive', 'hours'],
129 | day: ['dayone', 'dayfive', 'days'],
130 | // Adding of the handler that selects an index from the list of words
131 | // based on ahead the going number
132 | handler: function nengNumeral(number, words) {
133 | var lastDigit = number % 10;
134 | var index = 2;
135 | if (lastDigit === 1) {
136 | index = 0;
137 | } else if (lastDigit === 5) {
138 | index = 1;
139 | }
140 | return words[index];
141 | },
142 | };
143 |
144 | $('#periodic-timer_localization_new-english').syotimer({
145 | lang: 'neng',
146 | layout: 'ms',
147 |
148 | periodic: true,
149 | periodInterval: 6,
150 | periodUnit: 'm',
151 | });
152 | });
153 |
--------------------------------------------------------------------------------
/build/jquery.syotimer.d.ts:
--------------------------------------------------------------------------------
1 | interface SyoTimerInternalOptions {
2 | date: Date | number;
3 | /**
4 | * sets an order of layout of units of the timer:
5 | * days (d) of hours ('h'), minute ('m'), second ('s').
6 | */
7 | layout: string;
8 | /**
9 | * `true` - the timer is periodic.
10 | * If the date until which counts the timer is reached,
11 | * the next value date which will count down
12 | * the timer is incremented by the value `periodInterval`
13 | */
14 | periodic: boolean;
15 | /**
16 | * the period of the timer in `periodUnit` (if `periodic` is set to `true`)
17 | */
18 | periodInterval: number;
19 | /**
20 | * the unit of measurement period timer
21 | */
22 | periodUnit: Unit;
23 | /**
24 | * `true` - show hours, minutes and seconds with leading zeros
25 | * (2 hours 5 minutes 4 seconds = 02:05:04)
26 | */
27 | doubleNumbers: boolean;
28 | /**
29 | * The effect of changing the value of seconds
30 | */
31 | effectType: SyoTimerEffectType;
32 | /**
33 | * localization of a countdown signatures (days, hours, minutes, seconds)
34 | */
35 | lang: string;
36 | /**
37 | * text above the countdown (may be as html string)
38 | */
39 | headTitle: string;
40 | /**
41 | * text under the countdown (may be as html string)
42 | */
43 | footTitle: string;
44 | afterDeadline(timerBlock: SyoTimerTimerBlock): void;
45 | itemTypes: UnitLong[];
46 | itemsHas: ItemsHas;
47 | }
48 |
49 | type SyoTimerOptions = Partial>;
50 |
51 | type SyoTimerOptionProps = Exclude;
52 | type SyoTimerOptionValues = Required[SyoTimerOptionProps];
53 |
54 | interface SyoTimerTimerBlock {
55 | headBlock: JQuery;
56 | bodyBlock: JQuery;
57 | footBlock: JQuery;
58 | }
59 |
60 | type SyoTimerEffectType = 'none' | 'opacity';
61 |
62 | type SyoTimerMethods = 'setOption';
63 |
64 | type UnitLong = 'day' | 'hour' | 'minute' | 'second';
65 | type UnitShort = 'd' | 'h' | 'm' | 's';
66 |
67 | type Unit = UnitShort | UnitLong;
68 |
69 | type ItemsHas = Record;
70 |
71 | interface LanguageHandler {
72 | (n: number, words: string[]): string;
73 | }
74 |
75 | type LanguageConfigBase = Record;
76 |
77 | interface LanguageConfig extends LanguageConfigBase {
78 | handler?: LanguageHandler;
79 | }
80 |
81 | type SyoTimerLocalization = Record;
82 |
83 | declare global {
84 | interface JQuery {
85 | syotimer(options: SyoTimerOptions): JQuery;
86 | syotimer(
87 | method: SyoTimerMethods,
88 | property: SyoTimerOptionProps,
89 | value: SyoTimerOptionValues,
90 | ): JQuery;
91 | }
92 |
93 | interface JQueryStatic {
94 | syotimerLang: SyoTimerLocalization;
95 | }
96 | }
97 |
98 | export type { SyoTimerLocalization, SyoTimerOptions };
99 |
--------------------------------------------------------------------------------
/build/jquery.syotimer.js:
--------------------------------------------------------------------------------
1 | /**
2 | * SyoTimer - jquery countdown plugin
3 | * @version: 3.1.1
4 | * @author: John Syomochkin
5 | * @homepage: https://mrfratello.github.io/SyoTimer
6 | * @repository: git+https://github.com/mrfratello/SyoTimer.git
7 | * @license: under MIT license
8 | */
9 | (function ($$1) {
10 | 'use strict';
11 |
12 | $$1.syotimerLang = {
13 | rus: {
14 | second: ['секунда', 'секунды', 'секунд'],
15 | minute: ['минута', 'минуты', 'минут'],
16 | hour: ['час', 'часа', 'часов'],
17 | day: ['день', 'дня', 'дней'],
18 | handler: function rusNumeral(number, words) {
19 | var cases = [2, 0, 1, 1, 1, 2];
20 | if (number % 100 > 4 && number % 100 < 20) {
21 | return words[2];
22 | }
23 | var index = cases[number % 10 < 5 ? number % 10 : 5];
24 | return words[index];
25 | },
26 | },
27 | eng: {
28 | second: ['second', 'seconds'],
29 | minute: ['minute', 'minutes'],
30 | hour: ['hour', 'hours'],
31 | day: ['day', 'days'],
32 | },
33 | por: {
34 | second: ['segundo', 'segundos'],
35 | minute: ['minuto', 'minutos'],
36 | hour: ['hora', 'horas'],
37 | day: ['dia', 'dias'],
38 | },
39 | spa: {
40 | second: ['segundo', 'segundos'],
41 | minute: ['minuto', 'minutos'],
42 | hour: ['hora', 'horas'],
43 | day: ['día', 'días'],
44 | },
45 | heb: {
46 | second: ['שניה', 'שניות'],
47 | minute: ['דקה', 'דקות'],
48 | hour: ['שעה', 'שעות'],
49 | day: ['יום', 'ימים'],
50 | },
51 | };
52 |
53 | var DAY = 'day';
54 | var HOUR = 'hour';
55 | var MINUTE = 'minute';
56 | var SECOND = 'second';
57 | var DAY_IN_SEC = 24 * 60 * 60;
58 | var HOUR_IN_SEC = 60 * 60;
59 | var MINUTE_IN_SEC = 60;
60 | var LAYOUT_TYPES = {
61 | d: DAY,
62 | h: HOUR,
63 | m: MINUTE,
64 | s: SECOND,
65 | };
66 | var unitLinkedList = {
67 | list: [SECOND, MINUTE, HOUR, DAY],
68 | next: function (current) {
69 | var currentIndex = this.list.indexOf(current);
70 | return currentIndex < this.list.length ? this.list[currentIndex + 1] : null;
71 | },
72 | prev: function (current) {
73 | var currentIndex = this.list.indexOf(current);
74 | return currentIndex > 0 ? this.list[currentIndex - 1] : null;
75 | },
76 | };
77 | var defaultItemsHas = {
78 | second: false,
79 | minute: false,
80 | hour: false,
81 | day: false,
82 | };
83 | var defaultOptions = {
84 | date: 0,
85 | layout: 'dhms',
86 | periodic: false,
87 | periodInterval: 7,
88 | periodUnit: 'd',
89 | doubleNumbers: true,
90 | effectType: 'none',
91 | lang: 'eng',
92 | headTitle: '',
93 | footTitle: '',
94 | afterDeadline: function (timerBlock) {
95 | timerBlock.bodyBlock.html('
The countdown is finished!
');
96 | },
97 | itemTypes: ['day', 'hour', 'minute', 'second'],
98 | itemsHas: $$1.extend({}, defaultItemsHas),
99 | };
100 |
101 | /**
102 | * Determine a unit of period in milliseconds
103 | */
104 | function getPeriodUnit(periodUnit) {
105 | switch (periodUnit) {
106 | case 'd':
107 | case DAY:
108 | return DAY_IN_SEC;
109 | case 'h':
110 | case HOUR:
111 | return HOUR_IN_SEC;
112 | case 'm':
113 | case MINUTE:
114 | return MINUTE_IN_SEC;
115 | case 's':
116 | case SECOND:
117 | default:
118 | return 1;
119 | }
120 | }
121 | /**
122 | * Formation of numbers with leading zeros
123 | */
124 | function format2(numb, isUse) {
125 | return numb <= 9 && !!isUse ? "0".concat(numb) : String(numb);
126 | }
127 | function getItemTypesByLayout(layout) {
128 | var itemTypes = [];
129 | for (var i = 0; i < layout.length; i += 1) {
130 | itemTypes.push(LAYOUT_TYPES[layout[i]]);
131 | }
132 | return itemTypes;
133 | }
134 | /**
135 | * Getting count of units to deadline
136 | */
137 | function getUnitsToDeadLine(secondsToDeadLine) {
138 | var remainsSeconds = secondsToDeadLine;
139 | var unit = DAY;
140 | var unitsToDeadLine = {
141 | day: 0,
142 | hour: 0,
143 | minute: 0,
144 | second: 0,
145 | };
146 | do {
147 | var unitInMilliSec = getPeriodUnit(unit);
148 | unitsToDeadLine[unit] = Math.floor(remainsSeconds / unitInMilliSec);
149 | remainsSeconds %= unitInMilliSec;
150 | // eslint-disable-next-line no-cond-assign
151 | } while ((unit = unitLinkedList.prev(unit)));
152 | return unitsToDeadLine;
153 | }
154 | /**
155 | * Return once cell DOM of countdown: day, hour, minute, second
156 | */
157 | function getTimerItem() {
158 | var timerCellValue = $('', {
159 | class: 'syotimer-cell__value',
160 | text: '0',
161 | });
162 | var timerCellUnit = $('', { class: 'syotimer-cell__unit' });
163 | var timerCell = $('', { class: 'syotimer-cell' });
164 | timerCell.append(timerCellValue).append(timerCellUnit);
165 | return timerCell;
166 | }
167 | /**
168 | * Getting count of seconds to deadline
169 | */
170 | function getSecondsToDeadLine(differenceInMilliSec, options) {
171 | var differenceInSeconds = differenceInMilliSec / 1000;
172 | differenceInSeconds = Math.floor(differenceInSeconds);
173 | if (!options.periodic)
174 | return differenceInSeconds;
175 | var differenceInUnit;
176 | var periodUnitInSeconds = getPeriodUnit(options.periodUnit);
177 | var fullTimeUnitsBetween = differenceInMilliSec / (periodUnitInSeconds * 1000);
178 | fullTimeUnitsBetween = Math.ceil(fullTimeUnitsBetween);
179 | fullTimeUnitsBetween = Math.abs(fullTimeUnitsBetween);
180 | if (differenceInSeconds >= 0) {
181 | differenceInUnit = fullTimeUnitsBetween % options.periodInterval;
182 | differenceInUnit = differenceInUnit === 0 ? options.periodInterval : differenceInUnit;
183 | differenceInUnit -= 1;
184 | }
185 | else {
186 | differenceInUnit = options.periodInterval - (fullTimeUnitsBetween % options.periodInterval);
187 | }
188 | var additionalInUnit = differenceInSeconds % periodUnitInSeconds;
189 | // fix когда дедлайн раньше текущей даты,
190 | // возникает баг с неправильным расчетом интервала при different пропорциональной periodUnit
191 | if (additionalInUnit === 0 && differenceInSeconds < 0) {
192 | differenceInUnit -= 1;
193 | }
194 | var secondsToDeadLine = Math.abs(differenceInUnit * periodUnitInSeconds + additionalInUnit);
195 | return secondsToDeadLine;
196 | }
197 | /**
198 | * Universal function for get correct inducement of nouns after a numeral (`number`)
199 | */
200 | var universal = function (n, words) { return (n === 1 ? words[0] : words[1]); };
201 | /**
202 | * Getting the correct declension of words after numerals
203 | */
204 | function getNumeral(n, lang, unit) {
205 | var handler = $.syotimerLang[lang].handler || universal;
206 | var words = $.syotimerLang[lang][unit];
207 | return handler(n, words);
208 | }
209 |
210 | var SyoTimer = /** @class */ (function () {
211 | function SyoTimer(element, options) {
212 | this.element = $$1(element);
213 | this.element.data('syotimer-options', options);
214 | this.render();
215 | }
216 | /**
217 | * Rendering base elements of countdown
218 | * @private
219 | */
220 | SyoTimer.prototype.render = function () {
221 | var options = this.element.data('syotimer-options');
222 | var timerItem = getTimerItem();
223 | var headBlock = $$1('', { class: 'syotimer__head' }).html(options.headTitle);
224 | var bodyBlock = $$1('', { class: 'syotimer__body' });
225 | var footBlock = $$1('', { class: 'syotimer__footer' }).html(options.footTitle);
226 | var itemBlocks = {};
227 | for (var i = 0; i < options.itemTypes.length; i += 1) {
228 | var item = timerItem.clone();
229 | item.addClass("syotimer-cell_type_".concat(options.itemTypes[i]));
230 | bodyBlock.append(item);
231 | itemBlocks[options.itemTypes[i]] = item;
232 | }
233 | var timerBlocks = { headBlock: headBlock, bodyBlock: bodyBlock, footBlock: footBlock };
234 | this.element
235 | .data('syotimer-blocks', timerBlocks)
236 | .data('syotimer-items', itemBlocks)
237 | .addClass('syotimer')
238 | .append(headBlock)
239 | .append(bodyBlock)
240 | .append(footBlock);
241 | };
242 | /**
243 | * Handler called per seconds while countdown is not over
244 | */
245 | SyoTimer.prototype.tick = function () {
246 | var options = this.element.data('syotimer-options');
247 | $$1('.syotimer-cell > .syotimer-cell__value', this.element).css('opacity', 1);
248 | var currentTime = new Date().getTime();
249 | var deadLineTime = options.date instanceof Date ? options.date.getTime() : options.date;
250 | var differenceInMilliSec = deadLineTime - currentTime;
251 | var secondsToDeadLine = getSecondsToDeadLine(differenceInMilliSec, options);
252 | if (secondsToDeadLine >= 0) {
253 | this.refreshUnitsDom(secondsToDeadLine);
254 | this.applyEffectSwitch(options.effectType);
255 | }
256 | else {
257 | var elementBox = $$1.extend(this.element, this.element.data('syotimer-blocks'));
258 | options.afterDeadline(elementBox);
259 | }
260 | };
261 | /**
262 | * Refresh unit DOM of countdown
263 | * @private
264 | */
265 | SyoTimer.prototype.refreshUnitsDom = function (secondsToDeadLine) {
266 | var options = this.element.data('syotimer-options');
267 | var itemBlocks = this.element.data('syotimer-items');
268 | var unitList = options.itemTypes;
269 | var unitsToDeadLine = getUnitsToDeadLine(secondsToDeadLine);
270 | if (!options.itemsHas.day) {
271 | unitsToDeadLine.hour += unitsToDeadLine.day * 24;
272 | }
273 | if (!options.itemsHas.hour) {
274 | unitsToDeadLine.minute += unitsToDeadLine.hour * 60;
275 | }
276 | if (!options.itemsHas.minute) {
277 | unitsToDeadLine.second += unitsToDeadLine.minute * 60;
278 | }
279 | for (var i = 0; i < unitList.length; i += 1) {
280 | var unit = unitList[i];
281 | var unitValue = unitsToDeadLine[unit];
282 | var itemBlock = itemBlocks[unit];
283 | itemBlock.data('syotimer-unit-value', unitValue);
284 | $$1('.syotimer-cell__value', itemBlock).html(format2(unitValue, unit !== DAY ? options.doubleNumbers : false));
285 | $$1('.syotimer-cell__unit', itemBlock).html(getNumeral(unitValue, options.lang, unit));
286 | }
287 | };
288 | /**
289 | * Applying effect of changing numbers
290 | * @private
291 | */
292 | SyoTimer.prototype.applyEffectSwitch = function (effectType, unit) {
293 | var _this = this;
294 | if (unit === void 0) { unit = SECOND; }
295 | switch (effectType) {
296 | case 'opacity': {
297 | var itemBlocks = this.element.data('syotimer-items');
298 | var unitItemBlock = itemBlocks[unit];
299 | if (unitItemBlock) {
300 | var nextUnit = unitLinkedList.next(unit);
301 | var unitValue = unitItemBlock.data('syotimer-unit-value');
302 | $$1('.syotimer-cell__value', unitItemBlock).animate({ opacity: 0.1 }, 1000, 'linear', function () {
303 | return _this.tick();
304 | });
305 | if (nextUnit && unitValue === 0) {
306 | this.applyEffectSwitch(effectType, nextUnit);
307 | }
308 | }
309 | return;
310 | }
311 | case 'none':
312 | default: {
313 | setTimeout(function () { return _this.tick(); }, 1000);
314 | }
315 | }
316 | };
317 | return SyoTimer;
318 | }());
319 | function mapSyoTimer(elements, inputOptions) {
320 | var options = $$1.extend({}, defaultOptions, inputOptions || {});
321 | options.itemTypes = getItemTypesByLayout(options.layout);
322 | options.itemsHas = $$1.extend({}, defaultItemsHas);
323 | for (var i = 0; i < options.itemTypes.length; i += 1) {
324 | options.itemsHas[options.itemTypes[i]] = true;
325 | }
326 | return elements.each(function init() {
327 | var timer = new SyoTimer(this, options);
328 | timer.tick();
329 | });
330 | }
331 |
332 | var methods = {
333 | setOption: function (name, value) {
334 | var elementBox = $$1(this);
335 | var options = elementBox.data('syotimer-options');
336 | if (Object.prototype.hasOwnProperty.call(options, name)) {
337 | options[name] = value;
338 | elementBox.data('syotimer-options', options);
339 | }
340 | },
341 | };
342 | $$1.fn.extend({
343 | syotimer: function (options, property, value) {
344 | if (typeof options === 'string' && options === 'setOption') {
345 | return this.each(function method() {
346 | methods[options].apply(this, [property, value]);
347 | });
348 | }
349 | if (options === null || options === undefined || typeof options === 'object') {
350 | return mapSyoTimer(this, options);
351 | }
352 | return $$1.error('SyoTimer. Error in call methods: methods is not exist');
353 | },
354 | });
355 |
356 | })(jQuery);
357 |
--------------------------------------------------------------------------------
/build/jquery.syotimer.min.js:
--------------------------------------------------------------------------------
1 | /**
2 | * SyoTimer v.3.1.1 | under MIT license
3 | * https://mrfratello.github.io/SyoTimer
4 | */
5 | !function(e){"use strict";e.syotimerLang={rus:{second:["секунда","секунды","секунд"],minute:["минута","минуты","минут"],hour:["час","часа","часов"],day:["день","дня","дней"],handler:function(e,t){return e%100>4&&e%100<20?t[2]:t[[2,0,1,1,1,2][e%10<5?e%10:5]]}},eng:{second:["second","seconds"],minute:["minute","minutes"],hour:["hour","hours"],day:["day","days"]},por:{second:["segundo","segundos"],minute:["minuto","minutos"],hour:["hora","horas"],day:["dia","dias"]},spa:{second:["segundo","segundos"],minute:["minuto","minutos"],hour:["hora","horas"],day:["día","días"]},heb:{second:["שניה","שניות"],minute:["דקה","דקות"],hour:["שעה","שעות"],day:["יום","ימים"]}};var t="day",i="hour",n="minute",o="second",s=86400,r=3600,a=60,d={d:t,h:i,m:n,s:o},l={list:[o,n,i,t],next:function(e){var t=this.list.indexOf(e);return t0?this.list[t-1]:null}},u={second:!1,minute:!1,hour:!1,day:!1},c={date:0,layout:"dhms",periodic:!1,periodInterval:7,periodUnit:"d",doubleNumbers:!0,effectType:"none",lang:"eng",headTitle:"",footTitle:"",afterDeadline:function(e){e.bodyBlock.html('
/* Timer with Head and Foot. Countdown is over */
122 | $("#expired-timer").syotimer({
123 | date:newDate(1990, 0),
124 | headTitle:"<h3>Timer with header and footer. Countdown is over</h3>",
125 | footTitle:'<i style="color: brown;">Footer of timer.</i>',
126 | });
127 |
128 |
129 |
130 |
131 |
132 |
/* Callback after the end of the countdown timer */
135 | $("#expired-timer_event").syotimer({
136 | date:newDate(2000, 11, 31),
137 | headTitle:"<h3>Timer with header and footer. Countdown is over</h3>",
138 | footTitle:'<i style="color: brown;">Footer of timer.</i>',
139 | afterDeadline:function (syotimer) {
140 | syotimer.bodyBlock.html(
141 | "<p>The countdown is finished 00:00 2000.12.31</p>"
142 | );
143 | syotimer.headBlock.html(
144 | "<h3>Callback after the end of the countdown timer</h3>"
145 | );
146 | syotimer.footBlock.html(
147 | '<em style="color:brown;">'+
148 | "Footer of timer after countdown is finished"+
149 | "</em>"
150 | );
151 | },
152 | });
153 |
154 |
155 |
156 |
157 |
158 | Periodic Timer. The countdown begins first through each 3 minutes. Effect of fading in
159 |
Demonstrate layout. Period is equal 2 days and 5 hours.
217 |
218 |
219 |
/* Demonstrate layout. Period is equal 2 days and 5 hours.
222 | Units of countdown in reverse order */
223 | $("#layout-timer_reversed-units").syotimer({
224 | layout:"smhd",
225 | effectType:"opacity",
226 |
227 | periodic:true,
228 | periodInterval:53,
229 | periodUnit:"h",
230 | });
231 |
232 |
233 |
234 |
235 |
Display only days and minutes in reverse order
236 |
237 | Demonstrate layout. Period is equal 1 days, 5 hours and 37 minutes.
238 |
239 |
240 |
241 |
/* Demonstrate layout. Period is equal 2 days and 5 hours.
244 | Display only days and minutes in reverse order */
245 | $("#layout-timer_mixed-units").syotimer({
246 | layout:"md",
247 |
248 | periodic:true,
249 | periodInterval:1777,
250 | periodUnit:"m",
251 | });
252 |
253 |
254 |
255 |
256 |
Countdown timer with given timezone
257 |
The deadline is 18:00:00 by the time Rome, Italy (UTC+2)
258 |
259 |
260 |
/* Periodic Timer. Countdown timer with given time zone */
263 | $("#periodic-timer_timezone_given").syotimer({
264 | date:newDate("2000-07-01T18:00:00.000+02:00"),
265 | layout:"hms",
266 |
267 | periodic:true,
268 | periodInterval:1,
269 | periodUnit:"d",
270 | });
271 |
Demonstrate adding the new language of signatures.
338 |
339 |
340 |
341 | Nenglish is a synthetic language. It is very similar to English but there are significant
342 | differences in the spelling of nouns after numerals. Namely, the difference in the
343 | suffixes of these nouns:
344 |
345 |
346 |
347 | if the number ends with the digit 1 then to the noun added the suffix "one"
348 | (21 secondone, 1 minuteone, ...);
349 |
350 |
351 | if the number ends with the digit 5 then the suffix is equal "five" (35
352 | hourfive, 5 secondfive);
353 |
354 |
otherwise the suffix is equal to "s" (24 minutes, 3 days).
355 |
356 |
357 |
358 |
/**
359 | * Localization in timer.
360 | * Add new language
361 | */
362 |
363 | // Adding of a words for signatures of countdown
364 | $.syotimerLang.neng = {
365 | second: ["secondone", "secondfive", "seconds"],
366 | minute: ["minuteone", "minutefive", "minutes"],
367 | hour: ["hourone", "hourfive", "hours"],
368 | day: ["dayone", "dayfive", "days"],
369 | // Adding of the handler that selects an index from the list of words
370 | // based on ahead the going number
371 | handler:function nengNumeral(number, words) {
372 | var lastDigit = number %10;
373 | var index =2;
374 | if (lastDigit ===1) {
375 | index =0;
376 | } elseif (lastDigit ===5) {
377 | index =1;
378 | }
379 | return words[index];
380 | },
381 | };
382 |
383 | $("#periodic-timer_localization_new-english").syotimer({
384 | lang:"neng",
385 | layout:"ms",
386 |
387 | periodic:true,
388 | periodInterval:6,
389 | periodUnit:"m",
390 | });
391 |
405 |
406 |
407 |
408 |
409 |
410 |
411 |
412 |
413 |
414 |
415 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "jquery-syotimer",
3 | "projectName": "SyoTimer",
4 | "version": "3.1.2",
5 | "description": "jquery countdown plugin",
6 | "main": "./build/jquery.syotimer.js",
7 | "types": "./build/jquery.syotimer.d.ts",
8 | "files": [
9 | "build",
10 | "resources"
11 | ],
12 | "repository": {
13 | "type": "git",
14 | "url": "git+https://github.com/mrfratello/SyoTimer.git"
15 | },
16 | "scripts": {
17 | "start": "rollup -c -w",
18 | "build": "rollup -c",
19 | "format": "prettier --write \"./source/\"",
20 | "format:check": "prettier --check \"./source/\"",
21 | "eslint": "eslint source/**",
22 | "tslint": "tsc -b --incremental",
23 | "lint": "npm run format:check && npm run tslint && npm run eslint",
24 | "test": "vitest --run",
25 | "test:ui": "vitest --ui",
26 | "release:before": "npm run lint && npm run build && git add .",
27 | "release": "standard-version -a",
28 | "prepare": "husky install"
29 | },
30 | "keywords": [
31 | "countdown",
32 | "jquery",
33 | "plugin"
34 | ],
35 | "author": "John Syomochkin