[yast-commit] <web-client> network : remove jquery.bt and use the standard jquery.ui dialog

ref: refs/heads/network commit 3bc9bbcd5c429d426d18aecf38d5f8dd480e0641 Author: Duncan Mac-Vicar P Date: Mon Aug 31 00:49:39 2009 +0200 remove jquery.bt and use the standard jquery.ui dialog --- webclient/app/views/layouts/main.rhtml | 7 +- webclient/public/javascripts/jquery.bt.js | 1227 ---------------------------- webclient/public/stylesheets/jquery.bt.css | 17 - 3 files changed, 2 insertions(+), 1249 deletions(-) diff --git a/webclient/app/views/layouts/main.rhtml b/webclient/app/views/layouts/main.rhtml index fc8618f..44141ac 100644 --- a/webclient/app/views/layouts/main.rhtml +++ b/webclient/app/views/layouts/main.rhtml @@ -7,8 +7,8 @@ <link rel="stylesheet" href="/stylesheets/yast.css" type="text/css" media="screen" title="default" charset="utf-8" /> <link rel="stylesheet" href="/stylesheets/style.css" type="text/css" media="screen" title="default" charset="utf-8" /> <link rel="stylesheet" href="/stylesheets/jquery.jqplot.css" type="text/css" media="screen" title="default" charset="utf-8" /> - <!-- buble tooltips --> - <link rel="stylesheet" href="/stylesheets/jquery.bt.css" type="text/css" media="screen" title="default" charset="utf-8" /> + <link rel="stylesheet" href="/stylesheets/jquery-ui-1.7.2.custom.css" type="text/css" media="screen" title="default" charset="utf-8" /> + <script type="text/javascript" charset="utf-8" src="/inc/jquery.js"></script> <script type="text/javascript" charset="utf-8" src="/inc/jquery.query.js"></script> @@ -19,9 +19,6 @@ <script type="text/javascript" charset="utf-8" src="/javascripts/script.js"></script> <script type="text/javascript" charset="utf-8" src="/javascripts/jquery.validate.js"></script> - <!-- buble tooltips --> - <script type="text/javascript" charset="utf-8" src="/javascripts/jquery.bt.js"></script> - <!-- browser detection --> <script type="text/javascript" charset="utf-8" src="/javascripts/jqbrowser-compressed.js"></script> <script type="text/javascript" charset="utf-8" src="/javascripts/jquery.badbrowser.js"></script> diff --git a/webclient/public/javascripts/jquery.bt.js b/webclient/public/javascripts/jquery.bt.js deleted file mode 100644 index 4095aee..0000000 --- a/webclient/public/javascripts/jquery.bt.js +++ /dev/null @@ -1,1227 +0,0 @@ -/* - * @name BeautyTips - * @desc a tooltips/baloon-help plugin for jQuery - * - * @author Jeff Robbins - Lullabot - http://www.lullabot.com - * @version 0.9.5 release candidate 1 (5/20/2009) - */ - -jQuery.bt = {version: '0.9.5-rc1'}; - -/* - * @type jQuery - * @cat Plugins/bt - * @requires jQuery v1.2+ (not tested on versions prior to 1.2.6) - * - * Dual licensed under the MIT and GPL licenses: - * http://www.opensource.org/licenses/mit-license.php - * http://www.gnu.org/licenses/gpl.html - * - * Encourage development. If you use BeautyTips for anything cool - * or on a site that people have heard of, please drop me a note. - * - jeff ^at lullabot > com - * - * No guarantees, warranties, or promises of any kind - * - */ - -;(function($) { - /** - * @credit Inspired by Karl Swedberg's ClueTip - * (http://plugins.learningjquery.com/cluetip/), which in turn was inspired - * by Cody Lindley's jTip (http://www.codylindley.com) - * - * @fileoverview - * Beauty Tips is a jQuery tooltips plugin which uses the canvas drawing element - * in the HTML5 spec in order to dynamically draw tooltip "talk bubbles" around - * the descriptive help text associated with an item. This is in many ways - * similar to Google Maps which both provides similar talk-bubbles and uses the - * canvas element to draw them. - * - * The canvas element is supported in modern versions of FireFox, Safari, and - * Opera. However, Internet Explorer needs a separate library called ExplorerCanvas - * included on the page in order to support canvas drawing functions. ExplorerCanvas - * was created by Google for use with their web apps and you can find it here: - * http://excanvas.sourceforge.net/ - * - * Beauty Tips was written to be simple to use and pretty. All of its options - * are documented at the bottom of this file and defaults can be overwritten - * globally for the entire page, or individually on each call. - * - * By default each tooltip will be positioned on the side of the target element - * which has the most free space. This is affected by the scroll position and - * size of the current window, so each Beauty Tip is redrawn each time it is - * displayed. It may appear above an element at the bottom of the page, but when - * the page is scrolled down (and the element is at the top of the page) it will - * then appear below it. Additionally, positions can be forced or a preferred - * order can be defined. See examples below. - * - * To fix z-index problems in IE6, include the bgiframe plugin on your page - * http://plugins.jquery.com/project/bgiframe - BeautyTips will automatically - * recognize it and use it. - * - * BeautyTips also works with the hoverIntent plugin - * http://cherne.net/brian/resources/jquery.hoverIntent.html - * see hoverIntent example below for usage - * - * Usage - * The function can be called in a number of ways. - * $(selector).bt(); - * $(selector).bt('Content text'); - * $(selector).bt('Content text', {option1: value, option2: value}); - * $(selector).bt({option1: value, option2: value}); - * - * For more/better documentation and lots of examples, visit the demo page included with the distribution - * - */ - - jQuery.fn.bt = function(content, options) { - - if (typeof content != 'string') { - var contentSelect = true; - options = content; - content = false; - } - else { - var contentSelect = false; - } - - // if hoverIntent is installed, use that as default instead of hover - if (jQuery.fn.hoverIntent && jQuery.bt.defaults.trigger == 'hover') { - jQuery.bt.defaults.trigger = 'hoverIntent'; - } - - return this.each(function(index) { - - var opts = jQuery.extend(false, jQuery.bt.defaults, jQuery.bt.options, options); - - // clean up the options - opts.spikeLength = numb(opts.spikeLength); - opts.spikeGirth = numb(opts.spikeGirth); - opts.overlap = numb(opts.overlap); - - var ajaxTimeout = false; - - /** - * This is sort of the "starting spot" for the this.each() - * These are the init functions to handle the .bt() call - */ - - if (opts.killTitle) { - $(this).find('[title]').andSelf().each(function() { - if (!$(this).attr('bt-xTitle')) { - $(this).attr('bt-xTitle', $(this).attr('title')).attr('title', ''); - } - }); - } - - if (typeof opts.trigger == 'string') { - opts.trigger = [opts.trigger]; - } - if (opts.trigger[0] == 'hoverIntent') { - var hoverOpts = jQuery.extend(opts.hoverIntentOpts, { - over: function() { - this.btOn(); - }, - out: function() { - this.btOff(); - }}); - $(this).hoverIntent(hoverOpts); - - } - else if (opts.trigger[0] == 'hover') { - $(this).hover( - function() { - this.btOn(); - }, - function() { - this.btOff(); - } - ); - } - else if (opts.trigger[0] == 'now') { - // toggle the on/off right now - // note that 'none' gives more control (see below) - if ($(this).hasClass('bt-active')) { - this.btOff(); - } - else { - this.btOn(); - } - } - else if (opts.trigger[0] == 'none') { - // initialize the tip with no event trigger - // use javascript to turn on/off tip as follows: - // $('#selector').btOn(); - // $('#selector').btOff(); - } - else if (opts.trigger.length > 1 && opts.trigger[0] != opts.trigger[1]) { - $(this) - .bind(opts.trigger[0], function() { - this.btOn(); - }) - .bind(opts.trigger[1], function() { - this.btOff(); - }); - } - else { - // toggle using the same event - $(this).bind(opts.trigger[0], function() { - if ($(this).hasClass('bt-active')) { - this.btOff(); - } - else { - this.btOn(); - } - }); - } - - - /** - * The BIG TURN ON - * Any element that has been initiated - */ - this.btOn = function () { - if (typeof $(this).data('bt-box') == 'object') { - // if there's already a popup, remove it before creating a new one. - this.btOff(); - } - - // trigger preBuild function - // preBuild has no argument since the box hasn't been built yet - opts.preBuild.apply(this); - - // turn off other tips - $(jQuery.bt.vars.closeWhenOpenStack).btOff(); - - // add the class to the target element (for hilighting, for example) - // bt-active is always applied to all, but activeClass can apply another - $(this).addClass('bt-active ' + opts.activeClass); - - if (contentSelect && opts.ajaxPath == null) { - // bizarre, I know - if (opts.killTitle) { - // if we've killed the title attribute, it's been stored in 'bt-xTitle' so get it.. - $(this).attr('title', $(this).attr('bt-xTitle')); - } - // then evaluate the selector... title is now in place - content = $.isFunction(opts.contentSelector) ? opts.contentSelector.apply(this) : eval(opts.contentSelector); - if (opts.killTitle) { - // now remove the title again, so we don't get double tips - $(this).attr('title', ''); - } - } - - // ---------------------------------------------- - // All the Ajax(ish) stuff is in this next bit... - // ---------------------------------------------- - if (opts.ajaxPath != null && content == false) { - if (typeof opts.ajaxPath == 'object') { - var url = eval(opts.ajaxPath[0]); - url += opts.ajaxPath[1] ? ' ' + opts.ajaxPath[1] : ''; - } - else { - var url = opts.ajaxPath; - } - var off = url.indexOf(" "); - if ( off >= 0 ) { - var selector = url.slice(off, url.length); - url = url.slice(0, off); - } - - // load any data cached for the given ajax path - var cacheData = opts.ajaxCache ? $(document.body).data('btCache-' + url.replace(/\./g, '')) : null; - if (typeof cacheData == 'string') { - content = selector ? $("<div/>").append(cacheData.replace(//g, "")).find(selector) : cacheData; - } - else { - var target = this; - - // set up the options - var ajaxOpts = jQuery.extend(false, - { - type: opts.ajaxType, - data: opts.ajaxData, - cache: opts.ajaxCache, - url: url, - complete: function(XMLHttpRequest, textStatus) { - if (textStatus == 'success' || textStatus == 'notmodified') { - if (opts.ajaxCache) { - $(document.body).data('btCache-' + url.replace(/\./g, ''), XMLHttpRequest.responseText); - } - ajaxTimeout = false; - content = selector ? - // Create a dummy div to hold the results - $("<div/>") - // inject the contents of the document in, removing the scripts - // to avoid any 'Permission Denied' errors in IE - .append(XMLHttpRequest.responseText.replace(//g, "")) - - // Locate the specified elements - .find(selector) : - - // If not, just inject the full result - XMLHttpRequest.responseText; - - } - else { - if (textStatus == 'timeout') { - // if there was a timeout, we don't cache the result - ajaxTimeout = true; - } - content = opts.ajaxError.replace(/%error/g, XMLHttpRequest.statusText); - } - // if the user rolls out of the target element before the ajax request comes back, don't show it - if ($(target).hasClass('bt-active')) { - target.btOn(); - } - } - }, opts.ajaxOpts); - // do the ajax request - jQuery.ajax(ajaxOpts); - // load the throbber while the magic happens - content = opts.ajaxLoading; - } - } - // - - - // now we start actually figuring out where to place the tip - - // figure out how to compensate for the shadow, if present - var shadowMarginX = 0; // extra added to width to compensate for shadow - var shadowMarginY = 0; // extra added to height - var shadowShiftX = 0; // amount to shift the tip horizontally to allow for shadow - var shadowShiftY = 0; // amount to shift vertical - - if (opts.shadow && !shadowSupport()) { - // if browser doesn't support drop shadows, turn them off - opts.shadow = false; - // and bring in the noShadows options - jQuery.extend(opts, opts.noShadowOpts); - } - - if (opts.shadow) { - // figure out horizontal placement - if (opts.shadowBlur > Math.abs(opts.shadowOffsetX)) { - shadowMarginX = opts.shadowBlur * 2; - } - else { - shadowMarginX = opts.shadowBlur + Math.abs(opts.shadowOffsetX); - } - shadowShiftX = (opts.shadowBlur - opts.shadowOffsetX) > 0 ? opts.shadowBlur - opts.shadowOffsetX : 0; - - // now vertical - if (opts.shadowBlur > Math.abs(opts.shadowOffsetY)) { - shadowMarginY = opts.shadowBlur * 2; - } - else { - shadowMarginY = opts.shadowBlur + Math.abs(opts.shadowOffsetY); - } - shadowShiftY = (opts.shadowBlur - opts.shadowOffsetY) > 0 ? opts.shadowBlur - opts.shadowOffsetY : 0; - } - - if (opts.offsetParent){ - // if offsetParent is defined by user - var offsetParent = $(opts.offsetParent); - var offsetParentPos = offsetParent.offset(); - var pos = $(this).offset(); - var top = numb(pos.top) - numb(offsetParentPos.top) + numb($(this).css('margin-top')) - shadowShiftY; // IE can return 'auto' for margins - var left = numb(pos.left) - numb(offsetParentPos.left) + numb($(this).css('margin-left')) - shadowShiftX; - } - else { - // if the target element is absolutely positioned, use its parent's offsetParent instead of its own - var offsetParent = ($(this).css('position') == 'absolute') ? $(this).parents().eq(0).offsetParent() : $(this).offsetParent(); - var pos = $(this).btPosition(); - var top = numb(pos.top) + numb($(this).css('margin-top')) - shadowShiftY; // IE can return 'auto' for margins - var left = numb(pos.left) + numb($(this).css('margin-left')) - shadowShiftX; - } - - var width = $(this).btOuterWidth(); - var height = $(this).outerHeight(); - - if (typeof content == 'object') { - // if content is a DOM object (as opposed to text) - // use a clone, rather than removing the original element - // and ensure that it's visible - var original = content; - var clone = $(original).clone(true).show(); - // also store a reference to the original object in the clone data - // and a reference to the clone in the original - var origClones = $(original).data('bt-clones') || []; - origClones.push(clone); - $(original).data('bt-clones', origClones); - $(clone).data('bt-orig', original); - $(this).data('bt-content-orig', {original: original, clone: clone}); - content = clone; - } - if (typeof content == 'null' || content == '') { - // if content is empty, bail out... - return; - } - - // create the tip content div, populate it, and style it - var $text = $('<div class="bt-content"></div>').append(content).css({padding: opts.padding, position: 'absolute', width: (opts.shrinkToFit ? 'auto' : opts.width), zIndex: opts.textzIndex, left: shadowShiftX, top: shadowShiftY}).css(opts.cssStyles); - // create the wrapping box which contains text and canvas - // put the content in it, style it, and append it to the same offset parent as the target - var $box = $('<div class="bt-wrapper"></div>').append($text).addClass(opts.cssClass).css({position: 'absolute', width: opts.width, zIndex: opts.wrapperzIndex, visibility:'hidden'}).appendTo(offsetParent); - - // use bgiframe to get around z-index problems in IE6 - // http://plugins.jquery.com/project/bgiframe - if (jQuery.fn.bgiframe) { - $text.bgiframe(); - $box.bgiframe(); - } - - $(this).data('bt-box', $box); - - // see if the text box will fit in the various positions - var scrollTop = numb($(document).scrollTop()); - var scrollLeft = numb($(document).scrollLeft()); - var docWidth = numb($(window).width()); - var docHeight = numb($(window).height()); - var winRight = scrollLeft + docWidth; - var winBottom = scrollTop + docHeight; - var space = new Object(); - var thisOffset = $(this).offset(); - space.top = thisOffset.top - scrollTop; - space.bottom = docHeight - ((thisOffset + height) - scrollTop); - space.left = thisOffset.left - scrollLeft; - space.right = docWidth - ((thisOffset.left + width) - scrollLeft); - var textOutHeight = numb($text.outerHeight()); - var textOutWidth = numb($text.btOuterWidth()); - if (opts.positions.constructor == String) { - opts.positions = opts.positions.replace(/ /, '').split(','); - } - if (opts.positions[0] == 'most') { - // figure out which is the largest - var position = 'top'; // prime the pump - for (var pig in space) { // <------- pigs in space! - position = space[pig] > space[position] ? pig : position; - } - } - else { - for (var x in opts.positions) { - var position = opts.positions[x]; - // @todo: acommodate shadow space in the following lines... - if ((position == 'left' || position == 'right') && space[position] > textOutWidth + opts.spikeLength) { - break; - } - else if ((position == 'top' || position == 'bottom') && space[position] > textOutHeight + opts.spikeLength) { - break; - } - } - } - - // horizontal (left) offset for the box - var horiz = left + ((width - textOutWidth) * .5); - // vertical (top) offset for the box - var vert = top + ((height - textOutHeight) * .5); - var points = new Array(); - var textTop, textLeft, textRight, textBottom, textTopSpace, textBottomSpace, textLeftSpace, textRightSpace, crossPoint, textCenter, spikePoint; - - // Yes, yes, this next bit really could use to be condensed - // each switch case is basically doing the same thing in slightly different ways - switch(position) { - - // =================== TOP ======================= - case 'top': - // spike on bottom - $text.css('margin-bottom', opts.spikeLength + 'px'); - $box.css({top: (top - $text.outerHeight(true)) + opts.overlap, left: horiz}); - // move text left/right if extends out of window - textRightSpace = (winRight - opts.windowMargin) - ($text.offset().left + $text.btOuterWidth(true)); - var xShift = shadowShiftX; - if (textRightSpace < 0) { - // shift it left - $box.css('left', (numb($box.css('left')) + textRightSpace) + 'px'); - xShift -= textRightSpace; - } - // we test left space second to ensure that left of box is visible - textLeftSpace = ($text.offset().left + numb($text.css('margin-left'))) - (scrollLeft + opts.windowMargin); - if (textLeftSpace < 0) { - // shift it right - $box.css('left', (numb($box.css('left')) - textLeftSpace) + 'px'); - xShift += textLeftSpace; - } - textTop = $text.btPosition().top + numb($text.css('margin-top')); - textLeft = $text.btPosition().left + numb($text.css('margin-left')); - textRight = textLeft + $text.btOuterWidth(); - textBottom = textTop + $text.outerHeight(); - textCenter = {x: textLeft + ($text.btOuterWidth()*opts.centerPointX), y: textTop + ($text.outerHeight()*opts.centerPointY)}; - // points[points.length] = {x: x, y: y}; - points[points.length] = spikePoint = {y: textBottom + opts.spikeLength, x: ((textRight-textLeft) * .5) + xShift, type: 'spike'}; - crossPoint = findIntersectX(spikePoint.x, spikePoint.y, textCenter.x, textCenter.y, textBottom); - // make sure that the crossPoint is not outside of text box boundaries - crossPoint.x = crossPoint.x < textLeft + opts.spikeGirth/2 + opts.cornerRadius ? textLeft + opts.spikeGirth/2 + opts.cornerRadius : crossPoint.x; - crossPoint.x = crossPoint.x > (textRight - opts.spikeGirth/2) - opts.cornerRadius ? (textRight - opts.spikeGirth/2) - opts.CornerRadius : crossPoint.x; - points[points.length] = {x: crossPoint.x - (opts.spikeGirth/2), y: textBottom, type: 'join'}; - points[points.length] = {x: textLeft, y: textBottom, type: 'corner'}; // left bottom corner - points[points.length] = {x: textLeft, y: textTop, type: 'corner'}; // left top corner - points[points.length] = {x: textRight, y: textTop, type: 'corner'}; // right top corner - points[points.length] = {x: textRight, y: textBottom, type: 'corner'}; // right bottom corner - points[points.length] = {x: crossPoint.x + (opts.spikeGirth/2), y: textBottom, type: 'join'}; - points[points.length] = spikePoint; - break; - - // =================== LEFT ======================= - case 'left': - // spike on right - $text.css('margin-right', opts.spikeLength + 'px'); - $box.css({top: vert + 'px', left: ((left - $text.btOuterWidth(true)) + opts.overlap) + 'px'}); - // move text up/down if extends out of window - textBottomSpace = (winBottom - opts.windowMargin) - ($text.offset().top + $text.outerHeight(true)); - var yShift = shadowShiftY; - if (textBottomSpace < 0) { - // shift it up - $box.css('top', (numb($box.css('top')) + textBottomSpace) + 'px'); - yShift -= textBottomSpace; - } - // we ensure top space second to ensure that top of box is visible - textTopSpace = ($text.offset().top + numb($text.css('margin-top'))) - (scrollTop + opts.windowMargin); - if (textTopSpace < 0) { - // shift it down - $box.css('top', (numb($box.css('top')) - textTopSpace) + 'px'); - yShift += textTopSpace; - } - textTop = $text.btPosition().top + numb($text.css('margin-top')); - textLeft = $text.btPosition().left + numb($text.css('margin-left')); - textRight = textLeft + $text.btOuterWidth(); - textBottom = textTop + $text.outerHeight(); - textCenter = {x: textLeft + ($text.btOuterWidth()*opts.centerPointX), y: textTop + ($text.outerHeight()*opts.centerPointY)}; - points[points.length] = spikePoint = {x: textRight + opts.spikeLength, y: ((textBottom-textTop) * .5) + yShift, type: 'spike'}; - crossPoint = findIntersectY(spikePoint.x, spikePoint.y, textCenter.x, textCenter.y, textRight); - // make sure that the crossPoint is not outside of text box boundaries - crossPoint.y = crossPoint.y < textTop + opts.spikeGirth/2 + opts.cornerRadius ? textTop + opts.spikeGirth/2 + opts.cornerRadius : crossPoint.y; - crossPoint.y = crossPoint.y > (textBottom - opts.spikeGirth/2) - opts.cornerRadius ? (textBottom - opts.spikeGirth/2) - opts.cornerRadius : crossPoint.y; - points[points.length] = {x: textRight, y: crossPoint.y + opts.spikeGirth/2, type: 'join'}; - points[points.length] = {x: textRight, y: textBottom, type: 'corner'}; // right bottom corner - points[points.length] = {x: textLeft, y: textBottom, type: 'corner'}; // left bottom corner - points[points.length] = {x: textLeft, y: textTop, type: 'corner'}; // left top corner - points[points.length] = {x: textRight, y: textTop, type: 'corner'}; // right top corner - points[points.length] = {x: textRight, y: crossPoint.y - opts.spikeGirth/2, type: 'join'}; - points[points.length] = spikePoint; - break; - - // =================== BOTTOM ======================= - case 'bottom': - // spike on top - $text.css('margin-top', opts.spikeLength + 'px'); - $box.css({top: (top + height) - opts.overlap, left: horiz}); - // move text up/down if extends out of window - textRightSpace = (winRight - opts.windowMargin) - ($text.offset().left + $text.btOuterWidth(true)); - var xShift = shadowShiftX; - if (textRightSpace < 0) { - // shift it left - $box.css('left', (numb($box.css('left')) + textRightSpace) + 'px'); - xShift -= textRightSpace; - } - // we ensure left space second to ensure that left of box is visible - textLeftSpace = ($text.offset().left + numb($text.css('margin-left'))) - (scrollLeft + opts.windowMargin); - if (textLeftSpace < 0) { - // shift it right - $box.css('left', (numb($box.css('left')) - textLeftSpace) + 'px'); - xShift += textLeftSpace; - } - textTop = $text.btPosition().top + numb($text.css('margin-top')); - textLeft = $text.btPosition().left + numb($text.css('margin-left')); - textRight = textLeft + $text.btOuterWidth(); - textBottom = textTop + $text.outerHeight(); - textCenter = {x: textLeft + ($text.btOuterWidth()*opts.centerPointX), y: textTop + ($text.outerHeight()*opts.centerPointY)}; - points[points.length] = spikePoint = {x: ((textRight-textLeft) * .5) + xShift, y: shadowShiftY, type: 'spike'}; - crossPoint = findIntersectX(spikePoint.x, spikePoint.y, textCenter.x, textCenter.y, textTop); - // make sure that the crossPoint is not outside of text box boundaries - crossPoint.x = crossPoint.x < textLeft + opts.spikeGirth/2 + opts.cornerRadius ? textLeft + opts.spikeGirth/2 + opts.cornerRadius : crossPoint.x; - crossPoint.x = crossPoint.x > (textRight - opts.spikeGirth/2) - opts.cornerRadius ? (textRight - opts.spikeGirth/2) - opts.cornerRadius : crossPoint.x; - points[points.length] = {x: crossPoint.x + opts.spikeGirth/2, y: textTop, type: 'join'}; - points[points.length] = {x: textRight, y: textTop, type: 'corner'}; // right top corner - points[points.length] = {x: textRight, y: textBottom, type: 'corner'}; // right bottom corner - points[points.length] = {x: textLeft, y: textBottom, type: 'corner'}; // left bottom corner - points[points.length] = {x: textLeft, y: textTop, type: 'corner'}; // left top corner - points[points.length] = {x: crossPoint.x - (opts.spikeGirth/2), y: textTop, type: 'join'}; - points[points.length] = spikePoint; - break; - - // =================== RIGHT ======================= - case 'right': - // spike on left - $text.css('margin-left', (opts.spikeLength + 'px')); - $box.css({top: vert + 'px', left: ((left + width) - opts.overlap) + 'px'}); - // move text up/down if extends out of window - textBottomSpace = (winBottom - opts.windowMargin) - ($text.offset().top + $text.outerHeight(true)); - var yShift = shadowShiftY; - if (textBottomSpace < 0) { - // shift it up - $box.css('top', (numb($box.css('top')) + textBottomSpace) + 'px'); - yShift -= textBottomSpace; - } - // we ensure top space second to ensure that top of box is visible - textTopSpace = ($text.offset().top + numb($text.css('margin-top'))) - (scrollTop + opts.windowMargin); - if (textTopSpace < 0) { - // shift it down - $box.css('top', (numb($box.css('top')) - textTopSpace) + 'px'); - yShift += textTopSpace; - } - textTop = $text.btPosition().top + numb($text.css('margin-top')); - textLeft = $text.btPosition().left + numb($text.css('margin-left')); - textRight = textLeft + $text.btOuterWidth(); - textBottom = textTop + $text.outerHeight(); - textCenter = {x: textLeft + ($text.btOuterWidth()*opts.centerPointX), y: textTop + ($text.outerHeight()*opts.centerPointY)}; - points[points.length] = spikePoint = {x: shadowShiftX, y: ((textBottom-textTop) * .5) + yShift, type: 'spike'}; - crossPoint = findIntersectY(spikePoint.x, spikePoint.y, textCenter.x, textCenter.y, textLeft); - // make sure that the crossPoint is not outside of text box boundaries - crossPoint.y = crossPoint.y < textTop + opts.spikeGirth/2 + opts.cornerRadius ? textTop + opts.spikeGirth/2 + opts.cornerRadius : crossPoint.y; - crossPoint.y = crossPoint.y > (textBottom - opts.spikeGirth/2) - opts.cornerRadius ? (textBottom - opts.spikeGirth/2) - opts.cornerRadius : crossPoint.y; - points[points.length] = {x: textLeft, y: crossPoint.y - opts.spikeGirth/2, type: 'join'}; - points[points.length] = {x: textLeft, y: textTop, type: 'corner'}; // left top corner - points[points.length] = {x: textRight, y: textTop, type: 'corner'}; // right top corner - points[points.length] = {x: textRight, y: textBottom, type: 'corner'}; // right bottom corner - points[points.length] = {x: textLeft, y: textBottom, type: 'corner'}; // left bottom corner - points[points.length] = {x: textLeft, y: crossPoint.y + opts.spikeGirth/2, type: 'join'}; - points[points.length] = spikePoint; - break; - } // - - var canvas = document.createElement('canvas'); - $(canvas).attr('width', (numb($text.btOuterWidth(true)) + opts.strokeWidth*2 + shadowMarginX)).attr('height', (numb($text.outerHeight(true)) + opts.strokeWidth*2 + shadowMarginY)).appendTo($box).css({position: 'absolute', zIndex: opts.boxzIndex}); - - - // if excanvas is set up, we need to initialize the new canvas element - if (typeof G_vmlCanvasManager != 'undefined') { - canvas = G_vmlCanvasManager.initElement(canvas); - } - - if (opts.cornerRadius > 0) { - // round the corners! - var newPoints = new Array(); - var newPoint; - for (var i=0; i 0) { - $box.css('top', (numb($box.css('top')) - (opts.shadowOffsetX + opts.shadowBlur - shadowOverlap))); - } - break; - case 'right': - if (shadowShiftX - shadowOverlap > 0) { - $box.css('left', (numb($box.css('left')) + shadowShiftX - shadowOverlap)); - } - break; - case 'bottom': - if (shadowShiftY - shadowOverlap > 0) { - $box.css('top', (numb($box.css('top')) + shadowShiftY - shadowOverlap)); - } - break; - case 'left': - if (opts.shadowOffsetY + opts.shadowBlur - shadowOverlap > 0) { - $box.css('left', (numb($box.css('left')) - (opts.shadowOffsetY + opts.shadowBlur - shadowOverlap))); - } - break; - } - } - - drawIt.apply(ctx, [points], opts.strokeWidth); - ctx.fillStyle = opts.fill; - if (opts.shadow) { - ctx.shadowOffsetX = opts.shadowOffsetX; - ctx.shadowOffsetY = opts.shadowOffsetY; - ctx.shadowBlur = opts.shadowBlur; - ctx.shadowColor = opts.shadowColor; - } - ctx.closePath(); - ctx.fill(); - if (opts.strokeWidth > 0) { - ctx.shadowColor = 'rgba(0, 0, 0, 0)'; //remove shadow from stroke - ctx.lineWidth = opts.strokeWidth; - ctx.strokeStyle = opts.strokeStyle; - ctx.beginPath(); - drawIt.apply(ctx, [points], opts.strokeWidth); - ctx.closePath(); - ctx.stroke(); - } - - // trigger preShow function - // function receives the box element (the balloon wrapper div) as an argument - opts.preShow.apply(this, [$box[0]]); - - // switch from visibility: hidden to display: none so we can run animations - $box.css({display:'none', visibility: 'visible'}); - - // Here's where we show the tip - opts.showTip.apply(this, [$box[0]]); - - if (opts.overlay) { - // EXPERIMENTAL AND FOR TESTING ONLY!!!! - var overlay = $('<div class="bt-overlay"></div>').css({ - position: 'absolute', - backgroundColor: 'blue', - top: top, - left: left, - width: width, - height: height, - opacity: '.2' - }).appendTo(offsetParent); - $(this).data('overlay', overlay); - } - - if ((opts.ajaxPath != null && opts.ajaxCache == false) || ajaxTimeout) { - // if ajaxCache is not enabled or if there was a server timeout, - // remove the content variable so it will be loaded again from server - content = false; - } - - // stick this element into the clickAnywhereToClose stack - if (opts.clickAnywhereToClose) { - jQuery.bt.vars.clickAnywhereStack.push(this); - $(document).click(jQuery.bt.docClick); - } - - // stick this element into the closeWhenOthersOpen stack - if (opts.closeWhenOthersOpen) { - jQuery.bt.vars.closeWhenOpenStack.push(this); - } - - // trigger postShow function - // function receives the box element (the balloon wrapper div) as an argument - opts.postShow.apply(this, [$box[0]]); - - - }; // - - this.btOff = function() { - - var box = $(this).data('bt-box'); - - // trigger preHide function - // function receives the box element (the balloon wrapper div) as an argument - opts.preHide.apply(this, [box]); - - var i = this; - - // set up the stuff to happen AFTER the tip is hidden - i.btCleanup = function(){ - var box = $(i).data('bt-box'); - var contentOrig = $(i).data('bt-content-orig'); - var overlay = $(i).data('bt-overlay'); - if (typeof box == 'object') { - $(box).remove(); - $(i).removeData('bt-box'); - } - if (typeof contentOrig == 'object') { - var clones = $(contentOrig.original).data('bt-clones'); - $(contentOrig).data('bt-clones', arrayRemove(clones, contentOrig.clone)); - } - if (typeof overlay == 'object') { - $(overlay).remove(); - $(i).removeData('bt-overlay'); - } - - // remove this from the stacks - jQuery.bt.vars.clickAnywhereStack = arrayRemove(jQuery.bt.vars.clickAnywhereStack, i); - jQuery.bt.vars.closeWhenOpenStack = arrayRemove(jQuery.bt.vars.closeWhenOpenStack, i); - - // remove the 'bt-active' and activeClass classes from target - $(i).removeClass('bt-active ' + opts.activeClass); - - // trigger postHide function - // no box argument since it has been removed from the DOM - opts.postHide.apply(i); - - } - - opts.hideTip.apply(this, [box, i.btCleanup]); - - }; // - - var refresh = this.btRefresh = function() { - this.btOff(); - this.btOn(); - }; - - }); // - - - function drawIt(points, strokeWidth) { - this.moveTo(points[0].x, points[0].y); - for (i=1;i - - /** - * For odd stroke widths, round to the nearest .5 pixel to avoid antialiasing - * http://developer.mozilla.org/en/Canvas_tutorial/Applying_styles_and_colors - */ - function round5(num, strokeWidth) { - var ret; - strokeWidth = numb(strokeWidth); - if (strokeWidth%2) { - ret = num; - } - else { - ret = Math.round(num - .5) + .5; - } - return ret; - }; // - - /** - * Ensure that a number is a number... or zero - */ - function numb(num) { - return parseInt(num) || 0; - }; // - - /** - * Remove an element from an array - */ - function arrayRemove(arr, elem) { - var x, newArr = new Array(); - for (x in arr) { - if (arr[x] != elem) { - newArr.push(arr[x]); - } - } - return newArr; - }; // - - /** - * Does the current browser support canvas? - * This is a variation of http://code.google.com/p/browser-canvas-support/ - */ - function canvasSupport() { - var canvas_compatible = false; - try { - canvas_compatible = !!(document.createElement('canvas').getContext('2d')); // S60 - } catch(e) { - canvas_compatible = !!(document.createElement('canvas').getContext); // IE - } - return canvas_compatible; - } - - /** - * Does the current browser support canvas drop shadows? - */ - function shadowSupport() { - - // to test for drop shadow support in the current browser, uncomment the next line - // return true; - - // until a good feature-detect is found, we have to look at user agents - try { - var userAgent = navigator.userAgent.toLowerCase(); - if (/webkit/.test(userAgent)) { - // WebKit.. let's go! - return true; - } - else if (/gecko|mozilla/.test(userAgent) && parseFloat(userAgent.match(/firefox\/(\d+(?:\.\d+)+)/)[1]) >= 3.1){ - // Mozilla 3.1 or higher - return true; - } - } - catch(err) { - // if there's an error, just keep going, we'll assume that drop shadows are not supported - } - - return false; - - } // - - /** - * Given two points, find a point which is dist pixels from point1 on a line to point2 - */ - function betweenPoint(point1, point2, dist) { - // figure out if we're horizontal or vertical - var y, x; - if (point1.x == point2.x) { - // vertical - y = point1.y < point2.y ? point1.y + dist : point1.y - dist; - return {x: point1.x, y: y}; - } - else if (point1.y == point2.y) { - // horizontal - x = point1.x < point2.x ? point1.x + dist : point1.x - dist; - return {x:x, y: point1.y}; - } - }; // - - function centerPoint(arcStart, corner, arcEnd) { - var x = corner.x == arcStart.x ? arcEnd.x : arcStart.x; - var y = corner.y == arcStart.y ? arcEnd.y : arcStart.y; - var startAngle, endAngle; - if (arcStart.x < arcEnd.x) { - if (arcStart.y > arcEnd.y) { - // arc is on upper left - startAngle = (Math.PI/180)*180; - endAngle = (Math.PI/180)*90; - } - else { - // arc is on upper right - startAngle = (Math.PI/180)*90; - endAngle = 0; - } - } - else { - if (arcStart.y > arcEnd.y) { - // arc is on lower left - startAngle = (Math.PI/180)*270; - endAngle = (Math.PI/180)*180; - } - else { - // arc is on lower right - startAngle = 0; - endAngle = (Math.PI/180)*270; - } - } - return {x: x, y: y, type: 'center', startAngle: startAngle, endAngle: endAngle}; - }; // - - /** - * Find the intersection point of two lines, each defined by two points - * arguments are x1, y1 and x2, y2 for r1 (line 1) and r2 (line 2) - * It's like an algebra party!!! - */ - function findIntersect(r1x1, r1y1, r1x2, r1y2, r2x1, r2y1, r2x2, r2y2) { - - if (r2x1 == r2x2) { - return findIntersectY(r1x1, r1y1, r1x2, r1y2, r2x1); - } - if (r2y1 == r2y2) { - return findIntersectX(r1x1, r1y1, r1x2, r1y2, r2y1); - } - - // m = (y1 - y2) / (x1 - x2) // <-- how to find the slope - // y = mx + b // the 'classic' linear equation - // b = y - mx // how to find b (the y-intersect) - // x = (y - b)/m // how to find x - var r1m = (r1y1 - r1y2) / (r1x1 - r1x2); - var r1b = r1y1 - (r1m * r1x1); - var r2m = (r2y1 - r2y2) / (r2x1 - r2x2); - var r2b = r2y1 - (r2m * r2x1); - - var x = (r2b - r1b) / (r1m - r2m); - var y = r1m * x + r1b; - - return {x: x, y: y}; - }; // - - /** - * Find the y intersection point of a line and given x vertical - */ - function findIntersectY(r1x1, r1y1, r1x2, r1y2, x) { - if (r1y1 == r1y2) { - return {x: x, y: r1y1}; - } - var r1m = (r1y1 - r1y2) / (r1x1 - r1x2); - var r1b = r1y1 - (r1m * r1x1); - - var y = r1m * x + r1b; - - return {x: x, y: y}; - }; // - - /** - * Find the x intersection point of a line and given y horizontal - */ - function findIntersectX(r1x1, r1y1, r1x2, r1y2, y) { - if (r1x1 == r1x2) { - return {x: r1x1, y: y}; - } - var r1m = (r1y1 - r1y2) / (r1x1 - r1x2); - var r1b = r1y1 - (r1m * r1x1); - - // y = mx + b // your old friend, linear equation - // x = (y - b)/m // linear equation solved for x - var x = (y - r1b) / r1m; - - return {x: x, y: y}; - - }; // - - }; // - - /** - * jQuery's compat.js (used in Drupal's jQuery upgrade module, overrides the $().position() function - * this is a copy of that function to allow the plugin to work when compat.js is present - * once compat.js is fixed to not override existing functions, this function can be removed - * and .btPosion() can be replaced with .position() above... - */ - jQuery.fn.btPosition = function() { - - function num(elem, prop) { - return elem[0] && parseInt( jQuery.curCSS(elem[0], prop, true), 10 ) || 0; - }; - - var left = 0, top = 0, results; - - if ( this[0] ) { - // Get *real* offsetParent - var offsetParent = this.offsetParent(), - - // Get correct offsets - offset = this.offset(), - parentOffset = /^body|html$/i.test(offsetParent[0].tagName) ? { top: 0, left: 0 } : offsetParent.offset(); - - // Subtract element margins - // note: when an element has margin: auto the offsetLeft and marginLeft - // are the same in Safari causing offset.left to incorrectly be 0 - offset.top -= num( this, 'marginTop' ); - offset.left -= num( this, 'marginLeft' ); - - // Add offsetParent borders - parentOffset.top += num( offsetParent, 'borderTopWidth' ); - parentOffset.left += num( offsetParent, 'borderLeftWidth' ); - - // Subtract the two offsets - results = { - top: offset.top - parentOffset.top, - left: offset.left - parentOffset.left - }; - } - - return results; - }; // - - - /** - * jQuery's dimensions.js overrides the $().btOuterWidth() function - * this is a copy of original jQuery's outerWidth() function to - * allow the plugin to work when dimensions.js is present - */ - jQuery.fn.btOuterWidth = function(margin) { - - function num(elem, prop) { - return elem[0] && parseInt(jQuery.curCSS(elem[0], prop, true), 10) || 0; - }; - - return this["innerWidth"]() - + num(this, "borderLeftWidth") - + num(this, "borderRightWidth") - + (margin ? num(this, "marginLeft") - + num(this, "marginRight") : 0); - - }; // - - /** - * A convenience function to run btOn() (if available) - * for each selected item - */ - jQuery.fn.btOn = function() { - return this.each(function(index){ - if (jQuery.isFunction(this.btOn)) { - this.btOn(); - } - }); - }; // - - /** - * - * A convenience function to run btOff() (if available) - * for each selected item - */ - jQuery.fn.btOff = function() { - return this.each(function(index){ - if (jQuery.isFunction(this.btOff)) { - this.btOff(); - } - }); - }; // - - jQuery.bt.vars = {clickAnywhereStack: [], closeWhenOpenStack: []}; - - /** - * This function gets bound to the document's click event - * It turns off all of the tips in the click-anywhere-to-close stack - */ - jQuery.bt.docClick = function(e) { - if (!e) { - var e = window.event; - }; - // if clicked element is a child of neither a tip NOR a target - // and there are tips in the stack - if (!$(e.target).parents().andSelf().filter('.bt-wrapper, .bt-active').length && jQuery.bt.vars.clickAnywhereStack.length) { - // if clicked element isn't inside tip, close tips in stack - $(jQuery.bt.vars.clickAnywhereStack).btOff(); - $(document).unbind('click', jQuery.bt.docClick); - } - }; // - - /** - * Defaults for the beauty tips - * - * Note this is a variable definition and not a function. So defaults can be - * written for an entire page by simply redefining attributes like so: - * - * jQuery.bt.options.width = 400; - * - * Be sure to use *jQuery.bt.options* and not jQuery.bt.defaults when overriding - * - * This would make all Beauty Tips boxes 400px wide. - * - * Each of these options may also be overridden during - * - * Can be overriden globally or at time of call. - * - */ - jQuery.bt.defaults = { - trigger: 'hover', // trigger to show/hide tip - // use [on, off] to define separate on/off triggers - // also use space character to allow multiple to trigger - // examples: - // ['focus', 'blur'] // focus displays, blur hides - // 'dblclick' // dblclick toggles on/off - // ['focus mouseover', 'blur mouseout'] // multiple triggers - // 'now' // shows/hides tip without event - // 'none' // use $('#selector').btOn(); and ...btOff(); - // 'hoverIntent' // hover using hoverIntent plugin (settings below) - // note: - // hoverIntent becomes default if available - - clickAnywhereToClose: true, // clicking anywhere outside of the tip will close it - closeWhenOthersOpen: false, // tip will be closed before another opens - stop >= 2 tips being on - - shrinkToFit: false, // should short single-line content get a narrower balloon? - width: '200px', // width of tooltip box - - padding: '10px', // padding for content (get more fine grained with cssStyles) - spikeGirth: 10, // width of spike - spikeLength: 15, // length of spike - overlap: 0, // spike overlap (px) onto target (can cause problems with 'hover' trigger) - overlay: false, // display overlay on target (use CSS to style) -- BUGGY! - killTitle: true, // kill title tags to avoid double tooltips - - textzIndex: 9999, // z-index for the text - boxzIndex: 9998, // z-index for the "talk" box (should always be less than textzIndex) - wrapperzIndex: 9997, - offsetParent: null, // DOM node to append the tooltip into. - // Must be positioned relative or absolute. Can be selector or object - positions: ['most'], // preference of positions for tip (will use first with available space) - // possible values 'top', 'bottom', 'left', 'right' as an array in order of - // preference. Last value will be used if others don't have enough space. - // or use 'most' to use the area with the most space - fill: "rgb(255, 255, 102)", // fill color for the tooltip box, you can use any CSS-style color definition method - // http://www.w3.org/TR/css3-color/#numerical - not all methods have been tested - - windowMargin: 10, // space (px) to leave between text box and browser edge - - strokeWidth: 1, // width of stroke around box, **set to 0 for no stroke** - strokeStyle: "#000", // color/alpha of stroke - - cornerRadius: 5, // radius of corners (px), set to 0 for square corners - - // following values are on a scale of 0 to 1 with .5 being centered - - centerPointX: .5, // the spike extends from center of the target edge to this point - centerPointY: .5, // defined by percentage horizontal (x) and vertical (y) - - shadow: false, // use drop shadow? (only displays in Safari and FF 3.1) - experimental - shadowOffsetX: 2, // shadow offset x (px) - shadowOffsetY: 2, // shadow offset y (px) - shadowBlur: 3, // shadow blur (px) - shadowColor: "#000", // shadow color/alpha - shadowOverlap: false, // when shadows overlap the target element it can cause problem with hovering - // set this to true to overlap or set to a numeric value to define the amount of overlap - noShadowOpts: {strokeStyle: '#999'}, // use this to define 'fall-back' options for browsers which don't support drop shadows - - cssClass: '', // CSS class to add to the box wrapper div (of the TIP) - cssStyles: {}, // styles to add the text box - // example: {fontFamily: 'Georgia, Times, serif', fontWeight: 'bold'} - - activeClass: 'bt-active', // class added to TARGET element when its BeautyTip is active - - contentSelector: "$(this).attr('title')", // if there is no content argument, use this selector to retrieve the title - // a function which returns the content may also be passed here - - ajaxPath: null, // if using ajax request for content, this contains url and (opt) selector - // this will override content and contentSelector - // examples (see jQuery load() function): - // '/demo.html' - // '/help/ajax/snip' - // '/help/existing/full div#content' - - // ajaxPath can also be defined as an array - // in which case, the first value will be parsed as a jQuery selector - // the result of which will be used as the ajaxPath - // the second (optional) value is the content selector as above - // examples: - // ["$(this).attr('href')", 'div#content'] - // ["$(this).parents('.wrapper').find('.title').attr('href')"] - // ["$('#some-element').val()"] - - ajaxError: '<strong>ERROR:</strong> <em>%error</em>', - // error text, use "%error" to insert error from server - ajaxLoading: '<blink>Loading...</blink>', // yes folks, it's the blink tag! - ajaxData: {}, // key/value pairs - ajaxType: 'GET', // 'GET' or 'POST' - ajaxCache: true, // cache ajax results and do not send request to same url multiple times - ajaxOpts: {}, // any other ajax options - timeout, passwords, processing functions, etc... - // see http://docs.jquery.com/Ajax/jQuery.ajax#options - - preBuild: function(){}, // function to run before popup is built - preShow: function(box){}, // function to run before popup is displayed - showTip: function(box){ - $(box).show(); - }, - postShow: function(box){}, // function to run after popup is built and displayed - - preHide: function(box){}, // function to run before popup is removed - hideTip: function(box, callback) { - $(box).hide(); - callback(); // you MUST call "callback" at the end of your animations - }, - postHide: function(){}, // function to run after popup is removed - - hoverIntentOpts: { // options for hoverIntent (if installed) - interval: 300, // http://cherne.net/brian/resources/jquery.hoverIntent.html - timeout: 500 - } - - }; // - - jQuery.bt.options = {}; - -})(jQuery); - -// @todo -// use larger canvas (extend to edge of page when windowMargin is active) -// add options to shift position of tip vert/horiz and position of spike tip -// create drawn (canvas) shadows -// use overlay to allow overlap with hover -// experiment with making tooltip a subelement of the target -// handle non-canvas-capable browsers elegantly \ No newline at end of file diff --git a/webclient/public/stylesheets/jquery.bt.css b/webclient/public/stylesheets/jquery.bt.css deleted file mode 100644 index bbd698a..0000000 --- a/webclient/public/stylesheets/jquery.bt.css +++ /dev/null @@ -1,17 +0,0 @@ -/** - * styling for tip content - * mostly for example - * note: canvas (the tip itself) cannot be styled here. use javascript options for that. - */ -.bt-content { - font-size: small; - color: #000; - line-height: normal; -} - -/* styling for active target elements - usually for background hilighting */ -.bt-active { - /* example: - background-color: yellow !important; - */ -} \ No newline at end of file -- To unsubscribe, e-mail: yast-commit+unsubscribe@opensuse.org For additional commands, e-mail: yast-commit+help@opensuse.org