mobileApp files

UNGProject/js/login-mobile.js

+/**
+ * change the display if the new account button is clicked
+ */
+var displayNewAccountForm = function(bool) {
+    if(bool) {
+        $("table#create-new-user").css("display","table");
+        $("table#field_table").css("display","none");
+        $("table#new-account-table").css("display","none");
+    }
+    else {
+        $("table#create-new-user").css("display","none");
+        $("table#field_table").css("display","table");
+        $("table#new-account-table").css("display","table");
+    }
+}
+
+/**
+ * Log an user with it's Name and ID provider
+ */
+var logUser = function() {
+    var name = $("input#name").attr("value");
+    var IDProvider = $("input#id_provider").attr("value");
+    if(name) {
+        setCurrentStorage(IDProvider ? new JIOStorage(name,IDProvider) : new LocalStorage(name));
+        window.location = "ung-mobile.html";
+    }
+}
+
+/**
+ * create an account (to use only if UNG is also an ID provider)
+ */
+var createNewUser = function() {
+    var form = $("form#create-user")[0];
+
+    /* check that the form is complete */
+    for(var i = 0; i<form.length-1; i++) {
+        if(!form[i].value) {formError("please fill each field");}
+    }
+    if(form[4].value!=form[5].value) {
+        formError("please enter the same password twice");
+        form[4].value="";
+        form[5].value="";
+    }
+    if(!testEMail()) {formError("please enter a valid email");}
+    
+    /* create the new user */
+    //JIO
+}
+
+/**
+ * Report an error when filling the form
+ */
+var formError = function(message) {
+    $("td#form-message").attr("value",message);
+    $("td#form-message").css("display","table-cell");
+}
+
+/**
+ * check if an email address is valid
+ */
+function testEMail(email) {
+    var patern="^([a-zA-Z0-9]+(([\.\-\_]?[a-zA-Z0-9]+)+)?)\@(([a-zA-Z0-9]+[\.\-\_])+[a-zA-Z]{2,4})$";
+    var regEx = new RegExp(patern);
+    return regEx.test(email);
+}
+
+function setFocus() {
+  login = document.getElementById('name');
+  password = document.getElementById('password');
+  if (login.value != '')
+    password.focus();
+  else
+    login.focus();
+}

UNGProject/js/tools-mobile.js

+/***
+ * This file provides some useful element used in the whole web site
+ */
+
+/**
+ * Class UngObject
+ * provides useful general methods
+ */
+UngObject = function() {}
+/* return true if this object implements the interface */
+UngObject.prototype.Implements = function(myInterface)
+{
+    for(var property in myInterface)
+    {
+        if( typeof myInterface[property] != "string")
+            continue;
+
+        if(this[property]==undefined || typeof this[property] != myInterface[property] )
+            return false;
+    }
+    return true;
+};
+
+/* Load a JSON data into an object */
+UngObject.prototype.load = function(data) {
+    for(var property in data) {
+        this[property] = data[property];
+    }
+};
+
+/* Load methods from a class to another class */
+UngObject.prototype.inherits = function(superClass) {
+    this.prototype.load(superClass.prototype);
+}
+
+/* return true only if two objects are equals */
+UngObject.prototype.equals = function(object) {
+    for (var property in object) {
+        if (this.hasOwnProperty(property)) {
+            var isEquals = this[property]&&typeof(this[property])=="object" ? UngObject.prototype.equals.call(this[property],object[property]) : this[property]===object[property];
+            if (!isEquals) {return false}
+        }
+    }
+    return true;
+}
+
+
+/**
+ * Class List
+ * this class provides usual API to manipulate list structure
+ * @param arg : a json list object
+ * @param contentType : the type of the elements of the list
+ */
+var List = function(arg, contentType) {
+    if(arg && arg.headElement) {
+        if(contentType) {
+            this.headElement=new contentType(arg.headElement);
+        } else {
+            this.headElement = arg.headElement;
+        }
+        this.length = arg.length;
+        this.previous = new List(arg.previous, contentType);
+    }
+    else {
+        this.nullElement();
+    }
+}
+List.prototype = new UngObject();
+List.prototype.load({
+    nullElement: function() {
+        this.headElement = null;
+        this.previous = undefined;
+        this.length = 0;
+    },
+    size: function() {return this.length;},
+    head: function() {return this.headElement;},
+    tail: function() {return this.previous;},
+    isEmpty: function() {return this.head()===null;},
+    equals: function(list) {
+        return this.head().equals(list.head()) && this.tail().equals(list.tail());
+    },
+    add: function(value) {
+        var t = new List();
+        t.load(this);
+        this.headElement = value;
+        this.previous = t;
+        this.length = t.size()+1;
+    },
+    get: function(i) {
+        if(i>=this.size()) {return null;}
+        if(i==0) {return this.head();}
+        return this.tail().get(i-1);
+    },
+    set: function(i,element) {
+        if(i>=this.size()) {errorMessage("set out of bounds, "+i+" : "+this.size(),this);return}
+        if(i==0) {
+            this.headElement=element;
+        } else {
+            this.tail().set(i-1,element);
+        }
+    },
+    remove: function(i) {
+        if(i>=this.size()) {errorMessage("remove out of bounds, "+i+" : "+this.size(),this);return}//particular case
+        if(i==0) {this.pop();return}//particular case
+        if(i==1) {//init
+            this.previous = this.tail().tail();
+        } else {//recursion
+            this.tail().remove(i-1);
+        }
+        this.length--;
+    },
+    pop: function() {
+        if(this.isEmpty()) {errorMessage("pop on empty list",this);return null;}
+        var h = this.head();
+        this.load(this.tail())
+        return h;
+    },
+    find: function(object) {
+        if(this.isEmpty()) {return -1}//init-false
+        var elt = this.head();
+        if(object.equals) {//init-true
+            if(object.equals(this.head())) {return 0;}//with an adapted comparator
+        } else {
+            if(object===this.head()) {return 0;}//with usual comparator
+        }
+        var recursiveResult = this.tail().find(object);//recursion
+        return recursiveResult>=0 ? this.tail().find(object)+1 : recursiveResult;
+    },
+    contains: function(object) {if(this.isEmpty()) {return false} else {return object===this.head() ? true : this.tail().contains(object)}},
+    insert: function(element,i) {
+        if(i>this.size()) {errorMessage("insert out of bounds, "+i+" : "+this.size(),this);return}//particular case
+        if(i==0) {//init
+            this.add(element);
+        } else {//recursion
+            this.tail().insert(element,i-1);
+            this.length++;
+        }
+    },
+    replace: function(oldElement,newElement) {
+        if(this.isEmpty()) {errorMessage("<<element not found>> when trying to replace",this);return}//init-false
+        if(oldElement===this.head()) {
+            this.set(0,newElement);//init-true
+        } else {
+            this.tail().replace(oldElement,newElement);//recursion
+        }
+    },
+    removeElement: function(element) {//remove each occurence of the element in this list
+        if(this.isEmpty()) {return}
+        this.tail().removeElement(element);
+        if(element.equals) {//init-true
+            if(element.equals(this.head())) {this.pop();}//with an adapted comparator
+        } else {
+            if(element===this.head()) {this.pop();}//with usual comparator
+        }
+    }
+});
+
+/**
+ * load a public file with a basic ajax request
+ * @param address : the address of the document
+ * @param type : the type of the document content
+ * @param instruction : a function to execute when getting the document
+ */
+loadFile = function(address, type, instruction) {
+    $.ajax({
+        url: address,
+        type: "GET",
+        dataType: type,
+	success: instruction,
+        error: function(type) {alert("Error "+type.status+" : fail while trying to load "+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
+    var execute = function() {
+        try {
+            if(!required.call()) {throw 0;}
+            func.call();}
+        catch(e) {console.log(e);if(nb<100) {setTimeout(execute,nb*100);}}
+        nb*=nb;
+    }
+    execute();
+}
+
+/*
+ * 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*200);}console.log(e);}
+        nb*=nb;
+    }
+    execute();
+}
+
+/**
+ * Resize the right part of ung main page
+ * could be developed to implement more beautiful resizments
+ */
+var resize = function() {
+    return $("div.main-right").width($(window).width()-$("div.main-left").width());
+}
+
+/**
+ * Used to debug
+ */
+errorMessage = function(message,object) {
+    errorObject = object;
+    console.log(message);
+}
+
+/**
+ * returns the current date (number of ms since 1/1/1970 at 12:00 AM)
+ */
+currentTime = function() {return Date.now();}
+
+/**
+ * cuts a string if too long
+ */
+limitedString = function(s, max) {
+    return (s.length < max) ? s : (s.substring(0,max) + "...");
+}
+
+/**
+ * Paste a toolkit at the mouse position
+ */
+Tooltip = function() {
+    this.visible=false; // La variable i nous dit si la bulle est visible ou non
+}
+Tooltip.prototype = {
+    isVisible: function() {return this.visible;},
+    move: function(e) {$("div.toolLocation").css("left",e.pageX+5+"px").css("top",e.pageY + 10+"px");},
+    show: function(text) {
+        if(!this.isVisible()) {
+            $("div.toolLocation")
+                .css("display","inline")
+                .css("visibility","visible")
+                .html(text);
+            this.visible = true;
+        }
+    },
+    hide: function() {
+        if(this.isVisible()) {
+            $("div.toolLocation")
+                .css("display","none")
+                .css("visibility","hidden");
+            this.visible = false;
+        }
+    }
+}
+
+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/js/ung-mobile.js

+/**
+ * This file provides the javascript used to display the list of user's documents
+ */
+
+/* global variable */
+    /* the last modified document */
+getCurrentDocumentID = function() {return localStorage.getItem("currentDocumentID");}
+setCurrentDocumentID = function(ID) {return localStorage.setItem("currentDocumentID",ID);}
+
+/**
+ * class DocumentList
+ * This class provides methods to manipulate the list of documents of the current user
+ * @param arg : a documentList json object to load
+ */
+var DocumentList = function(arg) {
+    //List.call(this);
+    if(arg) {
+        this.load(arg);
+        this.load(new List(arg,JSONDocument));
+        this.selectionList = new List(arg.selectionList);//load methods of selectionList
+    }
+    else {
+        List.call(this);
+        this.selectionList = new List();
+    }
+}
+DocumentList.prototype = new List();
+DocumentList.prototype.load({
+
+    removeDocument: function(doc) {
+        var i = this.find(doc);
+        this.get(i).remove()//delete the file
+        this.remove(i);//remove from the list
+        getCurrentStorage().save();//save changes
+    },
+
+    getSelectionList: function() {return this.selectionList;},
+    resetSelectionList: function() {
+        this.selectionList = new List();
+
+        //display consequences
+        for(var i=0; i<this.size(); i++) {
+            $("tr td.listbox-table-select-cell input#"+i).attr("checked",false);//uncheck
+        }
+        $("span#selected_row_number a").html(0);//display the selected row number
+    },
+    checkAll: function() {
+        this.selectionList = new List();
+        for(var i=0; i<this.size(); i++) {
+            this.getSelectionList().add(this.get(i));
+        }
+
+        //display consequences
+        for(i=0; i<this.size(); i++) {
+            $("tr td.listbox-table-select-cell input#"+i).attr("checked",true);//check
+        }
+        $("span#selected_row_number a").html(this.size());//display the selected row number
+    },
+
+    deleteSelectedDocuments: function() {
+        var selection = this.getSelectionList();
+        while(!selection.isEmpty()) {
+            var doc = selection.pop();
+            this.removeDocument(doc);
+        }
+        this.display();
+    },
+
+    /* display the list of documents in the web page */
+    displayContent: function() {
+        $("table.listbox tbody").html("");//empty the previous displayed list
+        for(var i=0;i<this.size();i++) {
+            var doc = this.get(i);
+            var ligne = new Line(doc,i);
+            ligne.updateHTML();
+            ligne.display();
+            if(this.getSelectionList().contains(doc)) {ligne.setSelected(true);}//check the box if selected
+        }
+    },
+    display: function() {
+        this.displayContent();
+    },
+
+    /* update the ith document information */
+    updateDocumentInformation: function(i) {
+        var list = this;
+        var doc = list.get(i);
+        getCurrentStorage().getDocument(getDocumentAddress(doc), function(data) {
+            doc.load(data);//todo : replace by data.header
+            doc.setContent("");//
+            list.set(i,doc);
+        });
+    },
+
+    setAsCurrentDocumentList: function() {
+        this.display();
+    }
+});
+getDocumentList = function() {
+    return getCurrentUser().getDocumentList();
+}
+
+
+/**
+ * create a line 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;},
+    setSelected: function(bool) {$("tr td.listbox-table-select-cell input#"+this.getID()).attr("checked",bool)},
+    isSelected: function() {
+        return $("tr td.listbox-table-select-cell input#"+this.getID()).attr("checked");
+    },
+
+    /* add the document of this line to the list of selected documents */
+    addToSelection: function() {
+        getDocumentList().getSelectionList().add(this.getDocument());
+    },
+    /* remove the document of this line from the list of selected documents */
+    removeFromSelection: function() {
+        getDocumentList().getSelectionList().removeElement(this.getDocument());
+    },
+    /* check or uncheck the line */
+    changeState: function() {
+        this.isSelected() ? this.addToSelection() : this.removeFromSelection();
+        $("span#selected_row_number a").html(getDocumentList().getSelectionList().size());//display the selected row number
+    },
+
+    /* load the document information in the html of a default line */
+    updateHTML: function() {
+        var line = this;
+
+        this.setHTML($(this.getHTML()).attr("class",this.getType())
+            .find("td.listbox-table-select-cell input")
+                .attr("id",this.getID())//ID
+                .click(function() {line.changeState();})//clic on a checkbox
+            .end()
+            .find("td.listbox-table-data-cell")
+                .click(function() {//clic on a line
+                    setCurrentDocumentID(line.getID());
+                    startDocumentEdition(line.getDocument())
+                })
+                .find("a.listbox-document-icon")
+                    .find("img")
+                        .attr("src",supportedDocuments[this.getType()].icon)//icon
+                    .end()
+                .end()
+                .find("a.listbox-document-title").html(limitedString(this.getDocument().getTitle(),10)).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()));}
+}
+/* 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;}
+
+
+
+
+
+ /**
+  * create a new document and start an editor to edit it
+  * @param type : the type of the document to create
+  */
+var createNewDocument = function(type) {
+    if(type=="title") {return}
+    var newDocument = new JSONDocument();
+    newDocument.setType(type);
+
+    newDocument.save(function() {
+        getDocumentList().add(newDocument);
+        getCurrentStorage().save();
+        startDocumentEdition(newDocument);
+    });
+}

UNGProject/theme-mobile.html

+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+    <head>
+        <meta name="viewport" content="width=device-width"/>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+        <meta http-equiv="Content-Script-Type" content="text/javascript" />
+        <meta http-equiv="Content-Style-Type" content="text/css" />
+        <meta name="keywords" content="" />
+        <meta name="robots" content="index, follow" />
+        <title id="page_title"> Theme </title>
+
+        <link rel="icon" type="image/x-icon"
+            href="images/ung/favicon.ico" />
+        <link rel="shortcut icon" type="image/x-icon"
+            href="images/ung/favicon.ico" />
+
+        <!-- this is a placeholder for different extensions to head which could be required by web themes -->
+
+        <!-- jquery -->
+        <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-mobile.css" />
+
+        <script type="text/javascript" src="js/base64.js"></script>
+        <script type="text/javascript" src="js/tools-mobile.js"></script>
+
+        <script type="text/javascript" src="js/theme-mobile.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">
+            // initialize
+            var initPage = function() {
+                setCurrentPage(new Page(supportedDocuments[getCurrentDocument().getType()].editorPage));
+            }
+
+            var initUser = function() {
+                var user = getCurrentUser();
+                user.setAsCurrentUser();
+            }
+
+            var init = function() {
+                initPage();
+                waitBeforeSucceed(function() {return getCurrentPage().getXML();},initUser);
+
+        //$("script#jquery_loader").remove();
+        //$("script#jquery_loader2").remove();
+
+        //$("#author").aloha();
+            }
+            $(document).ready(init);
+        </script>
+
+    </head>
+    <body>
+
+        <div class="container">
+            <div class="navigation">
+
+                <!-- Each aggregate of groups is a div wrapper -->
+                <div class="wrapper" id="wrapper_navigation">
+
+                    <div class=" navigation-right">
+                        <fieldset class="widget">
+                            <legend class="group_title"></legend>
+
+                            <div class="field" title="">
+
+                                <label>your_language</label>
+                                <div class="input"><div  >
+
+                                    <div id="select_language">
+                                        <ul><li>
+                                            <span id="current_language">en</span>
+                                            <img src="images/ung/arrow_20C.png" alt=">"/>
+                                            <ul id="available_languages">
+                                                <li></li>
+                                            </ul>
+                                        </li></ul>
+                                    </div>
+
+                                </div></div>
+                            </div>
+
+                            <div class="field" title="">
+
+                                <label>Login Box</label>
+                                <div class="input"><div  >
+
+                                    <a id="right_message" lang="en">Not Implemented yet</a>
+                                    <div id="preference_dialog" title="UNG Preferences"></div>
+
+
+                                    <a id="userName">Unknown</a>
+
+                                    | <a id="settings" href="#" lang="en">Parametres</a>
+                                    | <a id="help" href="#" lang="en">Help</a>
+                                    | <a href="login-mobile.html" onclick="signOut()" id="log" lang="en">Sign out</a>
+
+                                </div></div>
+
+                            </div>
+
+                        </fieldset>
+                    </div>
+
+                </div>
+
+            </div>
+
+            <div class="header">
+
+                <!-- Each aggregate of groups is a div wrapper -->
+                <div class="wrapper" id="wrapper_header">
+
+                    <div class=" header-left">
+                        <fieldset class="widget">
+                            <legend class="group_title"></legend>
+
+                            <div class="field" title="">
+
+                                <label>search_bar</label>
+                                <div class="input"><div  >
+
+                                    <a class="ung_docs" onclick="stopDocumentEdition()">
+                                        <img src="images/ung/ung-logo.gif" alt="logo"/>
+                                    </a>
+
+                                    <a id="loading_message" lang="en">Loading...</a>
+                                    <a id="document_title" name="document_title" onclick="editDocumentSettings()">Untitled</a>
+                                    <a id="document_state" name="document_state">...</a>
+
+                                </div></div>
+
+                            </div>
+                        </fieldset>
+
+                    </div>
+
+                    <div class=" header-right">
+                        <fieldset class="widget">
+
+                            <legend class="group_title"></legend>
+
+                            <div class="field" title="">
+
+                                <label>document_action_box</label>
+                                <div class="input"><div  >
+
+                                    <a id="last_update">Updated ... by</a>
+                                    <a id="author">Unknown</a>
+
+                                    <button type="button" onclick="saveCurrentDocument()">Save</button>
+
+                                </div></div>
+
+                            </div>
+                        </fieldset>
+                    </div>
+
+                </div>
+            </div>
+
+
+            <div class="main">
+
+                <div class="document">
+
+
+                    <div class="content editable">
+
+
+                        <fieldset class="bottom editable">
+
+                            <div id="page_content" class="field page"
+                                 title="Contenu de la page web.">
+                            </div>
+                            <div id="document_content" class="field hidden"
+                                 title="The content of the document considered as a text string">
+                            </div>
+
+                        </fieldset>
+
+                    </div>
+                </div>
+            </div>
+        </div>
+    </body>
+</html>