OfficeJS: updated to work with jio, and security improved

OfficeJS/component/basic_conflict_solver.html

 <div id="basic_conflict_solver_div" style="text-align:center;" class="well">
   <div class="row-fluid">
     <div class="span12">
-      A conflict occured while saving this document:
+      There is a conflict in document <span id="basic_conflict_solver_docid"></span>
     </div>
   </div>
   <div id="revisions">
   </div>
   <div class="row-fluid">
     <div class="span12">
-      <button onclick="basic_conflict_solver.abort()">Abort</button>
+      <button onclick="OfficeJS_basic_conflict_solver.abort();">Abort</button>
     </div>
   </div>
 </div>
-<script type="text/javascript">
-  <!--
-
-window.basic_conflict_solver = {
-    conflict_object:{},
-    addRevision: function (doc) {
-        document.querySelector ('#basic_conflict_solver_div #revisions').
-            innerHTML += '<div class="row-fluid"><div class="span12">'+
-            '<div>'+(new Date(doc.last_modified)).toString()+'</div>'+
-            '<div><textarea id="'+doc.revision+'">'+doc.content+'</textarea></div>'+
-            '<div><button onclick="'+
-            //'console.log('+"'"+revision+"'"+');'+
-            "basic_conflict_solver.keepRevision('"+doc.revision+"');"+
-            '">Save this one</button></div><hr/>'+
-            '</div></div>';
-    },
-    addRemovedRevision: function (doc) {
-        document.querySelector ('#basic_conflict_solver_div #revisions').
-            innerHTML += '<div class="row-fluid"><div class="span12">'+
-            '<div>'+(new Date(doc.last_modified)).toString()+'</div>'+
-            '<div>Removed</div>'+
-            '<div><button onclick="'+
-            //'console.log('+"'"+revision+"'"+');'+
-            "basic_conflict_solver.removeRevision();"+
-            '">Save this one</button></div><hr/>'+
-            '</div></div>';
-    },
-    removeRevision: function () {
-        OfficeJS.solveConflict(this.conflict_object);
-    },
-    keepRevision: function (revision) {
-        OfficeJS.solveConflict(
-            this.conflict_object,
-            $('#'+revision).text()
-        );
-    },
-    abort: function () {
-        OfficeJS.abortSolveConflict();
-    }
-};
-
-      //-->
-</script>

OfficeJS/component/elrte.html

@@ -32,7 +32,8 @@
     </script>
     <script type="text/javascript" charset="utf-8">
       <!--
-$().ready(function() {
+(function () {
+    $().ready(function() {
         var opts = {
             cssClass : 'el-rte',
             lang     : 'en',
@@ -41,7 +42,8 @@ $().ready(function() {
             cssfiles : ['lib/elrte/css/elrte-inner.css']
         }
         $('#elrte_editor').elrte(opts);
-})
+    });
+}());
 //-->
     </script>
   </head>
@@ -49,12 +51,12 @@ $().ready(function() {
     <div>
       <input type="text"
              name="fileName"
-             id="input_file_name"
+             id="elrte_docid"
              value=""
              placeholder="File name here" />&nbsp;
       <button type="submit"
               class="btn btn-primary"
-              onclick="OfficeJS.save($('#input_file_name').attr('value'));">
+              onclick="OfficeJS_elrte.save();">
         <i class="icon-download-alt icon-white"></i>
         Save
       </button>&nbsp;

OfficeJS/component/jquery-sheet.html

@@ -59,101 +59,7 @@
     <!--/Optional-->
     <script type="text/javascript">
       <!--
-$(function(){
-    //Here is where we initiate the sheets
-    //every time sheet is created it creates a new jQuery.sheet.instance
-    //(array), to manipulate each sheet, the jQuery object is returned
-    $('#jQuerySheet').sheet({
-        title: '',
-        inlineMenu: inlineMenu($.sheet.instance),
-        urlGet: 'component/newspreadsheet.html',
-        // buildSheet: true,
-        editable: true,
-        autoFiller: true
-    });
-
-    //examples of how to use jQuery.sheet
-    /*
-    //Inline sheet(s), non-editable (like a gridview)
-    $('.jQuerySheet').sheet({
-    title: 'jQuery.sheet - The Web Based Spreadsheet Demo',
-    buildSheet: true, //will turn object #jQuerySheet's child tables into sheets
-    editable: false,
-    calcOff: true
-    });
-
-    //New single custom sized sheet
-    $('#jQuerySheet').sheet({
-    title: 'jQuery.sheet - The Web Based Spreadsheet Demo',
-    inlineMenu: inlineMenu(jQuery.sheet.instance),
-    buildSheet: '5x100'
-    });
-
-    //Custom object sheet(s)
-    $('#jQuerySheet').sheet({
-    title: 'jQuery.sheet - The Web Based Spreadsheet Demo',
-    inlineMenu: inlineMenu(jQuery.sheet.instance),
-    buildSheet: $('#jQuerySheet').find('table')
-    });
-
-    //Custom object sheet(s)
-    $('#jQuerySheet').sheet({
-    title: 'jQuery.sheet - The Web Based Spreadsheet Demo',
-    inlineMenu: inlineMenu(jQuery.sheet.instance),
-    buildSheet: $.sheet.makeTable.fromSize('5x100').add($.sheet.makeTable.fromSize('5x100'))
-    });
-    */
-    //This is to give a themeswitcher on the page
-    //$('#themeSwitcher').themeswitcher();
-
-    //This is for some fancy menu stuff
-    var o = $('#structures');
-    var top = o.offset().top - 300;
-    $(document).scroll(function(e){
-        if ($(this).scrollTop() > top) {
-            $('#lockedMenu').removeClass('locked');
-        }
-        else {
-            $('#lockedMenu').addClass('locked');
-        }
-    }).scroll();
-});
-
-//This function builds the inline menu to make it easy to interact with each sheet instance
-function inlineMenu(I){
-    I = (I ? I.length : 0);
-
-    //we want to be able to edit the html for the menu to make them multi
-    //instance
-    var html = $('#inlineMenu').html().
-        replace(/sheetInstance/g,
-                "$.sheet.instance[" + I + "]");
-    var menu = $(html);
-
-    //The following is just so you get an idea of how to style cells
-    menu.find('.colorPickerCell').colorPicker().change(function(){
-        $.sheet.instance[I].cellChangeStyle('background-color', $(this).val());
-    });
-
-    menu.find('.colorPickerFont').colorPicker().change(function(){
-        $.sheet.instance[I].cellChangeStyle('color', $(this).val());
-    });
-
-    menu.find('.colorPickers').children().eq(1).
-        css('background-image',
-            "url('lib/jquery.sheet/images/palette.png')");
-    menu.find('.colorPickers').children().eq(3).
-        css('background-image',
-            "url('lib/jquery.sheet/images/palette_bg.png')");
-    return menu;
-}
-
-function goToObj(s){
-    $('html, body').animate({
-        scrollTop: $(s).offset().top
-    }, 'slow');
-    return false;
-}
+OfficeJS_jquerysheet.firstload();
 //-->
     </script>
     <!--Page styles-->
@@ -208,12 +114,12 @@ function goToObj(s){
     <div>
       <input type="text"
              name="fileName"
-             id="input_file_name"
+             id="jquery-sheet_docid"
              value=""
              placeholder="File name here" />&nbsp;
       <button type="submit"
               class="btn btn-primary"
-              onclick="OfficeJS.save($('#input_file_name').attr('value'));">
+              onclick="OfficeJS_jquerysheet.save();">
         <i class="icon-download-alt icon-white"></i>
         Save
       </button>&nbsp;

OfficeJS/component/left_nav_bar.html

@@ -5,7 +5,7 @@
       <li>
         <a href="#/login"
            onclick="javascript:
-                    OfficeJS.open({app:'login'});
+                    OfficeJS_left_nav_bar.login();
                     return false;">
           <i class="icon-ok">
           </i>
@@ -20,7 +20,7 @@
   <li class="texteditor left-nav-tools">
     <a href="#/texteditor"
        onclick="javascript:
-                OfficeJS.open({app:'text_editor'});
+                OfficeJS_left_nav_bar.newTextDocument();
                 return false;">
       <i class="icon-font"></i>
       New Text Document
@@ -29,7 +29,7 @@
   <li class="imgeditor left-nav-tools">
     <a href="#/imgeditor"
        onclick="javascript:
-                OfficeJS.open({app:'img_editor'});
+                OfficeJS_left_nav_bar.newImage();
                 return false;">
       <i class="icon-pencil"></i>
       New Image
@@ -38,7 +38,7 @@
   <li class="spreadsheet left-nav-tools">
     <a href="#/spreadsheet"
        onclick="javascript:
-                OfficeJS.open({app:'spreadsheet'});
+                OfficeJS_left_nav_bar.newSpreadSheet();
                 return false;">
       <i class="icon-signal"></i>
       New Spreadsheet
@@ -47,7 +47,7 @@
   <li class="spreadsheet left-nav-tools">
     <a href="#/workinprogress"
        onclick="javascript:
-                OfficeJS.open({app:'workinprogress'});
+                OfficeJS_left_nav_bar.showActivities();
                 return false;">
       <i class="icon-tasks"></i>
       Show Activity
@@ -56,7 +56,7 @@
   <!-- <li class="editpreferences left-nav-tools"> -->
   <!--   <a href="#/edit_preferences" -->
   <!--      onclick="javascript: -->
-  <!--               OfficeJS.open({app:'edit_preferences'}); -->
+  <!--               OfficeJS_left_nav_bar.editPreference(); -->
   <!--               return false;"> -->
   <!--     <i class="icon-check"></i> -->
   <!--     Edit Preferences -->
@@ -65,7 +65,7 @@
   <li id="nav_document_list_header left-nav-tools">
     <a href="#/doclist"
        onclick="javascript:
-                OfficeJS.open({app:'document_lister'});
+                OfficeJS_left_nav_bar.showDocumentList();
                 return false;">
       <i class="icon-list"></i>
       Document List

OfficeJS/component/login.html

@@ -14,61 +14,66 @@
   <div>
     Remember me&nbsp;&nbsp;
     <input id="remember_me" type="checkbox"
-           onclick="window.OfficeJS_login.toggleRememberMe();"/>
+           onclick="OfficeJS_login.object.toggleRememberMe();"/>
   </div>
   <div>
     <button type="submit"
             class="btn"
-            onclick="window.OfficeJS_login.createJIO();">
+            onclick="OfficeJS_login.object.connect();">
       Create New JIO
     </button>
   </div>
   <script type="text/javascript">
     <!--
-window.OfficeJS_login = {
-    storageId:'#login-gadget #login_input',
-    storagePath:'OfficeJS/login/login',
-    rememberId:'#login-gadget #remember_me',
-    rememberPath:'OfficeJS/login/remember_me',
-    localStorage: LocalOrCookieStorage,
-
-    fillLogin: function () {
-        $(this.storageId).attr(
-            'value',this.localStorage.getItem(this.storagePath) || '');
-    },
-
-    isRememberMe: function () {
-        return $(this.rememberId).attr('checked');
-    },
-    fillRememberMe: function () {
-        var t = this.localStorage.getItem(this.rememberPath);
+(function () {
+    "use strict";
+    var odf = function (obj,name,value) {
+        Object.defineProperty(obj,name,{
+            configurable:false,enumerable:false,writable:false,value:value
+        });
+    };
+    odf(OfficeJS_login,'object',{});
+    var that = OfficeJS_login.object;
+    odf(OfficeJS_login.object,'storage_id','#login-gadget #login_input');
+    odf(OfficeJS_login.object,'storage_path','OfficeJS/login/login');
+    odf(OfficeJS_login.object,'remember_id','#login-gadget #remember_me');
+    odf(OfficeJS_login.object,'remember_path','OfficeJS/login/remember_me');
+    odf(OfficeJS_login.object,'fillLogin',function () {
+        $(that.storage_id).attr(
+            'value',localStorage.getItem(that.storage_path) || '');
+    });
+    odf(OfficeJS_login.object,'isRememberMe',function () {
+        return $(that.remember_id).attr('checked');
+    });
+    odf(OfficeJS_login.object,'fillRememberMe',function () {
+        var t = localStorage.getItem(that.remember_path);
         if (t) {
-            this.rememberMe();
+            that.rememberMe();
         }
-    },
-    rememberMe: function () {
-        $(this.rememberId).attr('checked','1');
-        this.localStorage.setItem(this.rememberPath,'1');
-    },
-    dontRememberMe: function () {
-        $(this.rememberId).removeAttr('checked');
-        this.localStorage.deleteItem(this.rememberPath);
-    },
-    toggleRememberMe: function () {
-        var t = this.localStorage.getItem(this.rememberPath);
-        if (t) { this.dontRememberMe() } else { this.rememberMe(); }
-    },
-
-    createJIO: function() {
+    });
+    odf(OfficeJS_login.object,'rememberMe',function () {
+        $(that.remember_id).attr('checked','1');
+        localStorage.setItem(that.remember_path,'1');
+    });
+    odf(OfficeJS_login.object,'dontRememberMe',function () {
+        $(that.remember_id).removeAttr('checked');
+        localStorage.deleteItem(that.remember_path);
+    });
+    odf(OfficeJS_login.object,'toggleRememberMe',function () {
+        var t = localStorage.getItem(that.remember_path);
+        if (t) { that.dontRememberMe() } else { that.rememberMe(); }
+    });
+    odf(OfficeJS_login.object,'connect',function () {
         var spec = $('#login-gadget #login_input').attr('value');
-        this.localStorage.setItem(this.storagePath,spec);
-        OfficeJS.setJio(spec);
+        localStorage.setItem(that.storage_path,spec);
+        OfficeJS_login.connect (spec);
+    });
+
+    that.fillRememberMe();
+    if (that.isRememberMe()) {
+        that.fillLogin();
     }
-};
-window.OfficeJS_login.fillRememberMe();
-if (window.OfficeJS_login.isRememberMe()) {
-    window.OfficeJS_login.fillLogin();
-}
+}());
         //-->
   </script>
 </div>

OfficeJS/component/slickgrid_document_lister.html

@@ -24,8 +24,15 @@
       <i class="icon-remove icon-white"></i>
       Remove Selected
     </button>
+    <button type="submit"
+            id="slickgrid_document_lister_refresh"
+            class="btn"
+            onclick="OfficeJS_slickgrid.refresh();">
+      <i class="icon-refresh"></i>
+      Refresh
+    </button>
   </div>
-<div id="myDocumentList" style="width:100%;height:300px"></div>
+<div id="slickgrid_documentlist" style="width:100%;height:300px"></div>
 <script type="text/javascript"
         src="lib/jquery/jquery.js"></script>
 <script type="text/javascript"
@@ -42,135 +49,7 @@
 
 <script type="text/javascript">
     <!--
-window.OfficeJS_slickgrid = {};
-window.OfficeJS_slickgrid.reload = function () {
-
-    $('#myDocumentList').html('');
-
-    var grid, onSortFunction, onClickFunction, check_box_selector,
-    onRemoveSeveral, showIconFormatter,
-    document_list = OfficeJS.cloneCurrentDocumentList(),
-    columns = [],
-    options = {
-        enableCellNavigation: true,
-        enableColumnReorder: false,
-        multiColumnSort: true,
-        forceFitColumns: true
-    };
-
-    showIconFormatter = function (row,cell,value,columnDef,dataContext) {
-        return dataContext.icon;
-    };
-
-    (function (array) {
-        var i, lm, cd, split, mime;
-        for (i = 0; i < array.length; i += 1) {
-            // file names
-            split = array[i].name.split('.');
-            array[i].ext = '';
-            if (split.length > 1) {
-                array[i].ext = split[split.length-1];
-                split.length -= 1;
-            }
-            array[i].base_name = split.join('.');
-            // app & icon
-            mime = OfficeJS.getMimeOfExt (array[i].ext);
-            if (!mime) {
-                array[i].icon = '?';
-                array[i].app = 'text_editor';
-            } else {
-                array[i].icon = mime.icon;
-                array[i].app = mime.preferred_application || mime.application;
-            }
-            if (array[i].revision) {
-                array[i].conflict = array[i].revision_object[
-                    array[i].revision].conflict?'X':'';
-            } else {
-                array[i].conflict = '';
-            }
-            // dates
-            // FIXME : we can have 2012/1/1 12:5
-            // we should have 2012/01/01 12:05
-            lm = (new Date(array[i].last_modified));
-            cd = (new Date(array[i].creation_date));
-            array[i].last_modified = lm.getFullYear()+'/'+
-                (lm.getMonth()+1)+'/'+lm.getDate()+' '+
-                lm.getHours()+':'+lm.getMinutes();
-            array[i].creation_date = cd.getFullYear()+'/'+
-                (cd.getMonth()+1)+'/'+cd.getDate()+' '+
-                cd.getHours()+':'+cd.getMinutes();
-        }
-    }(document_list));
-
-    $(function () {
-
-        check_box_selector = new Slick.CheckboxSelectColumn({
-            cssClass: "slick-cell-checkboxsel"
-        });
-        columns.push(check_box_selector.getColumnDefinition());
-        columns.push({id:"icon",name:"",field:"icon",
-                      sortable:true,resizable:false,width:24,
-                      formatter:showIconFormatter});
-        columns.push({id:"file_name",name:"Document",
-                      field:"base_name",sortable:true});
-        columns.push({id:"last_modified",name:"Modified",
-                      field:"last_modified",sortable:true});
-        columns.push({id:"creation_date",name:"Created",
-                      field:"creation_date",sortable:true});
-        columns.push({id:'on_conflict',name:'',
-                      field:'conflict',sortable:true,
-                      resizable:false,width:24});
-
-        grid = new Slick.Grid("#myDocumentList",
-                              document_list,
-                              columns,
-                              options);
-        grid.setSelectionModel(new Slick.RowSelectionModel(
-            {selectActiveRow: false}));
-        grid.registerPlugin(check_box_selector);
-
-        onSortFunction = function (e, args) {
-            var cols = args.sortCols;
-
-                document_list.sort(function (data_row1, data_row2) {
-                    var i, l, field, sign, value1, value2, result;
-                    for (i = 0, l = cols.length; i < l; i++) {
-                        field = cols[i].sortCol.field;
-                        sign = cols[i].sortAsc ? 1 : -1;
-                        value1 = data_row1[field];
-                        value2 = data_row2[field];
-                        result = (value1==value2?0:(value1>value2?1:-1))*sign;
-                        if (result != 0) {
-                            return result;
-                        }
-                    }
-                    return 0;
-                });
-            grid.invalidate();
-            grid.render();
-        };
-        onClickFunction = function (e) {
-            var cell = grid.getCellFromEvent(e);
-            if (cell.cell === grid.getColumnIndex('file_name')) {
-                OfficeJS.open({app:document_list[cell.row].app,
-                               file_name:document_list[cell.row].name});
-            }
-        };
-        onRemoveSeveral = function () {
-            var document_name_array = [], selected, i, l;
-            selected = grid.getSelectedRows();
-            for (i = 0, l = selected.length; i < l; i+= 1) {
-                document_name_array.push(document_list[selected[i]].name);
-            }
-            OfficeJS.removeSeveralFromArray (document_name_array);
-        };
-        document.querySelector ('#slickgrid_document_lister_remove_selected').
-            onclick = onRemoveSeveral;
-        grid.onClick.subscribe(onClickFunction);
-        grid.onSort.subscribe(onSortFunction);
-    });
-};
-window.OfficeJS_slickgrid.reload();
+OfficeJS_slickgrid.load();
 //-->
 </script>
 </body>

OfficeJS/component/svg-edit.html

 <div>
   <input type="text"
          name="fileName"
-         id="input_file_name"
+         id="svg-edit_docid"
          value=""
          placeholder="File name here" />&nbsp;
   <button type="submit"
           class="btn btn-primary"
-          onclick="OfficeJS.save($('#input_file_name').attr('value'));">
+          onclick="OfficeJS_svgedit.save();">
     <i class="icon-download-alt icon-white"></i>
     Save
   </button>&nbsp;
 </div>
 <iframe src="lib/svg-edit/svg-editor.html"
-        id="svg_edit_frame"
+        id="svg-edit_frame"
         style="width:100%;
                height:500px;"
         scrolling="no">

OfficeJS/component/top_nav_bar.html

@@ -44,11 +44,11 @@
         <li><h1>OfficeJS</h1></li>
         <li><a href="#/about"
                onclick="javascript:
-                        OfficeJS.open({app:'about'});
+                        OfficeJS_top_nav_bar.about();
                         return false;">About</a></li>
         <li><a href="#/contact"
                onclick="javascript:
-                        OfficeJS.open({app:'contact'});
+                        OfficeJS_top_nav_bar.contact();
                         return false;">Contact</a></li>
       </ul>
     </div>

OfficeJS/component/workinprogress.html

 <h2>Activities</h2>
-<div id="activities"></div>
-<script type="text/javascript">
-  <!--
-(function() {
-    var id;
-    if (typeof work_in_progress !== 'object') {
-        id = null;
-        work_in_progress = {
-            start:function(){
-                if (id === null) {
-                    var update = function () {
-                        var act = OfficeJS.getActivity(), i, str = '';
-                        for (i = 0; i < act.length; i+= 1) {
-                            str += act[i] + '<br />';
-                        }
-                        if (str === '') {
-                            str = 'There is no on going tasks.<br />';
-                        }
-                        document.getElementById('activities').innerHTML = str;
-                    };
-                    update();
-                    id = setInterval (update, 200);
-                }
-            },
-            stop:function(){
-                if (id !== null) {
-                    clearInterval(id);
-                    id = null;
-                }
-            }
-        };
-    }
-}());
-//-->
-</script>
+<div id="workinprogress_activities"></div>