From 57dbba269d19bc59fad89160200bb2dbcccb9003 Mon Sep 17 00:00:00 2001 From: shentao Date: Fri, 1 Sep 2017 11:57:47 +0800 Subject: Upload Monitor function code Change-Id: I33ad76221b4cb771a298ff240245fc24be664efb Issue-Id: USECASEUI-6 Signed-off-by: shentao --- .../main/webapp/static/fusion/raptor/js/script.js | 482 +++++++++++++++++++++ 1 file changed, 482 insertions(+) create mode 100644 usecaseui-common/src/main/webapp/static/fusion/raptor/js/script.js (limited to 'usecaseui-common/src/main/webapp/static/fusion/raptor/js/script.js') diff --git a/usecaseui-common/src/main/webapp/static/fusion/raptor/js/script.js b/usecaseui-common/src/main/webapp/static/fusion/raptor/js/script.js new file mode 100644 index 00000000..ea153016 --- /dev/null +++ b/usecaseui-common/src/main/webapp/static/fusion/raptor/js/script.js @@ -0,0 +1,482 @@ +// A few configuration settings +var CROSSHAIRS_LOCATION = 'static/fusion/raptor/images/crosshairs.png'; +var HUE_SLIDER_LOCATION = 'static/fusion/raptor/images/h.png'; +var HUE_SLIDER_ARROWS_LOCATION = 'static/fusion/raptor/images/position.png'; +var SAT_VAL_SQUARE_LOCATION = 'static/fusion/raptor/images/sv.png'; + +// Here are some boring utility functions. The real code comes later. + +function hexToRgb(hex_string, default_) +{ + if (default_ == undefined) + { + default_ = null; + } + + if (hex_string.substr(0, 1) == '#') + { + hex_string = hex_string.substr(1); + } + + var r; + var g; + var b; + if (hex_string.length == 3) + { + r = hex_string.substr(0, 1); + r += r; + g = hex_string.substr(1, 1); + g += g; + b = hex_string.substr(2, 1); + b += b; + } + else if (hex_string.length == 6) + { + r = hex_string.substr(0, 2); + g = hex_string.substr(2, 2); + b = hex_string.substr(4, 2); + } + else + { + return default_; + } + + r = parseInt(r, 16); + g = parseInt(g, 16); + b = parseInt(b, 16); + if (isNaN(r) || isNaN(g) || isNaN(b)) + { + return default_; + } + else + { + return {r: r / 255, g: g / 255, b: b / 255}; + } +} + +function rgbToHex(r, g, b, includeHash) +{ + r = Math.round(r * 255); + g = Math.round(g * 255); + b = Math.round(b * 255); + if (includeHash == undefined) + { + includeHash = true; + } + + r = r.toString(16); + if (r.length == 1) + { + r = '0' + r; + } + g = g.toString(16); + if (g.length == 1) + { + g = '0' + g; + } + b = b.toString(16); + if (b.length == 1) + { + b = '0' + b; + } + return ((includeHash ? '#' : '') + r + g + b).toUpperCase(); +} + +var arVersion = navigator.appVersion.split("MSIE"); +var version = parseFloat(arVersion[1]); + +function fixPNG(myImage) +{ + if ((version >= 5.5) && (version < 7) && (document.body.filters)) + { + var node = document.createElement('span'); + node.id = myImage.id; + node.className = myImage.className; + node.title = myImage.title; + node.style.cssText = myImage.style.cssText; + node.style.setAttribute('filter', "progid:DXImageTransform.Microsoft.AlphaImageLoader" + + "(src=\'" + myImage.src + "\', sizingMethod='scale')"); + node.style.fontSize = '0'; + node.style.width = myImage.width.toString() + 'px'; + node.style.height = myImage.height.toString() + 'px'; + node.style.display = 'inline-block'; + return node; + } + else + { + return myImage.cloneNode(false); + } +} + +function trackDrag(node, handler) +{ + function fixCoords(x, y) + { + var nodePageCoords = pageCoords(node); + x = (x - nodePageCoords.x) + document.documentElement.scrollLeft; + y = (y - nodePageCoords.y) + document.documentElement.scrollTop; + if (x < 0) x = 0; + if (y < 0) y = 0; + if (x > node.offsetWidth - 1) x = node.offsetWidth - 1; + if (y > node.offsetHeight - 1) y = node.offsetHeight - 1; + return {x: x, y: y}; + } + function mouseDown(ev) + { + var coords = fixCoords(ev.clientX, ev.clientY); + var lastX = coords.x; + var lastY = coords.y; + handler(coords.x, coords.y); + + function moveHandler(ev) + { + var coords = fixCoords(ev.clientX, ev.clientY); + if (coords.x != lastX || coords.y != lastY) + { + lastX = coords.x; + lastY = coords.y; + handler(coords.x, coords.y); + } + } + function upHandler(ev) + { + myRemoveEventListener(document, 'mouseup', upHandler); + myRemoveEventListener(document, 'mousemove', moveHandler); + myAddEventListener(node, 'mousedown', mouseDown); + } + myAddEventListener(document, 'mouseup', upHandler); + myAddEventListener(document, 'mousemove', moveHandler); + myRemoveEventListener(node, 'mousedown', mouseDown); + if (ev.preventDefault) ev.preventDefault(); + } + myAddEventListener(node, 'mousedown', mouseDown); + node.onmousedown = function(e) { return false; }; + node.onselectstart = function(e) { return false; }; + node.ondragstart = function(e) { return false; }; +} + +var eventListeners = []; + +function findEventListener(node, event, handler) +{ + var i; + for (i in eventListeners) + { + if (eventListeners[i].node == node && eventListeners[i].event == event + && eventListeners[i].handler == handler) + { + return i; + } + } + return null; +} +function myAddEventListener(node, event, handler) +{ + if (findEventListener(node, event, handler) != null) + { + return; + } + + if (!node.addEventListener) + { + node.attachEvent('on' + event, handler); + } + else + { + node.addEventListener(event, handler, false); + } + + eventListeners.push({node: node, event: event, handler: handler}); +} + +function removeEventListenerIndex(index) +{ + var eventListener = eventListeners[index]; + delete eventListeners[index]; + + if (!eventListener.node.removeEventListener) + { + eventListener.node.detachEvent('on' + eventListener.event, + eventListener.handler); + } + else + { + eventListener.node.removeEventListener(eventListener.event, + eventListener.handler, false); + } +} + +function myRemoveEventListener(node, event, handler) +{ + removeEventListenerIndex(findEventListener(node, event, handler)); +} + +function cleanupEventListeners() +{ + var i; + for (i = eventListeners.length; i > 0; i--) + { + if (eventListeners[i] != undefined) + { + removeEventListenerIndex(i); + } + } +} +myAddEventListener(window, 'unload', cleanupEventListeners); + +// This copyright statement applies to the following two functions, +// which are taken from MochiKit. +// +// Copyright 2005 Bob Ippolito +// +// Permission is hereby granted, free of charge, to any person obtaining +// a copy of this software and associated documentation files (the +// "Software"), to deal in the Software without restriction, including +// without limitation the rights to use, copy, modify, merge, publish, +// distribute, sublicense, and/or sell copies of the Software, and to +// permit persons to whom the Software is furnished to do so, subject +// to the following conditions: +// +// The above copyright notice and this permission notice shall be +// included in all copies or substantial portions of the Software. +// +// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF +// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND +// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS +// BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN +// ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN +// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + +function hsvToRgb(hue, saturation, value) +{ + var red; + var green; + var blue; + if (value == 0.0) + { + red = 0; + green = 0; + blue = 0; + } + else + { + var i = Math.floor(hue * 6); + var f = (hue * 6) - i; + var p = value * (1 - saturation); + var q = value * (1 - (saturation * f)); + var t = value * (1 - (saturation * (1 - f))); + switch (i) + { + case 1: red = q; green = value; blue = p; break; + case 2: red = p; green = value; blue = t; break; + case 3: red = p; green = q; blue = value; break; + case 4: red = t; green = p; blue = value; break; + case 5: red = value; green = p; blue = q; break; + case 6: // fall through + case 0: red = value; green = t; blue = p; break; + } + } + return {r: red, g: green, b: blue}; +} + +function rgbToHsv(red, green, blue) +{ + var max = Math.max(Math.max(red, green), blue); + var min = Math.min(Math.min(red, green), blue); + var hue; + var saturation; + var value = max; + if (min == max) + { + hue = 0; + saturation = 0; + } + else + { + var delta = (max - min); + saturation = delta / max; + if (red == max) + { + hue = (green - blue) / delta; + } + else if (green == max) + { + hue = 2 + ((blue - red) / delta); + } + else + { + hue = 4 + ((red - green) / delta); + } + hue /= 6; + if (hue < 0) + { + hue += 1; + } + if (hue > 1) + { + hue -= 1; + } + } + return { + h: hue, + s: saturation, + v: value + }; +} + +function pageCoords(node) +{ + var x = node.offsetLeft; + var y = node.offsetTop; + var parent = node.offsetParent; + while (parent != null) + { + x += parent.offsetLeft; + y += parent.offsetTop; + parent = parent.offsetParent; + } + return {x: x, y: y}; +} + +// The real code begins here. +var huePositionImg = document.createElement('img'); +huePositionImg.galleryImg = false; +huePositionImg.width = 35; +huePositionImg.height = 11; +huePositionImg.src = HUE_SLIDER_ARROWS_LOCATION; +huePositionImg.style.position = 'absolute'; + +var hueSelectorImg = document.createElement('img'); +hueSelectorImg.galleryImg = false; +hueSelectorImg.width = 35; +hueSelectorImg.height = 200; +hueSelectorImg.src = HUE_SLIDER_LOCATION; +hueSelectorImg.style.display = 'block'; + +var satValImg = document.createElement('img'); +satValImg.galleryImg = false; +satValImg.width = 200; +satValImg.height = 200; +satValImg.src = SAT_VAL_SQUARE_LOCATION; +satValImg.style.display = 'block'; + +var crossHairsImg = document.createElement('img'); +crossHairsImg.galleryImg = false; +crossHairsImg.width = 21; +crossHairsImg.height = 21; +crossHairsImg.src = CROSSHAIRS_LOCATION; +crossHairsImg.style.position = 'absolute'; + +function makeColorSelector(inputBox) +{ + var rgb, hsv + + function colorChanged() + { + var hex = rgbToHex(rgb.r, rgb.g, rgb.b); + var hueRgb = hsvToRgb(hsv.h, 1, 1); + var hueHex = rgbToHex(hueRgb.r, hueRgb.g, hueRgb.b); + previewDiv.style.background = hex; + inputBox.value = hex; + satValDiv.style.background = hueHex; + crossHairs.style.left = ((hsv.v*199)-10).toString() + 'px'; + crossHairs.style.top = (((1-hsv.s)*199)-10).toString() + 'px'; + huePos.style.top = ((hsv.h*199)-5).toString() + 'px'; + } + function rgbChanged() + { + hsv = rgbToHsv(rgb.r, rgb.g, rgb.b); + colorChanged(); + } + function hsvChanged() + { + rgb = hsvToRgb(hsv.h, hsv.s, hsv.v); + colorChanged(); + } + + var colorSelectorDiv = document.createElement('div'); + colorSelectorDiv.style.padding = '15px'; + colorSelectorDiv.style.position = 'relative'; + colorSelectorDiv.style.height = '275px'; + colorSelectorDiv.style.width = '250px'; + + var satValDiv = document.createElement('div'); + satValDiv.style.position = 'relative'; + satValDiv.style.width = '200px'; + satValDiv.style.height = '200px'; + var newSatValImg = fixPNG(satValImg); + satValDiv.appendChild(newSatValImg); + var crossHairs = crossHairsImg.cloneNode(false); + satValDiv.appendChild(crossHairs); + function satValDragged(x, y) + { + hsv.s = 1-(y/199); + hsv.v = (x/199); + hsvChanged(); + } + trackDrag(satValDiv, satValDragged) + colorSelectorDiv.appendChild(satValDiv); + + var hueDiv = document.createElement('div'); + hueDiv.style.position = 'absolute'; + hueDiv.style.left = '230px'; + hueDiv.style.top = '15px'; + hueDiv.style.width = '35px'; + hueDiv.style.height = '200px'; + var huePos = fixPNG(huePositionImg); + hueDiv.appendChild(hueSelectorImg.cloneNode(false)); + hueDiv.appendChild(huePos); + function hueDragged(x, y) + { + hsv.h = y/199; + hsvChanged(); + } + trackDrag(hueDiv, hueDragged); + colorSelectorDiv.appendChild(hueDiv); + + var previewDiv = document.createElement('div'); + previewDiv.style.height = '50px' + previewDiv.style.width = '50px'; + previewDiv.style.position = 'absolute'; + previewDiv.style.top = '225px'; + previewDiv.style.left = '15px'; + previewDiv.style.border = '1px solid black'; + colorSelectorDiv.appendChild(previewDiv); + + function inputBoxChanged() + { + rgb = hexToRgb(inputBox.value, {r: 0, g: 0, b: 0}); + rgbChanged(); + } + myAddEventListener(inputBox, 'change', inputBoxChanged); + inputBox.size = 8; + inputBox.style.position = 'absolute'; + inputBox.style.right = '15px'; + inputBox.style.top = (225 + (25 - (inputBox.offsetHeight/2))).toString() + 'px'; + colorSelectorDiv.appendChild(inputBox); + + inputBoxChanged(); + + return colorSelectorDiv; +} + +function makeColorSelectors(ev) +{ + var inputNodes = document.getElementsByTagName('input'); + var i; + for (i = 0; i < inputNodes.length; i++) + { + var node = inputNodes[i]; + if (node.className != 'color') + { + continue; + } + var parent = node.parentNode; + var prevNode = node.previousSibling; + var selector = makeColorSelector(node); + parent.insertBefore(selector, (prevNode ? prevNode.nextSibling : null)); + } +} + +myAddEventListener(window, 'load', makeColorSelectors); -- cgit 1.2.3-korg