+++ /dev/null
-// Copyright (c) 2006 spinelz.org (http://script.spinelz.org/)\r
-// \r
-// This code is substantially based on code from script.aculo.us which has the \r
-// following copyright and permission notice\r
-//\r
-// Copyright (c) 2005 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)\r
-// \r
-// Permission is hereby granted, free of charge, to any person obtaining\r
-// a copy of this software and associated documentation files (the\r
-// "Software"), to deal in the Software without restriction, including\r
-// without limitation the rights to use, copy, modify, merge, publish,\r
-// distribute, sublicense, and/or sell copies of the Software, and to\r
-// permit persons to whom the Software is furnished to do so, subject to\r
-// the following conditions:\r
-// \r
-// The above copyright notice and this permission notice shall be\r
-// included in all copies or substantial portions of the Software.\r
-//\r
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,\r
-// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\r
-// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\r
-// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE\r
-// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION\r
-// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION\r
-// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE\r
-\r
-var Balloon = Class.create()\r
-Balloon.classNames = {\r
- tooltip: 'balloon_tooltip',\r
- top: 'balloon_top',\r
- topLeft: 'balloon_top_left',\r
- topMiddle: 'balloon_top_middle',\r
- topRight: 'balloon_top_right',\r
- middle: 'balloon_middle',\r
- middleLeft: 'balloon_middle_left',\r
- middleRight: 'balloon_middle_right',\r
- middleLeftRowT: 'balloon_middle_left_row',\r
- middleLeftRowB: 'balloon_middle_left_row',\r
- middleRightRowT: 'balloon_middle_right_row',\r
- middleRightRowB: 'balloon_middle_right_row',\r
- leftArrow: 'balloon_left_arrow',\r
- rightArrow: 'balloon_right_arrow',\r
- leftUpArrow: 'balloon_left_up_arrow',\r
- leftDownArrow: 'balloon_left_down_arrow',\r
- rightUpArrow: 'balloon_right_up_arrow',\r
- rightDownArrow: 'balloon_right_down_arrow',\r
- body: 'balloon_body',\r
- bottom: 'balloon_bottom',\r
- bottomLeft: 'balloon_bottom_left',\r
- bottomMiddle: 'balloon_bottom_middle',\r
- bottomRight: 'balloon_bottom_right'\r
-}\r
-Balloon.allBalloons = [];\r
-Balloon.closeAll = function(){\r
- Balloon.allBalloons.each(function(b){\r
- b.close();\r
- });\r
-}\r
-Balloon.eventSetting = false;\r
-Balloon.prototype = {\r
- initialize : function (target, message){\r
- this.target = $(target);\r
-\r
- this.options = Object.extend({\r
- cssPrefix: 'custom_',\r
- trigger: this.target,\r
- tipId: this.target.id + '_balloon',\r
- events: ['click'],\r
- width: 300,\r
- height: 200\r
- }, arguments[2] || {});\r
- \r
- var customCss = CssUtil.appendPrefix(this.options.cssPrefix, Balloon.classNames);\r
- this.classNames = new CssUtil([Balloon.classNames, customCss]);\r
-\r
- this.tipNode = this._buildTipNode(message);\r
- Element.hide(this.tipNode);\r
- this._setMessage(message);\r
- document.body.appendChild(this.tipNode);\r
- this._setEvent();\r
- Balloon.allBalloons.push(this)\r
- this._setSize();\r
- },\r
-\r
- _setEvent: function() {\r
- var self = this;\r
- this.options.events.each(function(e) {\r
- Event.observe(self.options.trigger, e, self.open.bindAsEventListener(self));\r
- });\r
-\r
- Event.observe(this.tipNode, 'click', this.close.bind(this), true) \r
-\r
- if (!Balloon.eventSetting) {\r
- Event.observe(document, 'click', Balloon.closeAll, true);\r
- Balloon.eventSetting = true;\r
- }\r
- },\r
-\r
- _buildTipNode : function() {\r
- var tipNode = Builder.node('div', {id: this.options.tipId});\r
- this.classNames.addClassNames(tipNode, 'tooltip');\r
- tipNode.appendChild(this._buildTop());\r
- tipNode.appendChild(this._buildMiddle());\r
- tipNode.appendChild(this._buildBottom());\r
- return tipNode;\r
- },\r
-\r
- _setMessage: function(message) {\r
- var type = message.constructor;\r
- if (type == String) {\r
- this.body.innerHTML = message;\r
- } else if (type == Object) {\r
- this.body.appendChild(message);\r
- }\r
- },\r
-\r
- _buildTop: function() {\r
- return this._buildMulti('top', ['topLeft', 'topMiddle', 'topRight'], true);\r
- },\r
-\r
- _buildBottom: function() {\r
- return this._buildMulti('bottom', ['bottomLeft', 'bottomMiddle', 'bottomRight'], true);\r
- },\r
-\r
- _buildMiddle: function() {\r
- this.middle = Builder.node('div');\r
- this.classNames.addClassNames(this.middle, 'middle');\r
- this.middle.appendChild(\r
- this._buildMulti('middleLeft', ['middleLeftRowT', 'leftArrow', 'middleLeftRowB'], true));\r
- this.middle.appendChild(this._buildMulti('body', [], true));\r
- this.middle.appendChild(\r
- this._buildMulti('middleRight', ['middleRightRowT', 'rightArrow', 'middleRightRowB'], true));\r
- return this.middle;\r
- },\r
-\r
- _buildMulti: function(main, subs, hold) {\r
- var topNode = Builder.node('div');\r
- this.classNames.addClassNames(topNode, main);\r
- if (hold) this[main] = topNode;\r
- var self = this;\r
- var node = null;\r
- subs.each(function(s) {\r
- node = Builder.node('div');\r
- self.classNames.addClassNames(node, s);\r
- topNode.appendChild(node);\r
- if (hold) self[s] = node;\r
- });\r
- return topNode;\r
- },\r
-\r
- _setPosition: function() {\r
- var scrollPosition = Position.realOffset(this.tipNode);\r
- var screenWidth = document.documentElement.clientWidth;\r
- var screenHeight = document.documentElement.clientHeight;\r
- \r
- var positionList = Position.cumulativeOffset(this.target);\r
- var dimension = Element.getDimensions(this.target);\r
- var tipNodeLeft = Math.round(positionList[0] + dimension.width);\r
- var tipDimension = Element.getDimensions(this.tipNode);\r
- var tipNodeTop = Math.round(positionList[1] - tipDimension.height / 2);\r
-\r
- var addLR = 'left';\r
- var remLR = 'right';\r
-\r
- if((tmpY = tipNodeTop - scrollPosition[1]) < 0) {\r
- tipNodeTop -= tmpY;\r
- }\r
- if( (tipNodeLeft+tipDimension.width) > (screenWidth+scrollPosition[0]) ) {\r
- tipNodeLeft = Math.round(positionList[0] - tipDimension.width);\r
- addLR = 'right';\r
- remLR = 'left';\r
- }\r
- \r
- var y = positionList[1] - tipNodeTop;\r
- this._setArrow(addLR, y);\r
- this._unsetArrow(remLR);\r
-\r
- Element.setStyle(this.tipNode, {\r
- top: tipNodeTop + 'px',\r
- left: tipNodeLeft + 'px',\r
- zIndex: ZindexManager.getIndex()\r
- });\r
- },\r
-\r
- _setArrow: function(lr, y) {\r
- var headerH = (this.options.height - this.middleH) / 2;\r
- var topH, bottomH, h, ud;\r
- var minH = 10; // for ie\r
- if (lr == 'left') {\r
- h = this.middleH - this.leftArrowH;\r
- } else {\r
- h = this.middleH - this.rightArrowH;\r
- }\r
- if (headerH > y) {\r
- topH = minH;\r
- bottomH = h - topH;\r
- ud = 'up';\r
- } else if ((this.middleH + headerH) < y) {\r
- bottomH = minH;\r
- topH = h - bottomH;\r
- ud = 'down';\r
- } else {\r
- topH = y - headerH;\r
- topH = (topH < minH) ? minH : topH;\r
- bottomH = h - topH;\r
- ud = 'up';\r
- }\r
- if (lr == 'left') {\r
- if (ud == 'up') {\r
- this.classNames.refreshClassNames(this.leftArrow, 'leftUpArrow');\r
- Element.setStyle(this.leftArrow, {height: this.leftArrowH + 'px'});\r
- Element.setStyle(this.middleLeftRowT, {height: topH + 'px'});\r
- Element.setStyle(this.middleLeftRowB, {height: bottomH + 'px'});\r
- } else {\r
- this.classNames.refreshClassNames(this.leftArrow, 'leftDownArrow');\r
- Element.setStyle(this.leftArrow, {height: this.leftArrowH + 'px'});\r
- Element.setStyle(this.middleLeftRowT, {height: topH + 'px'});\r
- Element.setStyle(this.middleLeftRowB, {height: bottomH + 'px'});\r
- }\r
- } else {\r
- if (ud == 'up') {\r
- this.classNames.refreshClassNames(this.rightArrow, 'rightUpArrow');\r
- Element.setStyle(this.rightArrow, {height: this.rightArrowH + 'px'});\r
- Element.setStyle(this.middleRightRowT, {height: topH + 'px'});\r
- Element.setStyle(this.middleRightRowB, {height: bottomH + 'px'});\r
- } else {\r
- this.classNames.refreshClassNames(this.rightArrow, 'rightDownArrow');\r
- Element.setStyle(this.rightArrow, {height: this.rightArrowH + 'px'});\r
- Element.setStyle(this.middleRightRowT, {height: topH + 'px'});\r
- Element.setStyle(this.middleRightRowB, {height: bottomH + 'px'});\r
- }\r
- }\r
- },\r
-\r
- _unsetArrow: function(direction) {\r
- if (direction == 'left') {\r
- var h = (this.middleH - this.leftArrowH) / 2;\r
- this.classNames.refreshClassNames(this.leftArrow, 'middleLeftRowB');\r
- Element.setStyle(this.leftArrow, {height: this.leftArrowH + 'px'});\r
- Element.setStyle(this.middleLeftRowT, {height: h + 'px'});\r
- Element.setStyle(this.middleLeftRowB, {height: h + 'px'});\r
- } else {\r
- var h = (this.middleH - this.rightArrowH) / 2;\r
- this.classNames.refreshClassNames(this.rightArrow, 'middleRightRowB');\r
- Element.setStyle(this.rightArrow, {height: this.rightArrowH + 'px'});\r
- Element.setStyle(this.middleRightRowT, {height: h + 'px'});\r
- Element.setStyle(this.middleRightRowB, {height: h + 'px'});\r
- }\r
- },\r
-\r
- _setSize: function() {\r
- var width = this.options.width;\r
- var height = this.options.height;\r
- Element.setStyle(this.tipNode, {\r
- width: width + 'px',\r
- height: height + 'px'\r
- });\r
-\r
- var topH = parseInt(Element.getStyle(this.top, 'height'));\r
- var bottomH = parseInt(Element.getStyle(this.bottom, 'height'));\r
- var middleH = this.options.height - topH - bottomH;\r
-\r
- var style = {height: middleH + 'px'};\r
- Element.setStyle(this.middle, style);\r
- Element.setStyle(this.middleLeft, style);\r
- Element.setStyle(this.middleRight, style);\r
- Element.setStyle(this.body, style);\r
-\r
- this.leftArrowH = parseInt(Element.getStyle(this.leftArrow, 'height'));\r
- this.rightArrowH = parseInt(Element.getStyle(this.rightArrow, 'height'));\r
- this.middleH = middleH;\r
- },\r
-\r
- open : function() {\r
- if (!Element.visible(this.tipNode)) {\r
- this._setPosition();\r
- Effect.Appear(this.tipNode);\r
- }\r
- },\r
-\r
- close : function(){\r
- if (Element.visible(this.tipNode)) {\r
- this._setPosition();\r
- Effect.Fade(this.tipNode);\r
- }\r
- }\r
-}\r
OSDN Git Service
