1/** 2 * DHTMLGoodies.com, Alf Magne Kalleland, September 7th, 2015 3 */ 4if (!DG)var DG = {}; 5 6 7DG.switches = {}; 8DG.OnOffSwitchProperties = ["textOn", "textOff", "width", "height", "trackColorOn", "trackColorOff", 9 "textColorOn", "textColorOff", "listener", "trackBorderColor", "textSizeRatio"]; 10DG.OnOffSwitch = function (config) { 11 if (config.el != undefined) { 12 this.inputEl = $(config.el); 13 14 15 this.name = this.inputEl.attr("name"); 16 DG.switches[this.name] = this; 17 DG.switches["#" + this.inputEl.attr("id")] = this; 18 var t = this.inputEl.attr("type"); 19 this.isCheckbox = t && t.toLowerCase() == "checkbox"; 20 if(this.isCheckbox){ 21 this.checked = this.inputEl.is(":checked"); 22 }else{ 23 this.checked = this.inputEl.val() == 1; 24 } 25 26 } 27 28 var properties = DG.OnOffSwitchProperties; 29 for (var i = 0; i < properties.length; i++) { 30 if (config[properties[i]] != undefined) { 31 this[properties[i]] = config[properties[i]]; 32 } 33 } 34 this.render(); 35}; 36 37 38 39$.extend(DG.OnOffSwitch.prototype, { 40 41 inputEl: undefined, 42 43 listener: undefined, 44 trackBorderColor: undefined, 45 46 checked: false, 47 48 width: 0, 49 height: 30, 50 51 trackBorderWidth: 1, 52 53 textSizeRatio: 0.40, 54 55 trackColorOn: undefined, 56 trackColorOff: '#EEE', 57 58 textColorOn: undefined, 59 textColorOff: undefined, 60 61 62 el: undefined, 63 track: undefined, 64 thumb: undefined, 65 thumbColor: undefined, 66 onTextEl: undefined, 67 offTextEl: undefined, 68 onOffTrackContainer: undefined, 69 70 textOn: "", 71 textOff: "", 72 73 minX: 0, 74 maxX: 0, 75 76 trackOn: undefined, 77 trackOff: undefined, 78 79 80 innerTrackWidth: 0, 81 82 name: undefined, 83 84 dragCurrentX: 0, 85 borderSize: 0, 86 isCheckbox:false, 87 88 render: function () { 89 90 91 if (this.width == 0) { 92 var ratio = this.textSizeRatio / 2; 93 var widthFactor = 2 + Math.max(this.textOff.length * ratio, this.textOn.length * ratio); 94 this.width = this.height * widthFactor; 95 } 96 97 this.inputEl.css("display", "none"); 98 this.el = $('<div class="on-off-switch" style="width:' + this.width + 'px;height:' + this.height + 'px"></div>'); 99 this.inputEl.after(this.el); 100 101 this.inputEl.on("change", this.listenToClickEvent.bind(this)); 102 103 this.renderTrack(); 104 this.renderThumb(); 105 106 this.applyStyles(); 107 108 109 this.track.on("click", this.toggle.bind(this)); 110 this.track.on("touchend", this.toggle.bind(this)); 111 112 this.addEvents(); 113 }, 114 115 listenToClickEvent : function(){ 116 117 if (this.inputEl.is(':checked')) { 118 if(!this.checked)this.toggle(); 119 }else{ 120 if(this.checked)this.toggle(); 121 } 122 123 }, 124 125 addEvents: function () { 126 127 this.thumb.on("mousedown", this.startDragging.bind(this)); 128 this.thumb.on("touchstart", this.startDragging.bind(this)); 129 130 this.thumb.on("mouseenter", this.enterThumb.bind(this)); 131 this.thumb.on("mouseleave", this.leaveThumb.bind(this)); 132 133 $(document.documentElement).on("touchmove", this.drag.bind(this)); 134 $(document.documentElement).on("mousemove", this.drag.bind(this)); 135 $(document.documentElement).on("mouseup", this.endDrag.bind(this)); 136 $(document.documentElement).on("touchend", this.endDrag.bind(this)); 137 }, 138 139 enterThumb: function () { 140 this.thumbColor.addClass("on-off-switch-thumb-over"); 141 }, 142 143 leaveThumb: function () { 144 this.thumbColor.removeClass("on-off-switch-thumb-over"); 145 }, 146 147 renderTrack: function () { 148 var trackWidth = this.width - (this.trackBorderWidth * 2); 149 var innerTrackWidth = trackWidth - (this.height / 2); 150 this.innerTrackWidth = trackWidth; 151 var trackHeight = this.height - (this.trackBorderWidth * 2); 152 var borderWidth = this.height / 2; 153 154 155 this.track = $('<div class="on-off-switch-track" style="border-radius:' + borderWidth + 'px;border-width:' + this.trackBorderWidth + 'px;' + 156 'width:' + trackWidth + 'px;' + 157 'height:' + trackHeight + 'px"></div>'); 158 159 if (this.trackBorderColor) { 160 this.track.css("border-color", this.trackBorderColor); 161 } 162 this.el.append(this.track); 163
164 this.onOffTrackContainer = $('<div style="position:absolute;height:' + trackHeight + 'px;width:' + (innerTrackWidth * 2) + 'px"></div>'); 165 this.track.append(this.onOffTrackContainer); 166 167 168 this.trackOn = $('<div class="on-off-switch-track-on" style="border-radius:' + 0 + 'px;border-width:' + this.trackBorderWidth + 'px;width:' + innerTrackWidth + 'px;height:' + trackHeight + 'px"><div class="track-on-gradient"></div></div>'); 169 this.onOffTrackContainer.append(this.trackOn); 170 this.onTextEl = $('<div class="on-off-switch-text on-off-switch-text-on">' + this.textOn + '</div>'); 171 this.trackOn.append(this.onTextEl); 172 173 if (this.textColorOn) { 174 this.onTextEl.css("color", this.textColorOn); 175 } 176 177 this.trackOff = $('<div class="on-off-switch-track-off" style="overflow:hidden;left:' + (innerTrackWidth - (this.height / 2)) + 'px;border-radius:' + 0 + 'px;border-width:' + this.trackBorderWidth + 'px;width:' + this.width + 'px;height:' + trackHeight + 'px"></div>'); 178 this.offTextEl = $('<div class="on-off-switch-text on-off-switch-text-off">' + this.textOff + '</div>'); 179 this.onOffTrackContainer.append(this.trackOff); 180 this.trackOff.append(this.offTextEl); 181 182 if (this.textColorOff) { 183 this.offTextEl.css("color", this.textColorOff); 184 } 185 186 this.styleText(this.onTextEl); 187 this.styleText(this.offTextEl); 188 189 var whiteHeight = this.height / 2; 190 var whiteBorderRadius = whiteHeight / 2; 191 var horizontalOffset = whiteBorderRadius / 2; 192 var whiteWidth = this.width - (horizontalOffset * 2); 193 194 var whiteEl = $('<div class="on-off-switch-track-white" style="left:' + horizontalOffset + 'px;width:' + whiteWidth + 'px;height:' + whiteHeight + 'px;border-radius:' + whiteBorderRadius + 'px"></div>'); 195 var whiteEl2 = $('<div class="on-off-switch-track-white" style="left:' + horizontalOffset + 'px;width:' + whiteWidth + 'px;height:' + whiteHeight + 'px;border-radius:' + whiteBorderRadius + 'px"></div>'); 196 whiteEl.css("top", this.height / 2); 197 whiteEl2.css("top", this.height / 2); 198 this.trackOn.append(whiteEl); 199 this.trackOff.append(whiteEl2); 200 201 202 this.maxX = this.width - this.height; 203 }, 204 205 styleText: function (el) { 206 var textHeight = Math.round(this.height * this.textSizeRatio); 207 var textWidth = Math.round(this.width - this.height); 208 209 el.css("line-height", (this.height - (this.trackBorderWidth * 2)) + "px"); 210 el.css("font-size", textHeight + "px"); 211 el.css("left", (this.height / 2) + "px"); 212 el.css("width", textWidth + "px"); 213 }, 214 215 renderThumb: function () { 216 217 var borderSize = this.getBorderSize(); 218 219 var size = this.height - (borderSize * 2); 220 var borderRadius = (this.height - this.height % 2) / 2; 221 222 223 this.thumb = $('<div class="on-off-switch-thumb" style="width:' + this.height + 'px;height:' + this.height + 'px"></div>'); 224 225 226 //var shadow = $('<div class="on-off-switch-thumb-shadow" style="border-radius:' + borderRadius + 'px;width:' + size + 'px;height:' 227 // + size + 'px;border-width:' + borderSize + 'px;"></div>'); 228 229 //this.thumb.append(shadow); 230 231 this.thumbColor = $('<div class="on-off-switch-thumb-color" style="border-radius:' + borderRadius + 'px;width:' + size + 'px;height:' + size + 232 'px;left:' + borderSize + 'px;top:' + borderSize + 'px"></div>'); 233 this.thumb.append(this.thumbColor); 234 235 if (this.trackColorOff) { 236 this.trackOff.css("background-color", this.trackColorOff); 237 } 238 if (this.trackColorOn) { 239 this.trackOn.css("background-color", this.trackColorOn); 240 } 241 242 this.el.append(this.thumb); 243 }, 244 245 246 getBorderSize: function () { 247 if (this.borderSize == 0) { 248 this.borderSize = Math.round(this.height / 40); 249 } 250 return this.borderSize; 251 }, 252 253 applyStyles: function () { 254 255 this.thumbColor.removeClass("on-off-switch-thumb-on");
256 this.thumbColor.removeClass("on-off-switch-thumb-off"); 257 this.thumbColor.removeClass("on-off-switch-thumb-over"); 258 259 260 if (this.checked) { 261 this.thumbColor.addClass("on-off-switch-thumb-on"); 262 this.thumb.css("left", this.width - this.height); 263 this.onOffTrackContainer.css("left", 0); 264 } 265 else { 266 this.onOffTrackContainer.css("left", this.getTrackPosUnchecked()); 267 this.thumbColor.addClass("on-off-switch-thumb-off"); 268 this.thumb.css("left", 0); 269 } 270 if(this.isCheckbox){ 271 this.inputEl.prop('checked', this.checked); 272 }else{ 273 this.inputEl.val(this.checked ? 1 : 0); 274 } 275 }, 276 277 isDragging: false, 278 hasBeenDragged: false, 279 startDragging: function (e) { 280 281 282 this.isDragging = true; 283 this.hasBeenDragged = false; 284 var position = this.thumb.position(); 285 286 this.startCoordinates = { 287 x: this.getX(e), 288 elX: position.left, 289 }; 290 return false; 291 }, 292 293 drag: function (e) { 294 if (!this.isDragging) { 295 return true; 296 } 297 298 this.hasBeenDragged = true; 299 var x = this.startCoordinates.elX + this.getX(e) - this.startCoordinates.x; 300 301 if (x < this.minX)x = this.minX; 302 if (x > this.maxX)x = this.maxX; 303 304 this.onOffTrackContainer.css("left", x - this.width + (this.height)); 305 this.thumb.css("left", x); 306 return false; 307 }, 308 309 getX: function (e) { 310 var x = e.pageX; 311 312 if (e.type && (e.type == "touchstart" || e.type == "touchmove")) { 313 x = e.originalEvent.touches[0].pageX; 314 } 315 316 this.dragCurrentX = x; 317 318 return x; 319 320 }, 321 322 endDrag: function () { 323 if (!this.isDragging)return true; 324 325 if (!this.hasBeenDragged) { 326 this.toggle(); 327 } else { 328 var center = this.width / 2 - (this.height / 2); 329 var x = this.startCoordinates.elX + this.dragCurrentX - this.startCoordinates.x; 330 if (x < center) { 331 this.animateLeft(); 332 } else { 333 this.animateRight(); 334 } 335 } 336 this.isDragging = false; 337 }, 338 339 getTrackPosUnchecked: function () { 340 return 0 - this.width + this.height; 341 }, 342 343 animateLeft: function () { 344 this.onOffTrackContainer.animate({left: this.getTrackPosUnchecked()}, 100); 345 this.thumb.animate({left: 0}, 100,"swing", this.uncheck.bind(this)); 346 }, 347 348 animateRight: function () { 349 this.onOffTrackContainer.animate({left: 0}, 100); 350 this.thumb.animate({left: this.maxX}, 100, "swing", this.check.bind(this)); 351 }, 352 353 check: function () { 354 if (!this.checked) { 355 this.checked = true; 356 this.notifyListeners(); 357 } 358 this.applyStyles(); 359 }, 360 361 uncheck: function () { 362 if (this.checked){ 363 this.checked = false; 364 this.notifyListeners(); 365 } 366 this.applyStyles(); 367 }, 368 369 toggle: function () { 370 if (!this.checked) { 371 this.checked = true; 372 this.animateRight(); 373 } else { 374 this.checked = false; 375 this.animateLeft(); 376 } 377 378 this.notifyListeners(); 379 }, 380 381 notifyListeners: function () { 382 if (this.listener != undefined) { 383 this.listener.call(this, this.name, this.checked); 384 } 385 }, 386 387 getValue: function () { 388 return this.checked; 389 } 390}); 391
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.