var Page = function(refData, Parent) { var refThis = this; refThis.refData = refData; refThis.cntr = []; this.Init = function() { refThis.ePage = _newElement("div", "Page"); Parent.appendChild(refThis.ePage); Container(refThis.ePage); refThis.cntr.push(refThis.ePage); if(refData.ePage) { var ePage = refData.ePage.firstChild; if(ePage) { _removeNode(ePage); refThis.LayoutAdd(ePage); } } refThis.ePage.onclick = function() { refThis.onActive(this); }; }; this.Load = function(url) { function onLoad(response) { function load(node, parent) { if(_isTag(node, "part")) { var part = new refThis.Part(_text(node)); parent.appendChild(part.ePart); } else { function attribute(node, name, element) { var a = node.getAttribute(name); if(a != null) { if(name == "class") { element.className = a; } else { element.style[name] = a; } } } var e = _newElement(node.tagName); attribute(node, 'class', e); attribute(node, 'width', e); attribute(node, 'height', e); parent.appendChild(e); if(e.className && e.className == "cntr") { refThis.SetContainer(e); } for(var i=0; i<node.childNodes.length; i++) { load(node.childNodes[i], e); } } } if(response) { var rootNode = response.responseXML.documentElement; if(rootNode && rootNode.tagName == "page") { for(var i=0; i<rootNode.childNodes.length; i++) { load(rootNode.childNodes[i], refThis.ePage); } } } } Request.GET(url, onLoad); }; this.onActive = function(node) { if(User.isManager < 3) return false; if(refThis.eTool == null) return; if(node != refThis.actContainer) { if(refThis.actContainer) { refThis.actContainer.style.background = ""; } refThis.actContainer = node; node.style.background = "#fdd"; } if(refThis.selected) { if(refThis.selected.ePart.parentNode != node) refThis.onSelect(null); } }; this.onSelect = function(part) { if(User.isManager < 3) return false; if(refThis.eTool == null) return; if(refThis.selected != part) { if(refThis.selected) { refThis.selected.ePart.className = "Part"; } if(part != null) part.ePart.className = "Focus"; refThis.selected = part; } }; this.Part = function(content) { var self = this; self.Init = function() { self.ePart = _newElement("div", "Part"); var divBody = _newElement("div", "Body"); var divMask = _newElement("div", "Mask"); divBody.innerHTML = content; self.ePart.appendChild(divMask); self.ePart.appendChild(divBody); self.ePart.body = divBody; self.ePart.cntr = refThis.cntr; self.ePart.getGhost = function() { var ghost = divBody.cloneNode(true); document.body.appendChild(ghost); return ghost; }; self.ePart.onDragging = function() { self.Mask(); }; self.ePart.onDragEnd = function() { self.Mask(); }; DragDrop.Enable(self.ePart, null, divMask); divBody.onresize = self.Mask; Listener.Add('resize', divBody); divBody.onclick = function() { refThis.onSelect(self); self.Mask(); }; }; self.Mask = function() { var divMask = self.ePart.firstChild; var divBody = divMask.nextSibling; var rect = getRect(divBody); divMask.style.left = rect.left; divMask.style.top = rect.top; divMask.style.width = (rect.right-rect.left); divMask.style.height = (rect.bottom-rect.top); }; self.Load = function(content) { var divMask = self.ePart.firstChild; var divBody = divMask.nextSibling; divBody.innerHTML = content; self.Mask(); }; self.Body = function() { var divMask = self.ePart.firstChild; var divBody = divMask.nextSibling; return divBody.innerHTML; }; self.Free = function() { var divMask = self.ePart.firstChild; var divBody = divMask.nextSibling; Listener.Del("resize", divBody); _removeNode(self.ePart); delete self; }; self.Init(); }; this.SetContainer = function(node) { node.onclick = function(event) { refThis.onActive(this); _cancelBubble(true, event); }; Container(node); refThis.cntr.push(node); }; this.LayoutAdd = function(node) { var parent = refThis.actContainer; if(parent == null) parent = refThis.ePage; parent.appendChild(node); refThis.LayoutSet(node); }; this.LayoutSet = function(node) { var name = node.className; if(name && name.toLowerCase() == "cntr") { refThis.SetContainer(node); } function forEach(children) { for(var i=0; i<children.length; i++) { if(_get(children[i], "type") == "part") { var part = new refThis.Part(children[i].innerHTML); _replaceNode(children[i], part.ePart); part.Mask(); } else { var css = children[i].className; if(css && css.toLowerCase() == "cntr") { refThis.SetContainer(children[i]); } forEach(children[i].childNodes); } } } forEach(node.childNodes); }; this.LayoutDel = function(node) { var name = node.className; if(name && name.toLowerCase() == "cntr") { refThis.cntr.remove(node); } function forEach(children) { for(var i=0; i<children.length; i++) { var css = children[i].className; if(css && css.toLowerCase() == "cntr") { refThis.cntr.remove(node); forEach(children[i].childNodes); } } } forEach(node.childNodes); if(_isTag(node, "td")) { var tr = node.parentNode; var table = tr.parentNode; if(_isTag(table, "table")) { forEach(table.childNodes); } _removeNode(table); return; } _removeNode(node); }; this.Enable = function(bEdit) { function setBorder(node) { if(!node.body) { if( _isTag(node, "table") || node.className == "cntr") { if(bEdit) { node.style.border = "1px dashed #ddd"; } else { node.style.border = null; } } for(var i=0; i<node.childNodes.length; i++) { setBorder(node.childNodes[i]); } } } var page = refThis.ePage; for(var i=0; i<page.childNodes.length; i++) { setBorder(page.childNodes[i]); } }; this.DockTool = function(x, y) { function onLayout() { if(refThis.Layout == null) { refThis.Layout = new Layout(Parent, refThis); } else { refThis.Layout.Show(true); } } function doPost(refData) { if(refThis.Poster == null) { refData.cbox = new Cbox({title:'post', screenCover:true, cssName:'CDlg', width:480,height:360}, Parent); refData.cbox.Close = function() { refData.cbox.Show(false); }; refThis.Poster = new Post(refData, refData.cbox.eContent); } else { refThis.Poster.Bind(refData); refThis.Poster.refData.cbox.Show(true); } } function onPnew() { function onOK(ref) { refThis.Poster.refData.cbox.Show(false); var part = new refThis.Part(ref.content.innerHTML); var cntr = refThis.actContainer; if(cntr == null) cntr = refThis.ePage; cntr.appendChild(part.ePart); part.Mask(); refThis.onSelect(part); } doPost({onOK:onOK}); } function onEdit() { if(refThis.selected) { function onOK(ref) { refThis.Poster.refData.cbox.Show(false); refThis.selected.Load(ref.content.innerHTML); } var body = refThis.selected.Body(); doPost({onOK:onOK, content:body}); } } function onPdel() { if(refThis.selected) { if(confirm(Local.message('selected','part','delete')+'?')) { refThis.selected.Free(); refThis.selected = null; } } else if(refThis.actContainer) { if(confirm(Local.message('selected','layout','delete')+'?')) { refThis.LayoutDel(refThis.actContainer); refThis.actContainer = null; } } } function onSave() { var xml = '<?xml version="1.0" encoding="utf-8" ?>\r\n'; xml += '<page>'; function save(node) { if(node.body) { if(node.body.innerHTML.length > 0) { xml += "<part><![CDATA["; xml += node.body.innerHTML; xml += "]]></part>"; } return; } else if(node.hasChildNodes) { xml += "<"+node.tagName; if(node.className) xml += " class='"+node.className+"'"; var style = ''; if(node.style.width) style += 'width:'+node.style.width+';'; if(node.style.height) style += 'height:'+node.style.height+';'; if(style && style.length > 0) xml += " style='"+style+"'"; xml +=">"; for(var i=0; i<node.childNodes.length; i++) { save(node.childNodes[i]); } xml += "</"+node.tagName+">"; } } var page = refThis.ePage; for(var i=0; i<page.childNodes.length; i++) { if(page.childNodes[i] != refThis.message) { save(page.childNodes[i]); } } xml += '</page>'; function onSaved(response) { refThis.message.style.display = "none"; if(response) { alert(response.responseText); } } if(refThis.message == null) { var msg = _newElement("div", "msg"); refThis.ePage.appendChild(msg); refThis.message = msg; } refThis.message.innerHTML = Local.saving; refThis.message.style.display = ""; var page = "?page="+refThis.refData.page; var data = "&data="+escape(xml); Request.POST("/Save.aspx"+page, data, onSaved); } if(refThis.eTool == null) { var items = [ {icon:'/img/item.gif', text:Local.layout, onclick:onLayout}, {icon:'/img/item.gif', text:Local.pnew, onclick:onPnew}, {icon:'/img/edit.gif', text:Local.edit, onclick:onEdit}, {}, {icon:'/img/del.gif', text:Local.pdel, onclick:onPdel}, {}, {icon:'/img/saveas.gif', text:Local.save, onclick:onSave}, {} ]; refThis.eTool = new Dock({items:items}, Parent); refThis.Enable(true); } refThis.eTool.eDock.style.left = x; refThis.eTool.eDock.style.top = y; }; this.Close = function() { refThis.Free(); }; this.Free = function() { if(refThis.eTool) delete refThis.eTool; if(refThis.Layout) { refThis.Layout.Free(); } if(refThis.Poster) { var cbox = refThis.Poster.refData.cbox; refThis.Poster.Free(); cbox.Free(); } _removeNode(refThis.ePage); delete refThis; }; this.Init(); }; function mkTable() { var mtable = _newElement("table", "mkTable"); function newLabel(text) { var row = mtable.insertRow(-1); var cell = row.insertCell(0); cell.innerHTML = "<b>"+text+"</b>"; } function newInput(cell, text, value) { var input = _newElement("input"); input.type = "text"; input.value = value; input.style.width = "32px"; if(text) { var span = _newElement("span"); span.appendChild(_newText(text+":")); cell.appendChild(span); } cell.appendChild(input); return input; } function newSelect(cell, text, options) { if(text) { var span = _newElement("span"); span.appendChild(_newText(text+":")); cell.appendChild(span); } var selector = Selector({options:options, width:64}, cell); return selector; } function selectWH(text) { var row = mtable.insertRow(-1); var cell = row.insertCell(0); var span = _newElement("span"); span.appendChild(_newText(text+":")); cell.appendChild(span); var options = [ [Local.auto], [Local.fullSize], [Local.percent], [Local.pixels] ]; var selector = Selector({options:options, width:64}, cell); var iEdit = _newElement("input"); iEdit.type = 'text'; iEdit.style.width = '32px'; iEdit.style.display = "none"; cell.appendChild(iEdit); selector.editor = iEdit; selector.onchange = function() { if(this.selectedIndex > 1) { iEdit.style.display = ""; iEdit.focus(); } else iEdit.style.display = "none"; }; selector.getValue = function() { switch(this.value) { case Local.auto: return "auto"; case Local.fullSize: return "100%"; case Local.percent: var v = parseInt(iEdit.value); if(v > 0 && v <= 100) { return v+"%"; } break; case Local.pixel: var v = parseInt(iEdit.value); if(v > 0) { return v+"px"; } break; } return "100%"; }; return selector; } newLabel(Local.width+Local.height); var sWidth = selectWH(Local.width); var sHeight = selectWH(Local.height); newLabel(Local.row+Local.column); var row = mtable.insertRow(-1); var cell = row.insertCell(0); var iRows = newInput(cell, Local.row, 1); var iColumns = newInput(cell, Local.column, 1); newLabel(Local.style); row = mtable.insertRow(-1); cell = row.insertCell(0); var iPadding = newInput(cell, Local.padding, 0); var sAlign = newSelect(cell, Local.align, [[Local.center, "center"], [Local.left, "left"], [Local.right, "right"]]); row = mtable.insertRow(-1); cell = row.insertCell(0); var iSpacing = newInput(cell, Local.spacing, 0); var sFloat = newSelect(cell, Local.float, [[Local.center, "center"], [Local.left, "left"], [Local.right, "right"]]); mtable.Validate = function() { if(parseInt(iRows.value) > 0 && parseInt(iColumns.value) > 0) { return true; } return false; }; mtable.Make = function() { var rows = parseInt(iRows.value); var columns = parseInt(iColumns.value); var w = parseInt(100/columns)+"%"; var h = parseInt(100/rows)+"%"; var table = _newElement("table"); table.cellspacing = 1; table.spacing = 2; table.style.border = "1px dashed #ddd"; table.style.width = sWidth.getValue(); table.style.height = sHeight.getValue(); var f = sFloat.value; if(f && f != "none") { table.style.float = f; table.style.display = "inline"; } for(var i=0; i<rows; i++) { var row = table.insertRow(i); row.vAlign = "top"; for(var j=0; j<columns; j++) { var cell = row.insertCell(j); cell.className = "cntr"; cell.style.width = w; cell.style.height = h; cell.style.border = "1px dashed #ddd"; cell.innerHTML = "<b></b>"; } } return table; }; return mtable; } var Layout = function(Parent, refPage) { var refThis = this; var cbox = new Cbox({title:'layout', cssName:"CDlg", width:480, height:360, screenCover:true}, Parent); var iframe = _newElement("iframe"); iframe.id = "layoutFrame"; iframe.name = iframe.id; iframe.style.width = "100%"; var mtable = mkTable(); var tabs = [ {title:"pop", page:iframe}, {title:"Table", page:mtable} ]; var ctab = new Ctab({tabs:tabs}, cbox.eContent); var center = _newElement("center"); center.style.margin = "10px"; var btOK = _newElement("input", "OK"); btOK.type = "button"; btOK.value = Local.OK; btOK.onclick = function() { if(mtable.style.display != "none") { refPage.LayoutAdd(mtable.Make()); } else if(refThis.selected) { var data = refThis.selected; var table = _newElement("table"); table.style.border = "1px dashed #ddd"; table.style.width = "100%"; table.style.height = "100%"; var w = parseInt(100/data[1])+"%"; var h = parseInt(100/data[0])+"%"; for(var r=0; r<data[0]; r++) { var row = table.insertRow(r); row.valign = "top"; for(var c=0; c<data[1]; c++) { var cell = row.insertCell(c); cell.className = "cntr"; if(data.length > c+2) { cell.style.width = data[c+2]; } else { cell.style.width = w; } cell.style.height = h; cell.style.border = "1px dashed #ddd"; var part = new refPage.Part('<img src="/img/item.gif">'); cell.appendChild(part.ePart); } } refPage.LayoutAdd(table); } cbox.Close(); }; center.appendChild(btOK); cbox.eContent.appendChild(center); cbox.eCbox.onSizeChanged = function() { var rect = getRect(cbox.eCbox); var h = rect.bottom-rect.top; if(h > 160) { h -= 120; iframe.style.height = h + "px"; } }; cbox.eCbox.onSizeChanged(); cbox.Close = function() { cbox.Show(false); }; cbox.callback = function(flag, value) { if(flag == "listItem") { refThis.selected = value; } }; var cssHref = [ '/css/style.css', '/sys/list/list.css' ]; AttachFrameOnLoad({id:iframe.id, onLoad:function(doc) { var page = doc.createElement("div"); doc.body.appendChild(page); var items = [ {licon:'/img/layout3v.gif', data:[1,3]}, {licon:'/img/layout3vm.gif', data:[1,3, '20%', '60%', '20%']}, {licon:'/img/layout3vl.gif', data:[1,3, '60%', '20%', '20%']}, {licon:'/img/layout3h.gif', data:[3,1]}, {licon:'/img/layout2v.gif', data:[1,2]}, {licon:'/img/layout2h.gif', data:[2,1]}, {licon:'/img/layout1.gif', data:[1,1]} ]; var obj = {items:items, vStyle:'lList', callback:cbox.callback}; var list = new List(obj, page); }, cssHref:cssHref}); this.Show = function(bShow) { cbox.Show(bShow); }; };