Adding mime object to OfficeJS

We can select files in the slickgrid document lister and the good application
will be loaded with the good file. Extensions are hidden.

OfficeJS/component/elrte.html

@@ -58,18 +58,6 @@ $().ready(function() {
         <i class="icon-download-alt icon-white"></i>
         Save
       </button>&nbsp;
-      <button type="submit"
-              class="btn"
-              onclick="OfficeJS.load($('#input_fileName').attr('value'));">
-        <i class="icon-upload"></i>
-        Load
-      </button>&nbsp;
-      <button type="submit"
-              class="btn btn-danger"
-              onclick="OfficeJS.remove($('#input_fileName').attr('value'));">
-        <i class="icon-remove icon-white"></i>
-        Remove
-      </button>
     </div>
     <div id="elrte_editor">
       <h1>OfficeJS elRTE texteditor</h1><p>This is a new document.<br></p>

OfficeJS/component/jquery-sheet.html

@@ -217,18 +217,6 @@ function goToObj(s){
         <i class="icon-download-alt icon-white"></i>
         Save
       </button>&nbsp;
-      <button type="submit"
-              class="btn"
-              onclick="OfficeJS.load($('#input_fileName').attr('value'));">
-        <i class="icon-upload"></i>
-        Load
-      </button>&nbsp;
-      <button type="submit"
-              class="btn btn-danger"
-              onclick="OfficeJS.remove($('#input_fileName').attr('value'));">
-        <i class="icon-remove icon-white"></i>
-        Remove
-      </button>
     </div>
     <div id="jQuerySheet" class="jQuerySheet" style="height: 450px;">
     </div>

OfficeJS/component/left_nav_bar.html

@@ -44,15 +44,15 @@
       New Spreadsheet
     </a>
   </li>
-  <li class="editpreferences left-nav-tools">
-    <a href="#/editpreferences"
-       onclick="javascript:
-                OfficeJS.open({app:'editpreferences'});
-                return false;">
-      <i class="icon-check"></i>
-      Edit Preferences
-    </a>
-  </li>
+  <!-- <li class="editpreferences left-nav-tools"> -->
+  <!--   <a href="#/editpreferences" -->
+  <!--      onclick="javascript: -->
+  <!--               OfficeJS.open({app:'editpreferences'}); -->
+  <!--               return false;"> -->
+  <!--     <i class="icon-check"></i> -->
+  <!--     Edit Preferences -->
+  <!--   </a> -->
+  <!-- </li> -->
   <li id="nav_document_list_header left-nav-tools">
     <a href="#/doclist"
        onclick="javascript:

OfficeJS/component/slickgrid_document_lister.html

@@ -44,7 +44,7 @@
     <!--
 (function () {
     var grid, onSortFunction, onClickFunction, checkboxselector,
-    onRemoveSeveral,
+    onRemoveSeveral, showIconFormatter,
     documentlist = OfficeJS.cloneCurrentDocumentList(),
     columns = [],
     options = {
@@ -54,13 +54,33 @@
         forceFitColumns: true
     };
 
+    showIconFormatter = function (row,cell,value,columnDef,dataContext) {
+        return dataContext.icon;
+    };
+
     (function (array) {
-        var i, lm, cd;
+        var i, lm, cd, split, mime;
+        for (i = 0; i < array.length; i += 1) {
+            // file names
+            split = array[i].fileName.split('.');
+            array[i].fileExt = '';
+            if (split.length > 1) {
+                array[i].fileExt = split[split.length-1];
+                split.length -= 1;
+            }
+            array[i].fileBaseName = split.join('.');
+            // app & icon
+            mime = OfficeJS.getMimeOfExt (array[i].fileExt);
+            if (!mime) {
+                array[i].icon = '?';
+                array[i].app = 'textEditor';
+            } else {
+                array[i].icon = mime.icon;
+                array[i].app = mime.pref || mime.app;
+            }
+            // dates
             // FIXME : we can have 2012/1/1 12:5
             // we should have 2012/01/01 12:05
-        for (i = 0; i < array.length; i += 1) {
-            // TODO : create fileNameWithoutExt and fileApplication
-            // according to the file extension.
             lm = (new Date(array[i].lastModified));
             cd = (new Date(array[i].creationDate));
             array[i].lastModified = lm.getFullYear()+'/'+
@@ -72,7 +92,6 @@
         }
     }(documentlist));
 
-
     $(function () {
 
         checkboxselector = new Slick.CheckboxSelectColumn({
@@ -80,9 +99,10 @@
         });
         columns.push(checkboxselector.getColumnDefinition());
         columns.push({id:"icon",name:"",field:"icon",
-                      sortable:true,resizable:false,width:24});
+                      sortable:true,resizable:false,width:24,
+                      formatter:showIconFormatter});
         columns.push({id:"fileName",name:"Document",
-                      field:"fileName",sortable:true});
+                      field:"fileBaseName",sortable:true});
         columns.push({id:"lastModified",name:"Modified",
                       field:"lastModified",sortable:true});
         columns.push({id:"creationDate",name:"Created",
@@ -119,7 +139,7 @@
         onClickFunction = function (e) {
             var cell = grid.getCellFromEvent(e);
             if (cell.cell === grid.getColumnIndex('fileName')) {
-                OfficeJS.open({app:'textEditor',
+                OfficeJS.open({app:documentlist[cell.row].app,
                                fileName:documentlist[cell.row].fileName});
             }
         };

OfficeJS/component/svg-edit.html

@@ -10,18 +10,6 @@
     <i class="icon-download-alt icon-white"></i>
     Save
   </button>&nbsp;
-  <button type="submit"
-          class="btn"
-          onclick="OfficeJS.load($('#input_fileName').attr('value'));">
-    <i class="icon-upload"></i>
-    Load
-  </button>&nbsp;
-  <button type="submit"
-          class="btn btn-danger"
-          onclick="OfficeJS.remove($('#input_fileName').attr('value'));">
-    <i class="icon-remove icon-white"></i>
-    Remove
-  </button>
 </div>
 <iframe src="lib/svg-edit/svg-editor.html"
         id="svg_edit_frame"