https://www.mirkrasok.ru/local/templates/mirkrasok_2026v2/js/form.js

1/*
2
3CUSTOM FORM ELEMENTS
4
5Created by Ryan Fait
6www.ryanfait.com
7
8The only things you may need to change in this file are the following
9variables: checkboxHeight, radioHeight and selectWidth (lines 24, 25, 26)
10
11The numbers you set for checkboxHeight and radioHeight should be one quarter
12of the total height of the image want to use for checkboxes and radio
13buttons. Both images should contain the four stages of both inputs stacked
14on top of each other in this order: unchecked, unchecked-clicked, checked,
15checked-clicked.
16
17You may need to adjust your images a bit if there is a slight vertical
18movement during the different stages of the button activation.
19
20The value of selectWidth should be the width of your select list image.
21
22Visit http://ryanfait.com/ for more information.
23
24*/
25
26var checkboxHeight = "15";
27var radioHeight = "15";
28var selectWidth = "220";
29
30
31/* No need to change anything after this */
32$(document).ready(function(){
33	$(".ch_box input:checked").closest(".ch_box").addClass("active");
34});
35
36document.write('<style type="text/css">input.styled { display: none; } select.styled { position: relative; width: ' + selectWidth + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }</style>');
37
38
39var Custom = {
40    init: function() {
41        var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
42        for(a = 0; a < inputs.length; a++) {
43            if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && (inputs[a].className == "styled")&&(!inputs[a].getAttribute("processed"))) {
44                span[a] = document.createElement("span");
45                span[a].className = inputs[a].type;
46
47                if(inputs[a].checked == true) {
48                    if(inputs[a].type == "checkbox") {
49                        position = "0 -" + (checkboxHeight*2) + "px";
50                        span[a].style.backgroundPosition = position;
51                    } else {
52                        position = "0 -" + (radioHeight*2) + "px";
53                        span[a].style.backgroundPosition = position;
54                    }
55                }
56                inputs[a].parentNode.insertBefore(span[a], inputs[a]);
57                inputs[a].onchange = Custom.clear;
58                inputs[a].setAttribute("processed",1);
59                if(!inputs[a].getAttribute("disabled")) {
60                    span[a].onmousedown = Custom.pushed;
61                    span[a].onmouseup = Custom.check;
62                } else {
63                    span[a].className = span[a].className += " disabled";
64                }
65            }
66        }
67        inputs = document.getElementsByTagName("select");
68        for(a = 0; a < inputs.length; a++) {
69            if((inputs[a].className == "styled")&&(!inputs[a].getAttribute("processed"))) {
70                option = inputs[a].getElementsByTagName("option");
71                active = option[0].childNodes[0].nodeValue;
72                textnode = document.createTextNode(active);
73                for(b = 0; b < option.length; b++) {
74                    if(option[b].selected == true) {
75                        textnode = document.createTextNode(option[b].childNodes[0].nodeValue);
76                    }
77                }
78                span[a] = document.createElement("span");
79                span[a].className = "select";

80                span[a].id = "select" + inputs[a].name;
81                span[a].appendChild(textnode);
82                inputs[a].parentNode.insertBefore(span[a], inputs[a]);
83                inputs[a].setAttribute("processed",1);
84                if(!inputs[a].getAttribute("disabled")) {
85                    inputs[a].onchange = Custom.choose;
86                } else {
87                    inputs[a].previousSibling.className = inputs[a].previousSibling.className += " disabled";
88                }
89            }
90        }
91        document.onmouseup = Custom.clear;
92    },
93    pushed: function() {
94        return false;
95        //console.log("pushed",this);
96        element = this.nextSibling;
97        if($(element).parents(".ch_box").find("label.disabled").length) return;
98        if(element.checked == true && element.type == "checkbox") {
99            this.style.backgroundPosition = "0 -" + checkboxHeight*3 + "px";
100        } else if(element.checked == true && element.type == "radio") {
101            this.style.backgroundPosition = "0 -" + radioHeight*3 + "px";
102        } else if(element.checked != true && element.type == "checkbox") {
103            this.style.backgroundPosition = "0 -" + checkboxHeight + "px";
104        } else {
105            this.style.backgroundPosition = "0 -" + radioHeight + "px";
106        }
107        return false;
108    },
109    check: function() {
110        //console.log("check",this);
111        if(this.tagName!="INPUT") return;
112        element = this.nextSibling;
113
114        if($(element).parents(".ch_box").find("label.disabled").length) return;
115        if(element.checked == true && element.type == "checkbox") {
116            this.style.backgroundPosition = "0 0";
117            element.checked = false;
118            $(this).closest(".ch_box").removeClass("active");
119
120
121        } else {
122            if(element.type == "checkbox") {
123                this.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
124                $(this).closest(".ch_box").addClass("active");
125            } else {
126                this.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
127                group = this.nextSibling.name;
128                inputs = document.getElementsByTagName("input");
129                for(a = 0; a < inputs.length; a++) {
130                    if(inputs[a].name == group && inputs[a] != this.nextSibling) {
131                        inputs[a].previousSibling.style.backgroundPosition = "0 0";
132                    }
133                }
134            }
135            element.checked = true;
136        }
137        return false;
138    },
139    clear: function() {
140        //console.log("clear",this);
141        if(this.tagName!="INPUT") return;
142        inputs = document.getElementsByTagName("input");
143        for(var b = 0; b < inputs.length; b++) {
144            if($(inputs[b]).parents(".ch_box").find("label.disabled").length) continue;
145            if(inputs[b].type == "checkbox" && inputs[b].checked == true && inputs[b].className == "styled") {
146                inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
147
148            } else if(inputs[b].type == "checkbox" && inputs[b].className == "styled") {
149                inputs[b].previousSibling.style.backgroundPosition = "0 0";
150
151            } else if(inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].className == "styled") {
152                inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
153
154            } else if(inputs[b].type == "radio" && inputs[b].className == "styled") {
155                inputs[b].previousSibling.style.backgroundPosition = "0 0";
156
157            }
158        }
159        return false;
160    },
161    choose: function() {
162        option = this.getElementsByTagName("option");
163        for(d = 0; d < option.length; d++) {
164            if(option[d].selected == true) {
165                document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
166                eval($(this).attr("onchange"));
167                /*if(this.wait!=1)
168                 {
169                 this.wait=1;
170                 $(this).trigger("change");
171                 }
172                 this.wait=0;*/
173                /*if($(this).data("changing")!="1")
174                 {
175                 $(this).data("changing","1");
176                 console.log(this.onchange);
177
178                 }
179                 $(this).data("changing","0");*/
180            }
181        }
182    }
183
184}
185
186window.onload = Custom.init;