first commit

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": [ "es2015-rollup" ]
+}

.gitignore

@@ -0,0 +1,2 @@
+dist/**
+node_modules/**

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 moritanian
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

Readme.md

@@ -0,0 +1,69 @@
+# emitting-analog-clock
+
+<a href="https://moritanian.github.io/emitting-analog-clock"><img src="https://moritanian.github.io/Linkage.js/images/sample.png"/></a>
+
+
+<p align="center"><a href="https://moritanian.github.io/emitting-analog-clock">DEMO</a></p>
+
+## Usage
+```index.js
+// Fixed clock
+createAnalogClock({
+  id: 'clock1',
+  size: 300,
+  date: 'December 17, 1995 10:10:23'
+});
+
+// Clock with custom colors
+createAnalogClock({
+  id: 'clock2',
+  size: 200,
+  color: '#d2d2aa',
+  backgroundColor: '#303011'
+});
+
+// Smooth moving clock with digital display 
+(function createClock3(){
+  var runnning = true;
+  var lastTime = null;
+  var clock3Button = document.getElementById('clock3-button');
+  clock3Button.addEventListener('click', () => {
+    runnning = !runnning;
+  });
+  createAnalogClock({
+    id: 'clock3',
+    size: 180,
+    smooth: true,
+    showDigital: true,
+    dateFunc: (now) => {
+      if (runnning) {
+        lastTime = now;
+        return now;
+      } else {
+        return lastTime;
+      }
+    }
+  });
+})();
+
+// Reverse clock
+createAnalogClock({
+  id: 'clock4',
+  size: 240,
+  dateFunc: (now) => - now.getTime(),
+  smooth: true,
+  showDigital: true,
+  color: '#dd22dd',
+  backgroundColor: '#000000'
+});
+
+// Clock with custom background image
+createAnalogClock({
+  id: 'clock5',
+  size: 250,
+  //shadowing: false,
+  color: '#ffffff',
+  backgroundImage: 'https://images.pexels.com/photos/1095601/pexels-photo-1095601.jpeg'
+});
+
+```

example.css

@@ -0,0 +1,46 @@
+body{background-color: gray;}
+h1{
+  font-family: helvetica;
+  font-size:2.5rem ;
+  color:black;
+  position: relative;
+  top:80px;
+  z-index: -1;
+}
+
+.clocks {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.clock {
+  margin: 20px;
+  position: relative;
+}
+
+.clock div {
+  box-shadow: 0 5px 14px black;
+}
+
+.clock.circle div {
+  border-radius: 50%;
+  overflow: hidden;
+}
+
+.clock.square div {
+  border-radius: 5px;
+  overflow: hidden;
+}
+
+#clock3-button {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 200px;
+  margin: auto;
+  width: 100px;
+  height: 20px;
+  background-color: black;
+  color: white;
+  border-radius: 10px;
+}

example.js

@@ -0,0 +1,58 @@
+// Fixed clock
+createAnalogClock({
+  id: 'clock1',
+  size: 300,
+  date: 'December 17, 1995 10:10:23'
+});
+
+// Clock with custom colors
+createAnalogClock({
+  id: 'clock2',
+  size: 200,
+  color: '#d2d2aa',
+  backgroundColor: '#303011'
+});
+
+// Smooth moving clock with digital display 
+(function createClock3(){
+  var runnning = true;
+  var lastTime = null;
+  var clock3Button = document.getElementById('clock3-button');
+  clock3Button.addEventListener('click', () => {
+    runnning = !runnning;
+  });
+  createAnalogClock({
+    id: 'clock3',
+    size: 180,
+    smooth: true,
+    showDigital: true,
+    dateFunc: (now) => {
+      if (runnning) {
+        lastTime = now;
+        return now;
+      } else {
+        return lastTime;
+      }
+    }
+  });
+})();
+
+// Reverse clock
+createAnalogClock({
+  id: 'clock4',
+  size: 240,
+  dateFunc: (now) => - now.getTime(),
+  smooth: true,
+  showDigital: true,
+  color: '#dd22dd',
+  backgroundColor: '#000000'
+});
+
+// Clock with custom background image
+createAnalogClock({
+  id: 'clock5',
+  size: 250,
+  //shadowing: false,
+  color: '#ffffff',
+  backgroundImage: 'https://images.pexels.com/photos/1095601/pexels-photo-1095601.jpeg'
+});

index.html

@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en" ng-app="newTab">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>My Link</title>
+    <link rel="stylesheet" href="./example.css" type="text/css">
+</head>
+<body>
+<div class="clocks">
+    <div id="clock1" class="clock circle"></div>
+    <div id="clock2" class="clock square"></div>
+    <div id="clock3" class="clock circle">
+        <button id='clock3-button'>toggle</button>
+    </div>
+    <div id="clock4" class="clock circle"></div>
+    <div id="clock5" class="clock circle"></div>
+</div>
+
+
+</body>
+<script src="./dist/index.js"></script>
+<script src="./example.js"></script>
+</html>
+
+