Commit 34732c78 authored by François Billioud's avatar François Billioud

implement ung main page with dynamic list creation

parent 171dc6d4
...@@ -405,6 +405,9 @@ div.listbox-content a:hover { ...@@ -405,6 +405,9 @@ div.listbox-content a:hover {
color: #3D6474; color: #3D6474;
text-decoration: underline; text-decoration: underline;
} }
div.listbox-content td.listbox-table-data-cell {
cursor: pointer;
}
div.listbox-content td.listbox-table-data-cell a img { div.listbox-content td.listbox-table-data-cell a img {
margin-right: -8px; margin-right: -8px;
} }
......
...@@ -14,7 +14,7 @@ currentPage = null; ...@@ -14,7 +14,7 @@ currentPage = null;
/* /*
* Page Class * Page Class
* used to decompose the page and give access to useful elements * used to decompose the page and give access to useful elements
* @param page name of the page to be created * @param page : name of the page to be created
*/ */
var Page = function(page) { var Page = function(page) {
this.name = page; this.name = page;
...@@ -43,15 +43,7 @@ Page.prototype = { ...@@ -43,15 +43,7 @@ Page.prototype = {
//loaders //loaders
/* load the xml document which contains the web page information */ /* load the xml document which contains the web page information */
loadXML: function(source) { loadXML: function(source) {
$.ajax( { loadFile(source,"html",function(data) {getCurrentPage().setXML(data);});
type: "GET",
url: source,
dataType: "html",
async: true,
success: function(data) {
getCurrentPage().setXML(data);
}
});
}, },
/* update the HTML page from the XML document */ /* update the HTML page from the XML document */
loadPage: function() { loadPage: function() {
...@@ -66,18 +58,22 @@ Page.prototype = { ...@@ -66,18 +58,22 @@ Page.prototype = {
var editor = null; var editor = null;
/* load the editor to work with and a new document to work on */ /* load the editor to work with and a new document to work on */
switch(this.name) { switch(this.name) {
case "editor": case "text-editor":
editor = new Xinha(); editor = new Xinha();
if(!doc) {doc=new JSONTextDocument();} if(!doc) {doc=new JSONTextDocument();}
break; break;
case "table": case "table-editor":
editor = new SheetEditor(); editor = new SheetEditor();
if(!doc) {doc=new JSONSheetDocument();} if(!doc) {doc=new JSONSheetDocument();}
break; break;
case "illustration": case "image-editor":
editor = new SVGEditor(); editor = new SVGEditor();
if(!doc) {doc=new JSONIllustrationDocument();} if(!doc) {doc=new JSONIllustrationDocument();}
break; break;
default://renvoie à la page d'accueil
window.location = "ung.html";
return;
break;
} }
setCurrentDocument(doc); setCurrentDocument(doc);
this.setEditor(editor); this.setEditor(editor);
...@@ -192,7 +188,7 @@ setCurrentUser = function(user) {localStorage.setItem("currentUser", JSON.string ...@@ -192,7 +188,7 @@ setCurrentUser = function(user) {localStorage.setItem("currentUser", JSON.string
/* JSON document */ /* JSON document */
var JSONDocument = function() { var JSONDocument = function() {
this.type = null; this.type = "table";//test
this.language = getCurrentUser().getLanguage(); this.language = getCurrentUser().getLanguage();
this.version = null; this.version = null;
...@@ -255,7 +251,16 @@ getCurrentDocument = function() { ...@@ -255,7 +251,16 @@ getCurrentDocument = function() {
return doc; return doc;
} }
setCurrentDocument = function(doc) {localStorage.setItem("currentDocument",JSON.stringify(doc));} setCurrentDocument = function(doc) {localStorage.setItem("currentDocument",JSON.stringify(doc));}
getDocumentList = function() {
var list = localStorage.getItem("documentList");
return list ? list : new List();
}
setDocumentList = function() {localStorage.setItem("documentList",list);}
supportedDocuments = {"text":{editorPage:"text-editor",icon:"images/icons/document.png"},
"illustration":{editorPage:"image-editor",icon:"images/icons/svg.png"},
"table":{editorPage:"table-editor",icon:"images/icons/table.png"},
"other":{editorPage:null,icon:"images/icons/other.gif"}
}
/* /*
* actions * actions
......
...@@ -33,6 +33,31 @@ UngObject.prototype.inherits = function(superClass) { ...@@ -33,6 +33,31 @@ UngObject.prototype.inherits = function(superClass) {
this.prototype.load(superClass.prototype); this.prototype.load(superClass.prototype);
} }
/**
* Class List
* this class provides usual API to manipulate list structure
*/
var List = function(arg) {
this.content = new Array();
if(arg) {this.content = arg;}
this.length = this.content.length;
}
List.prototype = {
size: function() {return this.length;},
add: function(element) {this.content[this.size()]=element; this.length++;},
get: function(i) {return this.content[i];},
concat: function(list) {while(!list.isEmpty()) {this.add(list.pop())}},
remove: function(i) {delete this.content[i];this.length--;},
isEmpty: function() {return this.size()==0;},
head: function() {return this.isEmpty() ? null : this.get(this.size()-1);},
pop: function() {
if(this.isEmpty()) {return null;}
var element = this.get(this.size()-1);
this.remove(this.size()-1);
return element;
}
}
/** /**
* returns the current date * returns the current date
*/ */
...@@ -55,6 +80,16 @@ saveXHR = function(address) { ...@@ -55,6 +80,16 @@ saveXHR = function(address) {
error: function(xhr) { alert("error while saving");} error: function(xhr) { alert("error while saving");}
}); });
}; };
loadFile = function(address, type, instruction) {
$.ajax({
url: address,
type: "GET",
dataType: type,
success: instruction
});
}
// load // load
loadXHR = function(address) { loadXHR = function(address) {
$.ajax({ $.ajax({
...@@ -77,6 +112,8 @@ loadXHR = function(address) { ...@@ -77,6 +112,8 @@ loadXHR = function(address) {
/* /*
* wait an event before execute an action * wait an event before execute an action
* @param required : function we are waiting for a result
* @param func : function we will try to execute in a loop
*/ */
waitBeforeSucceed = function(required, func) { waitBeforeSucceed = function(required, func) {
var nb = 2;//avoid to test too much times var nb = 2;//avoid to test too much times
...@@ -84,7 +121,7 @@ waitBeforeSucceed = function(required, func) { ...@@ -84,7 +121,7 @@ waitBeforeSucceed = function(required, func) {
try { try {
if(!required.call()) {throw 0;} if(!required.call()) {throw 0;}
func.call();} func.call();}
catch(e) {if(nb<100) {setTimeout(execute,nb*100);}} catch(e) {console.log(e);if(nb<100) {setTimeout(execute,nb*100);}}
nb*=nb; nb*=nb;
} }
execute(); execute();
...@@ -92,13 +129,14 @@ waitBeforeSucceed = function(required, func) { ...@@ -92,13 +129,14 @@ waitBeforeSucceed = function(required, func) {
/* /*
* try a function until the execution meets with no error * try a function until the execution meets with no error
* @param func : function to execute in a loop until it encounters no exception
*/ */
tryUntilSucceed = function(func) { tryUntilSucceed = function(func) {
var nb = 2;//avoid to test too much times var nb = 2;//avoid to test too much times
var execute = function() { var execute = function() {
try {func.call();} try {func.call();}
catch(e) {if(nb<100) {setTimeout(execute,nb*400);} console.log(e);} catch(e) {if(nb<100) {setTimeout(execute,nb*200);} console.log(e);}
nb*=nb; nb*=nb;
} }
execute(); execute();
} }
\ No newline at end of file
createLine = function(doc) { var documentList = getDocumentList();
var type = "other"; documentList.add(new JSONDocument());
try{if(doc.getType()) {type = doc.getType();}} documentList.add(new JSONDocument());
catch(e) {console.log(e);} documentList.add(new JSONDocument());
$.(table.listbox /**
var tr = $(getCurrentPage().get) * create a ligne representing a document in the main table
"<tr class='"+type+"'>\n\ * @param doc : document to represent
<td class='listbox-table-select-cell'>\n\ * @param i : ID of the line (number)
<input type='checkbox' id='"+i+"'/>\n\ */
</td>\n\ var Line = function(doc, i) {
<td class='listbox-table-data-cell'>\n\ this.document = doc;
<a href='#' onclick='javascript:getPage()'>\n\ this.ID = i;
<img src='images/icons/document.png'/>\n\ this.html = Line.getOriginalHTML();
</a>\n\ }
</td>\n\ Line.prototype = {
<td class='listbox-table-data-cell'> getDocument: function() {return this.document;},
<a href="...">Web Page</a> getID: function() {return this.ID;},
</td> getType: function() {return this.document.getType() ? this.document.getType() : "other";},
getHTML: function() {return this.html;},
setHTML: function(newHTML) {this.html = newHTML;},
isSelected: function() {
return $("tr td.listbox-table-select-cell input#"+this.ID).attr("checked");
},
<td class="listbox-table-data-cell"> /* load the document information in the html of a default line */
<a href="...">Deleted</a> updateHTML: function() {
</td> this.setHTML($(this.getHTML()).attr("class",this.getType())
.find("td.listbox-table-select-cell input").attr("id",this.getID()).end()//ID
//.find("td.listbox-table-data-cell a").attr("onclick",this.startEdition).end()//clic
.find("td.listbox-table-data-cell")
.click(this.startEdition)//clic
.find("a.listbox-document-icon")
.find("img")
.attr("src",supportedDocuments[this.getType()].icon)//icon
.end()
.end()
.find("a.listbox-document-title").html(this.getDocument().getTitle()).end()
.find("a.listbox-document-state").html(this.getDocument().getState()[getCurrentUser().getLanguage()]).end()
.find("a.listbox-document-date").html(this.getDocument().getLastModification()).end()
.end());
},
/* add the line in the table */
display: function() {$("table.listbox tbody").append($(this.getHTML()));},
/* edit the document if clicked */
startEdition: function() {
setCurrentDocument(this.document);
window.location = "theme.html";
}
}
/* load the html code of a default line */
Line.loadHTML = function() {
loadFile("xml/xmlElements.xml", "html", function(data) {Line.originalHTML = $(data).find("line table tbody").html();});
return Line.originalHTML;
}
/* return the html code of a default line */
Line.getOriginalHTML = function() {return Line.originalHTML;}
<td class="listbox-table-data-cell"> /* load the table */
<a href="ung_document_list_selection">2011/05/31&nbsp;&nbsp;&nbsp;11:44</a> waitBeforeSucceed(
</td> function(){return Line.loadHTML()},
function() {
</tr> for(var i=0;i<documentList.size();i++) {
\ No newline at end of file var ligne = new Line(documentList.get(i),0);
ligne.updateHTML();
ligne.display();
}
}
);
\ No newline at end of file
This diff is collapsed.
<root>
<title> Illustration Web - Web Illustration </title>
<content>
<label>
Page Content
</label>
<div class="input"><div >
<iframe name="svgframe" id="svgframe" width="100%" height="600"/>
</div></div>
</content>
<dependencies>
<scriptfile>js/illustration.js</scriptfile>
<stylefile>css/jquery-ui.css</stylefile>
</dependencies>
</root>
<?xml version="1.0" encoding="UTF-8"?>
<root>
<title> Web Table - Web Table </title>
<content>
<label>
Contenu de la page
</label>
<div class="input">
<link rel="stylesheet" href="js/jquery/plugin/sheet/jquery.sheet.css" type="text/css" />
<link rel="stylesheet" href="jquery_sheet_editor/jquery.sheet.erp5.css" type="text/css" />
<link rel="stylesheet" href="js/jquery/plugin/colorpicker/jquery.colorPicker.css" type="text/css" />
<!--<link rel="stylesheet" href="js/jquery/plugin/colorpicker/menu.css" type="text/css" />-->
<div id="jQuerySheet0" style="height: 400px;"></div>
<span id="inlineMenu" style="display: none;">
<span>
<a href="#" onclick="sheetInstance.controlFactory.addRow(); return false;" title="Insert Row After Selected">
<img alt="Insert Row After Selected" src="jquery_sheet_editor/jquery_sheet_image/sheet_row_add.png" />
</a>
<a href="#" onclick="sheetInstance.controlFactory.addRow(null, true); return false;" title="Insert Row Before Selected">
<img alt="Insert Row Before Selected" src="jquery_sheet_editor/jquery_sheet_image/sheet_row_add.png" />
</a>
<a href="#" onclick="sheetInstance.controlFactory.addRow(null, null, ':last'); return false;" title="Add Row At End">
<img alt="Add Row" src="jquery_sheet_editor/jquery_sheet_image/sheet_row_add.png" />
</a>
<a href="#" onclick="sheetInstance.controlFactory.addRowMulti(); return false;" title="Add Multi-Rows">
<img alt="Add Multi-Rows" src="jquery_sheet_editor/jquery_sheet_image/sheet_row_add_multi.png" />
</a>
<a href="#" onclick="sheetInstance.deleteRow(); return false;" title="Delete Row">
<img alt="Delete Row" src="jquery_sheet_editor/jquery_sheet_image/sheet_row_delete.png" />
</a>
<a href="#" onclick="sheetInstance.controlFactory.addColumn(); return false;" title="Insert Column After Selected">
<img alt="Insert Column After Selected" src="jquery_sheet_editor/jquery_sheet_image/sheet_col_add.png" />
</a>
<a href="#" onclick="sheetInstance.controlFactory.addColumn(null, true); return false;" title="Insert Column Before Selected">
<img alt="Insert Column Before Selected" src="jquery_sheet_editor/jquery_sheet_image/sheet_col_add.png" />
</a>
<a href="#" onclick="sheetInstance.controlFactory.addColumn(null, null, ':last'); return false;" title="Add Column At End">
<img alt="Add Column At End" src="jquery_sheet_editor/jquery_sheet_image/sheet_col_add.png" />
</a>
<a href="#" onclick="sheetInstance.controlFactory.addColumnMulti(); return false;" title="Insert Multi-Columns">
<img alt="Add Multi-Columns" src="jquery_sheet_editor/jquery_sheet_image/sheet_col_add_multi.png" />
</a>
<a href="#" onclick="sheetInstance.deleteColumn(); return false;" title="Delete Column">
<img alt="Delete Column" src="jquery_sheet_editor/jquery_sheet_image/sheet_col_delete.png" />
</a>
<a href="#" onclick="sheetInstance.getTdRange(null, sheetInstance.obj.formula().val()); return false;" title="Get Cell Range">
<img alt="Get Cell Range" src="jquery_sheet_editor/jquery_sheet_image/sheet_get_range.png" />
</a>
<a href="#" onclick="sheetInstance.deleteSheet(); return false;" title="Delete Current Sheet">
<img alt="Delete Current Sheet" src="jquery_sheet_editor/jquery_sheet_image/table_delete.png" />
</a>
<a href="#" onclick="sheetInstance.calc(sheetInstance.i); return false;" title="Refresh Calculations">
<img alt="Refresh Calculations" src="jquery_sheet_editor/jquery_sheet_image/arrow_refresh.png" />
</a>
<a href="#" onclick="sheetInstance.cellFind(); return false;" title="Find">
<img alt="Find" src="jquery_sheet_editor/jquery_sheet_image/find.png" />
</a>
<a href="#" onclick="sheetInstance.cellStyleToggle('styleBold'); return false;" title="Bold">
<img alt="Bold" src="jquery_sheet_editor/jquery_sheet_image/text_bold.png" />
</a>
<a href="#" onclick="sheetInstance.cellStyleToggle('styleItalics'); return false;" title="Italic">
<img alt="Italic" src="jquery_sheet_editor/jquery_sheet_image/text_italic.png" />
</a>
<a href="#" onclick="sheetInstance.cellStyleToggle('styleUnderline', 'styleLineThrough'); return false;" title="Underline">
<img alt="Underline" src="jquery_sheet_editor/jquery_sheet_image/text_underline.png" />
</a>
<a href="#" onclick="sheetInstance.cellStyleToggle('styleLineThrough', 'styleUnderline'); return false;" title="Strikethrough">
<img alt="Strikethrough" src="jquery_sheet_editor/jquery_sheet_image/text_strikethrough.png" />
</a>
<a href="#" onclick="sheetInstance.cellStyleToggle('styleLeft', 'styleCenter styleRight'); return false;" title="Align Left">
<img alt="Align Left" src="jquery_sheet_editor/jquery_sheet_image/text_align_left.png" />
</a>
<a href="#" onclick="sheetInstance.cellStyleToggle('styleCenter', 'styleLeft styleRight'); return false;" title="Align Center">
<img alt="Align Center" src="jquery_sheet_editor/jquery_sheet_image/text_align_center.png" />
</a>
<a href="#" onclick="sheetInstance.cellStyleToggle('styleRight', 'styleLeft styleCenter'); return false;" title="Align Right">
<img alt="Align Right" src="jquery_sheet_editor/jquery_sheet_image/text_align_right.png" />
</a>
<a href="#" onclick="sheetInstance.fillUpOrDown(); return false;" title="Fill Down">
<img alt="Fill Down" src="jquery_sheet_editor/jquery_sheet_image/arrow_down.png" />
</a>
<a href="#" onclick="sheetInstance.fillUpOrDown(true); return false;" title="Fill Up">
<img alt="Fill Up" src="jquery_sheet_editor/jquery_sheet_image/arrow_up.png" />
</a>
<span class="colorPickers">
<input title="Foreground color" class="colorPickerFont" style="background-image: url('jquery_sheet_editor/jquery_sheet_image/palette.png') ! important; width: 16px; height: 16px;" />
<input title="Background Color" class="colorPickerCell" style="background-image: url('jquery_sheet_editor/jquery_sheet_image/palette_bg.png') ! important; width: 16px; height: 16px;" />
</span>
<a href="#" onclick="sheetInstance.obj.formula().val('=HYPERLINK(\'' + prompt('Enter Web Address', 'http://www.visop-dev.com/') + '\')').keydown(); return false;" title="HyperLink">
<img alt="Web Link" src="jquery_sheet_editor/jquery_sheet_image/page_link.png" />
</a>
<a href="#" onclick="sheetInstance.toggleFullScreen(); $('#lockedMenu').toggle(); return false;" title="Toggle Full Screen">
<img alt="Web Link" src="jquery_sheet_editor/jquery_sheet_image/arrow_out.png" />
</a>
</span>
</span></div>
</content>
<dependencies>
<scriptfile>js/jquery/plugin/sheet/jquery.sheet.js</scriptfile>
<scriptfile>js/jquery/plugin/mbmenu/mbMenu.min.js</scriptfile>
<scriptfile>js/jquery/plugin/jqchart/jgcharts.min.js</scriptfile>
<scriptfile>js/jquery/plugin/colorpicker/jquery.colorPicker.min.js</scriptfile>
<scriptfile>js/jquery/plugin/elastic/jquery.elastic.min.js</scriptfile>
<scriptfile>js/jquery/plugin/sheet/jquery.sheet.js</scriptfile>
<scriptfile>js/table.js</scriptfile>
<stylefile>js/jquery/plugin/sheet/jquery.sheet.css</stylefile>
<stylefile>css/table.css</stylefile>
<stylefile>js/jquery/plugin/colorpicker/jquery.colorPicker.css</stylefile>
<stylefile>css/jquery-ui.css</stylefile>
</dependencies>
</root>
<link rel="stylesheet" href="css/jquery.sheet.erp5.css" type="text/css" />
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<root>
<title> Page web - Web Page </title>
<content>
<label>
Page Content
</label>
<div class='input'>
<textarea id='input_area' name='input_area' style='width:100%;height:500px'>
</textarea>
</div>
</content>
<dependencies>
<scriptfile>js/editor.js</scriptfile>
<stylefile>css/jquery-ui.css</stylefile>
</dependencies>
</root>
...@@ -43,4 +43,31 @@ ...@@ -43,4 +43,31 @@
</fieldset> </fieldset>
</form> </form>
</upload> </upload>
<line>
<table>
<tbody>
<tr>
<td class="listbox-table-select-cell">
<input type="checkbox"/>
</td>
<td class="listbox-table-data-cell">
<a class="listbox-document-icon">
<img src="images/icons/document.png"/>
</a>
</td>
<td class='listbox-table-data-cell'>
<a class="listbox-document-title">Web Page</a>
</td>
<td class="listbox-table-data-cell">
<a class="listbox-document-state">Deleted</a>
</td>
<td class="listbox-table-data-cell">
<a class="listbox-document-date">2011/05/31&nbsp;&nbsp;&nbsp;11:44</a>
</td>
</tr>
</tbody>
</table>
</line>
</root> </root>
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment