// STYLING FILE INPUTS 1.0 | Shaun Inman | 2007-09-07 if (!window.SI) { var SI = {}; }; SI.Files = { htmlClass : 'SI-FILES-STYLIZED', fileClass : 'filefield', wrapClass : 'cabinet', fini : false, able : false, init : function() { this.fini = true; var ie = 0 //@cc_on + @_jscript_version if (window.opera || (ie && ie < 5.5) || !document.getElementsByTagName) { return; } // no support for opacity or the DOM //----------------------------IE6だとファイルをキャンセルした時、挙動がおかしいみたい。 if (ie && ie < 6.5) { //return; } //---------------------------- this.able = true; var html = document.getElementsByTagName('html')[0]; html.className += (html.className != '' ? ' ' : '') + this.htmlClass; }, stylize : function(elem) { if (!this.fini) { this.init(); }; if (!this.able) { return; }; elem.parentNode.file = elem; elem.parentNode.onmousemove = function(e) { if (typeof e == 'undefined') e = window.event; if (typeof e.pageY == 'undefined' && typeof e.clientX == 'number' && document.documentElement) { e.pageX = e.clientX + document.documentElement.scrollLeft; e.pageY = e.clientY + document.documentElement.scrollTop; }; var cox = coy = 0; var pelem = this.parentNode; if (pelem.offsetParent) { cox = pelem.offsetLeft; coy = pelem.offsetTop; while (pelem = pelem.offsetParent) { cox += pelem.offsetLeft; coy += pelem.offsetTop; }; }; var ox = oy = 0; var elem = this; if (elem.offsetParent) { ox = elem.offsetLeft; oy = elem.offsetTop; while (elem = elem.offsetParent) { ox += elem.offsetLeft; oy += elem.offsetTop; }; }; var x = e.pageX - ox; var y = e.pageY - oy; var w = this.file.offsetWidth; var h = this.file.offsetHeight; var cw = this.parentNode.offsetWidth; var ch = this.parentNode.offsetHeight; if(e.pageX < cox || e.pageX > cox + cw || e.pageY < coy || e.pageY > coy + ch) { //IE this.file.style.top = 0 +'px'; this.file.style.left = 0 +'px'; return; } this.file.style.top = y - (h / 2) + 'px'; this.file.style.left = x - (w - 30) + 'px'; }; elem.parentNode.onmouseout = function(e) { //FF this.file.style.top = 0 +'px'; this.file.style.left = 0 +'px'; } }, stylizeById : function(id) { this.stylize(document.getElementById(id)); }, stylizeAll : function() { if (!this.fini) { this.init(); }; if (!this.able) { return; }; var inputs = document.getElementsByTagName('input'); for (var i = 0; i < inputs.length; i++) { var input = inputs[i]; if (input.type == 'file' && input.className.indexOf(this.fileClass) != -1 && input.parentNode.className.indexOf(this.wrapClass) != -1) { this.stylize(input); }; }; } };