| 1 |
=== CoolClock - a Javascript Analog Clock === |
| 2 |
Contributors: RavanH |
| 3 |
Donate link: https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=ravanhagen%40gmail%2ecom&item_name=CoolClock%20for%20WordPress&item_number=1%2e3%2e4%2e9&no_shipping=0&tax=0&charset=UTF%2d8¤cy_code=EUR |
| 4 |
Tags: clock, analog clock, coolclock, javascript, jquery, widget, shortcode, logarithmic clock |
| 5 |
Requires at least: 2.9 |
| 6 |
Tested up to: 4.3 |
| 7 |
Stable tag: 3.1 |
| 8 |
|
| 9 |
Show an analog clock on your WordPress site sidebar or in post and page content. |
| 10 |
|
| 11 |
== Description == |
| 12 |
|
| 13 |
This plugin integrates [CoolClock - The Javascript Analog Clock](http://randomibis.com/coolclock/) into your WordPress site. You can add it as a **widget** to your sidebar or insert it into your posts and pages with a **shortcode**. See [the FAQ's](http://wordpress.org/extend/plugins/coolclock/faq/) for available shortcode parameters and how to build the clock into your theme. |
| 14 |
|
| 15 |
= Features = |
| 16 |
|
| 17 |
- Can be added via a widget, shortcode or theme function |
| 18 |
- No flash, meaning compatible with pads and most other javascript enabled mobile devices |
| 19 |
- 22 different skins to choose from or |
| 20 |
- Custom skin option to create your own skin style |
| 21 |
- Linear or logarithmic time scale |
| 22 |
|
| 23 |
Read more on http://status301.net/wordpress-plugins/coolclock/ or see [the FAQ's](http://wordpress.org/extend/plugins/coolclock/faq/) to learn how to configure your own skin settings. |
| 24 |
|
| 25 |
= Pro features = |
| 26 |
|
| 27 |
- Show date or 24h digital time |
| 28 |
- Background image or color |
| 29 |
- Border radius (rounded corners for background)) |
| 30 |
- Advanced positioning options (relative to background) |
| 31 |
- Advanced shortcode parameters (including background image and custom skin) |
| 32 |
- One extra clean skin for use with background image |
| 33 |
- Support on the [CoolClock Pro forum](https://premium.status301.net/support/forum/coolclock-pro/) |
| 34 |
|
| 35 |
Pro features come with the [CoolClock - Advanced extension](https://premium.status301.net/downloads/coolclock-advanced/). |
| 36 |
|
| 37 |
= Translators = |
| 38 |
|
| 39 |
- **Dutch** * R.A. van Hagen http://status301.net/ (version 3.0) |
| 40 |
- **French** * R.A. van Hagen http://status301.net/ (version 3.0) |
| 41 |
- **Serbian** * Borisa Djuraskovic - WebHostingHub http://www.webhostinghub.com/ (version 2.9.4) |
| 42 |
- **Russian** * Наталия Завьялова - http://time-impressions.ru (version 2.9.8) |
| 43 |
|
| 44 |
Please [contact me](http://status301.net/contact-en/) to submit your translation and get mentioned here :) |
| 45 |
|
| 46 |
|
| 47 |
== Installation == |
| 48 |
|
| 49 |
= Wordpress = |
| 50 |
|
| 51 |
Quick installation: [Install now](http://coveredwebservices.com/wp-plugin-install/?plugin=coolclock) ! |
| 52 |
|
| 53 |
… OR … |
| 54 |
|
| 55 |
Search for "coolclock" and install with that slick **Plugins > Add New** back-end page. |
| 56 |
|
| 57 |
… OR … |
| 58 |
|
| 59 |
Follow these steps: |
| 60 |
|
| 61 |
1. Download archive. |
| 62 |
|
| 63 |
2. Upload the zip file via the Plugins > Add New > Upload page … OR … unpack and upload the complete directory with your favourite FTP client to the /plugins/ folder. |
| 64 |
|
| 65 |
3. Activate the plugin on the Plug-ins page. |
| 66 |
|
| 67 |
Now visit your Widgets admin page and add the Analog Clock widget to your sidebar. :) |
| 68 |
|
| 69 |
|
| 70 |
== Frequently Asked Questions == |
| 71 |
|
| 72 |
= Where do I start? = |
| 73 |
|
| 74 |
There is no options page. Just go to your Appearance > Widgets admin page and find the new Analog Clock widget. Add it to your sidebar and change settings if you want to see another than the default clock. |
| 75 |
|
| 76 |
Other ways to integrate a clock into your site are ahortcodes or a theme function. See instructions below. |
| 77 |
|
| 78 |
= What options does the widget have? = |
| 79 |
|
| 80 |
First of all, you can pick a preset skin. There are 21 skins made by other users and one Minimal skin that only shows the clock arms, that can be useful for placing over a custom background image. Then there are: |
| 81 |
|
| 82 |
- Custom skin parameters - see question below; |
| 83 |
- Radius - changes the clock size; |
| 84 |
- Hide second hand; |
| 85 |
- Show digital time or date; |
| 86 |
- GMT Offset - use this if you want one or more clocks to show the time for other timezones; |
| 87 |
- Scale - linear is our standard clock scale, the other two show a logarithmic time scale; |
| 88 |
- Align - left, center or right; |
| 89 |
- Subtext - optional text, centered below the clock. |
| 90 |
|
| 91 |
Then there are extra options availabe in the [CoolClock - Advanced extension](https://premium.status301.net/downloads/coolclock-advanced/) which allow for more customisation: |
| 92 |
|
| 93 |
- Background image - define the full URL or path to an image to serve as background; |
| 94 |
- Repeat image; |
| 95 |
- Background size - stretch or cover to make it match your clock size; |
| 96 |
- Background position - center, top, right, bottom or left of the wrapping div (define div size below); |
| 97 |
- Width and height - define the size of the wrapping div that holds the background image; |
| 98 |
- Background color - define a color value in hex or rgb(a) format, or a css color name; |
| 99 |
- Border radius - optional rounded corners, higher is rounder; |
| 100 |
- Clock position relative to background - here you can position the clock relative to top and left border of the wrapping div (as defined above) that holds the background image. |
| 101 |
- Custom skin parameters for shortcode |
| 102 |
|
| 103 |
= How can I create a custom skin? = |
| 104 |
|
| 105 |
Here are your first steps into the wonderous world of CoolClock skins ;) |
| 106 |
|
| 107 |
**Step 1.** Copy the following code to a simple unformatted text document (.txt) on your computer. |
| 108 |
|
| 109 |
` |
| 110 |
outerBorder: { lineWidth: 1, radius:95, color: 'black', alpha: 1 }, |
| 111 |
smallIndicator: { lineWidth: 2, startAt: 89, endAt: 93, color: 'black', alpha: 1 }, |
| 112 |
largeIndicator: { lineWidth: 4, startAt: 80, endAt: 93, color: 'black', alpha: 1 }, |
| 113 |
hourHand: { lineWidth: 8, startAt: -15, endAt: 50, color: 'black', alpha: 1 }, |
| 114 |
minuteHand: { lineWidth: 7, startAt: -15, endAt: 75, color: 'black', alpha: 1 }, |
| 115 |
secondHand: { lineWidth: 1, startAt: -20, endAt: 85, color: 'red', alpha: 1 }, |
| 116 |
secondDecoration: { lineWidth: 1, startAt: 70, radius: 4, fillColor: 'red', color: 'red', alpha: 1 } |
| 117 |
` |
| 118 |
|
| 119 |
**Step 2.** These parameters are the ones from the swissRail skin. Now go and change some parameter values like lineWidth or start/endAt points. The numbers refer to a percentage of the radius, so startAt: 0, endAt: 50 means a line from the center to 50% of the way to the edge. Alpha means the transparency of the element where alpha: 1 means solid. For example alpha: 0.5 means 50% transparent. |
| 120 |
|
| 121 |
**Step 3.** Go to you the Analog Clock widget, select *Skin: Custom* and copy your modified code (all of it, not just the modified parts!) into the field **Custom skin parameters**. Then save the widget and reload your website front page (or wherever the clock is visible) to see the result of your work. |
| 122 |
|
| 123 |
See the preset skins in [moreskins.js](http://randomibis.com/coolclock/moreskins.js) for more examples. And have fun tweaking! |
| 124 |
|
| 125 |
|
| 126 |
= Can I share this fantastic custom skin I created? = |
| 127 |
|
| 128 |
If you made a nice skin and would like to share it, then send it to the script creator at simon dot baird at gmail dot com or paste the custom parameters into a [Review](http://wordpress.org/support/view/plugin-reviews/coolclock). |
| 129 |
|
| 130 |
Thanks for sharing! :) |
| 131 |
|
| 132 |
|
| 133 |
= Can I insert a clock in posts or pages? = |
| 134 |
|
| 135 |
Yes, there is a shortcode available. Start with a default clock by pasting **[coolclock** **/]** into a post. |
| 136 |
|
| 137 |
The following parameters are available: |
| 138 |
|
| 139 |
- **skin** -- must be one of these: 'swissRail' (default skin), 'chunkySwiss', 'chunkySwissOnBlack', 'fancy', 'machine', 'simonbaird_com', 'classic', 'modern', 'simple', 'securephp', 'Tes2', 'Lev', 'Sand', 'Sun', 'Tor', 'Cold', 'Babosa', 'Tumb', 'Stone', 'Disc', 'watermelon' or 'mister'. If the Advanced extension is activated, there is also 'minimal' available. Please note that these names are _case sensitive_. |
| 140 |
- **radius** -- a number to define the clock radius. Do not add 'px' or any other measure descriptor. |
| 141 |
- **noseconds** -- set to true (or 1) to hide the second hand |
| 142 |
- **gmtoffset** -- a number to define a timezone relative the Greenwhich Mean Time. Do not set this parameter to default to local time. |
| 143 |
- **showdigital** -- set to 'digital12' to show the time in 12h digital format (with am/pm) too |
| 144 |
- **scale** -- must be one of these: 'linear' (default scale), 'logClock' or 'logClockRev'. Linear is our normal clock scale, the other two show a logarithmic time scale |
| 145 |
- **subtext** -- optional text, centered below the clock |
| 146 |
- **align** -- sets floating of the clock: 'left', 'right' or 'center' |
| 147 |
|
| 148 |
Example: **[coolclock** **skin="chunkySwissOnBlack" radius="140" showdigital=digital12 align="left" /]** |
| 149 |
|
| 150 |
Then there are extra parameters and options availabe in the [CoolClock - Advanced extension](https://premium.status301.net/downloads/coolclock-advanced/) which allow for more customisation: |
| 151 |
|
| 152 |
- **showdigital** - extended with ‘digital24′ and ‘date’ options |
| 153 |
- **background_image** - define full URL or path to an image to serve as background |
| 154 |
- **background_height** - give a height in pixels (default: clock plus subtext height) |
| 155 |
- **background_width** - give a width in pixels (default: clock width) |
| 156 |
- **background_color** - define a CSS color value in hex, rgb(a) format, or color name |
| 157 |
- **background_stretch** - CSS backround size options "cover" or "contain" |
| 158 |
- **background_position** - CSS positioning like "left top", "bottom", "10% 70%" or "10px 20px" (default: "left top") |
| 159 |
- **background_repeat** - background repetition options "repeat", "repeat-x", "repeat-y", "no-repeat" (default: "no-repeat") |
| 160 |
- **background_border_radius** - optional rounded corners value, higher is rounder |
| 161 |
|
| 162 |
Example: **[coolclock** **skin="minimal" radius="63" align="left" background_image="http://i35.tinypic.com/990wtx.png" /]** |
| 163 |
|
| 164 |
Custom skins can also be used in shortcode with the Advanced extension. See more on |
| 165 |
|
| 166 |
= I'm building my own theme. Is there a theme function available? = |
| 167 |
|
| 168 |
Yes, you can use a built-in WordPress function that parses a shortcode. To place the same clock as in the shortcode example above, anywhere in your theme, use this: |
| 169 |
|
| 170 |
`<?php echo do_shortcode('[ coolclock skin="chunkySwiss" radius="140" showdigital=true align="left" ]'); ?>` |
| 171 |
|
| 172 |
|
| 173 |
== Known Issues == |
| 174 |
|
| 175 |
1. When IE 8 is manually put or forced (through X-UA-Compatibility meta tag or response header) into Compatibility mode, the Clock will --even though the canvas area is put in place-- remain invisible. |
| 176 |
|
| 177 |
2. When a shortcode is not placed on its own line but on the same line with text, image or even another shortcode, then the output (div with canvas tag) will be wrapped inside a paragraph tag. While most browsers do not have a problem displaying the clock, this *will* cause a validation error. |
| 178 |
|
| 179 |
Please report any other issues on the [Support page](http://wordpress.org/support/plugin/coolclock). |
| 180 |
|
| 181 |
|
| 182 |
== Screenshots == |
| 183 |
|
| 184 |
1. Example analog clock in sidebar. The background logo is added with the [CoolClock - Advanced extension](https://premium.status301.net/downloads/coolclock-advanced/). |
| 185 |
|
| 186 |
2. Widget settings. The background options are availabe in the [CoolClock - Advanced extension](https://premium.status301.net/downloads/coolclock-advanced/). |
| 187 |
|
| 188 |
|
| 189 |
== Upgrade Notice == |
| 190 |
|
| 191 |
= 3.1 = |
| 192 |
Deprecating PHP4 style constructor + bugfix |
| 193 |
|
| 194 |
== Changelog == |
| 195 |
|
| 196 |
= 3.1 = |
| 197 |
* Deprecating PHP4 style constructor for Widget |
| 198 |
* Bugfix undefined index |
| 199 |
|
| 200 |
= 3.0 = |
| 201 |
* Responsive canvas styling |
| 202 |
|
| 203 |
= 2.9.8 = |
| 204 |
* Translation string fixes |
| 205 |
* Russian translation by Natalia Zavyalova |
| 206 |
|
| 207 |
= 2.9.7 = |
| 208 |
* Prepare custom skin for shortcode in advanced extension |
| 209 |
* BUGFIX: disable wptexturize for shortcode content |
| 210 |
|
| 211 |
= 2.9.6 = |
| 212 |
* Skin watermelon alpha fix |
| 213 |
* BUGFIX: Non-static method should not be called statically |
| 214 |
* BUGFIX: Undefined index |
| 215 |
|
| 216 |
= 2.9.5 = |
| 217 |
* BUGFIX: PHP 5.4 Using $this when not in object context |
| 218 |
* BUGFIX: Non-static method should not be called statically |
| 219 |
|
| 220 |
= 2.9.4 = |
| 221 |
* New clock skin shared by user MrCarlLister |
| 222 |
* Use Globaltick branch script version 3.0.0-pre |
| 223 |
* BUGFIX: undefined index in widget form |
| 224 |
|
| 225 |
= 2.9.2 = |
| 226 |
* BUGFIX: Thread between tip of the second hand and 3 o'clock in IE |
| 227 |
* Shortcode filter |
| 228 |
|
| 229 |
= 2.9 = |
| 230 |
* BUGFIX: excanvas included too late |
| 231 |
* CoolClock.js version 3.0.0-pre |
| 232 |
* Allow shortcode in text widget |
| 233 |
* NEW: Subtext option |
| 234 |
* NEW: Widget align option |
| 235 |
|
| 236 |
= 2.0 = |
| 237 |
* NEW: logClock option |
| 238 |
|
| 239 |
= 1.1 = |
| 240 |
* Minified javascript |
| 241 |
|
| 242 |
= 1.0 = |
| 243 |
* Sidebar widget overhaul |
| 244 |
* Class |
| 245 |
* NEW: Shortcode |
| 246 |
|
| 247 |
= 0.1 = |
| 248 |
* First implementation of CoolClock in sidebar widget |
| 249 |
|
| 250 |
|
