ngx-analog-wrist-watch
Version:
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.14.
1,353 lines (1,304 loc) • 42.4 kB
JavaScript
import { Injectable, ɵɵdefineInjectable, Component, EventEmitter, Directive, ElementRef, Renderer2, Output, NgModule } from '@angular/core';
/**
* @fileoverview added by tsickle
* Generated from: lib/ngx-analog-wrist-watch.service.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const watchStraps = [
{
styleClassName: ['strap-primary-top-left', 'border-color']
},
{
styleClassName: ['strap-primary-top-middle', 'border-color']
},
{
styleClassName: ['strap-primary-top-right', 'border-color']
},
{
styleClassName: ['strap-secondary-top-left']
},
{
styleClassName: ['strap-secondary-top-middle']
},
{
styleClassName: ['strap-secondary-top-right']
},
{
styleClassName: ['strap-tertiary-top-left']
},
{
styleClassName: ['strap-tertiary-top-middle']
},
{
styleClassName: ['strap-tertiary-top-right']
},
{
styleClassName: ['strap-primary-bottom-left', 'border-color']
},
{
styleClassName: ['strap-primary-bottom-middle', 'border-color']
},
{
styleClassName: ['strap-primary-bottom-right', 'border-color']
},
{
styleClassName: ['strap-secondary-bottom-left']
},
{
styleClassName: ['strap-secondary-bottom-middle']
},
{
styleClassName: ['strap-secondary-bottom-right']
},
{
styleClassName: ['strap-tertiary-bottom-left']
},
{
styleClassName: ['strap-tertiary-bottom-middle']
},
{
styleClassName: ['strap-tertiary-bottom-right']
},
];
/** @type {?} */
const dugHoles = ['topLeftDugHole', 'topRightDugHole', 'bottomLeftDugHole', 'bottomRightDugHole'];
/** @type {?} */
const internalStyle = `
:root {
--color:#2F4F4F;
--border-color:black;
--border-green:green;
--absolute:absolute;
--transparent:transparent;
}
span + .toggle-time {
display:flex!important;
}
div .top-left-dughole::before{
content: "";
border-right: 15px solid var(--color);
position: var(--absolute);
left: 0px;
border-top: 16px solid var(--transparent);
border-bottom: 0px solid var(--color);
width: 0px;
bottom: 0px;
}
div .top-right-dughole::before{
content: "";
border-left: 15px solid var(--color);
position: var(--absolute);
left: 0px;
border-top: 15px solid var(--transparent);
border-bottom: 0px solid var(--color);
bottom: 0px;
}
div .strap-primary-top-left {
position: var(--absolute);
left: 42%;
top: 31%;
height: 40px;
background:var(--color);
margin: 3px;
width: 25px;
}
div .border-color{
box-shadow: 0px 0px 1px 1px var(--border-green);
}
div .strap-primary-top-middle{
position: var(--absolute);
left: 47%;
top: 30%;
height: 40px;
background:var(--color);
margin: 1px;
width: 38px;
}
div .strap-primary-top-right {
position: var(--absolute);
left: 53%;
top: 201px;
height: 42px;
background:var(--color);
width: 25px;
margin: 6px;
}
div .bottom-left-dughole{
position: var(--absolute);
width: 15px;
border-top: 54px solid rgb(47, 79, 79);
border-left: 16px solid white;
top: 64%;
left: 37%;
}
div .bottom-left-dughole::before{
content: "";
border-right: 15px solid var(--color);
position: var(--absolute);
left: 0px;
border-top: 0px solid var(--color);
border-bottom: 14px solid var(--transparent);
width: 0px;
}
div .strap-primary-bottom-left {
position: var(--absolute);
left: 42%;
top: 444px;
height: 35px;
background:var(--color);
margin: 3px;
width: 25px;
}
div .strap-primary-bottom-middle{
position: var(--absolute);
left: 47%;
top: 67%;
height: 40px;
background:var(--color);
margin: 1px;
width: 38px;
}
div .strap-primary-bottom-right {
position: var(--absolute);
left: 55%;
top: 440px;
height: 44px;
background:var(--color);
width: 25px;
margin: -4px
}
div .bottom-right-dughole{
position: var(--absolute);
width: 15px;
border-top: 61px solid rgb(47, 79, 79);
border-right: 16px solid white;
top: 408px;
left: 57%;
margin: 11px;
border-top-left-radius: 19px;
}
div .bottom-right-dughole::before{
content: "";
border-left: 15px solid var(--color);
position: var(--absolute);
left: 0px;
border-top: 0px solid var(--color);
border-bottom: 14px solid var(--transparent);
width: 0px;
}
div .strap-secondary-top-left{
top: 133px;
left: 241px;
position: var(--absolute);
width: 20px;
height: 30px;
border-bottom: 43px solid var(--color);
border-left: 4px solid var(--transparent);
}
div .strap-secondary-top-middle{
top: 150px;
left: 265px;
position: var(--absolute);
width: 40px;
height: 48px;
background-color:var(--color);
box-shadow: 0px 0px 0px 1px var(--border-green);
}
div .strap-secondary-top-right{
top: 132px;
left: 306px;
position: var(--absolute);
width: 20px;
height: 29px;
border-bottom: 43px solid var(--color);
border-right: 4px solid var(--transparent);
}
div .strap-tertiary-top-left{
top: 88px;
left: 241px;
position: var(--absolute);
width: 20px;
height: 30px;
border-bottom: 43px solid var(--color);
border-left: 4px solid var(--transparent);
}
div .strap-tertiary-top-middle{
top: 100px;
left: 265px;
position: var(--absolute);
width: 40px;
height: 48px;
background-color:var(--color);
box-shadow: 0px 0px 0px 1px var(--border-green);
}
div .strap-tertiary-top-right{
top: 87px;
left: 306px;
position: var(--absolute);
width: 20px;
height: 29px;
border-bottom: 43px solid var(--color);
border-right: 4px solid var(--transparent);
}
div .strap-secondary-bottom-left{
top: 485px;
left: 241px;
position: var(--absolute);
width: 20px;
height: 30px;
border-top: 43px solid var(--color);
border-left: 4px solid var(--transparent);
}
div .strap-secondary-bottom-middle{
top: 485px;
left: 265px;
position: var(--absolute);
width: 40px;
height: 48px;
background-color:var(--color);
box-shadow: 0px 0px 0px 1px var(--border-green);
}
div .strap-secondary-bottom-right{
top: 483px;
left: 306px;
position: var(--absolute);
width: 20px;
height: 30px;
border-top: 45px solid var(--color);
border-right: 4px solid var(--transparent);
}
div .strap-tertiary-bottom-left{
top: 530px;
left: 241px;
position: var(--absolute);
width: 20px;
height: 30px;
border-top: 43px solid var(--color);
border-left: 4px solid var(--transparent);
}
div .strap-tertiary-bottom-middle{
top: 530px;
left: 265px;
position: var(--absolute);
width: 40px;
height: 48px;
background-color:var(--color);
box-shadow: 0px 0px 0px 1px var(--border-green);
}
div .strap-tertiary-bottom-right{
top: 530px;
left: 306px;
position: var(--absolute);
width: 20px;
height: 30px;
border-top: 45px solid var(--color);
border-right: 4px solid var(--transparent);
}
div .hour-hand {
border: 1px solid var(--border-color);
position: var(--absolute);
top: 61px;
height: 40px;
left: 82px;
width: 5px;
}
div .hour-hand::before {
position: var(--absolute);
content: "";
border-radius: 50%;
width: 15px;
height: 15px;
border: 1px solid var(--border-color);
top: -17px;
left: -6px;
}
div .second-hand{
position: var(--absolute);
width: 112px;
border-bottom: 1px solid black;
left: 10px;
}
div .second-hand::after {
content: "";
width: 10px;
background: var(--border-color);
height: 10px;
position: var(--absolute);
left: 111px;
top: -5px;
border-radius: 50%;
}
div .second-hand::before {
content: "";
width: 15px;
background: var(--border-color);
height: 15px;
position: var(--absolute);
left: 23px;
top: -7px;
border-radius: 50%;
background-image: radial-gradient(circle, black, white, black);
}
div .minute-hand {
border: 1px solid var(--border-color);
position: var(--absolute);
top: 51px;
height: 50px;
left: 85px;
width: 5px;
}
div .minute-hand::before {
position: var(--absolute);
content: "";
border-right: 4px solid var(--transparent);
border-left: 3px solid var(--transparent);
top: -24px;
left: -1px;
border-bottom: 23px solid var(--border-color);
}
div .hour-hand-round {
position: var(--absolute);
height: 9px;
border-left: 1px solid var(--border-color);
left: 35%;
top: -10px;
}
div .hour-hand-round::before {
position: var(--absolute);
content: "";
height: 7px;
border-left: 1px solid var(--border-color);
right: 3px;
top: -5px;
transform: rotate(120deg);
}
div .hour-hand-round::after {
position: var(--absolute);
content: "";
height: 7px;
border-left: 1px solid var(--border-color);
left: 2px;
top: -5px;
transform: rotate(63deg);
}
div .hour-hand-arrow{
position: var(--absolute);
content: "";
border-right: 6px solid var(--transparent);
border-left: 6px solid var(--transparent);
top: -31px;
left: -4px;
border-bottom: 15px solid var(--border-color);
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
div .hour {
transform-origin: 70% 85%;
transition: all 0.05s;
transform: rotate(90deg);
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}
div .hand {
top: 51%;
position: var(--absolute);
transform-origin: 70%;
transition: all 0.05s;
transform: rotate(90deg);
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}
div .axis-circle {
height: 10px;
width: 10px;
border: 5px solid var(--border-color);
border-radius: 50%;
position: var(--absolute);
top: 85px;
left: 78px;
background-color: var(--border-color);
z-index:1;
}
div .axis-circle .dot-puncture {
z-index: 1;
width: 6px;
background: silver;
height: 6px;
position: var(--absolute);
left: 2px;
top: 2px;
border-radius: 50%;
}
div .clock-crown {
position :absolute;
left:201px;
top:51%;
transform: rotate(90deg);
z-index:1;
}
div .clock-crown::before {
content:"";
position :var(--absolute);
width: 10px;
height: 0;
border-left: 2px solid var(--transparent);
border-right: 2px solid var(--transparent);
border-bottom: 10px solid var(--color);
top:-10px;
left:-1px;
}
div .spindle {
position :absolute;
left:216px;
top:49%;
transform: rotate(90deg);
transition:all 2s;
}
div .spindle::after {
content: "";
position: var(--absolute);
width: 4px;
left: 8px;
border-bottom: 14px solid var(--color);
opacity:0
}
div .spindle-move::after {
opacity:1;
}
div .clock-crown-drag {
left:215px;
}
div .change-hour {
transform-origin: 70% 85%;
transition: all 0.05s;
transform: rotate(90deg);
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}
`;
class NgxAnalogWristWatchService {
constructor() {
this.CLOCK_NUMBER = 12;
this.inlineStyleInfo = {
border: 'none',
borderBottom: '2px solid teal',
inputBorderBottom: '2px solid blue',
outline: 'none',
color: 'blue',
fontSize: '18px',
labelFontSize: '14px',
left: '10px',
bottom: '10px',
relative: 'relative',
absolute: 'absolute',
display: 'inline-block',
marginbottom: '25px',
float: 'left',
marginright: '25px',
padding: '2rem',
top: '15px',
width: '250px',
boxShadow: '#ded9d9 0px 3px 4px',
boxWidth: '500px',
boxHeight: '575px',
inherit: 'inherit',
transistionTop: 'top 2s cubic-bezier(0.53, 0.49, 0.35, 0.39) 0s',
marginLeft: '-15px',
iconTop: '24px',
iconFontSize: '20px',
boxDisplayNone: 'none',
boxDisplayFlex: 'flex',
justifyContent: 'center',
alignItems: 'center',
cursor: 'pointer',
primaryWidth: '202px',
primaryHeight: '202px',
primaryBorderRadius: '50%',
primaryBorder: '10px solid var(--color)',
secondaryWidth: '193px',
secondaryHeight: '193px',
secondaryBorderRadius: '50%',
secondaryBorder: '6px solid gray',
thirdWidth: '184px',
thirdHeight: '185px',
thirdBorderRadius: '50%',
thirdBorder: '5px solid var(--border-color)',
thirdTop: '-1px',
numLeft: '133px',
numTop: '14px',
clockNum: [
{
left: '130px',
top: '18px'
},
{
left: '160px',
top: '49px',
},
{
left: '165px',
top: '89px',
},
{
left: '151px',
top: '128px',
},
{
left: '125px',
top: '153px',
},
{
left: '86px',
top: '162px',
},
{
left: '49px',
top: '153px',
},
{
left: '19px',
top: '127px',
},
{
left: '7px',
top: '89px',
},
{
left: '13px',
top: '48px',
},
{
left: '39px',
top: '20px',
},
{
left: '81px',
top: '3px',
}
],
beltTop: '-143px',
beltLeft: '85px',
beltWidth: '38px',
beltHeight: '48px',
beltBackgroundColor: '#2F4F4F',
wrapWidth: '15px',
wrapBorderBottom: '54px solid var(--color)',
wrapBorderLeft: '16px solid white',
wrapLeft: '37%',
wrapTop: '207px',
rightWrapWidth: '15px',
rightBorderRightRadius: '9px',
rightWrapBorderBottom: '63px solid var(--color)',
rightWrapBorderright: '16px solid white',
rightWrapLeft: '60%',
rightWrapTop: '32%',
rightWrapMargin: '-7px',
rightBorderLeftRadius: '10px',
};
this.watchElements = ['label', 'input', 'span', 'primaryCricle',
'secondaryCircle', 'teritaryCircle', 'clockBox', 'hourHand', 'minuteHand', 'secondHand'];
}
/**
* @return {?}
*/
fetchInternalStyle() {
return internalStyle;
}
/**
* @return {?}
*/
fetchInLineStyle() {
return this.inlineStyleInfo;
}
/**
* @param {?} wrapper
* @param {?} renderer
* @return {?}
*/
createDugHoles(wrapper, renderer) {
/** @type {?} */
const styleToDugHole = {};
dugHoles.forEach((/**
* @param {?} dugHole
* @return {?}
*/
dugHole => {
/** @type {?} */
const dugHol = renderer.createElement('span');
renderer.appendChild(wrapper, dugHol);
styleToDugHole[dugHole] = dugHol;
}));
return styleToDugHole;
}
/**
* @param {?} wrapper
* @param {?} renderer
* @return {?}
*/
createWatchStraps(wrapper, renderer) {
/** @type {?} */
const styleToWatchStrap = {};
watchStraps.forEach((/**
* @param {?} watchStrap
* @param {?} index
* @return {?}
*/
(watchStrap, index) => {
/** @type {?} */
const strap = renderer.createElement('span');
renderer.appendChild(wrapper, strap);
styleToWatchStrap['elementName' + index] = strap;
styleToWatchStrap['className' + index] = watchStrap.styleClassName.map((/**
* @param {?} className
* @return {?}
*/
className => {
return className;
}));
}));
return styleToWatchStrap;
}
/**
* @param {?} thirdCircle
* @param {?} applyStyleInClockNum
* @param {?} renderer
* @return {?}
*/
addClockNumbers(thirdCircle, applyStyleInClockNum, renderer) {
for (let pos = 0; pos < this.CLOCK_NUMBER; pos++) {
/** @type {?} */
const numSpan = renderer.createElement('span');
/** @type {?} */
const num = renderer.createText((pos + 1).toString());
renderer.appendChild(numSpan, num);
renderer.appendChild(thirdCircle, numSpan);
renderer.setProperty(numSpan, '[timeChange]', 'onNumClick()');
applyStyleInClockNum(numSpan, pos, this.inlineStyleInfo);
}
}
}
NgxAnalogWristWatchService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root'
},] }
];
/** @nocollapse */
NgxAnalogWristWatchService.ctorParameters = () => [];
/** @nocollapse */ NgxAnalogWristWatchService.ngInjectableDef = ɵɵdefineInjectable({ factory: function NgxAnalogWristWatchService_Factory() { return new NgxAnalogWristWatchService(); }, token: NgxAnalogWristWatchService, providedIn: "root" });
if (false) {
/** @type {?} */
NgxAnalogWristWatchService.prototype.CLOCK_NUMBER;
/** @type {?} */
NgxAnalogWristWatchService.prototype.inlineStyleInfo;
/** @type {?} */
NgxAnalogWristWatchService.prototype.watchElements;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/ngx-analog-wrist-watch.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NgxAnalogWristWatchComponent {
constructor() { }
/**
* @return {?}
*/
ngOnInit() {
}
}
NgxAnalogWristWatchComponent.decorators = [
{ type: Component, args: [{
selector: 'NgxWrist-NgxAnalogWristWatch',
template: `
<p>
ngx-analog-wrist-watch works!
</p>
`
}] }
];
/** @nocollapse */
NgxAnalogWristWatchComponent.ctorParameters = () => [];
/**
* @fileoverview added by tsickle
* Generated from: lib/analogwristwatch.directive.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class AnalogwristwatchDirective {
/**
* @param {?} el
* @param {?} renderer
* @param {?} clockService
*/
constructor(el, renderer, clockService) {
this.el = el;
this.renderer = renderer;
this.clockService = clockService;
this.timeVal = new EventEmitter();
this.elementInfo = {
input: null,
clockBox: null,
spanToggle: null,
watchIcon: null,
label: null,
labelText: null,
hourHand: null,
minuteHand: null,
secondHand: null,
clockCrown: null,
clockSpindle: null,
clockNum: null,
};
}
/**
* @return {?}
*/
ngOnInit() {
this.createInitElement();
this.stylesInInit();
this.checkIfInputContainValue(this.elementInfo, this.inlineStyleInfo);
this.watchRunner();
}
/**
* @return {?}
*/
createInitElement() {
/** @type {?} */
const label = this.renderer.createElement('label');
/** @type {?} */
const text = this.renderer.createText('Time');
/** @type {?} */
const input = this.renderer.createElement('input');
/** @type {?} */
const clockBox = this.renderer.createElement('div');
/** @type {?} */
const span = this.renderer.createElement('span');
/** @type {?} */
const unicodeClock = `\u{0231A}`;
/** @type {?} */
const icon = this.renderer.createText(unicodeClock);
this.elementInfo.input = input;
this.elementInfo.clockBox = clockBox;
this.elementInfo.spanToggle = span;
this.elementInfo.watchIcon = icon;
this.elementInfo.label = label;
this.elementInfo.labelText = text;
}
/**
* @return {?}
*/
stylesInInit() {
this.internalStyle = this.clockService.fetchInternalStyle();
this.inlineStyleInfo = this.clockService.fetchInLineStyle();
this.appendTagInInit(this.elementInfo);
this.applyStyleInInit(this.elementInfo);
this.applyStyleInFocus(this.elementInfo, this.inlineStyleInfo);
this.applyStyleInBlur(this.elementInfo, this.inlineStyleInfo);
this.applyBoxStyle(this.elementInfo);
}
/**
* @return {?}
*/
watchRunner() {
this.addClockElement(this.elementInfo.clockBox);
this.runClock = setInterval((/**
* @return {?}
*/
() => {
/** @type {?} */
const timeInfo = this.startClock();
this.timeInfo = timeInfo;
}), 1000);
this.onWatchBtnClick();
this.onChangeHourTimeClick();
}
/**
* @param {?} initElement
* @return {?}
*/
appendTagInInit(initElement) {
/** @type {?} */
const container = this.el.nativeElement;
this.renderer.setAttribute(initElement.input, 'type', 'text');
this.renderer.appendChild(initElement.label, initElement.labelText);
this.renderer.appendChild(initElement.spanToggle, initElement.watchIcon);
this.renderer.appendChild(container, initElement.label);
this.renderer.appendChild(container, initElement.input);
this.renderer.appendChild(container, initElement.spanToggle);
this.renderer.appendChild(container, initElement.clockBox);
}
/**
* @param {?} initElement
* @return {?}
*/
applyStyleInInit(initElement) {
this.applyStyleInDivDirective(initElement);
this.applyStyleInInputAndLabelTag(initElement);
this.applyStyleInInputAndLabelTag(initElement);
this.applyStyleInWatchIcon(initElement);
this.applyStyleInClockBox(initElement);
}
/**
* @param {?} initElement
* @return {?}
*/
applyStyleInDivDirective(initElement) {
this.el.nativeElement.style.display = this.inlineStyleInfo.display,
this.el.nativeElement.style.marginBottom = this.inlineStyleInfo.marginbottom,
this.el.nativeElement.style.marginTop = this.inlineStyleInfo.margintop,
this.el.nativeElement.style.padding = this.inlineStyleInfo.padding,
this.el.nativeElement.style.position = this.inlineStyleInfo.relative,
this.el.nativeElement.style.float = this.inlineStyleInfo.float,
initElement.input.style.border = this.inlineStyleInfo.border;
}
/**
* @param {?} initElement
* @return {?}
*/
applyStyleInInputAndLabelTag(initElement) {
initElement.input.style.borderBottom = this.inlineStyleInfo.borderBottom;
initElement.input.style.outline = this.inlineStyleInfo.outline;
initElement.input.style.width = this.inlineStyleInfo.width;
initElement.input.style.fontSize = this.inlineStyleInfo.fontSize;
initElement.label.style.position = this.inlineStyleInfo.absolute;
initElement.label.style.color = this.inlineStyleInfo.color;
}
/**
* @param {?} initElement
* @return {?}
*/
applyStyleInWatchIcon(initElement) {
initElement.spanToggle.style.position = this.inlineStyleInfo.absolute;
initElement.spanToggle.style.marginLeft = this.inlineStyleInfo.marginLeft;
initElement.spanToggle.style.cursor = this.inlineStyleInfo.cursor;
initElement.spanToggle.style.top = this.inlineStyleInfo.iconTop;
initElement.spanToggle.style.fontSize = this.inlineStyleInfo.iconFontSize;
}
/**
* @param {?} initElement
* @return {?}
*/
applyStyleInClockBox(initElement) {
initElement.clockBox.style.boxShadow = this.inlineStyleInfo.boxShadow;
initElement.clockBox.style.width = this.inlineStyleInfo.boxWidth;
initElement.clockBox.style.height = this.inlineStyleInfo.boxHeight;
initElement.clockBox.style.justifyContent = this.inlineStyleInfo.justifyContent;
initElement.clockBox.style.alignItems = this.inlineStyleInfo.alignItems;
initElement.clockBox.style.display = this.inlineStyleInfo.boxDisplayNone;
}
/**
* @param {?} initElement
* @param {?} style
* @return {?}
*/
applyStyleInFocus(initElement, style) {
initElement.input.addEventListener('focus', (/**
* @return {?}
*/
() => {
this.floatLabelToTop(initElement, style);
}));
}
/**
* @param {?} initElement
* @param {?} style
* @return {?}
*/
applyStyleInBlur(initElement, style) {
initElement.input.addEventListener('blur', (/**
* @return {?}
*/
() => {
this.checkIfInputContainValue(initElement, style);
}));
}
/**
* @param {?} initElement
* @param {?} style
* @return {?}
*/
checkIfInputContainValue(initElement, style) {
initElement.input.value ? this.floatLabelToTop(initElement, style) : this.floatLabelToBottom(initElement, style);
}
/**
* @param {?} elementInfo
* @param {?} style
* @return {?}
*/
floatLabelToTop(elementInfo, style) {
elementInfo.label.style.top = style.top;
elementInfo.label.style.fontSize = style.labelFontSize;
elementInfo.input.style.borderBottom = style.inputBorderBottom;
elementInfo.label.style.transition = style.transistionTop;
}
/**
* @param {?} elementInfo
* @param {?} style
* @return {?}
*/
floatLabelToBottom(elementInfo, style) {
elementInfo.label.style.top = style.inherit;
elementInfo.input.style.borderBottom = style.borderBottom;
elementInfo.label.style.fontSize = style.inherit;
}
/**
* @param {?} initElement
* @return {?}
*/
applyBoxStyle(initElement) {
this.renderer.listen(initElement.spanToggle, 'click', (/**
* @return {?}
*/
() => {
initElement.clockBox.classList.toggle('toggle-time');
}));
}
/**
* @param {?} clockBox
* @return {?}
*/
addClockElement(clockBox) {
/** @type {?} */
const primaryCircle = this.renderer.createElement('div');
/** @type {?} */
const secondaryCircle = this.renderer.createElement('div');
/** @type {?} */
const thirdCircle = this.renderer.createElement('div');
/** @type {?} */
const clockCrown = this.renderer.createElement('div');
/** @type {?} */
const clockSpindle = this.renderer.createElement('div');
this.renderer.addClass(clockCrown, 'clock-crown');
this.renderer.addClass(clockSpindle, 'spindle');
this.renderer.appendChild(clockBox, primaryCircle);
this.renderer.appendChild(clockBox, secondaryCircle);
this.renderer.appendChild(secondaryCircle, thirdCircle);
this.renderer.appendChild(thirdCircle, clockCrown);
this.renderer.appendChild(thirdCircle, clockSpindle);
this.elementInfo.clockCrown = clockCrown;
this.elementInfo.clockSpindle = clockSpindle;
this.applyStyleInClockCircle(primaryCircle, secondaryCircle, thirdCircle);
this.clockService.addClockNumbers(thirdCircle, this.applyStyleInClockNum, this.renderer);
this.drawClockFace(clockBox);
this.addClockHands(thirdCircle);
}
/**
* @param {?} primaryCircle
* @param {?} secondaryCircle
* @param {?} thirdCircle
* @return {?}
*/
applyStyleInClockCircle(primaryCircle, secondaryCircle, thirdCircle) {
primaryCircle.style.width = this.inlineStyleInfo.primaryWidth;
primaryCircle.style.height = this.inlineStyleInfo.primaryHeight;
primaryCircle.style.borderRadius = this.inlineStyleInfo.primaryBorderRadius;
primaryCircle.style.border = this.inlineStyleInfo.primaryBorder;
primaryCircle.style.position = this.inlineStyleInfo.relative;
primaryCircle.style.zIndex = '1';
secondaryCircle.style.width = this.inlineStyleInfo.secondaryWidth;
secondaryCircle.style.height = this.inlineStyleInfo.secondaryHeight;
secondaryCircle.style.borderRadius = this.inlineStyleInfo.secondaryBorderRadius;
secondaryCircle.style.border = this.inlineStyleInfo.secondaryBorder;
secondaryCircle.style.position = this.inlineStyleInfo.absolute;
secondaryCircle.style.zIndex = '1';
thirdCircle.style.width = this.inlineStyleInfo.thirdWidth;
thirdCircle.style.height = this.inlineStyleInfo.thirdHeight;
thirdCircle.style.borderRadius = this.inlineStyleInfo.thirdBorderRadius;
thirdCircle.style.border = this.inlineStyleInfo.thirdBorder;
thirdCircle.style.position = this.inlineStyleInfo.absolute;
thirdCircle.style.top = this.inlineStyleInfo.thirdTop;
}
/**
* @param {?} clockNum
* @param {?} num
* @param {?} style
* @return {?}
*/
applyStyleInClockNum(clockNum, num, style) {
clockNum.style.position = style.absolute;
clockNum.style.left = style.clockNum[num].left;
clockNum.style.top = style.clockNum[num].top;
}
/**
* @param {?} clockBox
* @return {?}
*/
drawClockFace(clockBox) {
/** @type {?} */
const wrapper = this.renderer.createElement('div');
this.renderer.appendChild(clockBox, wrapper);
/** @type {?} */
const dugHole = this.clockService.createDugHoles(wrapper, this.renderer);
/** @type {?} */
const strap = this.clockService.createWatchStraps(wrapper, this.renderer);
this.applyStyleInDugHoles(dugHole);
this.applyStyleInWatchStraps(strap);
}
/**
* @param {?} dugHole
* @return {?}
*/
applyStyleInDugHoles(dugHole) {
dugHole.topLeftDugHole.style.position = this.inlineStyleInfo.absolute;
dugHole.topLeftDugHole.style.width = this.inlineStyleInfo.wrapWidth;
dugHole.topLeftDugHole.style.borderBottom = this.inlineStyleInfo.wrapBorderBottom;
dugHole.topLeftDugHole.style.borderLeft = this.inlineStyleInfo.wrapBorderLeft;
dugHole.topLeftDugHole.style.top = this.inlineStyleInfo.wrapTop;
dugHole.topLeftDugHole.style.left = this.inlineStyleInfo.wrapLeft;
dugHole.topLeftDugHole.style.borderBottomRightRadius = this.inlineStyleInfo.rightBorderRightRadius;
this.renderer.addClass(dugHole.topLeftDugHole, 'top-left-dughole');
this.renderer.addClass(dugHole.topRightDugHole, 'top-right-dughole');
this.renderer.addClass(dugHole.bottomLeftDugHole, 'bottom-left-dughole');
this.renderer.addClass(dugHole.bottomRightDugHole, 'bottom-right-dughole');
dugHole.topRightDugHole.style.position = this.inlineStyleInfo.absolute;
dugHole.topRightDugHole.style.width = this.inlineStyleInfo.rightWrapWidth;
dugHole.topRightDugHole.style.borderBottom = this.inlineStyleInfo.rightWrapBorderBottom;
dugHole.topRightDugHole.style.borderRight = this.inlineStyleInfo.rightWrapBorderright;
dugHole.topRightDugHole.style.top = this.inlineStyleInfo.rightWrapTop;
dugHole.topRightDugHole.style.left = this.inlineStyleInfo.rightWrapLeft;
dugHole.topRightDugHole.style.margin = this.inlineStyleInfo.rightWrapMargin;
dugHole.topRightDugHole.style.borderBottomLeftRadius = this.inlineStyleInfo.rightBorderLeftRadius;
/** @type {?} */
const styleTag = this.renderer.createElement('style');
/** @type {?} */
const cssText = this.renderer.createText(this.internalStyle);
this.renderer.appendChild(styleTag, cssText);
this.renderer.appendChild(document.head, styleTag);
}
/**
* @param {?} strap
* @return {?}
*/
applyStyleInWatchStraps(strap) {
/** @type {?} */
const pos = 0;
for (let index = 0; pos < strap['className' + index].length; index++) {
/** @type {?} */
const size = strap['className' + index].length;
if (size === 2) {
this.renderer.addClass(strap['elementName' + index], strap['className' + index][index - index]);
this.renderer.addClass(strap['elementName' + index], strap['className' + index][index - (index - 1)]);
continue;
}
else {
this.renderer.addClass(strap['elementName' + index], strap['className' + index][index - index]);
if (index === 17) {
break;
}
}
}
}
/**
* @param {?} thirdCircle
* @return {?}
*/
addClockHands(thirdCircle) {
/** @type {?} */
const axisCircle = this.renderer.createElement('span');
/** @type {?} */
const dotPuncture = this.renderer.createElement('i');
this.renderer.addClass(axisCircle, 'axis-circle');
this.renderer.addClass(dotPuncture, 'dot-puncture');
this.renderer.appendChild(axisCircle, dotPuncture);
/** @type {?} */
const hourHand = this.renderer.createElement('div');
this.renderer.addClass(hourHand, 'hour-hand');
this.renderer.addClass(hourHand, 'hour');
/** @type {?} */
const hourHandRound = this.renderer.createElement('span');
/** @type {?} */
const hourHandArrow = this.renderer.createElement('span');
this.renderer.addClass(hourHandRound, 'hour-hand-round');
this.renderer.addClass(hourHandArrow, 'hour-hand-arrow');
this.renderer.appendChild(hourHand, hourHandRound);
this.renderer.appendChild(hourHand, hourHandArrow);
/** @type {?} */
const secondHand = this.renderer.createElement('div');
this.renderer.addClass(secondHand, 'second-hand');
this.renderer.addClass(secondHand, 'hand');
/** @type {?} */
const minuteHand = this.renderer.createElement('div');
this.renderer.addClass(minuteHand, 'minute-hand');
this.renderer.addClass(minuteHand, 'hour');
this.renderer.appendChild(thirdCircle, axisCircle);
this.renderer.appendChild(thirdCircle, hourHand);
this.renderer.appendChild(thirdCircle, secondHand);
this.renderer.appendChild(thirdCircle, minuteHand);
this.elementInfo.hourHand = hourHand;
this.elementInfo.secondHand = secondHand;
this.elementInfo.minuteHand = minuteHand;
}
/**
* @return {?}
*/
startClock() {
/** @type {?} */
const date = new Date();
/** @type {?} */
const seconds = date.getSeconds();
/** @type {?} */
const secondDegrees = ((seconds / 60) * 360) + 90;
this.elementInfo.secondHand.style.transform = `rotate(${secondDegrees}deg)`;
/** @type {?} */
const minutes = date.getMinutes();
/** @type {?} */
const minuteDegrees = ((minutes / 60) * 360) + 360;
this.elementInfo.minuteHand.style.transform = `rotate(${minuteDegrees}deg)`;
/** @type {?} */
const hours = date.getHours();
/** @type {?} */
const hourDegrees = hours * 360 / 12 + ((minutes * 360 / 60) / 12);
this.elementInfo.hourHand.style.transform = `rotate(${hourDegrees}deg)`;
return {
hour: hours,
minute: minutes,
hourDegree: hourDegrees,
minuteDegree: minuteDegrees,
};
}
/**
* @return {?}
*/
onWatchBtnClick() {
this.renderer.listen(this.elementInfo.clockCrown, 'click', (/**
* @return {?}
*/
() => {
/** @type {?} */
const merdian = this.timeInfo.hour <= 12 || this.timeInfo.hour === 24 ? 'am' : ' pm ';
this.renderer.setProperty(this.elementInfo.input, 'value', `${this.timeInfo.hour}:${this.timeInfo.minute}${merdian}`);
this.checkIfInputContainValue(this.elementInfo, this.inlineStyleInfo);
this.renderer.removeClass(this.elementInfo.clockBox, 'toggle-time');
this.clockValue = this.elementInfo.input.value;
this.getClockValue();
}));
}
/**
* @return {?}
*/
onChangeHourTimeClick() {
/** @type {?} */
let nextMove = 0;
this.renderer.listen(this.elementInfo.hourHand, 'click', (/**
* @return {?}
*/
() => {
/** @type {?} */
const date = new Date();
clearInterval(this.runClock);
nextMove++;
date.setHours(this.timeInfo.hour, this.timeInfo.minute + nextMove);
/** @type {?} */
const minutes = date.getMinutes();
/** @type {?} */
const minuteDegrees = ((minutes / 60) * 360) + 360;
this.elementInfo.minuteHand.style.transform = `rotate(${minuteDegrees}deg)`;
/** @type {?} */
const hourDegrees = date.getHours() * 360 / 12 + ((date.getMinutes() * 360 / 60) / 12);
this.elementInfo.hourHand.style.transform = `rotate(${hourDegrees}deg)`;
/** @type {?} */
const merdian = date.getHours() <= 12 || date.getHours() === 24 ? 'am' : ' pm ';
this.renderer.setProperty(this.elementInfo.input, 'value', `${date.getHours()}:${minutes}${merdian}`);
this.checkIfInputContainValue(this.elementInfo, this.inlineStyleInfo);
/** @type {?} */
const changeTimeInfo = {
hour: date.getHours(),
minute: date.getMinutes(),
hourDegree: hourDegrees,
minuteDegree: minuteDegrees,
};
this.timeInfo = changeTimeInfo;
this.refreshClock();
}));
}
/**
* @return {?}
*/
refreshClock() {
setTimeout((/**
* @return {?}
*/
() => {
setInterval((/**
* @return {?}
*/
() => {
this.timeInfo = this.startClock();
}), 1000);
}), 40000);
}
/**
* @return {?}
*/
getClockValue() {
this.timeVal.emit(this.clockValue);
}
}
AnalogwristwatchDirective.decorators = [
{ type: Directive, args: [{
selector: '[ngxWristAnalogwristwatch]'
},] }
];
/** @nocollapse */
AnalogwristwatchDirective.ctorParameters = () => [
{ type: ElementRef },
{ type: Renderer2 },
{ type: NgxAnalogWristWatchService }
];
AnalogwristwatchDirective.propDecorators = {
timeVal: [{ type: Output }]
};
if (false) {
/** @type {?} */
AnalogwristwatchDirective.prototype.timeVal;
/** @type {?} */
AnalogwristwatchDirective.prototype.internalStyle;
/** @type {?} */
AnalogwristwatchDirective.prototype.inlineStyleInfo;
/** @type {?} */
AnalogwristwatchDirective.prototype.elementInfo;
/** @type {?} */
AnalogwristwatchDirective.prototype.timeInfo;
/** @type {?} */
AnalogwristwatchDirective.prototype.runClock;
/** @type {?} */
AnalogwristwatchDirective.prototype.clockValue;
/**
* @type {?}
* @private
*/
AnalogwristwatchDirective.prototype.el;
/**
* @type {?}
* @private
*/
AnalogwristwatchDirective.prototype.renderer;
/**
* @type {?}
* @private
*/
AnalogwristwatchDirective.prototype.clockService;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/ngx-analog-wrist-watch.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NgxAnalogWristWatchModule {
}
NgxAnalogWristWatchModule.decorators = [
{ type: NgModule, args: [{
declarations: [NgxAnalogWristWatchComponent, AnalogwristwatchDirective],
imports: [],
exports: [NgxAnalogWristWatchComponent, AnalogwristwatchDirective]
},] }
];
/**
* @fileoverview added by tsickle
* Generated from: public-api.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: ngx-analog-wrist-watch.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { AnalogwristwatchDirective, NgxAnalogWristWatchComponent, NgxAnalogWristWatchModule, NgxAnalogWristWatchService };
//# sourceMappingURL=ngx-analog-wrist-watch.js.map