Added file images.

Added visual file selection.

scribeengine/controllers/media.py

@@ -72,7 +72,7 @@ class MediaController(BaseController):
         self._get_directories(path, directories)
         c.directories = json.dumps(directories)
         c.files = self._get_files(path)
-        #return pformat(c.directories, indent=2)
+        c.page_title = u'Media Browser'
         return render(u'/media/index.mako')
 
     @jsonify
@@ -80,7 +80,7 @@ class MediaController(BaseController):
         path = request.GET.get(u'path', u'').split(u',')
         dirpath = os.path.join(config[u'paths.media'], *path)
         #log.debug(dirpath)
-        return self._get_files(dirpath)
+        return {u'results': self._get_files(dirpath)}
 
     @jsonify
     def create_directory(self):

scribeengine/public/scripts/ScribeEngine.Media.js

@@ -18,6 +18,10 @@
  *****************************************************************************/
 
 ScribeEngine.Namespace.create("ScribeEngine.Media", {
+    closeWindow: function ()
+    {
+        window.close();
+    },
     newDirectory: function ()
     {
         var dirname = prompt("New Directory:", "directory");
@@ -31,24 +35,44 @@ ScribeEngine.Namespace.create("ScribeEngine.Media", {
             {"path": path.toString()},
             function (data, textStatus) {
                 $("#file-list > ul").html("");
-                $.each(data, function () {
+                $.each(data.results, function () {
                     var filename = this;
+                    var extension = filename.substr(filename.length - 4);
+                    if (extension == ".png" || extension == ".jpg")
+                    {
+                        var filetype = "file-image";
+                    }
+                    else
+                    {
+                        var filetype = "file-unknown";
+                    }
                     if (filename.length > 15)
                     {
                         filename = filename.substr(0, 12) + "...";
                     }
                     $("#file-list > ul").append(
                         $("<li>")
-                            .append($("<div>").attr("class", "file").html("&nbsp;"))
+                            .append($("<a>").attr("href", "#").attr("class", "file")
-                            .append($("<div>").attr("class", "caption").attr("title", filename).text(filename))
+                                .html("<img src=\"/images/" + filetype + ".png\" />").click(ScribeEngine.Media.selectFile))
+                            .append($("<a>").attr("href", "#").attr("class", "caption").attr("title", filename).text(filename).click(ScribeEngine.Media.selectFile))
                     );
                 });
             }
         );
+    },
+    selectFile: function (e)
+    {
+        var li = ScribeEngine.Events.getElement(e).parent();
+        if (!li.is("li"))
+        {
+            li = li.parent();
+        }
+        li.parent().children("li").children(".selected").removeClass("selected");
+        li.children("a").addClass("selected").blur();
     }
 });
 
 ScribeEngine.Events.load(function () {
     ScribeEngine.Events.click("#new-directory", ScribeEngine.Media.newDirectory);
-    ScribeEngine.Events.click("#file-select", window.close);
+    ScribeEngine.Events.click("#file-select", ScribeEngine.Media.closeWindow);
 });

scribeengine/public/styles/style.css

@@ -512,6 +512,9 @@ fieldset.form-details .form-text {
     color: #000;
 }
 
+/* Media Browser */
+
+
 /* Pagination */
 
 .pagination {

scribeengine/templates/media/index.mako

@@ -11,15 +11,18 @@
     <script src="/scripts/${c.jsinit}" type="text/javascript"></script>
 % endif
     <style type="text/css">
-    body { margin: 0; padding: 0; }
+    body { margin: 0; padding: 0; font-family: Arial, sans-serif; }
+    img { border: 0; }
+    input[type=button] { background: #f0f0f0 url(/images/media-button.png) top left repeat-x; border: 1px solid #ccc; color: #000; height: 24px; }
     #directory-tree { border-right: 1px solid #999; border-bottom: 1px solid #999; height: 370px; float: left; padding-right: 4px; width: 195px; }
     #file-list { border-bottom: 1px solid #999; height: 370px; padding-left: 4px; float: left; width: 396px; }
     #button-bar { clear: both; height: 30px; line-height: 30px; }
     #file-list ul { list-style: none; margin: 0; padding: 0; }
     #file-list ul li { float: left; }
-    #file-list ul li div.file { border: 1px solid #f0f0f0; height: 87px; line-height: 87px; list-style: none; margin: 5px; padding: 0; width: 87px; }
+    #file-list ul li a.file { border: 1px solid #f0f0f0; display: block; height: 87px; line-height: 87px; list-style: none; margin: 5px; padding: 0; text-align: center; width: 87px; }
-    #file-list ul li div.caption { font-size: 8pt; text-align: center; width: 89px; }
+    #file-list ul li a.caption { color: #666; display: block; font-size: 8pt; text-align: center; text-decoration: none; width: 89px; }
-    input[type=button] { background: #f0f0f0 url(/images/media-button.png) top left repeat-x; border: 1px solid #ccc; color: #000; height: 24px; }
+    #file-list ul li a.file.selected { border: 1px solid #009; }
+    #file-list ul li a.caption.selected { color: #009; text-decoration: underline; }
     </style>
 </head>
 <body>