added html loader + some style changes...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

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 {

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,

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(){
 

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': {

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){