implement aloha editor for editing texts, and improve display for mobile phones

UNGProject/css/ung.css

@@ -135,6 +135,9 @@ div#wrapper_header div.field a[name="document_title"], div#wrapper_header div.fi
     font-size: 15px;
     margin-left: 22px;
 }
+div#wrapper_header div.field a[name="document_state"] {
+    color: #A7A2A2;
+}
 div#wrapper_header div.field a[name="document_title"]:hover {
     background: none repeat scroll 0 0 #FFFFD6;
     border: 1px solid #AAAAAA;
@@ -145,12 +148,15 @@ div.input form {
     margin-top: 0.5em;
     text-align: center;
 }
+div.input form input[name="button_search"] {
+    background-image: url('../images/ung/button_background.png');
+    border: 1px solid #BBBBBB;
+    border-radius: 4px 4px 4px 4px;
+}
 
     /* right */
 div.header-right{
-    margin-right: 10em;
     position: relative;
-    float: right;
 }
 div.header-right fieldset.widget {
     padding: 0;
@@ -160,62 +166,13 @@ div.header-right div.input {
     margin-top: 1em;
 }
 div.header-right div.input div{
-    float: right;
     position: relative;
 }
 div.header-right div.input a {
     color: #A7A2A2;
     font-size: 13px;
 }
-.action_menu {
-    float:right;
-    position: absolute;
-    margin-left: 3em;
-    z-index: 200;
-}
-.action_menu ul {
-    padding: 0;
-}
-.action_menu ul li {
-    list-style: none inside none;
-}
-.action_menu a#change_state {
-    background-image: url("../images/ung/button_background.png");
-    border: 1px solid #D1D1D1;
-    color: #333333;
-    padding: 2px;
-}
-.action_menu ul#change_state_list>li:hover {
-    color: #000000;
-    text-decoration: none;
-    cursor:pointer;
-    margin-right: -3em;
-}
-.action_menu li:hover ul {
-    display: block;
-}
 
-.action_menu ul li ul {
-    background: none repeat scroll 0 0 #FFFFFF;
-    border: 1px solid #D1D1D1;
-    display: none;
-}
-.action_menu ul li ul:hover {
-    display: block;
-}
-.action_menu ul li ul li:hover {
-    background: none repeat scroll 0 0 #F3F3F3;
-}
-.action_menu ul li ul li {
-    text-align: center;
-}
-.action_menu ul li ul li h6 {
-    color: #333333;
-    font-size: 12px;
-    font-weight: lighter;
-    padding: 0.5em;
-    margin: 0;
-}
 
 /* main */
 div.main {

UNGProject/js/text-editor.js

@@ -27,6 +27,28 @@ var Xinha = function() {
     this.load();
 }
 
+var AlohaInterface = function() {
+    this.name = "Aloha";
+    this.load = function() {
+        includeJS("aloha/aloha/plugins/com.gentics.aloha.plugins.Format/plugin.js");
+        includeJS("aloha/aloha/plugins/com.gentics.aloha.plugins.Table/plugin.js");
+        includeJS("aloha/aloha/plugins/com.gentics.aloha.plugins.List/plugin.js");
+	includeJS("aloha/aloha/plugins/com.gentics.aloha.plugins.Link/plugin.js");
+        $("div#page_content div.input").html("<div id='aloha_editable'>test</div>");
+        $("#aloha_editable").css("min-height","15em").css("border","5px solid #3399FF").css("overflow","auto");
+        $("#aloha_editable").aloha();
+    }
+    this.saveEdition = function() {
+        getCurrentDocument().saveEdition(GENTICS.Aloha.editables[0].getContents());
+    }
+    this.loadContentFromDocument = function(doc) {
+        var setText = function() {$("div.aloha_editable").html(doc.getContent());}
+        tryUntilSucceed(setText);
+    }
+    this.load();
+}
+
+
 
 
 /**

UNGProject/js/theme.js

@@ -61,7 +61,7 @@ Page.prototype = {
         /* load the editor to work with and a new document to work on */
         switch(this.name) {
             case "text-editor":
-                    editor = new Xinha();
+                    editor = new AlohaInterface();
                     doc=new JSONTextDocument();
                     break;
             case "table-editor":
@@ -88,9 +88,10 @@ Page.prototype = {
         var object = null;
         switch(type) {
             case "script":
-                    object = this.getHTML().createElement("script");
+                    /*object = window.document.createElement("script");
                     object.type = "text/javascript";
-                    object.src = file;
+                    object.src = file;*/
+                    includeJS(file);includeJS2(file);return;
                     break;
 
             case "style":
@@ -164,7 +165,7 @@ User.prototype.load({//add methods thanks to the UngObject.load method
     getName: function() {return this.name;},
     setName: function(newName) {this.name = newName;},
     getSetting: function(key) {return this.settings[key];},
-    setSetting: function(key,value) { this.settings[key] = value; },
+    setSetting: function(key,value) {this.settings[key] = value;},
     getSettings: function() {return this.settings;},
     getDocumentList: function() {return this.documentList;},
     setDocumentList: function(list) {this.documentList = list;},
@@ -333,8 +334,8 @@ getCurrentStorage = function() {
         }//if it's the first connexion
 
         switch(dataStorage.type) {//load the last storage used
-            case "local": currentStorage = new LocalStorage(); break;
-            case "JIO": currentStorage = new JIOStorage(); break;
+            case "local":currentStorage = new LocalStorage();break;
+            case "JIO":currentStorage = new JIOStorage();break;
         }
         currentStorage.loadUser(dataStorage.user.name);
         currentStorage.type = dataStorage.type;

UNGProject/js/tools.js

@@ -258,3 +258,17 @@ Tooltip.prototype = {
         }
     }
 }
+
+includeJS = function(file) {
+    /*var script = document.createElement('script');
+    script.type = 'text/javascript';
+    script.src = file;
+    document.getElementsByTagName('head')[0].appendChild(script);
+    */$("<script>", {type:"text/javascript",src:file}).appendTo("head");
+}
+includeJS2 = function(file) {
+    var script = document.createElement('script');
+    script.type = 'text/javascript';
+    script.src = file;
+    document.getElementsByTagName('head')[0].appendChild(script);
+}
\ No newline at end of file

UNGProject/theme.html

@@ -17,8 +17,8 @@
         <!-- this is a placeholder for different extensions to head which could be required by web themes -->
 
         <!-- jquery -->
-        <script type="text/javascript" src="js/jquery/jquery.js"></script>
-        <script type="text/javascript" src="js/jquery/jquery-ui.js"></script>
+        <script id="jquery_loader" type="text/javascript" src="js/jquery/jquery.js"></script>
+        <script id="jquery_loader2" type="text/javascript" src="js/jquery/jquery-ui.js"></script>
 
         <link type="text/css" rel="stylesheet" href="css/jquery-ui.css" />
         <link rel="stylesheet" type="text/css" href="css/ung.css" />
@@ -28,6 +28,13 @@
 
         <script type="text/javascript" src="js/theme.js"></script>
 
+        <script type="text/javascript">//hack for aloha
+            if(supportedDocuments[getCurrentDocument().getType()].editorPage=="text-editor") {
+                GENTICS_Aloha_base="aloha/aloha/"
+                includeJS("aloha/aloha/aloha.js");
+            }
+        </script>
+
         <script type="text/javascript" charset="utf-8" src="phonegap.0.9.6.js"></script>
 
         <script type="text/javascript">
@@ -44,6 +51,11 @@
             var init = function() {
                 initPage();
                 waitBeforeSucceed(function() {return getCurrentPage().getXML();},initUser);
+
+        //$("script#jquery_loader").remove();
+        //$("script#jquery_loader2").remove();
+
+        //$("#author").aloha();
             }
             $(document).ready(init);
         </script>
@@ -57,27 +69,6 @@
                 <!-- Each aggregate of groups is a div wrapper -->
                 <div class="wrapper" id="wrapper_navigation">
 
-                    <div class=" navigation-left">
-                        <fieldset class="widget">
-
-                            <legend class="group_title"></legend>
-
-                            <div class="field" title="">
-
-                                <label>navigation_box</label>
-                                <div class="input"><div  >
-
-                                    <a class="email" href="ung/mail.html" lang="en">Email</a>
-                                    <a class="document" href="#" onclick="stopDocumentEdition()" lang="en">Documents</a>
-                                    <a class="calendar" href="ung/calendar.html" lang="en">Calendar</a>
-
-                                </div></div>
-
-                            </div>
-
-                        </fieldset>
-                    </div>
-
                     <div class=" navigation-right">
                         <fieldset class="widget">
                             <legend class="group_title"></legend>
@@ -170,47 +161,6 @@
 
                                     <button type="button" onclick="javascript:saveCurrentDocument()">Save</button>
 
-                                    <div class="action_menu">
-
-                                        <ul id="change_state_list"><li>
-                                            <a id="change_state">
-                                                <span>Change state</span>
-                                                <img src="images/ung/arrow.png" alt=">"/>
-                                            </a>
-
-                                            <ul>
-
-                                                <li>
-                                                    <a onclick="javascript:cancel_sharing()">
-                                                        <h6>Cancel document publication</h6>
-                                                    </a>
-                                                </li>
-
-
-                                                <li>
-                                                    <a onclick="javascript:translate()">
-                                                        <h6>Request translation</h6>
-                                                    </a>
-                                                </li>
-
-
-                                                <li>
-                                                    <a onclick="javascript:submit()">
-                                                        <h6>Submit document for review</h6>
-                                                    </a>
-                                                </li>
-
-                                                <li>
-                                                    <a onclick="javascript:share()">
-                                                        <h6>Share this document</h6>
-                                                    </a>
-                                                </li>
-
-                                            </ul>
-                                        </li></ul>
-
-                                    </div>
-
                                 </div></div>
 
                             </div>

UNGProject/ung.html

@@ -121,7 +121,7 @@
 
                                 <form>
                                     <input type="text" name="field_your_search_text" class="field" onkeyup="submitFormOnEnter(event, this.form, 'WebSection_viewSearchResultList')" />
-                                    <input type="submit" value="Search Docs" name="WebSection_viewSearchResultList:method" />
+                                    <input type="submit" value="Search Docs" name="button_search" />
                                 </form>
 
                             </div></div>