diff --git a/list.sahli b/list.sahli index e394280..0a19dfc 100644 --- a/list.sahli +++ b/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": "Propaz", - - "color": [ - + "font": "mosoul", + "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 Microknight test." - + "text": "Color test as well as mOsOul test." }, { "file": "dS!-JUFV.txt", diff --git a/sahli.coffee b/sahli.coffee index 9b2bb39..34af56e 100644 --- a/sahli.coffee +++ b/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 = $('') buf.css {'margin':'0 auto'} ptxt = $('
')
+    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
-    @origwidth = ptxt.width
-    pdiv.width ptxt.width
+    #ptxt.width picdata.width * 8
+    #@origwidth = 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 = $('
') + pdiv.addClass 'scrolly' + pdiv.addClass 'image' + pdiv.width window.innerWidth + pdiv.css 'display', 'inline-block' + pimg = $('') + 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 = $('
') @@ -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 = $('
' + filedata[i].file + '
') 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 diff --git a/sahli.css b/sahli.css index b0a213a..a47845b 100644 --- a/sahli.css +++ b/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 { diff --git a/sahli.js b/sahli.js index a80b989..8168d21 100644 --- a/sahli.js +++ b/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 = $('
');
+      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 = $('
'); + pdiv.addClass('scrolly'); + pdiv.addClass('image'); + pdiv.width(window.innerWidth); + pdiv.css('display', 'inline-block'); + pimg = $(''); + 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 = $('
' + filedata[i].file + '
'); 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: diff --git a/testshow/AD - Green Beam.scaled.png b/testshow/AD - Green Beam.scaled.png new file mode 100644 index 0000000..fbecb25 Binary files /dev/null and b/testshow/AD - Green Beam.scaled.png differ diff --git a/testshow/om-boss.png b/testshow/om-boss.png new file mode 100644 index 0000000..e3abd45 Binary files /dev/null and b/testshow/om-boss.png differ