Add new symbol function. close #4

demo/index_compile.html

@@ -10,25 +10,30 @@
   <h1>Compile Mode</h1>
   <div id="main">
     <script type="text/javascript">
-    var POSTSTOC_SETTINGS = {
-        blogURL: 'garafu.blogspot.jp',
-        sort: {
-            key: 'title',
-            order: 'asc'
-        },
-        printby: 'title',
-        thumbnail: {
-            enabled: true
-        },
-        published: {
-            enabled: true,
-            format: 'yyyy/MM/dd HH:mm:ss'
-        },
-        updated: {
-            enabled: true,
-            format: 'yyyy/MM/dd HH:mm:ss'
-        }
-    };
+        var POSTSTOC_SETTINGS = {
+            blogURL: 'garafu.blogspot.jp',
+            sort: {
+                key: 'published',
+                order: 'desc'
+            },
+            printby: 'title',
+            newPost: {
+                enabled: true,
+                term: 100,
+                target: 'updated'
+            },
+            thumbnail: {
+                enabled: false
+            },
+            published: {
+                enabled: false,
+                format: 'yyyy/MM/dd HH:mm:ss'
+            },
+            updated: {
+                enabled: false,
+                format: 'yyyy/MM/dd HH:mm:ss'
+            }
+        };
     </script>
     <script type="text/javascript" src="../build/blogger.toc.min.js"></script>
   </div>

demo/index_nocompile.html

@@ -10,25 +10,29 @@
   <h1>No Compile Mode</h1>
   <div id="main">
     <script type="text/javascript">
-    var POSTSTOC_SETTINGS = {
-        blogURL: 'garafu.blogspot.jp',
-        sort: {
-            key: 'title',
-            order: 'asc'
-        },
-        printby: 'title',
-        thumbnail: {
-            enabled: false
-        },
-        published: {
-            enabled: true,
-            format: 'yyyy/MM/dd HH:mm:ss'
-        },
-        updated: {
-            enabled: true,
-            format: 'yyyy/MM/dd HH:mm:ss'
-        }
-    };
+        var POSTSTOC_SETTINGS = {
+            blogURL: 'garafu.blogspot.jp',
+            sort: {
+                key: 'published',
+                order: 'desc'
+            },
+            printby: 'title',
+            newPost: {
+                enabled: true,
+                term: 30
+            },
+            thumbnail: {
+                enabled: false
+            },
+            published: {
+                enabled: false,
+                format: 'yyyy/MM/dd HH:mm:ss'
+            },
+            updated: {
+                enabled: false,
+                format: 'yyyy/MM/dd HH:mm:ss'
+            }
+        };
     </script>
     <script type="text/javascript" src="../lib/closure-library/closure/goog/base.js"></script>
     <script type="text/javascript" src="../src/deps.js"></script>

src/blogger/toc/contract.js

@@ -145,6 +145,12 @@ var POSTSTOC_SETTINGS = {
     orderby: '',    // [obsolete] Reccomend to use "sort" option.
     printby: '',
     locale: '',
+    newPost: {
+        enabled: false,
+        symbol: '',
+        term: 0,
+        target: ''
+    },
     thumbnail: {
         enabled: false,
         noImageURL: ''

src/blogger/toc/printer/entry.js

@@ -69,52 +69,56 @@ garafu.blogger.toc.printer.Entry.prototype.getRootElement = function () {
 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 datetime, text, img;
+    var container, published, updated, thumbnail, title, newsymbol, datetime, text, img;
+
+    // Create container DOM element.
+    container = document.createElement('span');
+    container.className = 'poststoc-entry';
 
     // Create thumbnail
     if (settings.thumbnail.enabled) {
+        thumbnail = document.createElement('span');
         thumbnail.appendChild(this.createThumbnailElement(entry.media$thumbnail));
         thumbnail.className = 'poststoc-thumbnail';
+        container.appendChild(thumbnail);
     }
 
     // Create published date
     if (settings.published.enabled) {
         datetime = garafu.date.W3CDTF.parse(entry.published.$t);
         text = settings.published.format.format(datetime);
+        published = document.createElement('span');
         published.appendChild(document.createTextNode(text));
         published.className = 'poststoc-published';
+        container.appendChild(published);
     }
 
     // Create update date
     if (settings.updated.enabled) {
+        updated = document.createElement('span');
         datetime = garafu.date.W3CDTF.parse(entry.updated.$t);
         text = settings.updated.format.format(datetime);
         updated.appendChild(document.createTextNode(text));
         updated.className = 'poststoc-updated';
+        container.appendChild(updated);
     }
 
     // Create title
+    title = document.createElement('a');
     title.appendChild(document.createTextNode(entry.title.$t));
     title.href = entry.link[entry.link.length - 1].href;
     title.className = 'poststoc-title';
+    container.appendChild(title);
 
-    // Compose DOM element structure
-    if (settings.thumbnail.enabled) {
-        container.appendChild(thumbnail);
+    // Create new symbol
+    if (settings.newPost.enabled &&
+        ((settings.newPost.target === 'published' && garafu.date.W3CDTF.parse(entry.published.$t) > settings.newPost.term) ||
+         (settings.newPost.target === 'updated' && garafu.date.W3CDTF.parse(entry.updated.$t) > settings.newPost.term))) {
+        newsymbol = document.createElement('span');
+        newsymbol.appendChild(document.createTextNode(settings.newPost.symbol));
+        newsymbol.className = 'poststoc-new';
+        container.appendChild(newsymbol);
     }
-    if (settings.published.enabled) {
-        container.appendChild(published);
-    }
-    if (settings.updated.enabled) {
-        container.appendChild(updated);
-    }
-    container.appendChild(title);
-    container.className = 'poststoc-entry';
 
     // Save to cache.
     this.rootElement = container;

src/blogger/toc/settings.js

@@ -35,6 +35,7 @@ garafu.blogger.toc.Settings = function () {
     // Set date time formatter.
     this.published.format = new garafu.i18n.DateTimeFormat(this.published.format, this.locale);
     this.updated.format = new garafu.i18n.DateTimeFormat(this.updated.format, this.locale);
+    this.newPost.term = new Date((new Date()).getTime() - this.newPost.term * 86400000)
 };
 
 
@@ -60,6 +61,12 @@ garafu.blogger.toc.Settings.prototype.createDefaultSettings = function () {
         },
         printby: 'label',
         locale: 'ja-jp',
+        newPost: {
+            enabled: false,
+            symbol: 'NEW !',
+            term: 30,
+            target: 'published'
+        },
         thumbnail: {
             enabled: false,
             noImageURL: 'http://garafu.github.io/blogger.toc/release/0.0.5/noimage.png'

stylesheets/border.css

@@ -0,0 +1,73 @@
+#main .poststoc
+{
+}
+#main .poststoc-category
+{
+}
+#main .poststoc-category-title
+{
+    background-color: #f5f3fb;
+    padding: 1em 0 1em 2em;
+    border-top: 1px solid #c0bfc4;
+    border-bottom: 1px solid #c0bfc4;
+    font-weight: bold;
+    font-size: 1.2em;
+}
+#main .poststoc-list
+{
+    list-style-type: none;
+    margin-bottom: 2em;
+}
+#main .poststoc-item
+{
+    padding: 1em 0.5em;
+    border-bottom: 1px solid #c0bfc4;
+}
+#main .poststoc-entry
+{
+}
+#main .poststoc-entry span
+{
+    margin: 0.2em 0.4em;
+}
+#main .poststoc-thumbnail
+{
+    display: inline-block;
+}
+#main .poststoc-thumbnail-image
+{
+    width: 32px;
+    height: 32px;
+    vertical-align: middle;
+}
+#main .poststoc-thumbnail-noimage
+{
+    display: inline-block;
+    width: 32px;
+    height: 32px;
+    vertical-align: middle;
+}
+#main .poststoc-published
+{
+}
+#main .poststoc-updated
+{
+}
+#main .poststoc-title
+{
+    margin-left: 4px;
+    text-decoration: none;
+    color: #2288bb;
+}
+#main .poststoc-title:hover
+{
+    text-decoration: underline;
+}
+#main .poststoc-title:visited
+{
+}
+#main .poststoc-new
+{
+    color: #eb2142;
+    font-weight: bold;
+}

stylesheets/simple.css

@@ -1,32 +1,26 @@
 #main .poststoc
 {
-    font-size: 12px;
-    font-family: 'Trebuchet MS', Trebuchet, Verdana, sans-serif;
 }
 #main .poststoc-category
 {
-    /*border-bottom: 1px solid #efefef;*/
 }
 #main .poststoc-category-title
 {
     padding: 0.5em 0 0.5em 0.8em;
-    /*border-bottom: 1px solid #ebebeb;*/
-    /*border-top: 1px solid #efefef;*/
-    /*box-shadow: 0 1px 1px #efefef;*/
 }
 #main .poststoc-list
 {
 }
 #main .poststoc-item
 {
-    margin: 2px 0;
+    margin: 3px 0;
 }
 #main .poststoc-entry
 {
 }
 #main .poststoc-entry span
 {
-    margin: 2px 4px;
+    margin: 3px 6px;
 }
 #main .poststoc-thumbnail
 {
@@ -64,3 +58,8 @@
 #main .poststoc-title:visited
 {
 }
+#main .poststoc-new
+{
+    color: #eb2142;
+    font-weight: bold;
+}