implements svg-editor

implements save/load from local document

UNGProject/js/editor.js

@@ -11,12 +11,10 @@ var Xinha = function() {
         xinha_init();
     }
     this.saveEdition = function() {
-        var textArea = $("#input_area");
-        getCurrentDocument().saveEdition(textArea.content);
+        getCurrentDocument().saveEdition($("#input_area").attr("value"));
     }
-    this.loadContent = function() {
-        var textArea = $("input_area");
-        textArea.content = getCurrentDocument().getContent();
+    this.loadContentFromDocument = function(doc) {
+        $("#input_area").attr("value",doc.getContent());
     }
     this.load();
 }
@@ -28,11 +26,11 @@ var Xinha = function() {
  */
 
 var JSONTextDocument = function() {
-    JSONDocument.call(this);//inherits from JSONDocument
+    JSONDocument.call(this);//inherits properties from JSONDocument
     this.type = "text";
 }
 
-JSONTextDocument.prototype = new JSONDocument();
+JSONTextDocument.prototype = new JSONDocument();//inherits methods from JSONDocument
 
 JSONTextDocument.prototype.saveEdition = function(content) {
     this.setContent(content);
@@ -42,6 +40,7 @@ JSONTextDocument.prototype.saveEdition = function(content) {
 JSONTextDocument.prototype.setAsCurrentDocument = function() {
     getCurrentPage().displayDocumentTitle(this);
     getCurrentPage().displayDocumentState(this);
+    getCurrentPage().displayDocumentContent(this);
     getCurrentPage().displayAuthorName(this);
     getCurrentPage().displayLastModification(this);
     setCurrentDocument(this);
@@ -53,19 +52,10 @@ getCurrentDocument = function() {
     return doc;
 }
 
-saveCurrentDocument = function() {
-    getCurrentPage().getEditor().saveEdition();
-    //saveJIO(); : JIO function
-}
 
 
-/*
 // save
-saveCurrentDocument = function() {
-    //gestion fichier
-    var currentDocument = getLocalDocument();
-    currentDocument.updateDocument();
-
+saveXHR = function() {
     //create request
     var xhr=null;
     try
@@ -83,7 +73,7 @@ saveCurrentDocument = function() {
 
     //xhr.open("PUT", keyToUrl(key, wallet), true, wallet.userAddress, wallet.davToken);
     //HACK:
-    xhr.open("PUT", currentUser.storage+"/dav/temp.json", true);
+    xhr.open("PUT", "dav/temp.json", true);
     xhr.setRequestHeader("Authorization", "Basic "+"nom:test");
     //END HACK.
 
@@ -91,17 +81,15 @@ saveCurrentDocument = function() {
             if(xhr.readyState == 4) {
                     if(xhr.status != 200 && xhr.status != 201 && xhr.status != 204) {
                             alert("error: got status "+xhr.status+" when doing basic auth PUT on url "+Base64.encode("nom:test")+"    " + xhr.statusText);
-                    } else {
-                            lastModificationArea.innerHTML = currentDocument.getLastModification();
                     }
             }
     }
     xhr.withCredentials = "true";
-    xhr.send(JSON.stringify(currentDocument.getDocument()));
+    xhr.send(JSON.stringify(getCurrentDocument()));
 }
 
 // load
-loadDocument = function() {
+loadXHR = function() {
 
     //create request
     var xhr=null;
@@ -118,20 +106,18 @@ loadDocument = function() {
         }
     }
 
-    xhr.open("GET", currentUser.storage+"/dav/temp.json", false);
+    xhr.open("GET", "dav/temp.json", false);
     xhr.onreadystatechange = function() {
             if(xhr.readyState == 4) {
 
-                    var cDoc = null;
+                    var cDoc = new JSONTextDocument();
                     if(xhr.status == 200) {
-                           cDoc = new Document(JSON.parse(xhr.responseText));
+                           cDoc.load(JSON.parse(xhr.responseText));
                     } else {
                            alert("error: got status "+xhr.status+" when doing basic auth GET on url "+"nom:test"+"    " + xhr.statusText);
-                           cDoc = new Document(null);
                     }
-                    cDoc.updateHTML();
-                    setLocalDocument(cDoc);
+                   cDoc.setAsCurrentDocument();
             }
     }
     xhr.send();
-}*/
+}

UNGProject/js/illustration.js

+
+/**
+ * Editors
+ */
+SVGEditor = function() {
+    this.name = "svg-editor";
+    
+    this.load = function() {$("#svgframe").attr("src", "svg-editor/svg-editor.html")}
+    this.saveEdition = function() {
+        var s = "svgframe";
+        getCurrentDocument().saveEdition(window.frames[s].svgCanvas.getSvgString());
+    }
+    this.loadContentFromDocument = function(doc) {
+        var s = "svgframe";
+        window.frames[s].svgCanvas.setSvgString(doc.getContent());
+    }
+
+    var s = "svgframe";
+    this.svgCanvas = window.frames[s].svgCanvas;
+
+    this.load();
+}
+
+/**
+ * SVG documents
+ */
+var JSONIllustrationDocument = function() {
+    JSONDocument.call(this);//inherits properties from JSONDocument
+    this.type = "illustration";
+}
+
+JSONIllustrationDocument.prototype = new JSONDocument();//inherits methods from JSONDocument
+
+JSONIllustrationDocument.prototype.saveEdition = function(content) {
+    this.setContent(content);
+    this.setLastModification(currentTime());
+    this.setAsCurrentDocument();
+}
+JSONIllustrationDocument.prototype.setAsCurrentDocument = function() {
+    getCurrentPage().displayDocumentTitle(this);
+    getCurrentPage().displayDocumentState(this);
+    getCurrentPage().displayDocumentContent(this);
+    getCurrentPage().displayAuthorName(this);
+    getCurrentPage().displayLastModification(this);
+    setCurrentDocument(this);
+}
+
+getCurrentDocument = function() {
+    var doc = new JSONIllustrationDocument();
+    doc.load(JSON.parse(localStorage.getItem("currentDocument")));
+    return doc;
+}
+
+// save
+saveXHR = function() {
+    //create request
+    var xhr=null;
+    try
+    {
+        xhr = new XMLHttpRequest();
+    } catch(e)
+    {
+        try {xhr = new ActiveXObject("Msxml2.XMLHTTP");}
+        catch (e2)
+        {
+            try {xhr = new ActiveXObject("Microsoft.XMLHTTP");}
+            catch (e) {alert("Please install a more recent browser")}
+        }
+    }
+
+    //xhr.open("PUT", keyToUrl(key, wallet), true, wallet.userAddress, wallet.davToken);
+    //HACK:
+    xhr.open("PUT", "dav/temp2.json", true);
+    xhr.setRequestHeader("Authorization", "Basic "+"nom:test");
+    //END HACK.
+
+    xhr.onreadystatechange = function() {
+            if(xhr.readyState == 4) {
+                    if(xhr.status != 200 && xhr.status != 201 && xhr.status != 204) {
+                            alert("error: got status "+xhr.status+" when doing basic auth PUT on url "+Base64.encode("nom:test")+"    " + xhr.statusText);
+                    }
+            }
+    }
+    xhr.withCredentials = "true";
+    xhr.send(JSON.stringify(getCurrentDocument()));
+}
+
+// load
+loadXHR = function() {
+
+    //create request
+    var xhr=null;
+    try
+    {
+        xhr = new XMLHttpRequest();
+    } catch(e)
+    {
+        try {xhr = new ActiveXObject("Msxml2.XMLHTTP");}
+        catch (e2)
+        {
+            try {xhr = new ActiveXObject("Microsoft.XMLHTTP");}
+            catch (e) {}
+        }
+    }
+
+    xhr.open("GET", "dav/temp2.json", false);
+    xhr.onreadystatechange = function() {
+            if(xhr.readyState == 4) {
+
+                    var cDoc = new JSONIllustrationDocument();
+                    if(xhr.status == 200) {
+                           cDoc.load(JSON.parse(xhr.responseText));
+                    } else {
+                           alert("error: got status "+xhr.status+" when doing basic auth GET on url "+"nom:test"+"    " + xhr.statusText);
+                    }
+                   cDoc.setAsCurrentDocument();
+            }
+    }
+    xhr.send();
+}
\ No newline at end of file

UNGProject/js/table.js

+
+/**
+ * Editors
+ */
+SheetEditor = function() {
+    this.name = "JQuery Sheet Editor";
+    this.load = function() {
+        $("#jQuerySheet0").sheet({
+            buildSheet: '10x15',
+            title: 'Spreadsheet Playground',
+            inlineMenu: inlineMenu($.sheet.instance)
+        });
+    }
+    this.saveEdition = function() {}
+    this.loadContentFromDocument = function(doc) {}
+    this.load();
+}
+
+
 /***
  * Spreadsheet documents
  */
@@ -26,6 +45,7 @@ JSONSheetDocument.prototype.load({
     //display document information
     setAsCurrentDocument: function() {
         getCurrentPage().displayDocumentTitle(this);
+        //getCurrentPage().displayDocumentContent(this);
         getCurrentPage().displayDocumentState(this);
         getCurrentPage().displayAuthorName(this);
         getCurrentPage().displayLastModification(this);
@@ -34,17 +54,11 @@ JSONSheetDocument.prototype.load({
 });
 
 getCurrentDocument = function() {
-    var doc = new JSONTextDocument();
+    var doc = new JSONSheetDocument();
     doc.load(JSON.parse(localStorage.getItem("currentDocument")));
     return doc;
 }
 
-saveCurrentDocument = function() {
-    getCurrentPage().getEditor().saveEdition();
-    //saveJIO(); : JIO function
-}
-
-
 
 
 
@@ -89,12 +103,4 @@ function goToObj(s) {
     return false;
 }
 
-$("#jQuerySheet0").sheet({
-    buildSheet: '10x15',
-    title: 'Spreadsheet Playground',
-    inlineMenu: inlineMenu($.sheet.instance)
-});
-
-/*
 
-    */
\ No newline at end of file

UNGProject/js/theme.js

@@ -48,16 +48,25 @@ Page.prototype = {
     },
         /* update the HTML page from the XML document */
     loadPage: function() {
+        //Page content
         this.displayPageTitle();
         this.displayPageContent();
         var dependencies = this.getDependencies();
         $(dependencies).find("linkfile").each(function() {currentPage.include($(this).text(),"link");});//includes css
         $(dependencies).find("scriptfile").each(function() {currentPage.include($(this).text(),"script");});//includes js
+        
         switch(this.name) {
             case "editor":
                     this.editor = new Xinha();
                     break;
+            case "table":
+                    this.editor = new SheetEditor();
+                    break;
+            case "illustration":
+                    this.editor = new SVGEditor();
+                    break;
         }
+
     },
     /* include a javascript or a css file */
     include: function(file,type) {
@@ -101,6 +110,7 @@ Page.prototype = {
     displayAuthorName: function(doc) {this.getHTML().getElementById("author").innerHTML = doc.getAuthor();},
     displayLastModification: function(doc) {this.getHTML().getElementById("last_update").innerHTML = doc.getLastModification();},
     displayDocumentTitle: function(doc) {this.getHTML().getElementById("document_title").innerHTML = doc.getTitle();},
+    displayDocumentContent: function(doc) {this.getEditor().loadContentFromDocument(doc);},
     displayDocumentState: function(doc) {
         var stateArea = this.getHTML().getElementById("document_state");
         stateArea.innerHTML = doc.getState()[getCurrentUser().getLanguage()];
@@ -164,7 +174,7 @@ setCurrentUser = function(user) {localStorage.setItem("currentUser", JSON.string
 
 /* JSON document */
 var JSONDocument = function() {
-    this.type = "text";
+    this.type = null;
     this.language = getCurrentUser().getLanguage();
     this.version = null;
 
@@ -173,7 +183,7 @@ var JSONDocument = function() {
     this.content="";
     this.creation=currentTime();
     this.lastModification=currentTime();
-    this.state=Document.states.draft;
+    this.state=this.states.draft;
 }
 JSONDocument.prototype = new UngObject();
 
@@ -216,7 +226,7 @@ JSONDocument.prototype.load({
 
     save: function() {}
 });
-Document.states = {
+JSONDocument.prototype.states = {
     draft:{"fr":"Brouillon","en":"Draft"},
     saved:{"fr":"Enregistré","en":"Saved"},
     deleted:{"fr":"Supprimé","en":"Deleted"}
@@ -235,7 +245,7 @@ setCurrentDocument = function(doc) {localStorage.setItem("currentDocument",JSON.
 editDocumentSettings = function() {
 
   $("#edit_document").dialog({
-    autoOpen: false,
+    autoOpen: true,
     height: 131,
     width: 389,
     modal: true,
@@ -258,6 +268,12 @@ editDocumentSettings = function() {
   });
 }
 
+saveCurrentDocument = function() {
+    getCurrentPage().getEditor().saveEdition();
+    saveXHR();
+    //saveJIO(); : JIO function
+}
+
 changeLanguage = function(language) {
     var user = getCurrentUser();
     user.setLanguage(language);

UNGProject/js/tools.js

@@ -25,12 +25,20 @@ UngObject.prototype.load = function(data) {
 
 /* Load methods from a class to another class */
 UngObject.prototype.inherits = function(superClass) {
-    for (var element in superClass.prototype ) {
-            this.prototype[element] = superClass.prototype[element]
-    }
+    this.prototype.load(superClass.prototype);
 }
 
 /**
  * returns the current date
  */
-currentTime = function() {return (new Date()).toUTCString();}
+currentTime = function() {return (new Date()).toUTCString();}
\ No newline at end of file
+
+/*
+ * wait an event before execute an action
+ */
+waitBeforeExecution = function(event, func) {
+    var waitBefore = function() {
+        if(event) {func.call();} else {setTimeout(waitBefore,1000)}
+    }
+    setTimeout(waitBefore,1000);
+}
\ No newline at end of file

UNGProject/xml/editor.xml

@@ -3,7 +3,7 @@
     <title> Page web - Web Page </title>
     <content>
         <label>
-            Contenu de la page
+            Page Content
         </label>
 
         <div class="input">

UNGProject/xml/illustration.xml

+<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>

UNGProject/xml/table.xml

@@ -10,57 +10,7 @@
             <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" />
-
-            <script type="text/javascript">
-                $("button.save").click(function(event){
-                source = $.sheet.instance[0].getSource(true);
-                $("input#my_text_content").attr("value", source)
-                });
-                $(function() {
-                $('#jQuerySheet0').sheet({
-                title: 'Spreadsheet Playground',
-                inlineMenu: inlineMenu($.sheet.instance),
-                urlGet: './getTextContent',
-                });
-                });
-
-                function inlineMenu(instance) {
-                var I = (instance ? instance.length : 0);
-                var html = $('#inlineMenu').html().replace(/sheetInstance/g, "$.sheet.instance[" + I + "]");
-                var menu = $(html);
-
-                menu.find('.colorPickerCell')
-                .colorPicker()
-                .change(function() {
-                $.sheet.instance[I].cellUndoable.add($.sheet.instance[I].obj.cellHighlighted());
-                $.sheet.instance[I].obj.cellHighlighted().css('background-color', $(this).val());
-                $.sheet.instance[I].cellUndoable.add($.sheet.instance[I].obj.cellHighlighted());
-                });
-
-                menu.find('.colorPickerFont')
-                .colorPicker()
-                .change(function() {
-                $.sheet.instance[I].cellUndoable.add($.sheet.instance[I].obj.cellHighlighted());
-                $.sheet.instance[I].obj.cellHighlighted().css('color', $(this).val());
-                $.sheet.instance[I].cellUndoable.add($.sheet.instance[I].obj.cellHighlighted());
-                });
-
-                menu.find('.colorPickers')
-                .children().eq(1).css('background-image', "url('jquery_sheet_image/palette.png')");
-                menu.find('.colorPickers')
-                .children().eq(3).css('background-image', "url('jquery_sheet_image/palette_bg.png')");
-
-                return menu;
-                }
-
-                function goToObj(s) {
-                $('html, body').animate({
-                scrollTop: $(s).offset().top
-                }, 'slow');
-                return false;
-                }
-            </script>
+            <!--<link rel="stylesheet" href="js/jquery/plugin/colorpicker/menu.css" type="text/css" />-->
 
             <div id="jQuerySheet0" style="height: 400px;"></div>
 
@@ -145,7 +95,7 @@
                 </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_image/page_link.png" />
+                    <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" />
@@ -157,12 +107,15 @@
     <dependencies>
         <scriptfile>js/jquery/plugin/sheet/jquery.sheet.js</scriptfile>
         <scriptfile>js/jquery/plugin/mbmenu/mbMenu.min.js</scriptfile>
-        <scriptfile>js/jquery/plugin/jqcharts/jgcharts.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.erp5.js</scriptfile>
-        <scriptfile>js/jquery/plugin/jqcharts/jgcharts.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