preview package

src/core/api.coffee

@@ -45,6 +45,8 @@ self.OS.API =
     handler: { }
     shared: {} # shared libraries
     #request a user data
+    mid: () ->
+        return _courrier.getMID()
     post: (p, d, c, f) ->
         q = _courrier.getMID()
         _API.loading q, p

src/core/vfs.coffee

@@ -151,6 +151,7 @@ class RemoteFileHandler extends self.OS.API.VFS.BaseFileHandler
             when "read"
                 return _API.handler.scandir @path, f if @info.type is "dir"
                 #read the file
+                return _API.handler.fileblob @path, f if p is "blob"
                 _API.handler.readfile @path, f, if p then p else "text"
             when "mk"
                 return f { error: "#{@path} is not a directory" } if @info.type is "file"

src/core/vfs/GoogleDriveHandler.coffee

@@ -63,6 +63,7 @@ class GoogleDriveHandler extends this.OS.API.VFS.BaseFileHandler
                 .then (r) ->
                     _API.loaded q, "OK"
                     return unless r.result
+                    r.result.mime = r.result.mimeType
                     f(r)
                 .catch (err) ->
                     _API.loaded q, "FAIL"
@@ -84,6 +85,7 @@ class GoogleDriveHandler extends this.OS.API.VFS.BaseFileHandler
                         _API.loaded q1, "OK"
                         return unless r.result.files and r.result.files.length > 0
                         G_CACHE[me.path] = r.result.files[0].id
+                        r.result.files[0].mime = r.result.files[0].mimeType
                         f { result: r.result.files[0] }
                     .catch (err) ->
                         _API.loaded q1, "FAIL"

src/packages/Preview/Makefile

@@ -4,7 +4,7 @@ jsfiles = pdf.js
 
 cssfiles =  main.css
 
-copyfiles = pdf.worker.js scheme.html package.json
+copyfiles = pdf.worker.js scheme.html package.json bg.jpg
 
 
 PKG_NAME=Preview

src/packages/Preview/main.coffee

@@ -4,32 +4,112 @@ class Preview extends this.OS.GUI.BaseApplication
     
     main: () ->
         me = @
-        url = "https://os.localhost:9195/test.pdf"
+        @currfile = @args[0].asFileHandler() if @args and @args.length > 0
         @view = @find "view"
+        @status = @find "status"
         PDFJS.workerSrc = @_api.handler.get + "/#{@path()}/pdf.worker.js"
-        #PDFJS.workerSrc = "packages/Preview/pdf.worker.js"
-        #PDFJS.disableWorker = true
-        console.log PDFJS.workerSrc
-        PDFJS.getDocument(url)
-        .then (pdf) ->
-            fn = (p) ->
-                return if p > pdf.numPages
-                pdf.getPage(p).then (page) ->
-                    scale = 1.5
-                    viewport = page.getViewport scale
-                    div = ($ "<div/>").attr("id", "page-" + (page.pageIndex + 1))
-                    ($ me.view).append div
-                    canvas = ($ "<canvas/>")[0]
-                    div.append canvas
-                    context = canvas.getContext '2d'
-                    canvas.height = viewport.height
-                    canvas.width = viewport.width
-                    renderContext =
-                        canvasContext: context
-                        viewport: viewport
-                    page.render renderContext
-                    fn(p+1)
-            fn(1)
+        @open @currfile
+    
+    open: (file) ->
+        me = @
+        return unless file
+        @currfile = file unless @currfile is file
+        file.onready () ->
+            file.info.size = (file.info.size / 1024).toFixed(2)
+            me.renderFile file
+        , (err) ->
+            me.error "File not found #{file.path}"
+    
+    renderFile: (file) ->
+        mime = file.info.mime
+        return unless mime
+        if mime.match /^[^\/]+\/.*pdf.*/g
+            @renderPDF file
+        else if mime.match /image\/.*/g
+            @renderImage file
+        else
+            @notify "Mime type #{file.info.mime} is not support"
 
+    setStatus: (t) ->
+        ($ @status).html t
+
+    renderPDF: (file) ->
+        me = @
+        status = "#{file.info.name} (#{file.info.size} Kb)"
+        ($ me.view).empty()
+        file.read (d) ->
+            q = me._api.mid()
+            me._api.loading q, "RENDERING"
+            PDFJS.getDocument { data: d }
+            #PDFJS.getDocument(url)
+            .then (pdf) ->
+                fn = (p) ->
+                    if p > pdf.numPages
+                        me.setStatus "#{status} - loaded"
+                        return me._api.loaded q, "OK"
+                    pdf.getPage(p).then (page) ->
+                        scale = 1.5
+                        viewport = page.getViewport scale
+                        div = ($ "<div/>").attr("id", "page-" + (page.pageIndex + 1))
+                        ($ me.view).append div
+                        canvas = ($ "<canvas/>")[0]
+                        div.append canvas
+                        context = canvas.getContext '2d'
+                        canvas.height = viewport.height
+                        canvas.width = viewport.width
+                        renderContext =
+                            canvasContext: context
+                            viewport: viewport
+                        page.render renderContext
+                        me.setStatus "#{status} - #{p}/#{pdf.numPages} loaded"
+                        fn(p+1)
+                fn(1)
+            .catch (err) ->
+                me.error "Cannot render the PDF file"
+                me._api.loaded q, "FAIL"
+        , "blob"
+
+    renderImage: (file) ->
+        me = @
+        ($ @view).attr("class", "image").empty()
+
+        file.read (d) ->
+            blob = new Blob [d], { type: file.mime }
+            img = new Image()
+            img.src = URL.createObjectURL blob
+            canvas = ($ "<canvas/>")[0]
+            ($ me.view).append canvas
+
+            #($ me.view).append img
+            img.onload = () ->
+                context = canvas.getContext '2d'
+                canvas.height = img.height
+                canvas.width = img.width
+                console.log canvas.width, canvas.height
+                context.drawImage img, 0, 0
+                me.setStatus "#{file.info.name} (#{file.info.size} Kb) - #{img.width}x#{img.height}"
+        , "blob"
+
+    menu: () ->
+        me = @
+        menu = [{
+                text: "File",
+                child: [
+                    { text: "Open", dataid: "#{@name}-Open", shortcut: "A-O" },
+                    { text: "Close", dataid: "#{@name}-Close", shortcut: "C-X" },
+                ],
+                onmenuselect: (e) -> me.actionFile e.item.data.dataid
+            }]
+        menu
+    
+    actionFile: (e) ->
+        me = @
+        switch e
+            when "#{@name}-Open"
+                @openDialog "FileDiaLog", ( d, f ) ->
+                    me.open "#{d}/#{f}".asFileHandler()
+                , "Open file", { mimes: me.meta().mimes }
+             when "#{@name}-Close"
+                @quit()
 
 this.OS.register "Preview", Preview

src/packages/Preview/main.css

@@ -1,10 +1,30 @@
-afx-app-window[data-id = "preview-win"] afx-hbox[data-id="container"] {
+
+afx-app-window[data-id = "preview-win"] afx-vbox[data-id="container"] div[data-id = "view"]
+{
     display: block;
     overflow:auto;
+    background-image: url("bg.jpg");
+    background-repeat: repeat;
 }
 
-afx-app-window[data-id = "preview-win"] afx-hbox[data-id="container"] canvas{
+afx-app-window[data-id = "preview-win"] afx-vbox[data-id="container"] div[data-id = "status"]
+{
+    background-color: #f6F6F6;
+    border-top: 1px solid #cbcbcb;
+    color:#414339;
+    padding-left: 10px;
+    padding-top: 3px;
+}
+
+afx-app-window[data-id = "preview-win"] afx-vbox[data-id="container"] canvas{
     margin-left: auto;
     margin-right: auto;
     display: block;
-}
+}
+
+afx-app-window[data-id = "preview-win"] afx-vbox[data-id="container"] div[data-id = "view"].image
+{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}

src/packages/Preview/package.json

@@ -9,5 +9,5 @@
     "version":"0.1a",
     "category":"Utils",
     "iconclass":"fa fa-eye",
-    "mimes":["[^\/]*/.*pdf"]
+    "mimes":["[^\/]*/.*pdf", "image/.*"]
 }

src/packages/Preview/scheme.html

@@ -1,5 +1,6 @@
 <afx-app-window data-id = "preview-win" apptitle="Preview" width="600" height="400">
-    <afx-hbox data-id = "container">
+    <afx-vbox data-id = "container">
         <div data-id="view" ></div>
-    </afx-hbox>
+        <div data-id = "status" data-height = "20"></div>
+    </afx-vbox>
 </afx-app-window>