/*************************************************************** * FC-TrackBar * * Copyright (C) 2008 by Alexander Burtsev - fastcoder.org * and abarmot - http://abarmot.habrahabr.ru/ * designed by Svetlana Solov'eva - http://avis-solo.blogspot.com/ * * This code is a public domain. ***************************************************************/ var trackbar = { // NAMESPACE archive : {}, getObject : function(id) { if (typeof this.archive[id] == "undefined") { this.archive[id] = new this.hotSearch(id); } return this.archive[id]; } }; trackbar.hotSearch = function(id) { // Constructor // Vars this.id = id; this.leftWidth = 0; // px this.rightWidth = 0; // px this.width = 100; // px this.intervalWidth = 0; // px this.leftLimit = 0; this.leftValue = 0; this.rightLimit = 100; this.rightValue = 0; this.valueInterval = 0; this.widthRem = 6; this.valueWidth = 0; this.roundUp = 0; this.x0 = 0; this.y0 = 0; this.blockX0 = 0; this.rightX0 = 0; this.leftX0 = 0; // Flags this.dual = true; this.moveState = false; this.moveIntervalState = false; this.debugMode = true; this.clearLimits = false; this.clearValues = false; this.nodeInit = false; this.itWasMove = false; this.showSmallTicks = false; this.showBigTicks = false; this.smallTicks = 1; this.bigTicks = 1; // Handlers this.onMove = function() {}; // Nodes this.leftBlock = null; this.rightBlock = null; this.leftBegun = null; this.rightBegun = null; this.centerBlock = null; this.tickDiv = null; this.table = null; } trackbar.hotSearch.prototype = { // Const ERRORS : { 1 : "Object initialization error", 2 : "Left slider was not found", 3 : "Right slider was not found", 4 : "Left resize area was not found", 5 : "Right resize area was not found", 9 : "Center click area was not found" }, LEFT_BLOCK_PREFIX : "leftBlock_", RIGHT_BLOCK_PREFIX : "rightBlock_", LEFT_BEGUN_PREFIX : "leftBegun_", RIGHT_BEGUN_PREFIX : "rightBegun_", CENTER_BLOCK_PREFIX : "centerBlock_", TABLE_PREFIX : "fctable_", TICKDIV_PREFIX : "tickdiv_", // Methods // Default gebi : function(id) { return document.getElementById(id); }, addHandler : function(object, event, handler, useCapture) { if (object.addEventListener) { object.addEventListener(event, handler, useCapture ? useCapture : false); } else if (object.attachEvent) { object.attachEvent('on' + event, handler); } else alert(this.errorArray[9]); }, defPosition : function(event) { var x = y = 0; if (document.attachEvent != null) { x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft; y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop; } if (!document.attachEvent && document.addEventListener) { // Gecko x = event.clientX + window.scrollX; y = event.clientY + window.scrollY; } return {x:x, y:y}; }, absPosition : function(obj) { var x = y = 0; while(obj) { x += obj.offsetLeft; y += obj.offsetTop; obj = obj.offsetParent; } return {x:x, y:y}; }, /* Method domReady - Copyright http://ajaxian.com/ More fun with DOMContentLoaded http://ajaxian.com/archives/more-fun-with-domcontentloaded */ domReady : function(i) { var u =navigator.userAgent; var e=/*@cc_on!@*/false; var st = setTimeout; if (/webkit/i.test(u)) { st( function() { var dr=document.readyState; if(dr=="loaded"||dr=="complete"){ i() } else { st(arguments.callee,10); } }, 10 ); } else if ((/mozilla/i.test(u)&&!/(compati)/.test(u)) || (/opera/i.test(u))) { document.addEventListener("DOMContentLoaded", i, false); } else if (e) {( function(){ var t=document.createElement('doc:rdy'); try { t.doScroll('left'); i(); t=null; } catch(e) { st(arguments.callee,0); } })(); } else { window.onload=i; } }, // Common debug : function(keys) { if (!this.debugMode) return; var mes = ""; for (var i = 0; i < keys.length; i++) mes += this.ERRORS[keys[i]] + " : "; mes = mes.substring(0, mes.length - 3); alert(mes); this.table.style.display = "none"; }, init : function(hash, node) { if (typeof node != "undefined" && !this.nodeInit) { this.nodeInit = true; var _this = this; this.domReady( function() {_this.init(hash, node)} ); return; } if (typeof node == "string") node = this.gebi(node); else node = false; try { for (var i in hash) this[i] = hash[i]; // if (this.leftValue < this.leftLimit) this.leftValue = this.leftLimit; if (this.rightValue > this.rightLimit) this.rightValue = this.rightLimit; // HTML Write var code = '
\ \ \ \ \ \
'; if (node) node.innerHTML = code; else document.write(code) // Is all right? this.leftBegun = this.gebi(this.LEFT_BEGUN_PREFIX + this.id); if (this.leftBegun == null) {this.debug([1,2]); return;} this.rightBegun = this.gebi(this.RIGHT_BEGUN_PREFIX + this.id); if (this.rightBegun == null) {this.debug([1,3]); return;} this.leftBlock = this.gebi(this.LEFT_BLOCK_PREFIX + this.id); if (this.leftBlock == null) {this.debug([1,4]); return;} this.rightBlock = this.gebi(this.RIGHT_BLOCK_PREFIX + this.id); if (this.rightBlock == null) {this.debug([1,5]); return;} this.centerBlock = this.gebi(this.CENTER_BLOCK_PREFIX + this.id); if (this.centerBlock == null) {this.debug([1,9]); return;} this.table = this.gebi(this.TABLE_PREFIX + this.id); this.tickDiv = this.gebi(this.TICKDIV_PREFIX + this.id); // Set default this.valueWidth = this.width - 2 * this.widthRem; this.rightValue = this.rightValue || this.rightLimit; this.leftValue = this.leftValue || this.leftLimit; if (!this.dual) this.rightValue = this.leftValue; this.valueInterval = this.rightLimit - this.leftLimit; this.leftWidth = Math.abs(parseInt((this.leftValue - this.leftLimit) / this.valueInterval * this.valueWidth) + this.widthRem); this.rightWidth = Math.abs(this.valueWidth - parseInt((this.rightValue - this.leftLimit) / this.valueInterval * this.valueWidth) + this.widthRem); // Set limits if (!this.clearLimits) { this.leftBlock.firstChild.nextSibling.innerHTML = this.leftLimit; this.rightBlock.firstChild.nextSibling.innerHTML = this.rightLimit; } // Do it! this.setCurrentState(); this.drawTicks(); this.onMove(); // Add handers var _this = this; this.addHandler ( document, "mousemove", function(evt) { if (_this.moveState) _this.moveHandler(evt); if (_this.moveIntervalState) _this.moveIntervalHandler(evt); } ); this.addHandler ( document, "mouseup", function() { _this.moveState = false; _this.moveIntervalState = false; } ); this.addHandler ( this.leftBegun, "mousedown", function(evt) { evt = evt || window.event; if (evt.preventDefault) evt.preventDefault(); evt.returnValue = false; _this.moveState = "left"; _this.x0 = _this.defPosition(evt).x; _this.blockX0 = _this.leftWidth; } ); this.addHandler ( this.rightBegun, "mousedown", function(evt) { evt = evt || window.event; if (evt.preventDefault) evt.preventDefault(); evt.returnValue = false; _this.moveState = "right"; _this.x0 = _this.defPosition(evt).x; _this.blockX0 = _this.rightWidth; } ); this.addHandler ( this.centerBlock, "mousedown", function(evt) { evt = evt || window.event; if (evt.preventDefault) evt.preventDefault(); evt.returnValue = false; _this.moveIntervalState = true; _this.intervalWidth = _this.width - _this.rightWidth - _this.leftWidth; _this.x0 = _this.defPosition(evt).x; _this.rightX0 = _this.rightWidth; _this.leftX0 = _this.leftWidth; } ), this.addHandler ( this.centerBlock, "click", function(evt) { if (!_this.itWasMove) _this.clickMove(evt); _this.itWasMove = false; } ); this.addHandler ( this.leftBlock, "click", function(evt) { if (!_this.itWasMove)_this.clickMoveLeft(evt); _this.itWasMove = false; } ); this.addHandler ( this.rightBlock, "click", function(evt) { if (!_this.itWasMove)_this.clickMoveRight(evt); _this.itWasMove = false; } ); } catch(e) {this.debug([1]);} }, drawTicks : function() { if (this.showBigTicks) for (var i = 1; i <= this.bigTicks; i++) this.tickDiv.innerHTML += '
' + parseInt(this.leftLimit + i * this.valueInterval/ (this.bigTicks + 1)) + '
'; if (this.showSmallTicks) for (i = 1; i <= (this.smallTicks + 1) * (this.bigTicks + 1) - 1; i++) this.tickDiv.innerHTML += '
'; }, clickMoveRight : function(evt) { evt = evt || window.event; if (evt.preventDefault) evt.preventDefault(); evt.returnValue = false; var x = this.defPosition(evt).x - this.absPosition(this.rightBlock).x; var w = this.rightBlock.offsetWidth; if (x <= 0 || w <= 0 || w < x || (w - x) < this.widthRem) return; this.rightWidth = (w - x); this.rightCounter(); this.setCurrentState(); this.onMove(); }, clickMoveLeft : function(evt) { evt = evt || window.event; if (evt.preventDefault) evt.preventDefault(); evt.returnValue = false; var x = this.defPosition(evt).x - this.absPosition(this.leftBlock).x; var w = this.leftBlock.offsetWidth; if (x <= 0 || w <= 0 || w < x || x < this.widthRem) return; this.leftWidth = x; this.leftCounter(); this.setCurrentState(); this.onMove(); }, clickMove : function(evt) { evt = evt || window.event; if (evt.preventDefault) evt.preventDefault(); evt.returnValue = false; var x = this.defPosition(evt).x - this.absPosition(this.centerBlock).x; var w = this.centerBlock.offsetWidth; if (x <= 0 || w <= 0 || w < x) return; if (x >= w / 2) { this.rightWidth += (w - x); this.rightCounter(); } else { this.leftWidth += x; this.leftCounter(); } this.setCurrentState(); this.onMove(); }, setCurrentState : function() { this.leftBlock.style.width = this.leftWidth + "px"; if (!this.clearValues) this.leftBlock.firstChild.innerHTML = (!this.dual && this.leftWidth > this.width / 2) ? "" : this.leftValue; if(!this.dual) { var x = this.leftBlock.firstChild.offsetWidth; this.leftBlock.firstChild.style.right = (this.widthRem * (1 - 2 * (this.leftWidth - this.widthRem) / this.width) - ((this.leftWidth - this.widthRem) * x / this.width)) + 'px'; } this.rightBlock.style.width = this.rightWidth + "px"; if (!this.clearValues) this.rightBlock.firstChild.innerHTML = (!this.dual && this.rightWidth >= this.width / 2) ? "" : this.rightValue; if(!this.dual) { var x = this.rightBlock.firstChild.offsetWidth; this.rightBlock.firstChild.style.left = (this.widthRem * (1 - 2 * (this.rightWidth - this.widthRem) / this.width) - ((this.rightWidth - this.widthRem) * x / this.width)) + 'px'; } }, moveHandler : function(evt) { this.itWasMove = true; evt = evt || window.event; if (evt.preventDefault) evt.preventDefault(); evt.returnValue = false; if (this.moveState == "left") { this.leftWidth = this.blockX0 + this.defPosition(evt).x - this.x0; this.leftCounter(); } if (this.moveState == "right") { this.rightWidth = this.blockX0 + this.x0 - this.defPosition(evt).x; this.rightCounter(); } this.setCurrentState(); this.onMove(); }, moveIntervalHandler : function(evt) { this.itWasMove = true; evt = evt || window.event; if (evt.preventDefault) evt.preventDefault(); evt.returnValue = false; var dX = this.defPosition(evt).x - this.x0; if (dX > 0) { this.rightWidth = this.rightX0 - dX > this.widthRem ? this.rightX0 - dX : this.widthRem; this.leftWidth = this.width - this.rightWidth - this.intervalWidth; } else { this.leftWidth = this.leftX0 + dX > this.widthRem ? this.leftX0 + dX : this.widthRem; this.rightWidth = this.width - this.leftWidth - this.intervalWidth; } this.rightCounter(); this.leftCounter(); this.setCurrentState(); this.onMove(); }, updateRightValue : function(rightValue) { try { this.rightValue = parseInt(rightValue); this.rightValue = this.rightValue < this.leftLimit ? this.leftLimit : this.rightValue; this.rightValue = this.rightValue > this.rightLimit ? this.rightLimit : this.rightValue; if (this.dual) { this.rightValue = this.rightValue < this.leftValue ? this.leftValue : this.rightValue; } else this.leftValue = this.rightValue; this.rightWidth = this.valueWidth - parseInt((this.rightValue - this.leftLimit) / this.valueInterval * this.valueWidth) + this.widthRem; this.rightWidth = isNaN(this.rightWidth) ? this.widthRem : this.rightWidth; if (!this.dual) this.leftWidth = this.width - this.rightWidth; this.setCurrentState(); } catch(e) {} }, rightCounter : function() { if (this.dual) { this.rightWidth = this.rightWidth > this.width - this.leftWidth ? this.width - this.leftWidth : this.rightWidth; this.rightWidth = this.rightWidth < this.widthRem ? this.widthRem : this.rightWidth; this.rightValue = this.leftLimit + this.valueInterval - parseInt((this.rightWidth - this.widthRem) / this.valueWidth * this.valueInterval); if (this.roundUp) this.rightValue = parseInt(this.rightValue / this.roundUp) * this.roundUp; if (this.leftWidth + this.rightWidth >= this.width) this.rightValue = this.leftValue; } else { this.rightWidth = this.rightWidth > (this.width - this.widthRem) ? this.width - this.widthRem : this.rightWidth; this.rightWidth = this.rightWidth < this.widthRem ? this.widthRem : this.rightWidth; this.leftWidth = this.width - this.rightWidth; this.rightValue = this.leftLimit + this.valueInterval - parseInt((this.rightWidth - this.widthRem) / this.valueWidth * this.valueInterval); if (this.roundUp) this.rightValue = parseInt(this.rightValue / this.roundUp) * this.roundUp; this.leftValue = this.rightValue; } }, updateLeftValue : function(leftValue) { try { this.leftValue = parseInt(leftValue); this.leftValue = this.leftValue < this.leftLimit ? this.leftLimit : this.leftValue; this.leftValue = this.leftValue > this.rightLimit ? this.rightLimit : this.leftValue; if (this.dual) { this.leftValue = this.rightValue < this.leftValue ? this.rightValue : this.leftValue; } else this.rightValue = this.leftValue; this.leftWidth = parseInt((this.leftValue - this.leftLimit) / this.valueInterval * this.valueWidth) + this.widthRem; this.leftWidth = isNaN(this.leftWidth) ? this.widthRem : this.leftWidth; if (!this.dual) this.rightWidth = this.width - this.leftWidth; this.setCurrentState(); } catch(e) {} }, leftCounter : function() { if (this.dual) { this.leftWidth = this.leftWidth > this.width - this.rightWidth ? this.width - this.rightWidth : this.leftWidth; this.leftWidth = this.leftWidth < this.widthRem ? this.widthRem : this.leftWidth; this.leftValue = this.leftLimit + parseInt((this.leftWidth - this.widthRem) / this.valueWidth * this.valueInterval); if (this.roundUp) this.leftValue = parseInt(this.leftValue / this.roundUp) * this.roundUp; if (this.leftWidth + this.rightWidth >= this.width) this.leftValue = this.rightValue; } else { this.leftWidth = this.leftWidth > (this.width - this.widthRem) ? this.width - this.widthRem : this.leftWidth; this.leftWidth = this.leftWidth < this.widthRem ? this.widthRem : this.leftWidth; this.rightWidth = this.width - this.leftWidth; this.leftValue = this.leftLimit + parseInt((this.leftWidth - this.widthRem) / this.valueWidth * this.valueInterval); if (this.roundUp) this.leftValue = parseInt(this.leftValue / this.roundUp) * this.roundUp; this.rightValue = this.leftValue; } } }