From ce9f8aba48b3a6ffdeac8468e52d6c488c690ca9 Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Sat, 19 Apr 2014 21:38:10 +0400 Subject: [PATCH] added html loader + some style changes... Signed-off-by: Alex A. Naanou --- css/magazine-themes.css | 7 ++++--- css/magazine.css | 8 +++++--- index.html | 35 +++++++++++++++++++++++++++++++---- keybindings.js | 6 +++--- magazine.js | 20 +++++++++++++++++++- 5 files changed, 62 insertions(+), 14 deletions(-) diff --git a/css/magazine-themes.css b/css/magazine-themes.css index b093a1f..29f6be4 100755 --- a/css/magazine-themes.css +++ b/css/magazine-themes.css @@ -21,7 +21,7 @@ } .magazine { - box-shadow: 10px 10px 50px 10px #444; + box-shadow: 10px 10px 50px 10px rgba(0,0,0,0.2); } @@ -147,7 +147,7 @@ color: #eee; } .light-viewer .magazine { - box-shadow: 10px 10px 50px 10px #ddd; + box-shadow: 10px 10px 50px 10px rgba(0,0,0,0.2); } .light-viewer .top-toolbar, @@ -228,7 +228,7 @@ } .dark-viewer .magazine { - box-shadow: 10px 10px 50px 10px #000; + box-shadow: 10px 10px 50px 10px rgba(0,0,0,0.9); } .dark-viewer .magazine:before, @@ -398,6 +398,7 @@ color: #e8e8e8; } +.shadowless.viewer, .shadowless.viewer .magazine, .shadowless.viewer .top-toolbar, .shadowless.viewer .bottom-toolbar { diff --git a/css/magazine.css b/css/magazine.css index 3a717cb..181a0fa 100755 --- a/css/magazine.css +++ b/css/magazine.css @@ -151,6 +151,8 @@ body { background: gray; + box-shadow: 0px 0px 300px 0px rgba(0,0,0,0.1) inset; + -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; @@ -739,7 +741,7 @@ div.page-number-text { cursor: hand; - box-shadow: 20px -20px 50px 0px #000; + box-shadow: 20px -20px 50px 0px rgba(0,0,0,0.8); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); @@ -763,11 +765,11 @@ div.page-number-text { */ .page.caption-top-arrow, .page.caption-bottom-arrow { - box-shadow: 35px 0px 100px 0px #000; + box-shadow: 35px 0px 100px 0px rgba(0,0,0,0.8); } .page.caption-top-arrow:before, .page.caption-bottom-arrow:before { - box-shadow: 20px -20px 30px 10px #000; + box-shadow: 20px -20px 30px 10px rgba(0,0,0,0.8); } /* XXX changing shdows makes things a bit gittery on devices... .current.page.caption-top-arrow, diff --git a/index.html b/index.html index 1bfff25..b01655d 100755 --- a/index.html +++ b/index.html @@ -203,6 +203,24 @@ function str2ab(str) { */ +function loadMagazineDOM(data){ + var data = $(data) + // get the .magazine element... + data = data.hasClass('magazine') ? data.children() : data.find('.magazine').children() + + var mag = $('.magazine') + mag.children().remove() + mag.append(data) + + runMagazineTemplates() + togglePageView(togglePageView('?')) + MagazineScroller.refresh() + + focusPage(0, null, 0) + + return mag +} + // upload... function handleFileSelect(evt) { var files = evt.target.files; // FileList object @@ -227,11 +245,18 @@ function handleFileSelect(evt) { var zip = new JSZip(raw_data) console.log('zip loaded...') var json = zip.file('magazine.json').data + loadJSON($.parseJSON(json), true) + + } else if(/html|htm/.test(type)){ + console.log('html loaded...') + loadMagazineDOM(raw_data) + } else { var json = raw_data + loadJSON($.parseJSON(json), true) } - loadJSON($.parseJSON(json), true) + console.log('done.') }; })(f); @@ -239,13 +264,17 @@ function handleFileSelect(evt) { // Read in the image file as a data URL. if(type == 'zip'){ reader.readAsArrayBuffer(f) + + } else if(/html|htm/.test(type)){ + reader.readAsText(f) + } else { reader.readAsBinaryString(f) } - //reader.readAsText(f) } } + // XXX these stubs override the magazine API and use iScroll... // XXX need to account for page align... @@ -542,8 +571,6 @@ $(function(){ //setupEditor() - $('.dpi').text(getDPI()) - // hide the splash... setTimeout(function(){ diff --git a/keybindings.js b/keybindings.js index 210d306..d5281b0 100755 --- a/keybindings.js +++ b/keybindings.js @@ -57,7 +57,7 @@ var KEYBOARD_CONFIG = { } else { setMagazineScale(getPageTargetScale(PAGES_IN_RIBBON)) } - setCurrentPage(n) + focusPage(n) }, Esc: '0', @@ -66,14 +66,14 @@ var KEYBOARD_CONFIG = { setMagazineScale(Math.min( getMagazineScale() * 1.2, getPageTargetScale(1))) - setCurrentPage(n) + focusPage(n) }, '-': function(){ var n = getPageNumber() setMagazineScale(Math.max( getMagazineScale() * 0.8, getPageTargetScale(PAGES_IN_RIBBON*2))) - setCurrentPage(n) + focusPage(n) }, 'O': { diff --git a/magazine.js b/magazine.js index 1d59aaf..585144f 100755 --- a/magazine.js +++ b/magazine.js @@ -305,7 +305,7 @@ function setMagazineScale(scale){ // center-align ribbon view pages... var align = togglePageView('?') == 'off' ? 'center' : null - var left = getMagazineOffset(cur, scale, align) + //var left = getMagazineOffset(cur, scale, align) //setElementTransform(mag, left, scale) MagazineScroller.zoom(scale) @@ -510,6 +510,7 @@ function fitPagesTo(mode, cur, time, scale){ var viewer = $('.viewer') var W = viewer.width() var H = viewer.height() + // XXX is this a good way to sample content size??? var content = $('.content') var w = content.width() @@ -576,6 +577,7 @@ function fitPagesTo(mode, cur, time, scale){ $(NON_RESIZABLE_PAGES) .each(function(_, e){ e.style.width = 'auto' + e.style.height = 'auto' }) MagazineScroller.scrollBy(offset*scale, 0, time) @@ -1623,6 +1625,22 @@ function createCoverPage(data){ // NOTE: for these to be self-aplicable they must only replace the content // of the matched elements and not touch the element itself. var MagazineTemplates = { + '.image-fit': function(elem){ + var w = $('.content').width() + var h = $('.content').height() + + elem.each(function(_, e){ + e = $(e) + e.width() == 0 ? e.width(w) : 0 + e.height() == 0 ? e.height(h) : 0 + }) + }, + + + // set dpi value... + '.dpi': function(elem){ + elem.text(getDPI()) + }, // setup titles... '.magazine-title-text': function(elem){