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 {
color: #3D6474;
text-decoration: underline;
}
div.listbox-content td.listbox-table-data-cell {
cursor: pointer;
}
div.listbox-content td.listbox-table-data-cell a img {
margin-right: -8px;
}
......
......@@ -14,7 +14,7 @@ currentPage = null;
/*
* Page Class
* 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) {
this.name = page;
......@@ -43,15 +43,7 @@ Page.prototype = {
//loaders
/* load the xml document which contains the web page information */
loadXML: function(source) {
$.ajax( {
type: "GET",
url: source,
dataType: "html",
async: true,
success: function(data) {
getCurrentPage().setXML(data);
}
});
loadFile(source,"html",function(data) {getCurrentPage().setXML(data);});
},
/* update the HTML page from the XML document */
loadPage: function() {
......@@ -66,18 +58,22 @@ Page.prototype = {
var editor = null;
/* load the editor to work with and a new document to work on */
switch(this.name) {
case "editor":
case "text-editor":
editor = new Xinha();
if(!doc) {doc=new JSONTextDocument();}
break;
case "table":
case "table-editor":
editor = new SheetEditor();
if(!doc) {doc=new JSONSheetDocument();}
break;
case "illustration":
case "image-editor":
editor = new SVGEditor();
if(!doc) {doc=new JSONIllustrationDocument();}
break;
default://renvoie à la page d'accueil
window.location = "ung.html";
return;
break;
}
setCurrentDocument(doc);
this.setEditor(editor);
......@@ -192,7 +188,7 @@ setCurrentUser = function(user) {localStorage.setItem("currentUser", JSON.string
/* JSON document */
var JSONDocument = function() {
this.type = null;
this.type = "table";//test
this.language = getCurrentUser().getLanguage();
this.version = null;
......@@ -255,7 +251,16 @@ getCurrentDocument = function() {
return 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
......
......@@ -33,6 +33,31 @@ UngObject.prototype.inherits = function(superClass) {
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
*/
......@@ -55,6 +80,16 @@ saveXHR = function(address) {
error: function(xhr) { alert("error while saving");}
});
};
loadFile = function(address, type, instruction) {
$.ajax({
url: address,
type: "GET",
dataType: type,
success: instruction
});
}
// load
loadXHR = function(address) {
$.ajax({
......@@ -77,6 +112,8 @@ loadXHR = function(address) {
/*
* 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) {
var nb = 2;//avoid to test too much times
......@@ -84,7 +121,7 @@ waitBeforeSucceed = function(required, func) {
try {
if(!required.call()) {throw 0;}
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;
}
execute();
......@@ -92,13 +129,14 @@ waitBeforeSucceed = function(required, func) {
/*
* 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) {
var nb = 2;//avoid to test too much times
var execute = function() {
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;
}
execute();
}
}
\ No newline at end of file
createLine = function(doc) {
var type = "other";
try{if(doc.getType()) {type = doc.getType();}}
catch(e) {console.log(e);}
var documentList = getDocumentList();
documentList.add(new JSONDocument());
documentList.add(new JSONDocument());
documentList.add(new JSONDocument());
$.(table.listbox
var tr = $(getCurrentPage().get)
"<tr class='"+type+"'>\n\
<td class='listbox-table-select-cell'>\n\
<input type='checkbox' id='"+i+"'/>\n\
</td>\n\
<td class='listbox-table-data-cell'>\n\
<a href='#' onclick='javascript:getPage()'>\n\
<img src='images/icons/document.png'/>\n\
</a>\n\
</td>\n\
<td class='listbox-table-data-cell'>
<a href="...">Web Page</a>
</td>
/**
* create a ligne representing a document in the main table
* @param doc : document to represent
* @param i : ID of the line (number)
*/
var Line = function(doc, i) {
this.document = doc;
this.ID = i;
this.html = Line.getOriginalHTML();
}
Line.prototype = {
getDocument: function() {return this.document;},
getID: function() {return this.ID;},
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">
<a href="...">Deleted</a>
</td>
/* load the document information in the html of a default line */
updateHTML: function() {
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">
<a href="ung_document_list_selection">2011/05/31&nbsp;&nbsp;&nbsp;11:44</a>
</td>
</tr>
\ No newline at end of file
/* load the table */
waitBeforeSucceed(
function(){return Line.loadHTML()},
function() {
for(var i=0;i<documentList.size();i++) {
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 @@
</fieldset>
</form>
</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>
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