Merge branch 'mt' of truck/Sahli into master

list.sahli

@@ -14,100 +14,104 @@
 
 	"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",
-
 			"name": "Spaceflight",
-
 			"amiga": true,
-
 			"filetype": "plain",
-
 			"width": "80",
-
 			"author": "Urs",
-
 			"font": "pot-noodle",
-
 			"color": [
-
 				255,
-
 				128,
-
 				0,
-
 				255
-
 			],
-
 			"bg": [
-
 				0,
-
 				0,
-
 				0,
-
 				255
-
 			],
-
 			"line1": "Orange on Dark Grey",
-
 			"line2": "Test for plain files",
-
 			"text": ""
-
 		},
-
 		{
-
 			"file": "az0!-revi510n.txt",
-
 			"name": "Revision",
-
 			"amiga": true,
-
 			"filetype": "plain",
-
 			"width": "80",
-
 			"author": "Azzarro/Madwizards",
-
+			"font": "mosoul",
-			"font": "Propaz",
+		  "color": [
-
-			"color": [
-
 				0,
-
 				240,
-
 				0,
-
 				255
-
 			],
-
 			"bg": [
-
 				255,
-
 				0,
-
 				0,
-
 				255
-
 			],
-
 			"line1": "Azzaro Returns",
-
 			"line2": "Revision ansi/ascii compo 2013",
-
+			"text": "Color test as well as mOsOul test."
-			"text": "Color test as well as Microknight test."
-
 		},
 {
 			"file": "dS!-JUFV.txt",

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
 
@@ -49,6 +52,7 @@ class @Sahli
     buf = $('<span>')
     buf.css {'margin':'0 auto'}
     ptxt = $('<pre>')
+    ptxt.addClass 'plaintext'
     color = @calccolor(picdata.color)
     bgcolor = @calccolor(picdata.bg)
     pdiv.addClass 'scrolly'
@@ -58,9 +62,9 @@ class @Sahli
       'background-color': bgcolor
       'margin': 'auto'
       'display': 'inline-block'
-    ptxt.width picdata.width * 8
+    #ptxt.width picdata.width * 8
-    @origwidth = ptxt.width
+    #@origwidth = ptxt.width
-    pdiv.width ptxt.width
+    #pdiv.width ptxt.width
     pdiv.prepend buf.clone()
     pdiv.append ptxt
     pdiv.append buf
@@ -78,6 +82,72 @@ class @Sahli
     req.open 'GET', fname, true
     req.send null
 
+  @increaseFont = (node, increaseBy=5) ->
+    current_size = parseInt($(node).css("font-size"));
+    $(node).css("font-size", current_size + increaseBy);
+
+  @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()
+
+  @fullwidthplain = =>
+    if ($('pre').css("font-size") == "16px")
+      $('pre').css("font-size", "2.5vw");
+    else
+      $('pre').css("font-size", "16px");
+
+  @togglefullwidthmode = =>
+    if ($('pre').hasClass('plaintext'))
+      @fullwidthplain()
+    else
+      if $('div.scrolly').hasClass('image')
+        @bestfit()
+      else
+        @zoom()
+
+  @zoomin = =>
+    if ($('pre').hasClass('plaintext'))
+      @increaseFont($('pre'), 2)
+    else
+      @zoom(100);
+
+  @zoomout = =>
+    if ($('pre').hasClass('plaintext'))
+      @increaseFont($('pre'), -2)
+    else
+      @zoom(-100);
+
+  @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 +167,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 +207,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 +308,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
@@ -330,18 +401,18 @@ class @Sahli
           @setscroll()
         when @keycode 't'
           $('body').scrollTop 0
-          @zoom 0
+          @togglefullwidthmode()
         when @keycode 'b'
           $('body').scrollTop $('body').height()
         when @keycode 'a'
           $('body').stop()
           @scroll_direction = - @scroll_direction
         when @keycode 'z'
-          @zoom()
+          @togglefullwidthmode()
         when @keycode 'e'
-          @zoom 100
+          @zoomin()
         when @keycode 'r'
-          @zoom -100
+          @zoomout()
         when @keycode 'w'
           @changescrolldirection -1
         when @keycode 'x'
@@ -351,6 +422,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
@@ -365,6 +437,10 @@ class @Sahli
           @scroll_speed = 4
         when @keycode '5'
           @changespeed 5
+        when @keycode '8'
+          @increaseFont($('pre'), -2)
+        when @keycode '9'
+          @increaseFont($('pre'), 2)
         when 40 # down
           @moveline 1
         when 38 # up

sahli.css

@@ -10,6 +10,10 @@ body {
     border: none;
 }
 
+pre {
+    line-height: 100%;
+}
+
 #top {
     border: 1px solid green;
     color: green;
@@ -40,7 +44,7 @@ h6 {
 .help {
     position: fixed;
     top: 1em;
-    left: 33%;
+    left: 25%;
     text-align: left;
     background-color: lightgrey;
     border: outset darkgray;
@@ -49,7 +53,19 @@ h6 {
     border-radius: 8px;
     font-family: topaz1200,mOsOul, Consolas, monospace;
     opacity: .85;
-    width: 33%;
+    width: 50%;
+}
+
+.fullwidth {
+  width: 100%;
+}
+
+.bestfit {
+  padding: 0;
+  display: block;
+  margin: 0 auto;
+  max-width: 100%;
+  max-height: 100%;
 }
 
 .keylist {

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);
       }
@@ -55,6 +59,7 @@ l__________/__________|___|______l__________j_____j
         'margin': '0 auto'
       });
       ptxt = $('<pre>');
+      ptxt.addClass('plaintext');
       color = this.calccolor(picdata.color);
       bgcolor = this.calccolor(picdata.bg);
       pdiv.addClass('scrolly');
@@ -65,9 +70,6 @@ l__________/__________|___|______l__________j_____j
         'margin': 'auto',
         'display': 'inline-block'
       });
-      ptxt.width(picdata.width * 8);
-      this.origwidth = ptxt.width;
-      pdiv.width(ptxt.width);
       pdiv.prepend(buf.clone());
       pdiv.append(ptxt);
       pdiv.append(buf);
@@ -87,6 +89,91 @@ l__________/__________|___|______l__________j_____j
       return req.send(null);
     };
 
+    Sahli.increaseFont = function(node, increaseBy) {
+      var current_size;
+      if (increaseBy == null) {
+        increaseBy = 5;
+      }
+      current_size = parseInt($(node).css("font-size"));
+      return $(node).css("font-size", current_size + increaseBy);
+    };
+
+    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.fullwidthplain = function() {
+      if ($('pre').css("font-size") === "16px") {
+        return $('pre').css("font-size", "2.5vw");
+      } else {
+        return $('pre').css("font-size", "16px");
+      }
+    };
+
+    Sahli.togglefullwidthmode = function() {
+      if ($('pre').hasClass('plaintext')) {
+        return Sahli.fullwidthplain();
+      } else {
+        if ($('div.scrolly').hasClass('image')) {
+          return Sahli.bestfit();
+        } else {
+          return Sahli.zoom();
+        }
+      }
+    };
+
+    Sahli.zoomin = function() {
+      if ($('pre').hasClass('plaintext')) {
+        return Sahli.increaseFont($('pre'), 2);
+      } else {
+        return Sahli.zoom(100);
+      }
+    };
+
+    Sahli.zoomout = function() {
+      if ($('pre').hasClass('plaintext')) {
+        return Sahli.increaseFont($('pre'), -2);
+      } else {
+        return Sahli.zoom(-100);
+      }
+    };
+
+    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 +198,8 @@ l__________/__________|___|______l__________j_____j
           return pdiv.width(canvwidth);
         };
       })(this)), 30, {
-        'bits': '8'
+        'bits': '8',
+        "font": picdata.font
       });
     };
 
@@ -161,6 +249,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 +369,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 {
@@ -392,18 +481,18 @@ l__________/__________|___|______l__________j_____j
               return _this.setscroll();
             case _this.keycode('t'):
               $('body').scrollTop(0);
-              return _this.zoom(0);
+              return _this.togglefullwidthmode();
             case _this.keycode('b'):
               return $('body').scrollTop($('body').height());
             case _this.keycode('a'):
               $('body').stop();
               return _this.scroll_direction = -_this.scroll_direction;
             case _this.keycode('z'):
-              return _this.zoom();
+              return _this.togglefullwidthmode();
             case _this.keycode('e'):
-              return _this.zoom(100);
+              return _this.zoomin();
             case _this.keycode('r'):
-              return _this.zoom(-100);
+              return _this.zoomout();
             case _this.keycode('w'):
               return _this.changescrolldirection(-1);
             case _this.keycode('x'):
@@ -413,6 +502,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);
@@ -427,6 +517,10 @@ l__________/__________|___|______l__________j_____j
               return _this.scroll_speed = 4;
             case _this.keycode('5'):
               return _this.changespeed(5);
+            case _this.keycode('8'):
+              return _this.increaseFont($('pre'), -2);
+            case _this.keycode('9'):
+              return _this.increaseFont($('pre'), 2);
             case 40:
               return _this.moveline(1);
             case 38: