Add Image Size.

Conflicts:
	CHANGELOG.md
	src/General/Build.coffee
	src/General/Config.coffee
	src/General/Index.coffee
	src/General/css/style.css

src/General/Build.coffee

@@ -316,9 +316,6 @@ Build =
       imgClass = 'deleted-file'
     else if thread.OP.file
       src = thread.OP.file.thumbURL
-      max = Math.max data.tn_w, data.tn_h
-      imgWidth  = data.tn_w * 150 / max
-      imgHeight = data.tn_h * 150 / max
     else
       src = "#{staticPath}nofile.png"
       imgClass = 'no-file'
@@ -326,7 +323,7 @@ Build =
     thumb = if imgClass
       <%= html('<img src="${src}" class="catalog-thumb ${imgClass}">') %>
     else
-      <%= html('<img src="${src}" class="catalog-thumb" width="${imgWidth}" height="${imgHeight}">') %>
+      <%= html('<img src="${src}" class="catalog-thumb" data-width="${data.tn_w}" data-height="${data.tn_h}">') %>
 
     postCount = data.replies + 1
     fileCount = data.images  + !!data.ext

src/General/Config.coffee

@@ -571,6 +571,7 @@ http://iqdb.org/?url=%TURL
     'Index Mode': 'paged'
     'Previous Index Mode': 'paged'
     'Index Sort': 'bump'
+    'Index Size': 'small'
     'Show Replies': true
     'Anchor Hidden Threads': true
     'Refreshed Navigation': false

src/General/Index.coffee

@@ -63,6 +63,7 @@ Index =
 
     $.addClass doc, 'index-loading', "#{Conf['Index Mode'].replace /\ /g, '-'}-mode"
     @root     = $.el 'div', className: 'board'
+    @cb.size()
     @pagelist = $.el 'div', className: 'pagelist'
     $.extend @pagelist, <%= importHTML('Features/Index-pagelist') %>
     $('.cataloglink a', @pagelist).href = CatalogLinks.catalog()
@@ -73,6 +74,7 @@ Index =
     @searchInput = $ '#index-search', @navLinks
     @hideLabel   = $ '#hidden-label', @navLinks
     @selectSort  = $ '#index-sort',   @navLinks
+    @selectSize  = $ '#index-size',   @navLinks
     @currentPage = @getCurrentPage()
     $.on window, 'popstate', @cb.popstate
 
@@ -82,9 +84,11 @@ Index =
     $.on $('#index-search-clear', @navLinks), 'click', @clearSearch
     $.on $('#hidden-toggle a',    @navLinks), 'click', @cb.toggleHiddenThreads
     $.on $('.returnlink a',       @navLinks), 'click', @cb.frontPage unless Conf['Use 4chan X Catalog']
-    @selectSort.value = Conf[@selectSort.name]
-    $.on @selectSort, 'change', $.cb.value
+    for select in [@selectSort, @selectSize]
+      select.value = Conf[select.name]
+      $.on select, 'change', $.cb.value
     $.on @selectSort, 'change', @cb.sort
+    $.on @selectSize, 'change', @cb.size
 
     @update()
     $.asap (-> $('.board > .thread > .postContainer', doc) or d.readyState isnt 'loading'), ->
@@ -200,6 +204,17 @@ Index =
     sort: ->
       Index.sort()
       Index.buildIndex()
+    size: (e) ->
+      if Conf['Index Mode'] isnt 'catalog'
+        $.rmClass Index.root, 'catalog-small'
+        $.rmClass Index.root, 'catalog-large'
+      else if Conf['Index Size'] is 'small'
+        $.addClass Index.root, 'catalog-small'
+        $.rmClass Index.root,  'catalog-large'
+      else
+        $.addClass Index.root, 'catalog-large'
+        $.rmClass Index.root,  'catalog-small'
+      Index.buildIndex() if e
     replies: ->
       Index.buildThreads()
       Index.sort()
@@ -287,6 +302,7 @@ Index =
   applyMode: ->
     for mode in ['paged', 'infinite', 'all pages', 'catalog']
       $[if mode is Conf['Index Mode'] then 'addClass' else 'rmClass'] doc, "#{mode.replace /\ /g, '-'}-mode"
+    Index.cb.size()
     Index.showHiddenThreads = false
     $('#hidden-toggle a', Index.navLinks).textContent = 'Show'
 
@@ -501,6 +517,18 @@ Index =
     Main.callbackNodes CatalogThread, catalogThreads
     threads.map (thread) -> thread.catalogView.nodes.root
 
+  sizeCatalogViews: (nodes) ->
+    # XXX When browsers support CSS3 attr(), use it instead.
+    size = if Conf['Index Size'] is 'small' then 150 else 250
+    for node in nodes
+      thumb = $ '.catalog-thumb', node
+      {width, height} = thumb.dataset
+      continue unless width
+      ratio = size / Math.max width, height
+      thumb.style.width  = width  * ratio + 'px'
+      thumb.style.height = height * ratio + 'px'
+    return
+
   sort: ->
     {liveThreadIDs, liveThreadData} = Index
     sortedThreadIDs = {
@@ -541,6 +569,7 @@ Index =
         nodes = Index.sortedNodes
       when 'catalog'
         nodes = Index.buildCatalogViews()
+        Index.sizeCatalogViews nodes
       else
         nodes = Index.buildSinglePage Index.getCurrentPage()
     $.rmAll Index.root

src/General/css/style.css

@@ -516,7 +516,7 @@ hr + div.center:not(.ad-cnt):not(.topad):not(.middlead):not(.bottomad) {
 #index-search:not([data-searching]) + #index-search-clear {
   display: none;
 }
-#index-sort {
+#index-sort, #index-size {
   float: right;
 }
 .summary {
@@ -535,9 +535,7 @@ hr + div.center:not(.ad-cnt):not(.topad):not(.middlead):not(.bottomad) {
   flex-direction: column;
   -webkit-align-items: center;
   align-items: center;
-  width: 165px;
   margin: 0 2px 5px;
-  max-height: 320px;
   word-wrap: break-word;
   vertical-align: top;
 }
@@ -546,16 +544,18 @@ hr + div.center:not(.ad-cnt):not(.topad):not(.middlead):not(.bottomad) {
   -webkit-flex-shrink: 0;
   position: relative;
 }
+.catalog-small .catalog-thread {
+  width: 165px;
+  max-height: 320px;
+}
+.catalog-large .catalog-thread {
+  width: 270px;
+  max-height: 410px;
+}
 .catalog-thumb {
-  max-width: 150px;
-  max-height: 150px;
   border-radius: 2px;
   box-shadow: 0 0 5px rgba(0, 0, 0, .25);
 }
-.catalog-thumb:not(.deleted-file):not(.no-file) {
-  min-width: 30px;
-  min-height: 30px;
-}
 .catalog-thumb.spoiler-file {
   width: 100px;
   height: 100px;

src/General/html/Features/Index-navlinks.html

@@ -13,3 +13,8 @@
   <option value="replycount">Reply count</option>
   <option value="filecount">File count</option>
 </select>
+<select id="index-size" name="Index Size">
+  <option disabled>Image Size</option>
+  <option value="small">Small</option>
+  <option value="large">Large</option>
+</select>