Merge pull request #8 from m0qui/master

Pre-revision merge

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

@@ -14,6 +14,7 @@ l__________/__________|___|______l__________j_____j
 
 class @Sahli
   constructor: () ->
+    $('body').css('cursor', 'none');
     # I don't think we actually are going to have one, as we don't
     # need instance variables (things used outside the function)
 
@@ -39,6 +40,8 @@ class @Sahli
         @loadhugeansi picdata, inserthere
       when 'tundra'
         @loadhugeansi picdata, inserthere
+      when 'image'
+        @loadpicture picdata, inserthere
       else
         @loadplain picdata, inserthere
 
@@ -78,6 +81,41 @@ class @Sahli
     req.open 'GET', fname, true
     req.send null
 
+  @loadpicture = (picdata, inserthere) ->
+    fname = @location + '/' + picdata.file
+    pdiv = $('<div>')
+    pdiv.addClass 'scrolly'
+    pdiv.addClass 'image'
+    pdiv.width window.innerWidth
+    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
+    @origheight = picdata.height
+    @bestfit()
+
+  @bestfit = =>
+    if $('div.scrolly').hasClass('image')
+      if $('div.scrolly').hasClass('bestfitMode')
+        $('div.scrolly').removeClass 'bestfitMode'
+        $('div.scrolly').addClass 'fullwidthMode'
+        $('div.scrolly').width window.innerWidth
+        $('div.scrolly').height("")
+        $('img.bestfit').addClass 'fullwidth'
+        $('img.bestfit').removeClass 'bestfit'
+      else
+        $('h6').hide()
+        $('div.scrolly').addClass 'bestfitMode'
+        $('div.scrolly').removeClass 'fullwidthMode'
+        $('div.scrolly').width window.innerWidth
+        $('div.scrolly').height window.innerHeight
+        $('img.fullwidth').addClass 'bestfit'
+        $('img.fullwidth').removeClass 'fullwidth'
+
   @loadhugeansi = (picdata, inserthere) ->
     fname = @location + '/' + picdata.file
     pdiv = $('<div>')
@@ -97,7 +135,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 +175,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 +276,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 +381,8 @@ class @Sahli
           @zoom 100
         when @keycode 'r'
           @zoom -100
+        when @keycode 'q'
+          @bestfit()
         when @keycode 'w'
           @changescrolldirection -1
         when @keycode 'x'
@@ -351,6 +392,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
 
 /*
   .___________________________________,       ___
@@ -16,7 +16,9 @@ l__________/__________|___|______l__________j_____j
 
 (function() {
   this.Sahli = (function() {
-    function Sahli() {}
+    function Sahli() {
+      $('body').css('cursor', 'none');
+    }
 
     Sahli.loadpic = function(picdata, inserthere) {
       switch (picdata.filetype) {
@@ -40,6 +42,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 +91,46 @@ 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.addClass('image');
+      pdiv.width(window.innerWidth);
+      pdiv.css('display', 'inline-block');
+      pimg = $('<img src="' + fname + '" />');
+      pimg.addClass('fullwidth');
+      pdiv.append(pimg);
+      inserthere.after(pdiv);
+      $('h6').hide();
+      $('body').scrollTop(0);
+      this.origwidth = picdata.width;
+      this.origheight = picdata.height;
+      return this.bestfit();
+    };
+
+    Sahli.bestfit = function() {
+      if ($('div.scrolly').hasClass('image')) {
+        if ($('div.scrolly').hasClass('bestfitMode')) {
+          $('div.scrolly').removeClass('bestfitMode');
+          $('div.scrolly').addClass('fullwidthMode');
+          $('div.scrolly').width(window.innerWidth);
+          $('div.scrolly').height("");
+          $('img.bestfit').addClass('fullwidth');
+          return $('img.bestfit').removeClass('bestfit');
+        } else {
+          $('h6').hide();
+          $('div.scrolly').addClass('bestfitMode');
+          $('div.scrolly').removeClass('fullwidthMode');
+          $('div.scrolly').width(window.innerWidth);
+          $('div.scrolly').height(window.innerHeight);
+          $('img.fullwidth').addClass('bestfit');
+          return $('img.fullwidth').removeClass('fullwidth');
+        }
+      }
+    };
+
     Sahli.loadhugeansi = function(picdata, inserthere) {
       var calcheight, canvwidth, fname, pdiv;
       fname = this.location + '/' + picdata.file;
@@ -111,7 +155,8 @@ l__________/__________|___|______l__________j_____j
           return pdiv.width(canvwidth);
         };
       })(this)), 30, {
-        'bits': '8'
+        'bits': '8',
+        "font": picdata.font
       });
     };
 
@@ -161,6 +206,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 +326,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 +450,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 +461,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);