/*! * Mapbox, a jQuery Map Plugin * Version 0.7 * Original author: Abel Mohler (wayfarerweb.com). * Further changes: Dennis Schenk (gridonic.ch). * Released with the MIT License: http://www.opensource.org/licenses/mit-license.php * * Depends: * - jquery 1.3+ */ ;(function ($, window, document, undefined) { //"use strict"; $.fn.mapbox = function (options, callback) { if (typeof callback === "function") { options.afterDragging = callback; } var command, arg = arguments; if (typeof options === "string") { command = options; // command passes "methods" such as "zoom", "left", etc. } // Extending defaults options (see bottom of file). options = $.extend({}, $.fn.mapbox.options, options); $(this).css({ overflow: "hidden", position: "relative" }); //È®´ë/Ãà¼Ò¹Ù À̺¥Æ® Ãß°¡ ½ÃÀÛ by pkch at 2013.2.13 function clearScrollEvent() { $('#' + options.sdiv2).off('mousemove'); } //À̺¥Æ® ¿òÁ÷ÀÓ »èÁ¦ function setMagBar(distance) { //magification bar ¿òÁ÷ÀÌ°ÔÇÔ var pt = $('#' + options.sdiv3).css('padding-top'); pt = parseInt(pt.replace('px', '')); if (distance == -1 && pt >= 80) { return; } else if (distance == 1 && pt < 0) { return; } $('#' + options.sdiv3).css('padding-top', (pt - distance * 20)); } $(document).on("mouseup", function () { clearScrollEvent(); }); var tl = document.getElementById(this[0].id); $("#" + options.ar1).css("cursor", "pointer").bind("click", function () { setMagBar(1); _zoom.call(tl, 1); }); $("#" + options.ar2).css("cursor", "pointer").bind("click", function () { setMagBar(-1); _zoom.call(tl, -1); }); $('#' + options.sdiv3 + " > img").css("cursor", "pointer").on('mousedown', function (event) { var prev_b = 0; $('#' + options.sdiv2).on('mousemove', function (e) { //ÃÖ´ë 5´Ü°è°¡ Á¸ÀçÇÔ: ÃÖ´ë³ôÀÌ:0, ÃÖÀú³ôÀÌ:80 var a = e.pageY - 63; var b = parseInt((a + 10) / 20); if (b > 4) { return false; } $('#' + options.sdiv3).css('padding-top', b * 20); if (b > prev_b) { _zoom.call(tl, -1); } else if (b < prev_b) { _zoom.call(tl, 1); } prev_b = b; return false; /// block bubble event }); return false; /// block bubble event }); /*¸¶¿ì½º ÈÙ·Î ÁÜ/ÀÎ event ¹ß»ý½Ã*/ function _zoom(distance) { if (!options.zoom) { return false; } if (distance === 0) { distance = 0; } else { distance = distance || 1; } var layers = $(this).find(">div"), limit = layers.length - 1, current = $(this).find(".current-map-layer"), move = this.visible, eq = move; move += (distance / options.layerSplit); /*°Å¸®/ÈÙ¸µÈ½¼ö*/ if (move < 0) { move = 0; } if (move > limit) { move = limit; } eq = Math.ceil(move); var movement = (this.visible == move) ? false : true; this.visible = move; if (typeof options.beforeZoom === "function") { options.beforeZoom(eq, current[0], this.xPos, this.yPos, this); } var oldWidth = current.width(), oldHeight = current.height(), xPercent = (($(this).width() / 2) + this.xPos) / oldWidth, yPercent = (($(this).height() / 2) + this.yPos) / oldHeight; /*À̹ÌÁö Å©±â config*/ if ((options.layerSplit > 1 && eq > 0)) { var percent = move - (eq - 1), thisX = layers.eq(eq)[0].defaultWidth, /*ÀÌÀü ·¹ÀÌ¾î °¡·Î±æÀÌ*/ thisY = layers.eq(eq)[0].defaultHeight, lastX = layers.eq(eq - 1).width(), /*ÇöÀç ·¹ÀÌ¾î °¡·Î±æÀÌ*/ lastY = layers.eq(eq - 1).height(); var differenceX = thisX - lastX, /*ÀÌÀü°¡·Î-ÇöÀç°¡·Î*/ differenceY = thisY - lastY, totalWidth = lastX + (differenceX * percent), totalHeight = lastY + (differenceY * percent); if (move == 0.5) { //by pkch totalHeight = lastY + (differenceY * 0.9); } } /*À̹ÌÁöÅ©±â Á¶Á¤*/ if (options.layerSplit > 1 && eq > 0) { layers.eq(eq).width(totalWidth).find(".map-layer-mask").width(totalWidth).height(totalHeight); layers.eq(eq).height(totalHeight).find(options.mapContent).width(totalWidth).height(totalHeight); /*.mapcontent*/ } // left and top adjustment for new zoom level var newLeft = (layers.eq(eq).width() * xPercent) - ($(this).width() / 2) var newTop = (layers.eq(eq).height() * yPercent) - ($(this).height() / 2); newLeft = 0 - newLeft; newTop = 0 - newTop; var limitX = $(this).width() - layers.eq(eq).width(), limitY = $(this).height() - layers.eq(eq).height(); if (newLeft > 0) { newLeft = 0; } if (newTop > 0) { newTop = 0; } if (newLeft < limitX) { newLeft = limitX; } if (newTop < limitY) { newTop = limitY; } this.xPos = 0 - newLeft; this.yPos = 0 - newTop; layers.removeClass("current-map-layer").hide(); var newLayer = layers.eq(eq).css({ left: newLeft + "px", top: newTop + "px", display: "block" }).addClass("current-map-layer"); if (typeof options.afterZoom === "function") { options.afterZoom(eq, layers.eq(eq)[0], this.xPos, this.yPos, this); } if (newLayer[0] !== current[0]) { if (typeof options.afterLayerChange === "function") { options.afterLayerChange(eq, layers.eq(eq)[0], this.xPos, this.yPos, this); } } return movement; } function _move(x, y, node) { node = node || $(this).find(".current-map-layer"); var limitX = 0, limitY = 0, mapWidth = $(this).width(), mapHeight = $(this).height(), nodeWidth = $(node).width(), nodeHeight = $(node).height(); if (mapWidth < nodeWidth) { limitX = mapWidth - nodeWidth; } if (mapHeight < nodeHeight) { limitY = mapHeight - nodeHeight; } var left = 0 - (this.xPos + x), top = 0 - (this.yPos + y); left = (left > 0) ? 0 : left; left = (left < limitX) ? limitX : left; top = (top > 0) ? 0 : top; top = (top < limitY) ? limitY : top; this.xPos = 0 - left; this.yPos = 0 - top; $(node).css({ left: left + "px", top: top + "px" }); //alert(left+" : "+top);// ÄÜÆ®·Ñ À§Ä¡°ª } function _position(x, y, node) { node = node || $(this).find(".current-map-layer"); x = 0 - x; y = 0 - y; var limitX = 0 - ($(node).width() - $(this).width()), limitY = 0 - ($(node).height() - $(this).height()); if (x > 0) { x = 0; } if (y > 0) { y = 0; } if (x < limitX) { x = limitX; } if (y < limitY) { y = limitY; } this.xPos = 0 - x; this.yPos = 0 - y; $(node).css({ left: x + "px", top: y + "px" }); } function _makeCoords(s) { s = s.replace(/px/, ""); s = 0 - s; return s; } var method = { // public methods zoom: function (distance) { distance = distance || 1; _zoom.call(this, distance); }, back: function (distance) { distance = distance || 1; _zoom.call(this, 0 - distance); }, left: function (amount) { amount = amount || 100; _move.call(this, 0 - amount, 0); }, right: function (amount) { amount = amount || 100; _move.call(this, amount, 0); }, up: function (amount) { amount = amount || 100; _move.call(this, 0, 0 - amount); }, down: function (amount) { amount = amount || 100; _move.call(this, 0, amount); }, center: function (coords) { coords = coords || { x: $(this).find(".current-map-layer").width() / 2, y: $(this).find(".current-map-layer").height() / 2 }; var node = $(this).find(".current-map-layer"), newX = coords.x - ($(this).width() / 2), newY = coords.y - ($(this).height() / 2); _position.call(this, newX, newY, node[0]); }, zoomTo: function (level) { var distance = Math.round((level - this.visible) / (1 / this.layerSplit)); _zoom.call(this, distance); }, ////////////// ADD //////////////// basic: function (level) { var distance = Math.round((level - this.visible) / (1 / this.layerSplit)); _zoom.call(this, distance); alert(distance); } }; return this.each(function () { // Execute public methods if called. if (typeof command === "string") { var execute = method[command]; options.layerSplit = this.layerSplit || options.layerSplit; execute.call(this, callback); } // Else setup the map. else { this.visible = options.defaultLayer, this.layerSplit = options.layerSplit; // magic var viewport = this, layers = $(this).find(">div"), mapHeight = $(this).height(), mapWidth = $(this).width(), mapmove = false, first = true; layers.css({ position: "absolute" }).eq(options.defaultLayer).css({ display: "block", left: "", top: "" }).addClass("current-map-layer").find(options.mapContent).css({ position: "absolute", left: "0", top: "0", height: mapHeight + "px", width: "100%" }); layers.each(function () { this.defaultWidth = $(this).width(); this.defaultHeight = $(this).height(); $(this).find(options.mapContent).css({ position: "absolute", top: "0", left: "0" }); if ($(this).find(options.mapContent).length > 0) { $(this).find(">img").css({ width: "100%", position: "absolute", left: "0", top: "0" }).after('
'); } }); $(this).find(".map-layer-mask").css({ position: "absolute", left: "0", top: "0", background: "white", // Omg, horrible hack, opacity: "0", // but only way IE will not freak out when filter: "alpha(opacity=0)" // mouseup over IMG tag occurs after mousemove event }); if (options.defaultLayer > 0) { layers.eq(options.defaultLayer).find(".map-layer-mask").width(layers.eq(options.defaultLayer).width()).height(layers.eq(options.defaultLayer).height()); layers.eq(options.defaultLayer).find(options.mapContent).width(layers.eq(options.defaultLayer).width()).height(layers.eq(options.defaultLayer).height()); } $(this).find(">div:not(.current-map-layer)").hide(); if (options.defaultX == null) { options.defaultX = Math.floor((mapWidth / 2) - ($(this).find(".current-map-layer").width() / 2)); if (options.defaultX > 0) { options.defaultX = 0; } } if (options.defaultY == null) { options.defaultY = Math.floor((mapHeight / 2) - ($(this).find(".current-map-layer").height() / 2)); if (options.defaultY > 0) { options.defaultY = 0; } } this.xPos = 0 - options.defaultX; this.yPos = 0 - options.defaultY; this.layerSplit = options.layerSplit; var mapStartX = options.defaultX, mapStartY = options.defaultY, clientStartX, clientStartY; $(this).find(".current-map-layer").css({ left: options.defaultX + "px", top: options.defaultY + "px" }); /** * Event Handling and Callbacks */ var weveMoved = false; $(this).mousedown(function (e) { //if(console){console.log("mouse down!");} /*click event Àü¿¡ Á¤º¸ ÀúÀå by pkch*/ options.before_x = e.pageX; options.before_y = e.pageY; var layer = $(this).find(".current-map-layer"), x = layer[0].style.left, y = layer[0].style.top; x = _makeCoords(x); y = _makeCoords(y); options.beforeDragging(layer, x, y, viewport); mapmove = true; first = true; options.msflag = 1; // mouse down flag by pkch return false; // otherwise dragging on IMG elements etc inside the map will cause problems }); $(document).mouseup(function (e) { //if(console){console.log("mouse up!");} if (options.msflag == 2) { return false; } // ¸¶¿ì½º upµÈ »óÅ¿¡¼­ ´Ù½Ã up µÇ¾úÀ» °æ¿ì event Ãë¼Ò ½ÃÅ´(msflag º¯¼ö¸¦ »ç¿ëÇÏ´Â ÀÌÀ¯) by pkch /*click event È®ÀνÃÅ´ Ãß°¡*/ var original_width = options.original_width; // ¿øº»Å©±â var original_height = options.original_height; // ¿øº»Å©±â var map_layer = $(this).find(".current-map-layer"); var cur_width = map_layer.width(); // È®´ëµÈ Àüü³Êºñ var cur_height = map_layer.height(); // È®´ëµÈ Àüü³ôÀÌ var division_w = cur_width / original_width; //³Êºñ¹èÀ² var division_h = cur_height / original_height; //³ôÀ̹èÀ² //console.log("current (w,h) =("+cur_width+", "+cur_height+") , division_w : "+division_w.toFixed(2)); /*ÇöÀç À§Ä¡(ÃÖÁ»ó´Ü ÁÂÇ¥) Ãß°¡*/ var map_layer = $(this).find(".current-map-layer"); var cur_x = _makeCoords(map_layer[0].style.left); var cur_y = _makeCoords(map_layer[0].style.top); /*¸¶¿ì½º Ŭ¸¯ ÁÂÇ¥ Ãß°¡*/ var layer = $("#viewport").offset(), layer_x = layer.left, layer_y = layer.top, click_x = (e.pageX - layer_x), click_y = (e.pageY - layer_y); /*óÀ½ À̹ÌÁö´Â ÁÂÃø¿¡ ÀÖ´Â ¿©¹éÀÌ Á¸ÀçÇϹǷΠÀÌ ¿©¹éÀ» »©ÁØ´Ù*/ if (division_w == 2) { division_w = 1; cur_x = cur_x - options.default_width; cur_y = cur_y - options.default_height; } /*°°Àº À§Ä¡¿¡¼­ Ŭ¸¯À» Çß´ÂÁö üũÇÔ*/ if (options.before_x > 0 && options.before_y > 0) { if (options.before_x == e.pageX && options.before_y == e.pageY) { /*map area È®ÀÎ*/ var vp = options.point_arr; for (i = 0; i < vp.length; i++) { /*³ëÃâµÈ DIV ¿µ¿ª¿¡ ¸ÅĪµÇ´Â ÁÂÇ¥·Î º¯È¯ Ãß°¡*/ var a = vp[i][0] * division_w - cur_x; var b = vp[i][1] * division_h - cur_y; var c = vp[i][2] * division_w - cur_x; var d = vp[i][3] * division_h - cur_y; if (a < 0) { a = 0; } if (b < 0) { b = 0; } if (c < 0) { c = 0; } if (d < 0) { d = 0; } //console.log("("+vp[i][0]+","+vp[i][1]+"), ("+vp[i][2]+","+vp[i][3]+") > ("+parseInt(a)+","+parseInt(b)+" ), ( "+parseInt(c)+","+parseInt(d)+") clicked ("+parseInt(click_x)+","+parseInt(click_y)+") : "+vp[i][4]); if (a <= click_x && click_x <= c && b <= click_y && click_y <= d) { var title = vp[i][4]; //Á¦¸ñ var section = vp[i][5]; //¼½¼Ç var pubdate = vp[i][6]; //¹ßÇàÀÏ var no = vp[i][7]; //±â»ê¹øÈ£ / ÀԷ¹øÈ£ var year = vp[i][8]; //±â»ç¿¬µµ / ÀԷ¿¬µµ var page = vp[i][9]; //¸é var pn = vp[i][10]; //¸é´ç °íÀ¯¹øÈ£ switch (section) { //case '00' : var sc = 'E'; break; case '01' : var sc = 'A'; break; case '02' : var sc = 'B'; break; case '03' : var sc = 'C'; break; case '04' : var sc = 'D'; break; case '05' : var sc = 'E'; break; } var cw = screen.availWidth; //È­¸é ³ÐÀÌ var ch = screen.availHeight; //È­¸é ³ôÀÌ var sw = 1220; //¶ç¿ï âÀÇ ³ÐÀÌ var sh = 680; //¶ç¿ï âÀÇ ³ôÀÌ var ml = (cw-sw)/2; //°¡¿îµ¥ ¶ç¿ì±âÀ§ÇÑ Ã¢ÀÇ xÀ§Ä¡ var mt = (ch-sh)/2; //°¡¿îµ¥ ¶ç¿ì±âÀ§ÇÑ Ã¢ÀÇ yÀ§Ä¡ window.open('articlePopup.php?MKC=M2&SC='+sc+'&YC='+pubdate.substr(0,4)+'&MC='+pubdate.substr(4,2)+'&DC='+pubdate.substr(6,2)+'&NC='+no+'&EC='+year+'&PC='+page+'&PN='+pn,'articlePopup','width='+sw+',height='+sh+',top='+mt+',left='+ml+',resizable=no,toolbar=no,location=no,scrollbars=no'); } } } } var layer = $(viewport).find(".current-map-layer"), x = layer[0].style.left, y = layer[0].style.top; x = _makeCoords(x); y = _makeCoords(y); options.afterDragging(layer, x, y, viewport); // TODO: this gets called for mouseup events on the whole doc, propably not want we want. mapmove = false; if (weveMoved) { clickDefault = false; } weveMoved = false; options.msflag = 2; // mouse up flag by pkch return false; }); $(document).mousemove(function (e) { var layer = $(viewport).find(".current-map-layer"); if (mapmove && options.pan) { if (first) { clientStartX = e.clientX; clientStartY = e.clientY; mapStartX = layer[0].style.left.replace(/px/, ""); mapStartY = layer[0].style.top.replace(/px/, ""); first = false; } else { weveMoved = true; } var limitX = 0, limitY = 0; if (mapWidth < layer.width()) { limitX = mapWidth - layer.width(); } if (mapHeight < layer.height()) { limitY = mapHeight - layer.height(); } var mapX = mapStartX - (clientStartX - e.clientX); mapX = (mapX > 0) ? 0 : mapX; mapX = (mapX < limitX) ? limitX : mapX; var mapY = mapStartY - (clientStartY - e.clientY); mapY = (mapY > 0) ? 0 : mapY; mapY = (mapY < limitY) ? limitY : mapY; layer.css({ left: mapX + "px", top: mapY + "px" }); options.msflag = 3; // mouse move flag by pkch viewport.xPos = _makeCoords(layer[0].style.left); viewport.yPos = _makeCoords(layer[0].style.top); } }); if (options.mousewheel && typeof $.fn.mousewheel !== "undefined") { $(viewport).mousewheel(function (e, distance) { if (options.zoomToCursor) { //TODO Should probably DRY this. var layer = $(this).find('.current-map-layer'), positionTop = e.pageY - layer.offset().top, // jQuery normalizes pageX and pageY for us. positionLeft = e.pageX - layer.offset().left, // Recalculate this position on current layer as a percentage relativeTop = e.pageY - $(this).offset().top, relativeLeft = e.pageX - $(this).offset().left, percentTop = positionTop / layer.height(), percentLeft = positionLeft / layer.width(); } if (_zoom.call(this, distance) && options.zoomToCursor/* && distance > 0*/) { // Only center when zooming in, since it feels weird on out. Don't center if we've reached the floor. // Convert percentage to pixels on new layer layer = $(this).find('.current-map-layer'); var x = layer.width() * percentLeft, y = layer.height() * percentTop; // And set position. _position.call(this, x - relativeLeft, y - relativeTop, layer[0]); setMagBar(distance);//È®´ë Ãà¼Ò¹Ù by pkch } return false; // Don't scroll the window }); } var clickTimeoutId = setTimeout(function () { }, 0), clickDefault = true; if (options.doubleClickZoom || options.doubleClickZoomOut || options.doubleClickMove) { $(viewport).dblclick(function (e) { // TODO: DRY this // prevent single-click default clearTimeout(clickTimeoutId); clickDefault = false; var layer = $(this).find('.current-map-layer'), positionTop = e.pageY - layer.offset().top,//jQuery normalizes pageX and pageY for us. positionLeft = e.pageX - layer.offset().left, // Recalculate this position on current layer as a percentage percentTop = positionTop / layer.height(), percentLeft = positionLeft / layer.width(); if (options.doubleClickZoom) { distance = options.doubleClickDistance; } else if (options.doubleClickZoomOut) { distance = 0 - options.doubleClickDistance; } else { distance = 0; } _zoom.call(this, distance); // Convert percentage to pixels on new layer. layer = $(this).find('.current-map-layer'); var x = layer.width() * percentLeft, y = layer.height() * percentTop; // And center. method.center.call(this, {x: x, y: y}); return false; }); } if (options.clickZoom || options.clickZoomOut || options.clickMove) { $(viewport).click(function (e) { function clickAction() { if (clickDefault) { // TODO: DRY this var layer = $(this).find('.current-map-layer'), positionTop = e.pageY - layer.offset().top,//jQuery normalizes pageX and pageY for us. positionLeft = e.pageX - layer.offset().left, // Recalculate this position on current layer as a percentage percentTop = positionTop / layer.height(), percentLeft = positionLeft / layer.width(), distance; if (options.clickZoom) { distance = options.clickDistance; } else if (options.clickZoomOut) { distance = 0 - options.clickDistance; } else { distance = 0; } _zoom.call(this, distance); // Convert percentage to pixels on new layer. layer = $(this).find('.current-map-layer'); var x = layer.width() * percentLeft, y = layer.height() * percentTop; // And center. method.center.call(this, {x: x, y: y}); } clickDefault = true; } if (options.doubleClickZoom || options.doubleClickZoomOut || options.doubleClickMove) { // If either of these are registered we need to set the clickAction // into a timeout so that a double click clears it. clickTimeoutId = setTimeout(function () { clickAction.call(viewport); }, 400); } else { clickAction.call(this); } }); } /** * End Event Handling and Callbacks */ // Deferred, load images in hidden layers $(window).load(function () { layers.each(function () { var img = $(this).find("img")[0]; if (typeof img === "object") { $("").attr("src", img.src); } }); }); } }); }; // Default options $.fn.mapbox.options = { msflag: 0, //flag of just having occured mouse event : default:0, mousedown:1, mouseup:2, mousemove:3 zoom: true, // Does map zoom? pan: true, // Does map move side to side and up to down? defaultLayer: 0, // Starting at 0, which layer shows up first layerSplit: 2, // How many times to split each layer as a zoom level mapContent: ".mapcontent", // The name of the class on the content inner layer defaultX: null, // Default positioning on X-axis defaultY: null, // Default positioning on Y-axis zoomToCursor: true, // If true, position on the map where the cursor is set will stay the same relative distance from the edge when zooming doubleClickZoom: false, // If true, double clicking zooms to mouse position clickZoom: false, // If true, clicking zooms to mouse position doubleClickZoomOut: false, // If true, double clicking zooms out to mouse position clickZoomOut: false, // If true, clicking zooms out to mouse position doubleClickMove: false, // If true, double clicking moves the map to the cursor position clickMove: false, // If true, clicking moves the map to the cursor position doubleClickDistance: 1, // Number of positions (determined by layerSplit) to move on a double-click zoom event clickDistance: 1, // Number of positions (determined by layerSplit) to move on a click zoom event beforeDragging: function (layer, xcoord, ycoord, viewport) { }, // This callback happens before dragging of map starts afterDragging: function (layer, xcoord, ycoord, viewport) { }, // This callback happens at end of dragging, after map is released on "mouseup" beforeZoom: function (level, layer, xcoord, ycoord, viewport) { }, // Callback before a zoom happens afterZoom: function (level, layer, xcoord, ycoord, viewport) { }, // Callback after zoom has completed afterLayerChange: function (level, layer, xcoord, ycoord, viewport) { }, // Callback after layer has been changed while zooming. mousewheel: false /* Requires mousewheel event plugin: http://plugins.jquery.com/project/mousewheel*/ }; })(jQuery, window, document);