Added generic picture support with best fit option

index.html

@@ -47,6 +47,7 @@
         <li><span class="key">B</span> Jump to Bottom</li>
         <li><span class="key">1</span><span class="key">2</span><span class="key">3</span><span class="key">4</span><span class="key">5</span> Alter scrollspeed (fast -> slow)</li>
         <li><span class="key">Z</span> Zoom full width</li>
+        <li><span class="key">Q</span> Best fit for images</li>
         <li><span class="key">E</span><span class="key">R</span> Zoom in steps larger/smaller</li>
         <li><span class="key">C</span> "panel" view toggle</li>
         <li><span class="key">Up</span><span class="key">Down</span><span class="key">Pageup</span><span class="key">Pagedown</span> Move about by line/page</li>

list.sahli

@@ -14,6 +14,56 @@
 
 	"filedata": [
 
+    {
+      "file": "AD - Green Beam.scaled.png",
+      "name": "Green Beam",
+      "amiga": false,
+      "filetype": "image",
+      "width": "1600",
+      "author": "AD",
+      "font": "Propaz",
+      "color": [
+       0,
+       0,
+       0,
+       255
+      ],
+      "bg": [
+       255,
+       255,
+       255,
+       255
+      ],
+      "line1": "",
+      "line2": "",
+      "text": ""
+    },
+
+    {
+      "file": "om-boss.png",
+      "name": "Green Beam",
+      "amiga": false,
+      "filetype": "image",
+      "width": "640",
+      "author": "AD",
+      "font": "Propaz",
+      "color": [
+       0,
+       0,
+       0,
+       255
+      ],
+      "bg": [
+       255,
+       255,
+       255,
+       255
+      ],
+      "line1": "",
+      "line2": "",
+      "text": ""
+    },
+
 		{
 
 			"file": "spaceflight.asc",

sahli.coffee

@@ -39,6 +39,8 @@ class @Sahli
         @loadhugeansi picdata, inserthere
       when 'tundra'
         @loadhugeansi picdata, inserthere
+      when 'image'
+        @loadpicture picdata, inserthere
       else
         @loadplain picdata, inserthere
 
@@ -78,6 +80,29 @@ class @Sahli
     req.open 'GET', fname, true
     req.send null
 
+  @loadpicture = (picdata, inserthere) ->
+    fname = @location + '/' + picdata.file
+    pdiv = $('<div>')
+    pdiv.addClass 'scrolly'
+    pdiv.width picdata.width
+    pdiv.css 'display', 'inline-block'
+    pimg = $('<img src="' + fname + '" />')
+    pimg.addClass 'fullwidth'
+    pdiv.append pimg
+    inserthere.after pdiv
+    $('h6').hide()
+    $('body').scrollTop 0
+    @origwidth = picdata.width
+
+  @bestfit = =>
+    if $('div.scrolly').hasClass('bestfit')
+      $('div.scrolly').removeClass 'bestfit'
+      $('div.scrolly').width @origwidth
+    else
+      $('h6').hide()
+      $('div.scrolly').addClass 'bestfit'
+      $('div.scrolly').width("");
+
   @loadhugeansi = (picdata, inserthere) ->
     fname = @location + '/' + picdata.file
     pdiv = $('<div>')
@@ -97,7 +122,7 @@ class @Sahli
       @origwidth = canvwidth
       @origheight = calcheight
       pdiv.width canvwidth
-    ), 30, 'bits': '8'
+    ), 30, {'bits': '8', "font": picdata.font}
 
   @loadavatar = (picdata, inserthere) ->
     console.log 'avatar', picdata, inserthere
@@ -137,6 +162,7 @@ class @Sahli
     filedata = @filedata
     filedata[i].pic = $('<h6>' + filedata[i].file + '</h6>')
     viewbox.append filedata[i].pic
+    $('h6').show()
     @loadpic filedata[i], filedata[i].pic
     @currentpic += 1
     if @currentpic > filedata.length - 1
@@ -237,7 +263,7 @@ class @Sahli
       zoomee.width newwidth
       $('canvas').width newwidth
     else
-      if zoomee.width() != @origwidth
+      if parseInt( zoomee.width(), 10 ) != parseInt( @origwidth, 10)
         zoomee.width @origwidth
         $('canvas').width '100%'
       else
@@ -342,6 +368,8 @@ class @Sahli
           @zoom 100
         when @keycode 'r'
           @zoom -100
+        when @keycode 'q'
+          @bestfit()
         when @keycode 'w'
           @changescrolldirection -1
         when @keycode 'x'
@@ -351,6 +379,7 @@ class @Sahli
         when @keycode 'i'
           $('div.infobox').toggle()
         when @keycode 'v'
+          $('h6').show()
           $('h6').height( (window.innerHeight - $('.scrolly').height()) / 2 )
         when @keycode '1'
           @changespeed 1

sahli.css

@@ -52,6 +52,18 @@ h6 {
     width: 33%;
 }
 
+.fullwidth {
+  width: 100%;
+}
+
+.bestfit {
+  padding: 0;
+  display: block;
+  margin: 0 auto;
+  max-width: 100%;
+  max-height: 100%;
+}
+
 .keylist {
     border: inset lightgrey;
     background-color: white;

sahli.js

@@ -1,4 +1,4 @@
-// Generated by CoffeeScript 1.11.0
+// Generated by CoffeeScript 1.9.3
 
 /*
   .___________________________________,       ___
@@ -40,6 +40,8 @@ l__________/__________|___|______l__________j_____j
           return this.loadhugeansi(picdata, inserthere);
         case 'tundra':
           return this.loadhugeansi(picdata, inserthere);
+        case 'image':
+          return this.loadpicture(picdata, inserthere);
         default:
           return this.loadplain(picdata, inserthere);
       }
@@ -87,6 +89,33 @@ l__________/__________|___|______l__________j_____j
       return req.send(null);
     };
 
+    Sahli.loadpicture = function(picdata, inserthere) {
+      var fname, pdiv, pimg;
+      fname = this.location + '/' + picdata.file;
+      pdiv = $('<div>');
+      pdiv.addClass('scrolly');
+      pdiv.width(picdata.width);
+      pdiv.css('display', 'inline-block');
+      pimg = $('<img src="' + fname + '" />');
+      pimg.addClass('fullwidth');
+      pdiv.append(pimg);
+      inserthere.after(pdiv);
+      $('h6').hide();
+      $('body').scrollTop(0);
+      return this.origwidth = picdata.width;
+    };
+
+    Sahli.bestfit = function() {
+      if ($('div.scrolly').hasClass('bestfit')) {
+        $('div.scrolly').removeClass('bestfit');
+        return $('div.scrolly').width(Sahli.origwidth);
+      } else {
+        $('h6').hide();
+        $('div.scrolly').addClass('bestfit');
+        return $('div.scrolly').width("");
+      }
+    };
+
     Sahli.loadhugeansi = function(picdata, inserthere) {
       var calcheight, canvwidth, fname, pdiv;
       fname = this.location + '/' + picdata.file;
@@ -111,7 +140,8 @@ l__________/__________|___|______l__________j_____j
           return pdiv.width(canvwidth);
         };
       })(this)), 30, {
-        'bits': '8'
+        'bits': '8',
+        "font": picdata.font
       });
     };
 
@@ -161,6 +191,7 @@ l__________/__________|___|______l__________j_____j
       filedata = Sahli.filedata;
       filedata[i].pic = $('<h6>' + filedata[i].file + '</h6>');
       viewbox.append(filedata[i].pic);
+      $('h6').show();
       Sahli.loadpic(filedata[i], filedata[i].pic);
       Sahli.currentpic += 1;
       if (Sahli.currentpic > filedata.length - 1) {
@@ -280,7 +311,7 @@ l__________/__________|___|______l__________j_____j
         zoomee.width(newwidth);
         return $('canvas').width(newwidth);
       } else {
-        if (zoomee.width() !== this.origwidth) {
+        if (parseInt(zoomee.width(), 10) !== parseInt(this.origwidth, 10)) {
           zoomee.width(this.origwidth);
           return $('canvas').width('100%');
         } else {
@@ -404,6 +435,8 @@ l__________/__________|___|______l__________j_____j
               return _this.zoom(100);
             case _this.keycode('r'):
               return _this.zoom(-100);
+            case _this.keycode('q'):
+              return _this.bestfit();
             case _this.keycode('w'):
               return _this.changescrolldirection(-1);
             case _this.keycode('x'):
@@ -413,6 +446,7 @@ l__________/__________|___|______l__________j_____j
             case _this.keycode('i'):
               return $('div.infobox').toggle();
             case _this.keycode('v'):
+              $('h6').show();
               return $('h6').height((window.innerHeight - $('.scrolly').height()) / 2);
             case _this.keycode('1'):
               return _this.changespeed(1);