Add showing thumbnail function. resolve #3

Can show thumbnail image in the list item.
garafu · Jul 11, 2015 · 47d2358 · 47d2358
1 parent dae1835
commit 47d2358
Show file tree

Hide file tree

Showing 16 changed files with 245 additions and 76 deletions.
diff --git a/blogger.toc.csproj b/blogger.toc.csproj
@@ -63,6 +63,7 @@
     <Content Include="build\blogger.toc.min.js" />
     <Content Include="demo\index_compile.html" />
     <Content Include="demo\index_nocompile.html" />
+    <Content Include="images\noimage.png" />
     <Content Include="lib\bootstrap\css\bootstrap-theme.css" />
     <Content Include="lib\bootstrap\css\bootstrap-theme.min.css" />
     <Content Include="lib\bootstrap\css\bootstrap.css" />

diff --git a/build.bat b/build.bat
@@ -42,6 +42,6 @@ rem    --compiler_flags="--formatting=pretty_print" ^
 
 
 rem Add copyright at header.
-echo /** Copyright (c) 2013 akinari tsugo */>tmp.txt
+echo /** Copyright (c) 2013-2015 akinari tsugo */>tmp.txt
 copy /b tmp.txt+%OUTPUT_FILE% tmp.txt
 move tmp.txt %OUTPUT_FILE%
diff --git a/build/blogger.toc.min.js b/build/blogger.toc.min.js
diff --git a/demo/index_compile.html b/demo/index_compile.html
@@ -7,12 +7,16 @@
 </head>
 <body>
 <div>
+  <h1>Compile Mode</h1>
   <div id="main">
     <script type="text/javascript">
     var POSTSTOC_SETTINGS = {
         blogURL: 'garafu.blogspot.jp',
         orderby: 'published',
-        printby: 'title'
+        printby: 'label',
+        thumbnail: {
+            enabled: true
+        }
     };
     </script>
     <script type="text/javascript" src="../build/blogger.toc.min.js"></script>

diff --git a/demo/index_nocompile.html b/demo/index_nocompile.html
@@ -2,17 +2,21 @@
 <html>
 <head>
     <title></title>
-    <link rel="stylesheet" type="text/css" href="../lib/bootstrap/css/bootstrap.css" />
+    <!--<link rel="stylesheet" type="text/css" href="../lib/bootstrap/css/bootstrap.css" />-->
     <link rel="stylesheet" type="text/css" href="../stylesheets/simple.css" />
 </head>
 <body>
 <div>
+  <h1>No Compile Mode</h1>
   <div id="main">
     <script type="text/javascript">
     var POSTSTOC_SETTINGS = {
         blogURL: 'garafu.blogspot.jp',
-        orderby: 'title',
-        printby: 'label'
+        orderby: 'published',
+        printby: 'label.contentsorder',
+        thumbnail: {
+            enabled: false
+        }
     };
     </script>
     <script type="text/javascript" src="../lib/closure-library/closure/goog/base.js"></script>

diff --git a/images/noimage.png b/images/noimage.png
diff --git a/src/blogger/toc/contract.js b/src/blogger/toc/contract.js
@@ -121,3 +121,15 @@ var contract = {
         xmlns$thr: ''
     }
 };
+
+var POSTSTOC_SETTINGS = {
+    blogURL: '',
+    maxResults: Infinity,
+    style: '',
+    orderby: '',
+    printby: '',
+    thumbnail: {
+        enabled: false,
+        noImageURL: ''
+    }
+};
diff --git a/src/blogger/toc/main.js b/src/blogger/toc/main.js
@@ -24,6 +24,7 @@ goog.require('garafu.events');
 // --------------------------------------------------------------------------------
 /**
 * @class
+*
 * @public
 * @constructor
 */
@@ -73,7 +74,7 @@ garafu.blogger.toc.Main._instance = null;
 
 
 /**
-* Revieved data.
+* Recieved data.
 *
 * @private
 */

diff --git a/src/blogger/toc/printer/entry.js b/src/blogger/toc/printer/entry.js
@@ -55,28 +55,61 @@ garafu.blogger.toc.printer.Entry.prototype.getRootElement = function () {
 * @private
 */
 garafu.blogger.toc.printer.Entry.prototype.initialize = function () {
+    var settings = this._settings;
     var entry = this._data;
     var container = document.createElement('span');
     var published = document.createElement('span');
     var updated = document.createElement('span');
+    var thumbnail = document.createElement('span');
     var title = document.createElement('a');
+    var img;
 
+    // Create thumbnail
+    if (settings.thumbnail.enabled) {
+        thumbnail.appendChild(this.createThumbnailElement(entry.media$thumbnail));
+        thumbnail.className = 'poststoc-thumbnail';
+    }
+
+    // Create published date
     published.appendChild(document.createTextNode(entry.published.$t));
     published.className = 'poststoc-published';
-
+
+    // Create update date
     updated.appendChild(document.createTextNode(entry.updated.$t));
     updated.className = 'poststoc-updated';
-
+
+    // Create title
     title.appendChild(document.createTextNode(entry.title.$t));
     title.href = entry.link[entry.link.length - 1].href;
     title.className = 'poststoc-title';
-
+
+    // Compose DOM element structure
+    if (settings.thumbnail.enabled) {
+        container.appendChild(thumbnail);
+    }
     container.appendChild(published);
     container.appendChild(updated);
     container.appendChild(title);
     container.className = 'poststoc-entry';
-    
+
     // Save to cache.
     this.rootElement = container;
 };
 
+
+
+garafu.blogger.toc.printer.Entry.prototype.createThumbnailElement = function (media) {
+    var img = document.createElement('img');
+
+    if (media) {
+        // Create image element.
+        img.src = media.url;
+        img.className = 'poststoc-thumbnail-image';
+    } else {
+        // Create no-image element.
+        img.src = this._settings.thumbnail.noImageURL;
+        img.className = 'poststoc-thumbnail-noimage';
+    }
+
+    return img;
+};
diff --git a/src/blogger/toc/printer/labelprinter.js b/src/blogger/toc/printer/labelprinter.js
@@ -40,14 +40,6 @@ garafu.blogger.toc.printer.LabelPrinter.prototype.execute = function (feed) {
     list = [];
     fragment = document.createDocumentFragment();
 
-//// Create category.
-//for (i = 0, length = categoryList.length; i < length; i++) {
-//    categoryItem = categoryList[i];
-//    category = new garafu.blogger.toc.printer.Category(settings, categoryItem);
-//    hash[category.getName()] = category;
-//    list[list.length] = category;
-//}
-
     // Create categry & entry.
     for (i = 0, length = entryList.length; i < length; i++) {
         entryItem = entryList[i];