$Explorer.js 41 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021
  1. MWF.require("MWF.widget.Tab", null, false);
  2. MWF.xDesktop.requireApp("Org", "List", null, false);
  3. MWF.xApplication.Org.$Explorer = new Class({
  4. Extends: MWF.widget.Common,
  5. Implements: [Options, Events],
  6. options: {
  7. "style": "default"
  8. },
  9. _loadPath: function(){
  10. this.path = "/x_component_Org/$Explorer/";
  11. this.cssPath = "/x_component_Org/$Explorer/"+this.options.style+"/css.wcss";
  12. },
  13. initialize: function(node, actions, options){
  14. this.setOptions(options);
  15. this._loadPath();
  16. this._loadCss();
  17. this.actions = actions;
  18. this.node = $(node);
  19. this.loaddingElement = false;
  20. this.elements = [];
  21. this.isElementLoaded = false;
  22. this.loadElementQueue = 0;
  23. this.deleteElements = [];
  24. },
  25. _loadLp: function(){
  26. this.options.lp = {
  27. "elementLoaded": this.app.lp.personLoaded,
  28. "search": this.app.lp.search,
  29. "searchText": this.app.lp.searchText,
  30. "elementSave": this.app.lp.personSave,
  31. "deleteElements": this.app.lp.deletePersons,
  32. "deleteElementsCancel": this.app.lp.deleteElementsCancel,
  33. "deleteElementsTitle": this.app.lp.deletePersonsTitle,
  34. "deleteElementsConfirm": this.app.lp.deletePersonsConfirm,
  35. "elementBaseText": this.app.lp.personBaseText,
  36. "elementName": this.app.lp.personName,
  37. "noSignature": this.app.lp.noSignature,
  38. "edit": this.app.lp.edit,
  39. "cancel": this.app.lp.cancel,
  40. "save": this.app.lp.save,
  41. "add": this.app.lp.add
  42. }
  43. },
  44. clear: function(){
  45. this.loaddingElement = false;
  46. this.isElementLoaded = false;
  47. this.loadElementQueue = 0;
  48. this.listNode.empty();
  49. },
  50. load: function(){
  51. this._loadLp();
  52. this.loadLayout();
  53. this.loadList();
  54. },
  55. loadLayout: function(){
  56. this.listAreaNode = new Element("div", {"styles": this.css.listAreaNode}).inject(this.node);
  57. this.propertyAreaNode = new Element("div", {"styles": this.css.propertyAreaNode}).inject(this.node);
  58. this.resizeBarNode = new Element("div", {"styles": this.css.resizeBarNode}).inject(this.propertyAreaNode);
  59. this.propertyNode = new Element("div", {"styles": this.css.propertyNode}).inject(this.propertyAreaNode);
  60. this.propertyTitleNode = new Element("div", {"styles": this.css.propertyTitleNode}).inject(this.propertyNode);
  61. this.propertyContentNode = new Element("div", {"styles": this.css.propertyContentNode}).inject(this.propertyNode);
  62. this.propertyContentNode.setStyle("-webkit-user-select", "text");
  63. this.node.addEvent("selectstart", function(e){
  64. this.propertyContentNode.setStyle("-webkit-user-select", "text");
  65. }.bind(this));
  66. this.toolbarNode = new Element("div", {"styles": this.css.toolbarNode}).inject(this.listAreaNode);
  67. this.listScrollNode = new Element("div", {"styles": this.css.listScrollNode}).inject(this.listAreaNode);
  68. this.listNode = new Element("div", {"styles": this.css.listNode}).inject(this.listScrollNode);
  69. this.loadToolbar();
  70. this.resizePropertyContentNodeFun = this.resizePropertyContentNode.bind(this);
  71. this.resizePropertyContentNodeFun();
  72. this.app.addEvent("resize", this.resizePropertyContentNodeFun);
  73. this.loadScroll();
  74. this.loadResize();
  75. },
  76. loadToolbar: function(){
  77. if (this._isActionManager()) {
  78. this.isEditor = true;
  79. this.addTopElementNode = new Element("div", {"styles": this.css.addTopGroupNode}).inject(this.toolbarNode);
  80. this.addTopElementNode.addEvent("click", function () {
  81. this.addTopElement();
  82. }.bind(this));
  83. }
  84. this.createSearchNode();
  85. this.loadPingyinArea();
  86. },
  87. loadPingyinArea: function(){
  88. debugger;
  89. this.pingyinAction = new Element("div", {"styles": this.css.pingyinAction}).inject(this.app.pingyinArea);
  90. this.pingyinAction.addEvent("click", function(e){
  91. if (!this.pingyinNode) this.createPingyinNode();
  92. if (this.pingyinMorph){
  93. if (!this.pingyinMorph.isRunning()){
  94. if (this.pingyinNode.getStyle("display")==="none"){
  95. this.showPingyin();
  96. }else{
  97. this.hidePingyin();
  98. }
  99. }
  100. }else{
  101. this.showPingyin();
  102. }
  103. }.bind(this));
  104. this.pingyinAction.addEvent("mousedown", function(e){e.stopPropagation();});
  105. this.hidePingyinFun = this.hidePingyin.bind(this);
  106. this.app.content.addEvent("mousedown", this.hidePingyinFun);
  107. this.removePingyinFun = this.removePingyin.bind(this);
  108. this.app.addEvent("queryClose", this.removePingyinFun);
  109. },
  110. removePingyin: function(){
  111. this.app.content.removeEvent("mousedown", this.hidePingyinFun);
  112. },
  113. hidePingyin: function(){
  114. if (this.pingyinNode){
  115. if (!this.pingyinMorph){
  116. this.pingyinMorph = new Fx.Morph(this.pingyinNode, {duration: 50, link: "chain"});
  117. }
  118. if (!this.pingyinMorph.isRunning()){
  119. if (this.pingyinNode.getStyle("display")!=="none"){
  120. this.pingyinMorph.start(this.css.pingyinNode).chain(function(){
  121. this.pingyinNode.setStyle("display", "none");
  122. }.bind(this));
  123. }
  124. }
  125. }
  126. },
  127. showPingyin: function(){
  128. this.resizePropertyContentNode();
  129. if (!this.pingyinMorph){
  130. this.pingyinMorph = new Fx.Morph(this.pingyinNode, {duration: 50, link: "chain"});
  131. }
  132. this.pingyinNode.setStyle("display", "block");
  133. this.pingyinMorph.start(this.css.pingyinNode_to).chain(function(){
  134. this.pingyinNode.setStyles(this.css.pingyinNode_to);
  135. }.bind(this));
  136. },
  137. setPingyinNodePosition: function(){
  138. this.pingyinNode.position({
  139. relativeTo: this.node,
  140. position: "leftTop",
  141. edge: "leftTop"
  142. });
  143. },
  144. createPingyinNode: function(){
  145. this.pingyinNode = new Element("div", {"styles": this.css.pingyinNode}).inject(this.node);
  146. this.pingyinNode.addEvent("mousedown", function(e){e.stopPropagation();});
  147. letters = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];
  148. letters.each(function(l){
  149. var letterNode = new Element("div", {"styles": this.css.letterNode,"text": l}).inject(this.pingyinNode);
  150. letterNode.addEvents({
  151. "mouseover": function(e){
  152. e.target.setStyles(this.css.letterNode_over);
  153. }.bind(this),
  154. "mouseout": function(e){
  155. e.target.setStyles(this.css.letterNode);
  156. }.bind(this),
  157. "click": function(e){
  158. this.searchInputNode.set("value", e.target.get("text"));
  159. this.searchOrg();
  160. this.hidePingyin();
  161. }.bind(this)
  162. });
  163. }.bind(this));
  164. },
  165. addTopElement: function(){
  166. var isNewElement = true;
  167. if (this.currentItem) isNewElement = this.currentItem.unSelected();
  168. if (isNewElement){
  169. var newElementData = this._getAddElementData();
  170. var item = this._newElement(newElementData, this);
  171. item.load();
  172. item.selected();
  173. item.editBaseInfor();
  174. (new Fx.Scroll(this.listScrollNode)).toElementCenter(item.node);
  175. }else{
  176. this.app.notice(this.options.lp.elementSave, "error", this.propertyContentNode);
  177. }
  178. },
  179. createSearchNode: function(){
  180. this.searchNode = new Element("div", {"styles": this.css.searchNode}).inject(this.toolbarNode);
  181. this.searchButtonNode = new Element("div", {"styles": this.css.searchButtonNode,"title": this.options.lp.search}).inject(this.searchNode);
  182. this.searchButtonNode.addEvent("click", function(){this.searchOrg();}.bind(this));
  183. this.searchInputAreaNode = new Element("div", {"styles": this.css.searchInputAreaNode}).inject(this.searchNode);
  184. this.searchInputNode = new Element("input", {
  185. "type": "text",
  186. "value": this.options.lp.searchText,
  187. "styles": this.css.searchInputNode,
  188. //"x-webkit-speech": "1",
  189. "x-webkit-speech": "x-webkit-speech"
  190. }).inject(this.searchInputAreaNode);
  191. var _self = this;
  192. this.searchInputNode.addEvents({
  193. "focus": function(){if (this.value ===_self.options.lp.searchText) this.set("value", "");},
  194. "blur": function(){if (!this.value) this.set("value", _self.options.lp.searchText);},
  195. "keydown": function(e){
  196. if (e.code===13){
  197. this.searchOrg();
  198. e.preventDefault();
  199. }
  200. }.bind(this),
  201. "selectstart": function(e){e.preventDefault();},
  202. "change": function(){
  203. var key = this.searchInputNode.get("value");
  204. if (!key || key===this.options.lp.searchText) {
  205. if (this.currentItem){
  206. if (this.currentItem.unSelected()){
  207. this.clear();
  208. this.loadElements();
  209. }else{
  210. this.app.notice(this.options.lp.elementSave, "error", this.propertyContentNode);
  211. }
  212. }
  213. }
  214. }.bind(this)
  215. });
  216. this.searchButtonNode.addEvent("click", function(){this.searchOrg();}.bind(this));
  217. },
  218. searchOrg: function(){
  219. var key = this.searchInputNode.get("value");
  220. if (key){
  221. if (key!==this.options.lp.searchText){
  222. var isSearchElement = true;
  223. if (this.currentItem) isSearchElement = this.currentItem.unSelected();
  224. if (isSearchElement){
  225. this._listElementByKey(function(json){
  226. if (this.currentItem) this.currentItem.unSelected();
  227. this.clear();
  228. json.data.each(function(itemData){
  229. var item = this._newElement(itemData, this);
  230. item.load();
  231. }.bind(this));
  232. }.bind(this), null, key);
  233. }else{
  234. this.app.notice(this.options.lp.elementSave, "error", this.propertyContentNode);
  235. }
  236. }else{
  237. if (this.currentItem) isSearchElement = this.currentItem.unSelected();
  238. if (isSearchElement){
  239. this.clear();
  240. this.loadElements();
  241. }else{
  242. this.app.notice(this.options.lp.elementSave, "error", this.propertyContentNode);
  243. }
  244. }
  245. }else{
  246. if (this.currentItem) isSearchElement = this.currentItem.unSelected();
  247. if (isSearchElement){
  248. this.clear();
  249. this.loadElements();
  250. }else{
  251. this.app.notice(this.options.lp.elementSave, "error", this.propertyContentNode);
  252. }
  253. }
  254. },
  255. resizePropertyContentNode: function(){
  256. var size = this.node.getSize();
  257. var tSize = this.propertyTitleNode.getSize();
  258. var mtt = this.propertyTitleNode.getStyle("margin-top").toFloat();
  259. var mbt = this.propertyTitleNode.getStyle("margin-bottom").toFloat();
  260. var mtc = this.propertyContentNode.getStyle("margin-top").toFloat();
  261. var mbc = this.propertyContentNode.getStyle("margin-bottom").toFloat();
  262. var height = size.y-tSize.y-mtt-mbt-mtc-mbc;
  263. this.propertyContentNode.setStyle("height", height);
  264. tSize = this.toolbarNode.getSize();
  265. mtt = this.toolbarNode.getStyle("margin-top").toFloat();
  266. mbt = this.toolbarNode.getStyle("margin-bottom").toFloat();
  267. mtc = this.toolbarNode.getStyle("margin-top").toFloat();
  268. mbc = this.toolbarNode.getStyle("margin-bottom").toFloat();
  269. height = size.y-tSize.y-mtt-mbt-mtc-mbc;
  270. this.listScrollNode.setStyle("height", ""+height+"px");
  271. if (this.pingyinNode){
  272. this.setPingyinNodePosition();
  273. this.pingyinNode.setStyle("height", ""+size.y+"px");
  274. }
  275. },
  276. loadScroll: function(){
  277. MWF.require("MWF.widget.ScrollBar", function(){
  278. var _self = this;
  279. new MWF.widget.ScrollBar(this.listScrollNode, {
  280. "style":"xApp_Organization_Explorer",
  281. "where": "before",
  282. "distance": 100,
  283. "friction": 4,
  284. "axis": {"x": false, "y": true},
  285. "onScroll": function(y){
  286. var scrollSize = _self.listScrollNode.getScrollSize();
  287. var clientSize = _self.listScrollNode.getSize();
  288. var scrollHeight = scrollSize.y-clientSize.y;
  289. if (y+200>scrollHeight) {
  290. if (!_self.isElementLoaded) _self.loadElements();
  291. }
  292. }
  293. });
  294. // new MWF.widget.ScrollBar(this.propertyContentNode, {
  295. // "style":"xApp_Organization_Explorer", "where": "before", "distance": 100, "friction": 4, "axis": {"x": false, "y": true}
  296. // });
  297. }.bind(this));
  298. },
  299. loadResize: function(){
  300. this.propertyResize = new Drag(this.resizeBarNode,{
  301. "snap": 1,
  302. "onStart": function(el, e){
  303. var x = e.event.clientX;
  304. var y = e.event.clientY;
  305. el.store("position", {"x": x, "y": y});
  306. var size = this.listAreaNode.getSize();
  307. el.store("initialWidth", size.x);
  308. }.bind(this),
  309. "onDrag": function(el, e){
  310. var x = e.event.clientX;
  311. // var y = e.event.y;
  312. var bodySize = this.node.getSize();
  313. var position = el.retrieve("position");
  314. var initialWidth = el.retrieve("initialWidth").toFloat();
  315. var dx = position.x.toFloat()-x.toFloat();
  316. var width = initialWidth-dx;
  317. if (width> bodySize.x/1.5) width = bodySize.x/1.5;
  318. if (width<300) width = 300;
  319. this.listAreaNode.setStyle("width", width+1);
  320. this.propertyAreaNode.setStyle("margin-left", width);
  321. }.bind(this)
  322. });
  323. },
  324. getPageNodeCount: function(){
  325. var size = this.listScrollNode.getSize();
  326. return (size.y / 50).toInt() + 5;
  327. },
  328. loadList: function(){
  329. this.loadElements();
  330. this.continueLoadFun = this.continueLoad.bind(this);
  331. this.app.addEvent("resize", this.continueLoadFun);
  332. },
  333. continueLoad: function(){
  334. if (this.elements.length<this.getPageNodeCount()){
  335. this.loadElements(true);
  336. }
  337. },
  338. loadElements: function(addToNext){
  339. if (!this.isElementLoaded){
  340. if (!this.loaddingElement){
  341. this.loaddingElement = true;
  342. var count = this.getPageNodeCount();
  343. this._listElementNext(this.getLastLoadedElementId(), count, function(json){
  344. if (json.data.length){
  345. this.loadListContent(json.data);
  346. this.loaddingElement = false;
  347. if (json.data.length<count){
  348. this.isElementLoaded = true;
  349. this.app.notice(this.options.lp.elementLoaded, "ok", this.listScrollNode, {"x": "center", "y": "bottom"});
  350. }else{
  351. if (this.loadElementQueue>0){
  352. this.loadElementQueue--;
  353. this.loadElements();
  354. }
  355. }
  356. }else{
  357. if (!this.elements.length){
  358. //this.setNoGroupNoticeArea();
  359. }else{
  360. this.app.notice(this.options.lp.elementLoaded, "ok", this.listScrollNode, {"x": "center", "y": "bottom"});
  361. }
  362. this.isElementLoaded = true;
  363. this.loaddingElement = false;
  364. }
  365. }.bind(this));
  366. }else{
  367. if (addToNext) this.loadElementQueue++;
  368. }
  369. }
  370. },
  371. getLastLoadedElementId: function(){
  372. return (this.elements.length) ? this.elements[this.elements.length-1].data.id : "";
  373. },
  374. loadListContent: function(data){
  375. data.each(function(itemData, i){
  376. var item = this._newElement(itemData, this, i);
  377. this.elements.push(item);
  378. item.load();
  379. if (this.elements.length===1) item.selected();
  380. }.bind(this));
  381. },
  382. setNoElementNoticeArea: function(){
  383. //没有数据时的提示
  384. },
  385. checkDeleteElements: function(item){
  386. if (this.deleteElements.length){
  387. if (!this.deleteElementsNode){
  388. this.deleteElementsNode = new Element("div", {"styles": this.css.deleteElementsNode}).inject(this.node);
  389. this.deleteElementsDeleteNode = new Element("div", {"styles": this.css.deleteElementsDeleteNode,"text": this.options.lp.deleteElements}).inject(this.deleteElementsNode);
  390. this.deleteElementsCancelNode = new Element("div", {"styles": this.css.deleteElementsCancelNode,"text": this.options.lp.deleteElementsCancel}).inject(this.deleteElementsNode);
  391. this.deleteElementsDeleteNode.addEvent("click", function(e){this.deleteSelectedElements(e);}.bind(this));
  392. this.deleteElementsCancelNode.addEvent("click", function(e){this.deleteSelectedElementsCancel(e);}.bind(this));
  393. }
  394. this.deleteElementsNode.position({
  395. relativeTo: (item) ? item.node : this.toolbarNode,
  396. position: "centerBottom",
  397. edge: "centerTop"
  398. });
  399. }else{
  400. if (this.deleteElementsNode){
  401. this.deleteElementsNode.destroy();
  402. this.deleteElementsNode = null;
  403. delete this.deleteElementsNode;
  404. }
  405. }
  406. },
  407. deleteSelectedElements: function(e){
  408. var _self = this;
  409. this.app.confirm("infor", e, this.options.lp.deleteElementsTitle, this.options.lp.deleteElementsConfirm, 300, 120, function(){
  410. var deleted = [];
  411. var doCount = 0;
  412. var readyCount = _self.deleteElements.length;
  413. var errorText = "";
  414. var complete;
  415. complete = function () {
  416. if (doCount === readyCount) {
  417. if (errorText) {
  418. _self.app.notice(errorText, "error", _self.propertyContentNode, {x: "left", y: "top"});
  419. }
  420. }
  421. };
  422. _self.deleteElements.each(function(element){
  423. element["delete"](function(){
  424. deleted.push(element);
  425. doCount++;
  426. if (_self.deleteElements.length===doCount){
  427. _self.deleteElements = _self.deleteElements.filter(function (item) {
  428. return !deleted.contains(item);
  429. });
  430. _self.checkDeleteElements();
  431. }
  432. complete();
  433. }, function(error){
  434. errorText = (errorText) ? errorText+"<br/><br/>"+error : error;
  435. doCount++;
  436. if (_self.deleteElements.length !== doCount) {
  437. } else {
  438. _self.deleteElements = _self.deleteElements.filter(function (item) {
  439. return !deleted.contains(item);
  440. });
  441. _self.checkDeleteElements();
  442. }
  443. complete();
  444. });
  445. });
  446. this.close();
  447. }, function(){
  448. this.close();
  449. });
  450. },
  451. deleteSelectedElementsCancel: function() {
  452. debugger;
  453. while (this.deleteElements.length){
  454. var element = this.deleteElements[0];
  455. element.setUndelete();
  456. //if (element.deleteNode) element.deleteNode.click();
  457. if (this.currentItem!==element){
  458. element.contentNode.setStyles(element.style.contentNode);
  459. if (element.data.id) element.actionNode.fade("out");
  460. }
  461. }
  462. this.checkDeleteElements();
  463. },
  464. destroy: function(){
  465. debugger;
  466. if (this.hidePingyinFun) this.app.content.removeEvent("mousedown", this.hidePingyinFun);
  467. if (this.resizePropertyContentNodeFun) this.app.removeEvent("resize", this.resizePropertyContentNodeFun);
  468. if (this.continueLoadFun) this.app.removeEvent("resize", this.continueLoadFun);
  469. if (this.removePingyinFun) this.app.removeEvent("queryClose", this.removePingyinFun);
  470. MWF.release(this);
  471. },
  472. _isActionManager: function(){
  473. return MWF.AC.isOrganizationManager();
  474. },
  475. _listElementNext: function(lastid, count, callback){
  476. this.actions.listPersonNext(lastid, count, function(json){
  477. if (callback) {
  478. callback.apply(this, [json]);
  479. }
  480. }.bind(this));
  481. },
  482. _newElement: function(data, explorer, i){
  483. return new MWF.xApplication.Org.PersonExplorer.Person(data, explorer, this.isEditor, i);
  484. },
  485. _listElementByKey: function(callback, failure, key){
  486. this.actions.listPersonByKey(function(json){
  487. if (callback) {
  488. callback.apply(this, [json]);
  489. }
  490. }.bind(this), failure, key);
  491. },
  492. _getAddElementData: function(){
  493. return {
  494. "employee": "",
  495. "password": "",
  496. "display": "",
  497. "qq": "",
  498. "mail": "",
  499. "weixin": "",
  500. "weibo": "",
  501. "mobile": "",
  502. "name": "",
  503. "controllerList": []
  504. };
  505. },
  506. getContentStyle: function(contentNode, node){
  507. var position = this.propertyContentNode.getPosition(this.propertyContentNode.getOffsetParent());
  508. var size = this.propertyContentNode.getSize();
  509. contentNode.position({"relativeTo": node,"position": "upperLeft","edge": "upperLeft"});
  510. return {
  511. "top": ""+position.y+"px",
  512. "left": ""+position.x+"px",
  513. "height": ""+size.y+"px",
  514. "width": ""+size.x+"px"
  515. };
  516. },
  517. openPerson: function(data, node){
  518. this.openContent("PersonExplorer", "PersonContent", data, node);
  519. },
  520. openGroup: function(data, node){
  521. this.openContent("GroupExplorer", "GroupContent", data, node);
  522. },
  523. openContent: function(explorerClazz, contentClazz, data, node){
  524. MWF.xDesktop.requireApp("Org", explorerClazz, function(){
  525. var contentNode = new Element("div", {"styles": this.css.popContentNode}).inject(this.propertyContentNode, "top");
  526. var to = this.getContentStyle(contentNode, node);
  527. var resize = true;
  528. new Fx.Morph(contentNode, {
  529. "duration": 300,
  530. "transition": Fx.Transitions.Expo.easeOut
  531. }).start(to).chain(function(){
  532. content.setContentSize();
  533. resize = false;
  534. contentNode.setStyles({"position": "static","width": "100%","height": "100%"});
  535. }.bind(this));
  536. var item = {
  537. "explorer": this,
  538. "style": this.css.item,
  539. "data": data,
  540. "isEdit": false,
  541. "refresh": function(){},
  542. "propertyContentNode": contentNode
  543. };
  544. var content = new MWF.xApplication.Org[explorerClazz][contentClazz](item, true);
  545. var timeoutResize = function(){
  546. content.setContentSize();
  547. if (resize)window.setTimeout(function(){timeoutResize();}, 30);
  548. };
  549. window.setTimeout(function(){timeoutResize();}, 30);
  550. }.bind(this));
  551. }
  552. });
  553. MWF.xApplication.Org.$Explorer.Item = new Class({
  554. //Extends: MWF.xApplication.Organization.GroupExplorer.Group,
  555. initialize: function(data, explorer, isEditor, i){
  556. this.i = i;
  557. this.data = data;
  558. this.explorer = explorer;
  559. this.listNode = this.explorer.listNode;
  560. this.propertyContentNode = this.explorer.propertyContentNode;
  561. this.initStyle();
  562. this.selectedAttributes = [];
  563. this.isEdit = false;
  564. this.isEditor = isEditor;
  565. this.deleteSelected = false;
  566. },
  567. initStyle: function(){
  568. this.style = this.explorer.css.item;
  569. },
  570. refresh: function(){
  571. this.iconNode.getElement("img").set("src", this._getIcon());
  572. this._loadTextNode();
  573. if (this.content){
  574. if (this.content.titleInfor) this.content.titleInfor.refresh();
  575. if (this.content.bottomInfor) this.content.bottomInfor.refresh();
  576. }
  577. debugger;
  578. this.addActions();
  579. },
  580. load: function(){
  581. this.node = new Element("div", {"styles": this.style.node}).inject(this.listNode);
  582. // if (this.i<10){
  583. // var r = (59+((255-59)*this.i)/10).toInt();
  584. // var g = (118+((255-118)*this.i)/10).toInt();
  585. // var b = (182+((255-182)*this.i)/10).toInt();
  586. // this.node.setStyle("background-color", "rgb("+r+","+g+","+b+")");
  587. // }
  588. this.contentNode = new Element("div", {"styles": this.style.contentNode}).inject(this.node);
  589. this.iconNode = new Element("div", {"styles": this.style.iconNode}).inject(this.contentNode);
  590. var src = this._getIcon();
  591. var img = new Element("img", {
  592. "styles": this.style.iconImgNode,
  593. "src": src
  594. }).inject(this.iconNode);
  595. this.actionNode = new Element("div", {"styles": this.style.actionNode}).inject(this.contentNode);
  596. this.textNode = new Element("div", {"styles": this.style.textNode}).inject(this.contentNode);
  597. this._loadTextNode();
  598. this.setNewItem();
  599. this.node.inject(this.listNode);
  600. this.addActions();
  601. this.setEvent();
  602. },
  603. setNewItem: function(){
  604. if (!this.created){
  605. if (!this.data.id){
  606. this.created = false;
  607. this.contentNode.setStyles(this.style.contentNodeNew);
  608. }else {
  609. this.created = true;
  610. this.contentNode.setStyles(this.style.contentNode);
  611. }
  612. }
  613. },
  614. addActions: function(){
  615. if (this.isEditor){
  616. if (this.data.id){
  617. if (this.data.control.allowDelete){
  618. if (!this.deleteNode){
  619. this.deleteNode = new Element("div", {"styles": this.style.actionDeleteNode}).inject(this.actionNode);
  620. this.deleteNode.addEvent("click", function(e){
  621. if (!this.notDelete){
  622. if (!this.deleteSelected){
  623. this.setDelete();
  624. }else{
  625. this.setUndelete();
  626. }
  627. }
  628. e.stopPropagation();
  629. }.bind(this));
  630. if (this.explorer.currentItem===this){
  631. if (this.deleteNode) this.deleteNode.setStyles(this.style.actionDeleteNode_selected);
  632. }
  633. }
  634. }
  635. }
  636. }
  637. },
  638. setDelete: function(){
  639. this.actionNode.fade("in");
  640. this.deleteNode.setStyles(this.style.actionDeleteNode_delete);
  641. this.contentNode.setStyles(this.style.contentNode_delete);
  642. this.textNode.setStyles(this.style.textNode);
  643. this.explorer.deleteElements.push(this);
  644. this.deleteSelected = true;
  645. this.explorer.checkDeleteElements(this);
  646. },
  647. setUndelete: function(){
  648. this.actionNode.fade("out");
  649. if (this.explorer.currentItem!==this){
  650. this.deleteNode.setStyles(this.style.actionDeleteNode);
  651. this.contentNode.setStyles(this.style.contentNode);
  652. this.textNode.setStyles(this.style.textNode);
  653. }else{
  654. this.contentNode.setStyles(this.style.contentNode_selected);
  655. this.textNode.setStyles(this.style.textNode_selected);
  656. this.actionNode.setStyles(this.style.actionNode_selected);
  657. if (this.deleteNode) this.deleteNode.setStyles(this.style.actionDeleteNode_selected);
  658. }
  659. this.explorer.deleteElements.erase(this);
  660. this.deleteSelected = false;
  661. this.explorer.checkDeleteElements(this);
  662. },
  663. setEvent: function(){
  664. this.contentNode.addEvents({
  665. "mouseover": function(e){
  666. if (this.explorer.currentItem!==this && !this.deleteSelected){
  667. this.contentNode.setStyles(this.style.nodeOver);
  668. if (!this.deleteSelected) if (this.data.id) this.actionNode.fade("in");
  669. }
  670. }.bind(this),
  671. "mouseout": function(e){
  672. if (this.explorer.currentItem!==this && !this.deleteSelected){
  673. this.contentNode.setStyles(this.style.contentNode);
  674. if (!this.deleteSelected) if (this.data.id) this.actionNode.fade("out");
  675. }
  676. }.bind(this),
  677. "click": function(e){
  678. if (!this.deleteSelected){
  679. if (this.explorer.currentItem){
  680. if (this.explorer.currentItem.unSelected()){
  681. this.selected();
  682. }else{
  683. this.explorer.app.notice(this.explorer.options.lp.elementSave, "error", this.propertyContentNode);
  684. }
  685. }else{
  686. this.selected();
  687. }
  688. }
  689. }.bind(this)
  690. });
  691. },
  692. unSelected: function(){
  693. if (this.content.baseInfor.mode==="edit") return false;
  694. if (!this.deleteSelected){
  695. this.explorer.currentItem = null;
  696. this.contentNode.setStyles(this.style.contentNode);
  697. this.textNode.setStyles(this.style.textNode);
  698. this.actionNode.setStyles(this.style.actionNode);
  699. if (this.deleteNode) this.deleteNode.setStyles(this.style.actionDeleteNode);
  700. }
  701. this.clearItemProperty();
  702. return true;
  703. },
  704. clearItemProperty: function(){
  705. this.explorer.propertyTitleNode.empty();
  706. if (this.content) this.content.destroy();
  707. this.explorer.propertyContentNode.empty();
  708. },
  709. selected: function(){
  710. this.explorer.currentItem = this;
  711. this.contentNode.setStyles(this.style.contentNode_selected);
  712. this.textNode.setStyles(this.style.textNode_selected);
  713. this.actionNode.setStyles(this.style.actionNode_selected);
  714. if (this.deleteNode) this.deleteNode.setStyles(this.style.actionDeleteNode_selected);
  715. this.showItemProperty();
  716. },
  717. editBaseInfor: function(){
  718. this.content.edit();
  719. },
  720. showItemProperty: function(){
  721. this.content = new MWF.xApplication.Org.PersonExplorer.PersonContent(this);
  722. },
  723. destroy: function(){
  724. if (this.explorer.currentItem===this){
  725. this.explorer.currentItem = null;
  726. this.clearItemProperty();
  727. }
  728. this.node.destroy();
  729. delete this;
  730. },
  731. "delete": function(success, failure){
  732. this.explorer.actions.deletePerson(this.data.id, function(){
  733. this.destroy();
  734. if (success) success();
  735. }.bind(this), function(xhr, text, error){
  736. var errorText = error;
  737. if (xhr) errorText = xhr.responseText;
  738. MWF.xDesktop.notice("error", {x: "right", y:"top"}, "request json error: "+errorText);
  739. if (failure) failure();
  740. });
  741. },
  742. _loadTextNode: function(){
  743. this.textNode.set({"text": this.data.name});
  744. },
  745. _getIcon: function(nocache){
  746. var url = (this.data.id) ? this.explorer.actions.getPersonIcon(this.data.id) : "/x_component_Org/$Explorer/default/icon/man.png";
  747. return (nocache) ? url+"?"+(new Date().getTime()) : url;
  748. //return (this.data.id) ? this.explorer.actions.getPersonIcon(this.data.id) : "/x_component_Org/$Explorer/default/icon/man.png";
  749. // var src = "data:image/png;base64,"+this.data.icon;
  750. // if (!this.data.icon){
  751. // if (this.data.genderType==="f"){
  752. // src = "/x_component_Org/$Explorer/default/icon/female24.png"
  753. // }else{
  754. // src = "/x_component_Org/$Explorer/default/icon/man24.png"
  755. // }
  756. // }
  757. // return src;
  758. }
  759. });
  760. MWF.xApplication.Org.$Explorer.ItemContent = new Class({
  761. initialize: function (item, isClose) {
  762. this.item = item;
  763. this.isClose = isClose;
  764. this.explorer = this.item.explorer;
  765. this.contentNode = this.item.propertyContentNode;
  766. this.style = this.item.style.person;
  767. this.load();
  768. },
  769. _getData: function(callback){
  770. this.data = this.item.data;
  771. if (callback) callback();
  772. },
  773. load: function(){
  774. debugger;
  775. this.titleContentNode = new Element("div").inject(this.contentNode);
  776. this.propertyContentScrollNode = new Element("div", {"styles": {"overflow": "hidden"}}).inject(this.contentNode);
  777. this.propertyContentNode = new Element("div", {"styles": {"overflow": "hidden"}}).inject(this.propertyContentScrollNode);
  778. this.bottomContentNode = new Element("div").inject(this.contentNode);
  779. this._getData(function(){
  780. this.explorer.propertyTitleNode.set("text", this.data.name);
  781. this._showItemPropertyTitle();
  782. this.loadItemPropertyTab(function(){
  783. this._loadTabs();
  784. this._loadContent();
  785. if (this.propertyTab.pages.length) this.propertyTab.pages[0].showTabIm();
  786. }.bind(this));
  787. this._showItemPropertyBottom();
  788. this.setContentSizeFun = this.setContentSize.bind(this);
  789. this.setContentSize();
  790. this.explorer.app.addEvent("resize", this.setContentSizeFun);
  791. new MWF.widget.ScrollBar(this.propertyContentScrollNode, {
  792. "style":"xApp_Organization_Explorer", "where": "before", "distance": 100, "friction": 4, "axis": {"x": false, "y": true}
  793. });
  794. }.bind(this));
  795. //this.showItemPropertyTitle();
  796. },
  797. setContentSize: function(){
  798. var size = this.contentNode.getSize();
  799. var titleSize = this.titleContentNode.getSize();
  800. var bottomSize = this.bottomContentNode.getSize();
  801. var y = size.y-titleSize.y-bottomSize.y;
  802. this.propertyContentScrollNode.setStyle("height", ""+y+"px")
  803. },
  804. loadItemPropertyTab: function(callback){
  805. this.propertyTabContainerNode = new Element("div", {"styles": this.item.style.tabTitleNode}).inject(this.propertyContentNode, "top");
  806. MWF.require("MWF.widget.Tab", function(){
  807. this.propertyTab = new MWF.widget.Tab(this.propertyContentNode, {"style": "org"});
  808. this.propertyTab.load();
  809. this.propertyTab.tabNodeContainer.inject(this.propertyTabContainerNode);
  810. if (callback) callback();
  811. }.bind(this));
  812. },
  813. edit: function(){
  814. debugger;
  815. if (this.baseInfor) this.baseInfor.edit();
  816. },
  817. destroy: function(){
  818. if (this.setContentSizeFun) this.explorer.app.removeEvent("resize", this.setContentSizeFun);
  819. if (this.titleInfor) this.titleInfor.destroy();
  820. if (this.bottomInfor) this.bottomInfor.destroy();
  821. if (this.baseInfor) this.baseInfor.destroy();
  822. this.contentNode.empty();
  823. MWF.release(this);
  824. },
  825. _showItemPropertyTitle: function(){
  826. this.titleInfor = new MWF.xApplication.Org.$Explorer.ItemContent.TitleInfor(this);
  827. },
  828. _showItemPropertyBottom: function(){
  829. this.bottomInfor = new MWF.xApplication.Org.$Explorer.ItemContent.BottmInfor(this);
  830. },
  831. _loadTabs: function(){},
  832. _loadContent: function(){}
  833. });
  834. MWF.xApplication.Org.$Explorer.ItemContent.TitleInfor = new Class({
  835. initialize: function (content) {
  836. this.content = content;
  837. this.item = content.item;
  838. this.data = this.content.data;
  839. this.explorer = this.item.explorer;
  840. this.contentNode = this.content.titleContentNode;
  841. this.style = this._getStyle();
  842. this.load();
  843. },
  844. _getStyle: function(){
  845. return this.item.style.person;
  846. },
  847. load: function(){
  848. this.titleBgNode = new Element("div", {"styles": this.style.titleBgNode}).inject(this.contentNode);
  849. this.titleNode = new Element("div", {"styles": this.style.titleNode}).inject(this.titleBgNode);
  850. this.setBackground();
  851. this.titleInforNode = new Element("div", {"styles": this.style.titleInforNode}).inject(this.titleNode);
  852. this.titleInforLeftNode = new Element("div", {"styles": this.style.titleInforLeftNode}).inject(this.titleInforNode);
  853. this.titleInforRightNode = new Element("div", {"styles": this.style.titleInforRightNode}).inject(this.titleInforNode);
  854. this.loadLeftInfor();
  855. this.loadRightInfor();
  856. this.loadAction();
  857. if (this.content.isClose) this.createCloseNode();
  858. },
  859. createCloseNode: function(){
  860. this.closeNode = new Element("div", {"styles": this.style.titleCloseNode}).inject(this.titleBgNode);
  861. this.closeNode.addEvents({
  862. "mousedown": function(){this.closeNode.setStyles(this.style.titleCloseNode_down)}.bind(this),
  863. "mouseup": function(){this.closeNode.setStyles(this.style.titleCloseNode)}.bind(this),
  864. "click": function(){
  865. var node = this.content.contentNode;
  866. this.content.destroy();
  867. node.destroy();
  868. node = null;
  869. }.bind(this)
  870. });
  871. },
  872. setBackground: function(){
  873. this.titleBgNode.setStyle("background-image", "url(/x_component_Org/$Explorer/"+this.explorer.app.options.style+"/icon/person_bg_bg.png)");
  874. this.titleNode.setStyle("background-image", "url(/x_component_Org/$Explorer/"+this.explorer.app.options.style+"/icon/person_bg.png)");
  875. },
  876. loadLeftInfor: function(){
  877. debugger;
  878. if (!this.iconAreaNode) this.iconAreaNode = new Element("div", {"styles": this.style.titleInforIconAreaNode}).inject(this.titleInforLeftNode);
  879. if (!this.iconNode) this.iconNode = new Element("img", {"styles": this.style.titleInforIconNode}).inject(this.iconAreaNode);
  880. this.iconNode.set("src", this._getIcon());
  881. },
  882. _getIcon: function(nocache){
  883. var url = (this.data.id) ? this.explorer.actions.getPersonIcon(this.data.id) : "/x_component_Org/$Explorer/default/icon/man.png";
  884. return (nocache) ? url+"?"+(new Date().getTime()) : url;
  885. // var src = "data:image/png;base64,"+this.data.icon;
  886. // if (!this.data.icon){
  887. // if (this.data.genderType==="f"){
  888. // src = "/x_component_Org/$Explorer/default/icon/female.png"
  889. // }else{
  890. // src = "/x_component_Org/$Explorer/default/icon/man.png"
  891. // }
  892. // }
  893. // return src;
  894. },
  895. loadRightInfor: function(){
  896. var text = this.data.name+((this.data.employee) ? "("+this.data.employee+")" : "");
  897. if (!this.nameNode) this.nameNode = new Element("div", {"styles": this.style.titleInforNameNode}).inject(this.titleInforRightNode);
  898. if (!this.signatureNode) this.signatureNode = new Element("div", {"styles": this.style.titleInforSignatureNode}).inject(this.titleInforRightNode);
  899. this.nameNode.set("text", text);
  900. this.signatureNode.set("text", (this.data.signature || "" ));
  901. },
  902. refresh: function(){
  903. this.loadLeftInfor();
  904. this.loadRightInfor();
  905. },
  906. loadAction: function(){},
  907. destroy: function(){
  908. this.contentNode.empty();
  909. MWF.release(this);
  910. }
  911. });
  912. MWF.xApplication.Org.$Explorer.ItemContent.BottomInfor = new Class({
  913. initialize: function (content) {
  914. this.content = content;
  915. this.item = content.item;
  916. this.data = this.content.data;
  917. this.explorer = this.item.explorer;
  918. this.contentNode = this.content.bottomContentNode;
  919. this.style = this._getStyle();
  920. this.load();
  921. },
  922. _getStyle: function(){
  923. return this.item.style.person;
  924. },
  925. load: function(){
  926. this.readContentNode = new Element("div", {"styles": this.style.baseReadNode}).inject(this.contentNode);
  927. this.addInforList();
  928. },
  929. addInfor: function(text){
  930. return new Element("div", {"styles": this.style.baseReadContentNode, "text": text}).inject(this.readContentNode);
  931. },
  932. addInforList: function(){},
  933. refresh: function(){
  934. this.readContentNode.empty();
  935. this.addInforList();
  936. },
  937. destroy: function(){
  938. this.readContentNode.empty();
  939. this.readContentNode.destroy();
  940. MWF.release(this);
  941. }
  942. });