开通博客赚积分
发布资源赚积分
分类

源码开发语言/平台
当前位置：首页 > 源码/资料 > 行业应用 > OA系统 > 查看源码
FisheyeList.js
资源名称：oa.rar　[点击查看]
上传用户：kimgenplus
上传日期：2016-06-05
资源大小：20877k
文件大小：16k
源码类别：

OA系统

开发平台：

Java

FisheyeList.js：源码内容
  1. /*
  2. Copyright (c) 2004-2006, The Dojo Foundation
  3. All Rights Reserved.
  5. Licensed under the Academic Free License version 2.1 or above OR the
  6. modified BSD license. For more information on Dojo licensing, see:
  8. http://dojotoolkit.org/community/licensing.shtml
  9. */
  13. dojo.provide("dojo.widget.FisheyeList");
  14. dojo.require("dojo.widget.*");
  15. dojo.require("dojo.widget.HtmlWidget");
  16. dojo.require("dojo.html.style");
  17. dojo.require("dojo.html.selection");
  18. dojo.require("dojo.html.util");
  19. dojo.require("dojo.event.*");
  20. dojo.widget.defineWidget("dojo.widget.FisheyeList", dojo.widget.HtmlWidget, function () {
  21. this.pos = {x:-1, y:-1};
  22. this.EDGE = {CENTER:0, LEFT:1, RIGHT:2, TOP:3, BOTTOM:4};
  23. this.timerScale = 1;
  24. }, {templateString:"<div class="dojoHtmlFisheyeListBar"></div>", templateCssString:".dojoHtmlFisheyeListItemLabel {ntfont-family: Arial, Helvetica, sans-serif;ntbackground-color: #eee;ntborder: 2px solid #666;ntpadding: 2px;nttext-align: center;ntposition: absolute;ntdisplay: none;n}nn.dojoHtmlFisheyeListItemLabel.selected {ntdisplay: block;n}nn.dojoHtmlFisheyeListItemImage {ntborder: 0px;ntposition: absolute;n}nn.dojoHtmlFisheyeListItem {ntposition: absolute;ntz-index: 2;n}nn.dojoHtmlFisheyeListBar {ntposition: relative;n}n", templateCssPath:dojo.uri.moduleUri("dojo.widget", "templates/FisheyeList.css"), isContainer:true, snarfChildDomOutput:true, itemWidth:40, itemHeight:40, itemMaxWidth:150, itemMaxHeight:150, orientation:"horizontal", conservativeTrigger:false, effectUnits:2, itemPadding:10, attachEdge:"center", labelEdge:"bottom", enableCrappySvgSupport:false, fillInTemplate:function () {
  25. dojo.html.disableSelection(this.domNode);
  26. this.isHorizontal = (this.orientation == "horizontal");
  27. this.selectedNode = -1;
  28. this.isOver = false;
  29. this.hitX1 = -1;
  30. this.hitY1 = -1;
  31. this.hitX2 = -1;
  32. this.hitY2 = -1;
  33. this.anchorEdge = this._toEdge(this.attachEdge, this.EDGE.CENTER);
  34. this.labelEdge = this._toEdge(this.labelEdge, this.EDGE.TOP);
  35. if (this.isHorizontal && (this.anchorEdge == this.EDGE.LEFT)) {
  36. this.anchorEdge = this.EDGE.CENTER;
  37. }
  38. if (this.isHorizontal && (this.anchorEdge == this.EDGE.RIGHT)) {
  39. this.anchorEdge = this.EDGE.CENTER;
  40. }
  41. if (!this.isHorizontal && (this.anchorEdge == this.EDGE.TOP)) {
  42. this.anchorEdge = this.EDGE.CENTER;
  43. }
  44. if (!this.isHorizontal && (this.anchorEdge == this.EDGE.BOTTOM)) {
  45. this.anchorEdge = this.EDGE.CENTER;
  46. }
  47. if (this.labelEdge == this.EDGE.CENTER) {
  48. this.labelEdge = this.EDGE.TOP;
  49. }
  50. if (this.isHorizontal && (this.labelEdge == this.EDGE.LEFT)) {
  51. this.labelEdge = this.EDGE.TOP;
  52. }
  53. if (this.isHorizontal && (this.labelEdge == this.EDGE.RIGHT)) {
  54. this.labelEdge = this.EDGE.TOP;
  55. }
  56. if (!this.isHorizontal && (this.labelEdge == this.EDGE.TOP)) {
  57. this.labelEdge = this.EDGE.LEFT;
  58. }
  59. if (!this.isHorizontal && (this.labelEdge == this.EDGE.BOTTOM)) {
  60. this.labelEdge = this.EDGE.LEFT;
  61. }
  62. this.proximityLeft = this.itemWidth * (this.effectUnits - 0.5);
  63. this.proximityRight = this.itemWidth * (this.effectUnits - 0.5);
  64. this.proximityTop = this.itemHeight * (this.effectUnits - 0.5);
  65. this.proximityBottom = this.itemHeight * (this.effectUnits - 0.5);
  66. if (this.anchorEdge == this.EDGE.LEFT) {
  67. this.proximityLeft = 0;
  68. }
  69. if (this.anchorEdge == this.EDGE.RIGHT) {
  70. this.proximityRight = 0;
  71. }
  72. if (this.anchorEdge == this.EDGE.TOP) {
  73. this.proximityTop = 0;
  74. }
  75. if (this.anchorEdge == this.EDGE.BOTTOM) {
  76. this.proximityBottom = 0;
  77. }
  78. if (this.anchorEdge == this.EDGE.CENTER) {
  79. this.proximityLeft /= 2;
  80. this.proximityRight /= 2;
  81. this.proximityTop /= 2;
  82. this.proximityBottom /= 2;
  83. }
  84. }, postCreate:function () {
  85. this._initializePositioning();
  86. if (!this.conservativeTrigger) {
  87. dojo.event.connect(document.documentElement, "onmousemove", this, "_onMouseMove");
  88. }
  89. dojo.event.connect(document.documentElement, "onmouseout", this, "_onBodyOut");
  90. dojo.event.connect(this, "addChild", this, "_initializePositioning");
  91. }, _initializePositioning:function () {
  92. this.itemCount = this.children.length;
  93. this.barWidth = (this.isHorizontal ? this.itemCount : 1) * this.itemWidth;
  94. this.barHeight = (this.isHorizontal ? 1 : this.itemCount) * this.itemHeight;
  95. this.totalWidth = this.proximityLeft + this.proximityRight + this.barWidth;
  96. this.totalHeight = this.proximityTop + this.proximityBottom + this.barHeight;
  97. for (var i = 0; i < this.children.length; i++) {
  98. this.children[i].posX = this.itemWidth * (this.isHorizontal ? i : 0);
  99. this.children[i].posY = this.itemHeight * (this.isHorizontal ? 0 : i);
  100. this.children[i].cenX = this.children[i].posX + (this.itemWidth / 2);
  101. this.children[i].cenY = this.children[i].posY + (this.itemHeight / 2);
  102. var isz = this.isHorizontal ? this.itemWidth : this.itemHeight;
  103. var r = this.effectUnits * isz;
  104. var c = this.isHorizontal ? this.children[i].cenX : this.children[i].cenY;
  105. var lhs = this.isHorizontal ? this.proximityLeft : this.proximityTop;
  106. var rhs = this.isHorizontal ? this.proximityRight : this.proximityBottom;
  107. var siz = this.isHorizontal ? this.barWidth : this.barHeight;
  108. var range_lhs = r;
  109. var range_rhs = r;
  110. if (range_lhs > c + lhs) {
  111. range_lhs = c + lhs;
  112. }
  113. if (range_rhs > (siz - c + rhs)) {
  114. range_rhs = siz - c + rhs;
  115. }
  116. this.children[i].effectRangeLeft = range_lhs / isz;
  117. this.children[i].effectRangeRght = range_rhs / isz;
  118. }
  119. this.domNode.style.width = this.barWidth + "px";
  120. this.domNode.style.height = this.barHeight + "px";
  121. for (var i = 0; i < this.children.length; i++) {
  122. var itm = this.children[i];
  123. var elm = itm.domNode;
  124. elm.style.left = itm.posX + "px";
  125. elm.style.top = itm.posY + "px";
  126. elm.style.width = this.itemWidth + "px";
  127. elm.style.height = this.itemHeight + "px";
  128. if (itm.svgNode) {
  129. itm.svgNode.style.position = "absolute";
  130. itm.svgNode.style.left = this.itemPadding + "%";
  131. itm.svgNode.style.top = this.itemPadding + "%";
  132. itm.svgNode.style.width = (100 - 2 * this.itemPadding) + "%";
  133. itm.svgNode.style.height = (100 - 2 * this.itemPadding) + "%";
  134. itm.svgNode.style.zIndex = 1;
  135. itm.svgNode.setSize(this.itemWidth, this.itemHeight);
  136. } else {
  137. itm.imgNode.style.left = this.itemPadding + "%";
  138. itm.imgNode.style.top = this.itemPadding + "%";
  139. itm.imgNode.style.width = (100 - 2 * this.itemPadding) + "%";
  140. itm.imgNode.style.height = (100 - 2 * this.itemPadding) + "%";
  141. }
  142. }
  143. this._calcHitGrid();
  144. }, _onBodyOut:function (e) {
  145. if (dojo.html.overElement(dojo.body(), e)) {
  146. return;
  147. }
  148. this._setDormant(e);
  149. }, _setDormant:function (e) {
  150. if (!this.isOver) {
  151. return;
  152. }
  153. this.isOver = false;
  154. if (this.conservativeTrigger) {
  155. dojo.event.disconnect(document.documentElement, "onmousemove", this, "_onMouseMove");
  156. }
  157. this._onGridMouseMove(-1, -1);
  158. }, _setActive:function (e) {
  159. if (this.isOver) {
  160. return;
  161. }
  162. this.isOver = true;
  163. if (this.conservativeTrigger) {
  164. dojo.event.connect(document.documentElement, "onmousemove", this, "_onMouseMove");
  165. this.timerScale = 0;
  166. this._onMouseMove(e);
  167. this._expandSlowly();
  168. }
  169. }, _onMouseMove:function (e) {
  170. if ((e.pageX >= this.hitX1) && (e.pageX <= this.hitX2) && (e.pageY >= this.hitY1) && (e.pageY <= this.hitY2)) {
  171. if (!this.isOver) {
  172. this._setActive(e);
  173. }
  174. this._onGridMouseMove(e.pageX - this.hitX1, e.pageY - this.hitY1);
  175. } else {
  176. if (this.isOver) {
  177. this._setDormant(e);
  178. }
  179. }
  180. }, onResized:function () {
  181. this._calcHitGrid();
  182. }, _onGridMouseMove:function (x, y) {
  183. this.pos = {x:x, y:y};
  184. this._paint();
  185. }, _paint:function () {
  186. var x = this.pos.x;
  187. var y = this.pos.y;
  188. if (this.itemCount <= 0) {
  189. return;
  190. }
  191. var pos = this.isHorizontal ? x : y;
  192. var prx = this.isHorizontal ? this.proximityLeft : this.proximityTop;
  193. var siz = this.isHorizontal ? this.itemWidth : this.itemHeight;
  194. var sim = this.isHorizontal ? (1 - this.timerScale) * this.itemWidth + this.timerScale * this.itemMaxWidth : (1 - this.timerScale) * this.itemHeight + this.timerScale * this.itemMaxHeight;
  195. var cen = ((pos - prx) / siz) - 0.5;
  196. var max_off_cen = (sim / siz) - 0.5;
  197. if (max_off_cen > this.effectUnits) {
  198. max_off_cen = this.effectUnits;
  199. }
  200. var off_weight = 0;
  201. if (this.anchorEdge == this.EDGE.BOTTOM) {
  202. var cen2 = (y - this.proximityTop) / this.itemHeight;
  203. off_weight = (cen2 > 0.5) ? 1 : y / (this.proximityTop + (this.itemHeight / 2));
  204. }
  205. if (this.anchorEdge == this.EDGE.TOP) {
  206. var cen2 = (y - this.proximityTop) / this.itemHeight;
  207. off_weight = (cen2 < 0.5) ? 1 : (this.totalHeight - y) / (this.proximityBottom + (this.itemHeight / 2));
  208. }
  209. if (this.anchorEdge == this.EDGE.RIGHT) {
  210. var cen2 = (x - this.proximityLeft) / this.itemWidth;
  211. off_weight = (cen2 > 0.5) ? 1 : x / (this.proximityLeft + (this.itemWidth / 2));
  212. }
  213. if (this.anchorEdge == this.EDGE.LEFT) {
  214. var cen2 = (x - this.proximityLeft) / this.itemWidth;
  215. off_weight = (cen2 < 0.5) ? 1 : (this.totalWidth - x) / (this.proximityRight + (this.itemWidth / 2));
  216. }
  217. if (this.anchorEdge == this.EDGE.CENTER) {
  218. if (this.isHorizontal) {
  219. off_weight = y / (this.totalHeight);
  220. } else {
  221. off_weight = x / (this.totalWidth);
  222. }
  223. if (off_weight > 0.5) {
  224. off_weight = 1 - off_weight;
  225. }
  226. off_weight *= 2;
  227. }
  228. for (var i = 0; i < this.itemCount; i++) {
  229. var weight = this._weighAt(cen, i);
  230. if (weight < 0) {
  231. weight = 0;
  232. }
  233. this._setItemSize(i, weight * off_weight);
  234. }
  235. var main_p = Math.round(cen);
  236. var offset = 0;
  237. if (cen < 0) {
  238. main_p = 0;
  239. } else {
  240. if (cen > this.itemCount - 1) {
  241. main_p = this.itemCount - 1;
  242. } else {
  243. offset = (cen - main_p) * ((this.isHorizontal ? this.itemWidth : this.itemHeight) - this.children[main_p].sizeMain);
  244. }
  245. }
  246. this._positionElementsFrom(main_p, offset);
  247. }, _weighAt:function (cen, i) {
  248. var dist = Math.abs(cen - i);
  249. var limit = ((cen - i) > 0) ? this.children[i].effectRangeRght : this.children[i].effectRangeLeft;
  250. return (dist > limit) ? 0 : (1 - dist / limit);
  251. }, _setItemSize:function (p, scale) {
  252. scale *= this.timerScale;
  253. var w = Math.round(this.itemWidth + ((this.itemMaxWidth - this.itemWidth) * scale));
  254. var h = Math.round(this.itemHeight + ((this.itemMaxHeight - this.itemHeight) * scale));
  255. if (this.isHorizontal) {
  256. this.children[p].sizeW = w;
  257. this.children[p].sizeH = h;
  258. this.children[p].sizeMain = w;
  259. this.children[p].sizeOff = h;
  260. var y = 0;
  261. if (this.anchorEdge == this.EDGE.TOP) {
  262. y = (this.children[p].cenY - (this.itemHeight / 2));
  263. } else {
  264. if (this.anchorEdge == this.EDGE.BOTTOM) {
  265. y = (this.children[p].cenY - (h - (this.itemHeight / 2)));
  266. } else {
  267. y = (this.children[p].cenY - (h / 2));
  268. }
  269. }
  270. this.children[p].usualX = Math.round(this.children[p].cenX - (w / 2));
  271. this.children[p].domNode.style.top = y + "px";
  272. this.children[p].domNode.style.left = this.children[p].usualX + "px";
  273. } else {
  274. this.children[p].sizeW = w;
  275. this.children[p].sizeH = h;
  276. this.children[p].sizeOff = w;
  277. this.children[p].sizeMain = h;
  278. var x = 0;
  279. if (this.anchorEdge == this.EDGE.LEFT) {
  280. x = this.children[p].cenX - (this.itemWidth / 2);
  281. } else {
  282. if (this.anchorEdge == this.EDGE.RIGHT) {
  283. x = this.children[p].cenX - (w - (this.itemWidth / 2));
  284. } else {
  285. x = this.children[p].cenX - (w / 2);
  286. }
  287. }
  288. this.children[p].domNode.style.left = x + "px";
  289. this.children[p].usualY = Math.round(this.children[p].cenY - (h / 2));
  290. this.children[p].domNode.style.top = this.children[p].usualY + "px";
  291. }
  292. this.children[p].domNode.style.width = w + "px";
  293. this.children[p].domNode.style.height = h + "px";
  294. if (this.children[p].svgNode) {
  295. this.children[p].svgNode.setSize(w, h);
  296. }
  297. }, _positionElementsFrom:function (p, offset) {
  298. var pos = 0;
  299. if (this.isHorizontal) {
  300. pos = Math.round(this.children[p].usualX + offset);
  301. this.children[p].domNode.style.left = pos + "px";
  302. } else {
  303. pos = Math.round(this.children[p].usualY + offset);
  304. this.children[p].domNode.style.top = pos + "px";
  305. }
  306. this._positionLabel(this.children[p]);
  307. var bpos = pos;
  308. for (var i = p - 1; i >= 0; i--) {
  309. bpos -= this.children[i].sizeMain;
  310. if (this.isHorizontal) {
  311. this.children[i].domNode.style.left = bpos + "px";
  312. } else {
  313. this.children[i].domNode.style.top = bpos + "px";
  314. }
  315. this._positionLabel(this.children[i]);
  316. }
  317. var apos = pos;
  318. for (var i = p + 1; i < this.itemCount; i++) {
  319. apos += this.children[i - 1].sizeMain;
  320. if (this.isHorizontal) {
  321. this.children[i].domNode.style.left = apos + "px";
  322. } else {
  323. this.children[i].domNode.style.top = apos + "px";
  324. }
  325. this._positionLabel(this.children[i]);
  326. }
  327. }, _positionLabel:function (itm) {
  328. var x = 0;
  329. var y = 0;
  330. var mb = dojo.html.getMarginBox(itm.lblNode);
  331. if (this.labelEdge == this.EDGE.TOP) {
  332. x = Math.round((itm.sizeW / 2) - (mb.width / 2));
  333. y = -mb.height;
  334. }
  335. if (this.labelEdge == this.EDGE.BOTTOM) {
  336. x = Math.round((itm.sizeW / 2) - (mb.width / 2));
  337. y = itm.sizeH;
  338. }
  339. if (this.labelEdge == this.EDGE.LEFT) {
  340. x = -mb.width;
  341. y = Math.round((itm.sizeH / 2) - (mb.height / 2));
  342. }
  343. if (this.labelEdge == this.EDGE.RIGHT) {
  344. x = itm.sizeW;
  345. y = Math.round((itm.sizeH / 2) - (mb.height / 2));
  346. }
  347. itm.lblNode.style.left = x + "px";
  348. itm.lblNode.style.top = y + "px";
  349. }, _calcHitGrid:function () {
  350. var pos = dojo.html.getAbsolutePosition(this.domNode, true);
  351. this.hitX1 = pos.x - this.proximityLeft;
  352. this.hitY1 = pos.y - this.proximityTop;
  353. this.hitX2 = this.hitX1 + this.totalWidth;
  354. this.hitY2 = this.hitY1 + this.totalHeight;
  355. }, _toEdge:function (inp, def) {
  356. return this.EDGE[inp.toUpperCase()] || def;
  357. }, _expandSlowly:function () {
  358. if (!this.isOver) {
  359. return;
  360. }
  361. this.timerScale += 0.2;
  362. this._paint();
  363. if (this.timerScale < 1) {
  364. dojo.lang.setTimeout(this, "_expandSlowly", 10);
  365. }
  366. }, destroy:function () {
  367. dojo.event.disconnect(document.documentElement, "onmouseout", this, "_onBodyOut");
  368. dojo.event.disconnect(document.documentElement, "onmousemove", this, "_onMouseMove");
  369. dojo.widget.FisheyeList.superclass.destroy.call(this);
  370. }});
  371. dojo.widget.defineWidget("dojo.widget.FisheyeListItem", dojo.widget.HtmlWidget, {iconSrc:"", svgSrc:"", caption:"", id:"", _blankImgPath:dojo.uri.moduleUri("dojo.widget", "templates/images/blank.gif"), templateString:"<div class="dojoHtmlFisheyeListItem">" + "  <img class="dojoHtmlFisheyeListItemImage" dojoAttachPoint="imgNode" dojoAttachEvent="onMouseOver;onMouseOut;onClick">" + "  <div class="dojoHtmlFisheyeListItemLabel" dojoAttachPoint="lblNode"></div>" + "</div>", fillInTemplate:function () {
  372. if (this.svgSrc != "") {
  373. this.svgNode = this._createSvgNode(this.svgSrc);
  374. this.domNode.appendChild(this.svgNode);
  375. this.imgNode.style.display = "none";
  376. } else {
  377. if ((this.iconSrc.toLowerCase().substring(this.iconSrc.length - 4) == ".png") && (dojo.render.html.ie) && (!dojo.render.html.ie70)) {
  378. if (dojo.dom.hasParent(this.imgNode) && this.id != "") {
  379. var parent = this.imgNode.parentNode;
  380. parent.setAttribute("id", this.id);
  381. }
  382. this.imgNode.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.iconSrc + "', sizingMethod='scale')";
  383. this.imgNode.src = this._blankImgPath.toString();
  384. } else {
  385. if (dojo.dom.hasParent(this.imgNode) && this.id != "") {
  386. var parent = this.imgNode.parentNode;
  387. parent.setAttribute("id", this.id);
  388. }
  389. this.imgNode.src = this.iconSrc;
  390. }
  391. }
  392. if (this.lblNode) {
  393. this.lblNode.appendChild(document.createTextNode(this.caption));
  394. }
  395. dojo.html.disableSelection(this.domNode);
  396. }, _createSvgNode:function (src) {
  397. var elm = document.createElement("embed");
  398. elm.src = src;
  399. elm.type = "image/svg+xml";
  400. elm.style.width = "1px";
  401. elm.style.height = "1px";
  402. elm.loaded = 0;
  403. elm.setSizeOnLoad = false;
  404. elm.onload = function () {
  405. this.svgRoot = this.getSVGDocument().rootElement;
  406. this.svgDoc = this.getSVGDocument().documentElement;
  407. this.zeroWidth = this.svgRoot.width.baseVal.value;
  408. this.zeroHeight = this.svgRoot.height.baseVal.value;
  409. this.loaded = true;
  410. if (this.setSizeOnLoad) {
  411. this.setSize(this.setWidth, this.setHeight);
  412. }
  413. };
  414. elm.setSize = function (w, h) {
  415. if (!this.loaded) {
  416. this.setWidth = w;
  417. this.setHeight = h;
  418. this.setSizeOnLoad = true;
  419. return;
  420. }
  421. this.style.width = w + "px";
  422. this.style.height = h + "px";
  423. this.svgRoot.width.baseVal.value = w;
  424. this.svgRoot.height.baseVal.value = h;
  425. var scale_x = w / this.zeroWidth;
  426. var scale_y = h / this.zeroHeight;
  427. for (var i = 0; i < this.svgDoc.childNodes.length; i++) {
  428. if (this.svgDoc.childNodes[i].setAttribute) {
  429. this.svgDoc.childNodes[i].setAttribute("transform", "scale(" + scale_x + "," + scale_y + ")");
  430. }
  431. }
  432. };
  433. return elm;
  434. }, onMouseOver:function (e) {
  435. if (!this.parent.isOver) {
  436. this.parent._setActive(e);
  437. }
  438. if (this.caption != "") {
  439. dojo.html.addClass(this.lblNode, "selected");
  440. this.parent._positionLabel(this);
  441. }
  442. }, onMouseOut:function (e) {
  443. dojo.html.removeClass(this.lblNode, "selected");
  444. }, onClick:function (e) {
  445. }});