diff --git a/index.html b/index.html index e070433..233d273 100644 --- a/index.html +++ b/index.html @@ -47,6 +47,7 @@
  • B Jump to Bottom
  • 12345 Alter scrollspeed (fast -> slow)
  • Z Zoom full width
    • +
  • Q Best fit for images
  • ER Zoom in steps larger/smaller
  • C "panel" view toggle
  • UpDownPageupPagedown Move about by line/page
    • diff --git a/list.sahli b/list.sahli index e394280..5e6ceb5 100644 --- a/list.sahli +++ b/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", diff --git a/sahli.coffee b/sahli.coffee index 9b2bb39..0aa9357 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 @@ -78,6 +81,41 @@ class @Sahli req.open 'GET', fname, true req.send null + @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() + + @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 +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 = $('
    ' + 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 +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 diff --git a/sahli.css b/sahli.css index b0a213a..2429eae 100644 --- a/sahli.css +++ b/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; diff --git a/sahli.js b/sahli.js index a80b989..30a3e25 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); } @@ -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 = $('
    '); + 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.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 = $('
    ' + 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 +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); 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