169 lines
12 KiB
JavaScript
169 lines
12 KiB
JavaScript
var TimePick = (function () {
|
|
|
|
'use strict';
|
|
|
|
var Constructor = function (element) {
|
|
|
|
var globalvar = {};
|
|
globalvar.set_hour = {};
|
|
globalvar.set_minute = {};
|
|
|
|
if(document.getElementById("TimePickStyleSheet") == null) {
|
|
MakeStyle();
|
|
}
|
|
|
|
var unique_id = RandomString(5);
|
|
|
|
if(document.getElementById("TimePickBackgroundOverlay") == null) {
|
|
let overlaydiv = document.createElement("div");
|
|
overlaydiv.id= "TimePickBackgroundOverlay";
|
|
document.body.insertBefore(overlaydiv, document.body.firstChild); // Hinzufügen am Anfang des body-Elements
|
|
overlaydiv.style.zIndex = "-1";
|
|
}
|
|
|
|
globalvar.elemets = document.querySelectorAll(element);
|
|
|
|
for (var i = 0; i < globalvar.elemets.length; i++) {
|
|
let timepickerbtn = globalvar.elemets[i];
|
|
let TIMESARRAY = {};
|
|
globalvar.elemets[i].setAttribute("TimePick", "input_" + unique_id + '_' + i);
|
|
timepickerbtn.insertAdjacentHTML("afterend", `<button class="TimePick_BTN"><svg class="TimePick_ICON" id="${unique_id + '_' + i}" height="20" width="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M22 12C22 17.52 17.52 22 12 22C6.48 22 2 17.52 2 12C2 6.48 6.48 2 12 2C17.52 2 22 6.48 22 12Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M15.71 15.18L12.61 13.33C12.07 13.01 11.63 12.24 11.63 11.61V7.51001" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>
|
|
|
|
|
|
<div class="TimePick_POPUP" id="popup_${unique_id + '_' + i}">
|
|
<div class="hour">
|
|
<div class="adjustbtn uparrow" data='{"type": "hour", "action": "up", "id":"${unique_id + '_' + i}"}'><svg fill="#DDD" height="20px" width="20px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-30.7 -30.7 573.13 573.13" xml:space="preserve" stroke="#DDD" stroke-width="30"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <path d="M508.788,371.087L263.455,125.753c-4.16-4.16-10.88-4.16-15.04,0L2.975,371.087c-4.053,4.267-3.947,10.987,0.213,15.04 c4.16,3.947,10.667,3.947,14.827,0l237.867-237.76l237.76,237.76c4.267,4.053,10.987,3.947,15.04-0.213 C512.734,381.753,512.734,375.247,508.788,371.087z"></path> </g> </g> </g></svg>
|
|
</div>
|
|
<div id="label_hour_${unique_id + '_' + i}" class="label">00</div>
|
|
<div class="adjustbtn downarrow" data='{"type": "hour", "action": "down", "id":"${unique_id + '_' + i}"}'>
|
|
<svg fill="#DDD" height="20px" width="20px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-30.7 -30.7 573.13 573.13" xml:space="preserve" stroke="#DDD" stroke-width="30" transform="rotate(180)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <path d="M508.788,371.087L263.455,125.753c-4.16-4.16-10.88-4.16-15.04,0L2.975,371.087c-4.053,4.267-3.947,10.987,0.213,15.04 c4.16,3.947,10.667,3.947,14.827,0l237.867-237.76l237.76,237.76c4.267,4.053,10.987,3.947,15.04-0.213 C512.734,381.753,512.734,375.247,508.788,371.087z"></path> </g> </g> </g></svg></div>
|
|
</div>
|
|
<div class="minute">
|
|
<div class="adjustbtn uparrow" data='{"type": "minute", "action": "up", "id":"${unique_id + '_' + i}"}'><svg fill="#DDD" height="20px" width="20px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-30.7 -30.7 573.13 573.13" xml:space="preserve" stroke="#DDD" stroke-width="30"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <path d="M508.788,371.087L263.455,125.753c-4.16-4.16-10.88-4.16-15.04,0L2.975,371.087c-4.053,4.267-3.947,10.987,0.213,15.04 c4.16,3.947,10.667,3.947,14.827,0l237.867-237.76l237.76,237.76c4.267,4.053,10.987,3.947,15.04-0.213 C512.734,381.753,512.734,375.247,508.788,371.087z"></path> </g> </g> </g></svg></div>
|
|
<div id="label_minute_${unique_id + '_' + i}" class="label">00</div>
|
|
<div class="adjustbtn downarrow" data='{"type": "minute", "action": "down", "id":"${unique_id + '_' + i}"}'><svg fill="#DDD" height="20px" width="20px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-30.7 -30.7 573.13 573.13" xml:space="preserve" stroke="#DDD" stroke-width="30" transform="rotate(180)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <path d="M508.788,371.087L263.455,125.753c-4.16-4.16-10.88-4.16-15.04,0L2.975,371.087c-4.053,4.267-3.947,10.987,0.213,15.04 c4.16,3.947,10.667,3.947,14.827,0l237.867-237.76l237.76,237.76c4.267,4.053,10.987,3.947,15.04-0.213 C512.734,381.753,512.734,375.247,508.788,371.087z"></path> </g> </g> </g></svg></div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="ampm"></div>
|
|
</div>
|
|
</button>`);
|
|
|
|
if(globalvar.elemets[i].value){
|
|
let previustimestr = globalvar.elemets[i].value;
|
|
let previustimes = previustimestr.split(":");
|
|
let uniquecode = `${unique_id + '_' + i}`;
|
|
|
|
document.getElementById('label_hour_' + uniquecode).innerText = previustimes[0];
|
|
document.getElementById('label_minute_' + uniquecode).innerText = previustimes[1];
|
|
}
|
|
else {
|
|
globalvar.elemets[i].setAttribute("value", "00:00:00");
|
|
}
|
|
|
|
}
|
|
|
|
let timepickpopupbtn = document.getElementsByClassName("TimePick_ICON");
|
|
for(let i = 0; i < timepickpopupbtn.length; i++) {
|
|
timepickpopupbtn[i].onclick = function () {
|
|
let currID = "popup_" + timepickpopupbtn[i].id;
|
|
if(document.getElementById(currID).style.display == "flex"){
|
|
document.getElementById(currID).style.display = "none"
|
|
return;
|
|
}
|
|
document.getElementById(currID).style.display = "flex"
|
|
}
|
|
}
|
|
|
|
document.onclick = function(e){
|
|
if(e.target.id == 'TimePickBackgroundOverlay'){
|
|
let TimePick_POPUP = document.getElementsByClassName("TimePick_POPUP");
|
|
for(let i = 0; i < TimePick_POPUP.length; i++) {
|
|
TimePick_POPUP[i].style.display = "none";
|
|
}
|
|
}
|
|
};
|
|
|
|
let adjustbtn = document.getElementsByClassName("adjustbtn");
|
|
|
|
for(let i = 0; i < adjustbtn.length; i++) {
|
|
|
|
adjustbtn[i].onclick = function () {
|
|
let data = JSON.parse(adjustbtn[i].getAttribute("data"));
|
|
|
|
let curr_hour = document.getElementById('label_hour_' + data.id).innerText;
|
|
let curr_minute = document.getElementById('label_minute_' + data.id).innerText;
|
|
|
|
if (curr_hour != "00") {
|
|
globalvar.set_hour[data.id] = parseInt(curr_hour);
|
|
}
|
|
|
|
if (curr_minute != "00") {
|
|
globalvar.set_minute[data.id] = parseInt(curr_minute);
|
|
}
|
|
|
|
|
|
if(data.type == 'hour' && data.action == 'up'){
|
|
globalvar.set_hour[data.id] = (globalvar.set_hour[data.id]) ? (globalvar.set_hour[data.id] + 1) : 0 + 1;
|
|
globalvar.set_hour[data.id] = (globalvar.set_hour[data.id] == 24) ? 0 : globalvar.set_hour[data.id];
|
|
}
|
|
if(data.type == 'hour' && data.action == 'down'){
|
|
globalvar.set_hour[data.id] = (globalvar.set_hour[data.id]) ? (globalvar.set_hour[data.id] - 1) : -1;
|
|
globalvar.set_hour[data.id] = (globalvar.set_hour[data.id] == -1) ? 23 : globalvar.set_hour[data.id];
|
|
}
|
|
|
|
if(data.type == 'minute' && data.action == 'up'){
|
|
globalvar.set_minute[data.id] = (globalvar.set_minute[data.id]) ? (globalvar.set_minute[data.id] + 1) : 0 + 1;
|
|
globalvar.set_minute[data.id] = (globalvar.set_minute[data.id] == 60) ? 0 : globalvar.set_minute[data.id];
|
|
}
|
|
if(data.type == 'minute' && data.action == 'down'){
|
|
globalvar.set_minute[data.id] = (globalvar.set_minute[data.id]) ? (globalvar.set_minute[data.id] - 1) : -1;
|
|
globalvar.set_minute[data.id] = (globalvar.set_minute[data.id] == -1) ? 59 : globalvar.set_minute[data.id];
|
|
}
|
|
|
|
|
|
let hrview = (globalvar.set_hour[data.id] == undefined) ? '00' : (globalvar.set_hour[data.id] < 10) ? ("0" + globalvar.set_hour[data.id]) : globalvar.set_hour[data.id];
|
|
let mnview = (globalvar.set_minute[data.id] == undefined) ? '00' : (globalvar.set_minute[data.id] < 10) ? ("0" + globalvar.set_minute[data.id]) : globalvar.set_minute[data.id];
|
|
|
|
document.getElementById('label_hour_' + data.id).innerText = hrview;
|
|
document.getElementById('label_minute_' + data.id).innerText = mnview;
|
|
|
|
document.querySelectorAll('input[TimePick=input_' + data.id + ']')[0].value = hrview + ":" + mnview ;
|
|
}
|
|
}
|
|
|
|
//private function
|
|
function RandomString(length) {
|
|
const characters ='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
|
|
let result = '';
|
|
const charactersLength = characters.length;
|
|
for ( let i = 0; i < length; i++ ) {
|
|
result += characters.charAt(Math.floor(Math.random() * charactersLength));
|
|
}
|
|
return result;
|
|
}
|
|
|
|
function MakeStyle(){
|
|
var styles = ".TimePick_POPUP{ position: absolute; height: 80px; width: 120px; background-color: #ffffff; border-radius: 3px; border: 1px solid #eeeeee; display: flex; justify-content: center; align-items: center; box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px; z-index:500; margin-left: 30px; margin-top: -32px; display: none;} svg:active{ fill: #0000; stroke: #0000;} .TimePick_BTN{ position: absolute; background-color: transparent; border: none; margin-left: -35px; margin-top: 7px; cursor: pointer;} .TimePick_ICON{ opacity: 0.5;} .TimePick_ICON:hover{ opacity: 1;} input{ padding: 10px; border-width: 1px; border-style: solid; border-color: lightgray; background-color: white;} #TimePickBackgroundOverlay{ background-color:transparent; position:fixed; top:0; left:0; right:0; bottom:0; display:block;} .label{ font-size: 20px;} .hour{ display: flex; flex-direction: column; width: 35px;} .minute{ display: flex; flex-direction: column; width: 35px;}";
|
|
var styleSheet = document.createElement("style");
|
|
styleSheet.type = "text/css";
|
|
styleSheet.id = "TimePickStyleSheet";
|
|
styleSheet.innerText = styles;
|
|
document.head.appendChild(styleSheet);
|
|
return;
|
|
}
|
|
|
|
return globalvar;
|
|
};
|
|
|
|
return Constructor;
|
|
|
|
})(
|
|
/**********
|
|
*************************************************************************
|
|
*********** JAVASCRIPT MODULE TIME PICKER DONE BY KATHEESKUMAR **********
|
|
*************************************************************************
|
|
***************************** Version: 1.0 ******************************
|
|
*************************************************************************
|
|
**********/
|
|
); |