").click(function(event){
event.stopPropagation();
}),
editButton = $("
").click(function(event){
event.stopPropagation();
makeFormAddCursor(false, {element: self, index: index})
})
if(/^data:image/i.test(self.cururl)){
let colorChange = $("
").click(function(event){
event.stopPropagation();
changeColor({element: self, img: divImg, index: index})
})
divCont.append($("
").append(colorChange,editButton,delCheck),divImgBox,divTitle)
} else {
divCont.append($("
").append(editButton,delCheck),divImgBox,divTitle)
}
$(ListBox).append(divCont)
if(self.active){
activeTrue = true
$(divCont).addClass("acive_cursor")
divImg.one('load', function(){
setCursor(self, this)
}).one('error', function(){
setCursor()
})
}
})
if(firststart || !activeTrue){
$(".element_cur_cont:eq(0)").addClass("acive_cursor")
setCursor("crosshair")
}
$(".checkbox_del_cur").on("change",function(){
$(".checkbox_del_cur:checked").length ? $(".del_cur").fadeIn('slow').css("display","inline-block").text(`Удалить [${$(".checkbox_del_cur:checked").length}]`):$(".del_cur").fadeOut('slow')
})
}
function defaultValueForm(elem){
$(elem).find("#name_scope,#link_scope,#previewName,#previewImg").each(function(){
switch(this.id){
case 'name_scope':
case 'link_scope': this.value = ''
break;
case 'previewName': this.innerText='Default'
break;
case 'previewImg': this.src = defaultCursorImage
break;
}
})
$(".cur_preview").css('cursor','crosshair')
}
function ImgSizeData(img, val){
$(img).one('load', function(){
const w = this.naturalWidth,
h = this.naturalHeight
if(w>128 || h>128) alert(selLang.alertMesImage[0]+w+"px x "+h+"px!\n"+selLang.alertMesImage[1])
$(".cur_preview").css('cursor','url('+this.src+'), not-allowed')
if(this.src !== defaultCursorImage) $(this).data("sizes", {w:w, h:h});
else $(this).data("sizes", {w:null, h:null})
}).one('error', function(){
this.src = defaultCursorImage
$(".cur_preview").css('cursor','crosshair')
}).attr('src', val)
}
function makeFormAddCursor(editmake = false, params = null){
let $makeCurForm = $(".makeCursor_form"),
$cur_overlay = $(".cur_overlay")
if($makeCurForm.length == 0){
$makeCurForm = $("
")
let htmlInner = "
"+
"
"+
"
"+selLang.name+"
"+
"
"+selLang.link+"
"+
"
"+selLang.preview+"
![]("+defaultCursorImage+")
Default
"+
"
"+
"
"+
""
$makeCurForm.html(htmlInner)
$(".mPanel_cur").append($makeCurForm)
$(".makeCursor_form_title > div").click(function(){
$makeCurForm.fadeOut('slow', function(){
$cur_overlay.fadeOut('slow', function(){
defaultValueForm($makeCurForm)
})
})
})
$("#name_scope").on('input', function(){
$("#previewName").text($(this).val())
})
$("#link_scope").on('input', function(){
let val = $(this).val().trim()
ImgSizeData("#previewImg", val)
})
}
// Show form
$cur_overlay.fadeIn('slow', function(){
if(editmake){
$(".makeCursor_form_title > span").text(selLang.addCrosshair)
$("#createCursor").text(selLang.createScope).off().click(function(){
add_edit_Cursor()
})
} else {
$(".makeCursor_form_title > span").text(selLang.editCrosshair)
$makeCurForm.find("#name_scope").val(params.element.name)
$makeCurForm.find("#link_scope").val(params.element.cururl)
ImgSizeData("#previewImg", params.element.cururl)
$("#createCursor").text(selLang.editEditApply).off().click(function(){
if(params !== null && Object.keys(params).length) add_edit_Cursor(params)
})
}
$makeCurForm.fadeIn('fast')
})
}
function add_edit_Cursor(parametri = null){
let $makeCurForm = $(".makeCursor_form"),
$cursorName = $makeCurForm.find("#name_scope"),
$cursorUrl = $makeCurForm.find("#link_scope"),
$cur_overlay = $(".cur_overlay"),
$previewImg = $makeCurForm.find("#previewImg")
let cursorNameVal = $cursorName.val(),
cursorUrlVal = $cursorUrl.val(),
errors = false
if(/^\s*$/i.test(cursorNameVal)){
cursorNameVal="Croshair_"+Math.floor(Math.random()*10000)
$cursorName.val(cursorNameVal)
alert(selLang.errorName+cursorNameVal)
}
if(/^\s*$/i.test(cursorUrlVal)){
alert(selLang.errorLinkEmpty)
errors = true
}
if(!/(?:^https?:\/\/.*\.(?:png|jpg|jpeg|gif|cur|tiff)$|^data:image)/i.test(cursorUrlVal)){
alert(selLang.errorLink)
errors = true
}
if(!errors){
const w = $previewImg.data("sizes").w || 0,
h = $previewImg.data("sizes").h || 0
if(w>128 || h>128 || w == 0 || h == 0 || w == null || h == null){
alert(selLang.errorImage)
errors = true
}
}
if(errors){
alert(selLang.errorAdd)
return
}
if(ObjSaveCursors.hasOwnProperty("cursorList")){
let ovetMessage = selLang.addComplete
if(parametri == null){
ObjSaveCursors.cursorList.push({name:cursorNameVal, cururl:cursorUrlVal, active:false})
} else {
if(Object.keys(ObjSaveCursors.cursorList).length && Object.keys(parametri).length){
ObjSaveCursors.cursorList[parametri.index] = {name:cursorNameVal, cururl:cursorUrlVal, active:false}
ovetMessage = selLang.editComplete
} else return
}
saveToStorage()
$makeCurForm.fadeOut('slow', function(){
$cur_overlay.fadeOut('slow', function(){
defaultValueForm($makeCurForm)
})
})
updatePanel()
alert(ovetMessage)
}
}
function returnActive(){
let activetrue = null
if(ObjSaveCursors.hasOwnProperty("cursorList") && Object.keys(ObjSaveCursors.cursorList).length){
activetrue = ObjSaveCursors.cursorList.filter((ix,elem)=>{
return ix.active == true
})
return activetrue
}
}
function checkActive(el){
if(ObjSaveCursors.hasOwnProperty("cursorList") && Object.keys(ObjSaveCursors.cursorList).length){
ObjSaveCursors.cursorList.map((ix,elem)=>{
ix.active = false
return ix.active
})
if(el !== null ) el.active = true
}
}
function delCursor(){
if(confirm(selLang.delCrosshair)){
let arr_delete_cursors = []
$(".list_cur").find("input[type=checkbox]").each(function(index,eleme){
if($(this).is(':checked')){
arr_delete_cursors.push(index);
}
});
arr_delete_cursors = arr_delete_cursors.reverse();
for(var k in arr_delete_cursors){
ObjSaveCursors.cursorList.splice(arr_delete_cursors[k],1);
}
saveToStorage()
$(".del_cur").fadeOut('slow')
updatePanel()
alert(selLang.delComplete)
}
}
function setColorsScope(){
let can = document.getElementById("canvasChangeColor"),
ctx = can.getContext("2d"),
imgData = ctx.getImageData(0, 0, can.width, can.height),
eli = document.getElementsByClassName("rangeColors"),
r = parseInt(eli[0].value),
g = parseInt(eli[1].value),
b = parseInt(eli[2].value),
a = 255
for (var i = 0; i < imgData.data.length; i += 4) {
imgData.data[i] = r; //r
imgData.data[i + 1] = g; //g
imgData.data[i + 2] = b; //b
//imgData.data[i + 3] = a; // alpha
}
ctx.putImageData(imgData, 0, 0);
}
function setChangeColor(params){
const eli = document.getElementsByClassName("rangeColors"),
r=parseInt(eli[0].value),
g=parseInt(eli[1].value),
b=parseInt(eli[2].value),
a = 255,
canvas = document.getElementById("canvasChangeColor")
if(Object.keys(ObjSaveCursors.cursorList[params.index]).length && canvas){
if(!ObjSaveCursors.cursorList[params.index].hasOwnProperty('change_color')){
ObjSaveCursors.cursorList[params.index].change_color = {colors:{r:r,g:g,b:b,a:a}, src_new: canvas.toDataURL("image/png")}
} else {
ObjSaveCursors.cursorList[params.index].change_color = {colors:{r:r,g:g,b:b,a:a}, src_new: canvas.toDataURL("image/png")}
}
if(debug) console.log("Цвета:",ObjSaveCursors.cursorList[params.index]);
saveToStorage();
updatePanel();
} else alert("Object not found, or canvas not isset!");
}
function setDefaultCursorColors(params){
if(Object.keys(params.element.change_color).length && params.element.change_color.src_new){
if(confirm(selLang.resetColorAnswer)){
delete ObjSaveCursors.cursorList[params.index].change_color
saveToStorage();
updatePanel();
new Array().slice.call(document.getElementsByClassName("rangeColors")).forEach(function(el){el.value = 0})
changeColor(params)
}
}
}
function changeColor(params = null){
let can, ctx,img
can = document.getElementById("canvasChangeColor")
ctx = can.getContext("2d")
if(params != null && Object.keys(params).length){
if(params.element.change_color && Object.keys(params.element.change_color.colors).length){
let colors = params.element.change_color.colors,
a = colors.a,
inptuts_colors = document.getElementsByClassName("rangeColors")
inptuts_colors[0].value = colors.r
inptuts_colors[1].value = colors.g
inptuts_colors[2].value = colors.b
}
img = new Image()
img.onload = function() {
can.width = this.naturalWidth
can.height = this.naturalHeight
ctx.drawImage(this, 0, 0)
setColorsScope();
}
img.src = params.img.attr('src')
$("#setChangeColor").off().click(setChangeColor.bind(ctx, params))
$("#setDefaultChangeColor").off().click(setDefaultCursorColors.bind(ctx, params))
} else {
can.width = 80
can.height = 80
ctx.font="10px Georgia";
ctx.textAlign="center";
ctx.fillStyle = "white";
ctx.fillText(selLang.not_selected.toUpperCase(),can.width/2,can.height/2);
let eli = document.getElementsByClassName("rangeColors")
for (let i = 0; i < eli.length; i++) {
eli[i].addEventListener("input", setColorsScope)
}
$("#setChangeColor").add($("#setDefaultChangeColor")).off().click(function(){
alert(selLang.error_ChangeColor)
})
}
}
function init(){
let firststart = false;
if(loadStorage()){
firststart = true
if(debug) console.log("Первый запуск!", firststart)
}
makeMenuButton(firststart)
makePanel()
updatePanel(firststart)
changeColor()
}
init()
})();