/*js
//==>>>==>>>==>>>==>>>==>>>==>>>==>>>==>>>==>>>==>>>==>>>==>>>==>>>
//
// CssHidex v1.16 [ Commercial Version ]
// Copyright (c) phpkobo.com ( http://www.phpkobo.com/ )
// Email : admin@phpkobo.com
// ID : HDXCS-116
// URL : http://www.phpkobo.com/csshidex
//
//==<<<==<<<==<<<==<<<==<<<==<<<==<<<==<<<==<<<==<<<==<<<==<<<==<<<
*/
////////////////////////////////////////////////////////////////////
// $shorthands
function $(selector,el_ref){
return (el_ref?el_ref:document).querySelector(selector);
};
function $$(selector,el_ref){
return (el_ref?el_ref:document).querySelectorAll(selector);
};
function $id(id){
return document.getElementById(id);
};
function $ce(tagName){
return document.createElement(tagName);
};
////////////////////////////////////////////////////////////////////
// jQuery.offset
function jqOffset(el){
var rect=el.getBoundingClientRect();
var el_body=document.documentElement;
return {
x:rect.left+el_body.scrollLeft,
y:rect.top+el_body.scrollTop
};
};
////////////////////////////////////////////////////////////////////
// ajaxCall
function ajaxCall(url_server,requ,callback,auxproc,errproc){
const xhr=new XMLHttpRequest();
xhr.open("POST",url_server,true);
xhr.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded; charset=UTF-8");
xhr.addEventListener("load",function(){
if (xhr.status==200){
let str=xhr.responseText;
const sig="[!json!]";
const pos=str.indexOf(sig);
if(pos!=-1){
if(pos>0){
const pretext=str.substr(0,pos);
if(errproc){errproc("SBL",pretext);}
}
str=str.substr(pos+sig.length);
const resp=JSON.parse(str);
if (resp.result=="OK"){
if(callback){callback(resp);}
}else{
if(errproc){errproc("NOR",resp.result);}
}
}else{
if(errproc){errproc("SMS",str);}
}
}else{
let s="";
s+="status:"+xhr.status+"\n";
s+="statusText:"+xhr.statusText;
if(errproc){errproc("N2H",s);}
}
});
if(auxproc){auxproc(xhr);}
xhr.send("requ="+encodeURIComponent(JSON.stringify(requ)));
return xhr;
};
////////////////////////////////////////////////////////////////////
// protect a webpage form drag-and-drop
function preventFileDrop(){
document.addEventListener("dragover",function(e){
e.preventDefault();
});
document.addEventListener("drop",function(e){
e.preventDefault();
});
};
preventFileDrop();
////////////////////////////////////////////////////////////////////
// end events
function onEnd(el,callback,ename){
const func=function(e){
if(el==e.srcElement){
el.removeEventListener(ename,func);
if(callback){callback(e);}
}
};
el.addEventListener(ename,func);
};
function onTransitionEnd(el,callback){
onEnd(el,callback,"transitionend");
};
function onAnimationEnd(el,callback){
onEnd(el,callback,"animationend");
};
////////////////////////////////////////////////////////////////////
// createElementFromHTML
function createElementFromHTML(html){
const el=document.createElement("div");
el.innerHTML=html;
return el.firstElementChild;
}
////////////////////////////////////////////////////////////////////
// browser detection
function isSafari(){
return (window.safari!==undefined);
};
function isFireFox(){
return (navigator.userAgent.toLowerCase().indexOf('firefox')>-1);
};
function isIE(){
var ua=window.navigator.userAgent;
var msie=ua.indexOf("MSIE ");
// Trident/7.0; rv:11.0
return ((msie>0)||!!ua.match(/Trident.*rv\:11\./));
};
////////////////////////////////////////////////////////////////////
// send enter & space to click
function esToClick(el){
el.addEventListener("keydown",function(e){
if((e.key=="Enter")||(e.key==" ")){
e.preventDefault();
this.click();
}
});
return el;
};
"use strict";
function CUiControl(px){
var el_control=px.el_control;
function enable(){
el_control.classList.remove("uic-disable");
};
function disable(){
el_control.classList.add("uic-disable");
};
function init(){
enable();
};
init();
return {
enable:enable,
disable:disable
};
};
"use strict";
function CSvgBtnControl(px){
// elements
var el_control=px.el_control;
// parameters
var btntype=px.btntype?px.btntype:"check";
// function closures
var fcl=null;
// button data
var btndata={
"check":{
scale:20,
code:`
`},
"x":{
scale:25,
code:`
`},
"threedots":{
scale:20,
code:`
`},
"threelines":{
scale:20,
code:`
`},
"folder":{
scale:20,
code:`
`}
};
function setBtn(btntype){
el_control.innerHTML=btndata[btntype].code;
var el_svg=el_control.querySelector(".sbc-svg");
var scale=btndata[btntype].scale;
el_svg.style.top=el_svg.style.bottom=
el_svg.style.left=el_svg.style.right=scale+"%";
if(px.style){
for(var key in px.style){
el_control.style[key]=px.style[key];
}
}
};
function init(){
setBtn(btntype);
// events
var style_focus=true;
el_control.addEventListener("pointerdown",function(e){
style_focus=false;
});
el_control.addEventListener("click",function(e){
style_focus=true;
});
el_control.addEventListener("keydown",function(e){
if((e.key=="Enter")||(e.key==" ")){
e.preventDefault();
this.click();
}
});
el_control.addEventListener("focus",function(e){
if(style_focus){
el_control.classList.add("sbc-focus");
}
});
el_control.addEventListener("blur",function(e){
el_control.classList.remove("sbc-focus");
});
// call base class
fcl=CUiControl({
el_control:el_control
});
};
init();
return fcl;
};
"use strict";
////////////////////////////////////////////////////////////////////
// CDropAreaControl
function CDropAreaControl(px){
// elements
var el_control=px.el_control;
var el_fileinput=null;
var el_select=null;
var el_message=null;
function show(){
el_control.classList.remove("dac-hide");
el_control.classList.remove("dac-dragover");
};
function hide(){
el_control.classList.add("dac-hide");
};
function enable(){
el_control.classList.remove("dac-disable");
};
function disable(){
el_control.classList.add("dac-disable");
};
function loadFile(file){
if(!file){return;}
el_control.dispatchEvent(new CustomEvent("dropareafile",{detail:file}));
};
function init(){
// build droparea
var el_message=document.createElement("div");
el_message.className="dac-message";
el_message.innerHTML="Drop Picture File Here";
el_fileinput=document.createElement("input");
el_fileinput.className="dac-fileinput";
el_fileinput.setAttribute("type","file");
el_fileinput.setAttribute("title","");
el_fileinput.setAttribute("tabindex","-1");
el_select=document.createElement("div");
el_select.className="dac-select";
el_select.classList.add("sbc-control");
el_select.setAttribute("tabindex","0");
el_select.appendChild(el_fileinput);
el_control.appendChild(el_message);
el_control.appendChild(el_select);
CSvgBtnControl({
el_control:el_select,
btntype:"folder"
});
// events
// relay a click on the button to the file input inside
el_select.addEventListener("click",function(e){
e.preventDefault();
e.stopPropagation();
el_fileinput.click();
});
// handle the change evernt of a file input
el_fileinput.addEventListener("change",function(e){
e.preventDefault();
// check the number of the files selected.
// if it's 0 (like the dialog box is cancelled),
// then do not proceed.
if(this.files.length){
loadFile(this.files[0],"fi");
// set the value to null so it can select
// the same file and trigger the 'change' event.
this.value=null;
}
});
// drag and drop a file to the input code
el_control.addEventListener("drop",function(e){
this.classList.remove("dac-dragover");
e.preventDefault();
if(e.dataTransfer.files.length){
loadFile(e.dataTransfer.files[0],"dd");
}
});
el_control.addEventListener("dragenter",function(e){
this.classList.add("dac-dragover");
});
el_control.addEventListener("dragleave",function(e){
this.classList.remove("dac-dragover");
});
// prevent from opening the image in the browser
// This does not stop the browser to open the image
// when it's dropped outsite of the element
el_control.addEventListener("dragover",function(e){
e.preventDefault();
});
// call base class
CUiControl({
el_control:el_control
});
};
init();
return {
show:show,
hide:hide,
enable:enable,
disable:disable
};
};