Implemented exporting symbol fonts;

Rendering symbols to an image always uses anti-aliassing (by downsampling from a large size);
Finished the spoiler export template;
Added <soft-line> tag to make line breaks use the line height for soft line breaks

git-svn-id: svn://svn.code.sf.net/p/magicseteditor/code/trunk@440 0fc631ac-6414-0410-93d0-97cfa31319b6

data/en.mse-locale/locale

@@ -409,6 +409,7 @@ label:
 button:
 	# Style panel
 	use for all cards:	Use for &all cards
+	use custom styling options: Options &specific to this card
 	
 	# Keywords panel
 	insert parameter:	Insert Parameter...
@@ -476,7 +477,8 @@ title:
 	# export
 	export images:		Export Images
 	export cancled:		Export Cancled
-	export html:		Export HTML
+	export html:		Export to HTML
+	save html:			Export to HTML
 
 ############################################################## Action (undo/redo) names
 action:

data/magic-spoiler.mse-export-template/export-template

@@ -18,10 +18,9 @@ option field:
 	choice: no
 	choice: just the image box, linked
 	choice: just the image box, inline
-	choice: full images, linked
-	choice: full images, preview
-	choice: full images, inline
-	choice: full images only
+	choice: full card image, linked
+	choice: full card image, preview
+	choice: full card image only
 	initial: full images, preview
 option field:
 	type: boolean
@@ -31,10 +30,11 @@ option field:
 	type: boolean
 	name: rarity symbols
 	description: Should rarity be shown using a symbol or as text?
-option field:
-	type: boolean
-	name: list keywords
-	description: Should the keywords be listed?
+#doesn't work yet:
+#option field:
+#	type: boolean
+#	name: list keywords
+#	description: Should the keywords be listed?
 #option field:
 #	type: boolean
 #	name: fancy scripts
@@ -83,28 +83,53 @@ option style:
 			sans-serif:  /magic-spoiler.mse-export-template/sans-serif.png
 
 script:
+	symbol_font      := "magic-mana-small"
+	symbol_font_size := 12
 	write_card := {
-		if contains(options.images, match:= "full images") then
+		if contains(options.images, match:"full card image") then
 			card_image_file := write_image_file(card,       file:"card{position(of:card,in:set)}.jpg")
-		else if contains(options.images, match:= "image box") then
+		else if contains(options.images, match:"image box") and
+		        card.image != "" then
 			card_image_file := write_image_file(card.image, file:"card{position(of:card,in:set)}.jpg")
 		else
 			card_image_file := ""
-		#if options.images == "full images only"
-		"<li class='card'>
-		     <a href='{card_image_file}'><img src='{card_image_file}' alt='' class='image'></a>
-		     <span class='name'         >{  to_html(card.name         ) }</span>
-		     <span class='casting-cost' >{  to_html(card.casting_cost, symbol_font: "mana-large", symbol_size: 12 ) }</span>
+		if options.images == "full card image, preview" then
+			card_image_preview := write_image_file(card, file:"card-preview{position(of:card,in:set)}.jpg", height: 100)
+		else
+			card_image_preview := card_image_file
+		if options.images == "full card image only" then
+		  "<li class='fullcard'><img src='{card_image_file}' alt=''></li>"
+		else
+		  "<li class='card'>
+		     {if options.images == "full card image, preview" then
+		         "<a href='{card_image_file}'><img src='{card_image_preview}' alt='' class='card-image'></a>
+		          <span class='name'    >{  to_html(card.name         ) }</span>"
+		      else if card_image_file != "" and contains(options.images, match:"linked") then
+		         "<span class='name'    ><a href='{card_image_file}'>{  to_html(card.name) }</a></span>"
+		      else
+		         "<span class='name'    >{  to_html(card.name         ) }</span>"
+		    }<span class='casting-cost' >{  symbols_to_html(card.casting_cost ) }</span>
+		     {if card_image_file != "" and contains(options.images, match:"inline") then
+		         "<img src='{card_image_preview}' alt='' class='image'>"
+		     }
 		     <span class='type'         >{  to_html(card.type         ) }</span>
 		     <span class='rarity'       >{
+		       code := if card.rarity == "" then "C"
+		               else if card.rarity == "basic land" then "L"
+		               else to_upper(card.rarity[0]) # L,C,U,R,S
 		       if options.rarity_symbols then
-		         "<img src='{ write_image_file(
-		                          name:  "set-symbol-{card.rarity[0] or else "C"}.png",
+		         "<img src='{ var := if card.rarity == "" then "common"
+		                             else if card.rarity == "basic land" then "common"
+		                             else card.rarity
+		                      write_image_file(
+		                          file:  "set-symbol-{var}.png",
 		                          width: 20,
-		                          image: symbol_variation(set.symbol, variation:card.rarity)
-		                    )}' alt='{card.rarity}'>"
-		       else
-		         to_upper(card.rarity[0] or else "C") # B,C,U,R,S
+		                          symbol_variation(
+		                            symbol:    set.symbol,
+		                            variation: var
+		                          )
+		                    )}' alt='{code}' title='{card.rarity}'>"
+		       else code
 		     }</span>
 		     <span class='rule-text'    >{  to_html(card.rule_text    ) }</span>
 		     <span class='flavor-text'  >{  to_html( remove_tag(tag: "<i-flavor>", card.flavor_text)  ) }</span>
@@ -125,11 +150,13 @@ script:
 		   "<h2>{title} ({count} {if count == 1 then "card" else "cards"})</h2>" +
 		   write_cards()
 	}
-	html := "<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN\' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
+	copy_file("blank.gif")
+	html := "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \"http://www.w3.org/TR/html4/strict.dtd\">
 	<html lang='en'>
 	 <head>
 	  <title>{ to_html(set.title) }</title>
 	  <link rel='stylesheet' type='text/css' href='{copy_file("style.css")}' />
+	  <script type='text/javascript' src='{copy_file("script.js")}'></script>
 	  <style type='text/css'>
 	   body \{
 	     background: {options.background_color};
@@ -140,7 +167,12 @@ script:
 	   \}
 	  </style>
 	 </head>
-	 <body>
+	 <body{if options.images == "full card image, preview" then " class='with-previews'"}>
+	  <img src='{ write_image_file(
+		            file:  "set-symbol.png",
+		            width: 200,
+		            symbol_variation(symbol: set.symbol, variation: "rare")
+		    )}' alt='' class='set-symbol'>
 	  <h1>{ to_html(set.title) }</h1>
 	  <div class='copyright'>{   to_html(set.copyright)   }</div>
 	  <div class='description'>{ to_html(set.description) }</div>
@@ -159,6 +191,9 @@ script:
 	    else
 	       write_cards(cards: set.cards)
 	  }
+	  <script><!--
+	  init();
+	  --></script>
 	 </body>
 	</html>"
 	write_text_file(html, file:"index.html")

data/magic-spoiler.mse-export-template/script.js

@@ -0,0 +1,70 @@
+var isIE = navigator.appVersion.indexOf("MSIE") != -1;
+
+var preview, preview_img;
+
+function show_preview(url) {
+	preview.style.display = "block";
+	preview_img.style.backgroundImage = "url("+this.href+")";
+	return false;
+}
+
+function hide_preview() {
+	preview.style.display = "none";
+}
+
+function fix_preview() {
+	var e = document.documentElement ? document.documentElement : document.body;
+	preview.style.top = e.scrollTop + "px";
+	preview.style.height = e.clientHeight;
+	preview.style.width  = e.clientWidth;
+}
+
+function nice_preview() {
+	// attach
+	var links = document.getElementsByTagName("A");
+	for (var i in links) {
+		if (/(.jpg|.png|.gif)$/.test(links[i])) {
+			links[i].onclick = show_preview;
+		}
+	}
+	// create divs
+	preview = document.createElement("div");
+	var bg  = document.createElement("div");
+	var img = document.createElement("div");
+	preview.id = "preview";
+	bg.id      = "preview-bg";
+	img.id     = "preview-img";
+	hide_preview();
+	preview.onclick = bg.onclick = img.onclick = hide_preview;
+	preview.appendChild(bg);
+	preview.appendChild(img);
+	document.body.appendChild(preview);
+	preview_img = img;
+	if (isIE) {
+		window.onscroll = fix_preview;
+		fix_preview();
+	}
+}
+
+function fix_png_alpha() {
+	if (!/MSIE (5\.5|6\.)/.test(navigator.userAgent)) return; // only in ie 5.5 and 6
+	var dir = document.getElementsByTagName("SCRIPT")[0].src.replace(/[^\/]*$/,''); // dir for blank image
+	var imgs = document.getElementsByTagName("IMG");
+	for (var i in imgs) {
+		var img = imgs[i];
+		if ((/\.png$/i).test(img.src)) {
+			if (img.currentStyle.width == 'auto' && img.currentStyle.height == 'auto') {
+				img.style.width  = img.offsetWidth  + 'px';
+				img.style.height = img.offsetHeight + 'px';
+			}
+			img.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+img.src+'",sizingMethod="scale")';
+			img.src = dir + "blank.gif";
+		}
+	}
+}
+
+function init() {
+	fix_png_alpha();
+	nice_preview();
+}
+

data/magic-spoiler.mse-export-template/style.css

@@ -1,9 +1,15 @@
+.set-symbol {
+	float:			left;
+	margin-right:	.5em;
+}
+
 ul {
 	list-style:		none;
 	margin:			0;
 	padding:		0;
 }
 .card {
+	clear:			left;
 	margin-top:		1em;
 }
 
@@ -21,6 +27,7 @@ ul {
 	display:		inline;
 	font-family:	"Magic Symbols", "Magic Symbols 2004";
 	font-size:		larger;
+	margin-left:	.1em;
 }
 
 .card .flavor-text {
@@ -32,16 +39,62 @@ ul {
 }
 
 
-.card {
+.with-previews .card {
 	margin-top:		1.1em;
 	min-height:		100px;
 	margin-left:	90px;
 	position:		relative;
 }
-.card .image {
+.card .card-image {
 	height:			100px;
 	position:		absolute;
 	left:			-85px;
 	top:			3px;
 	border:			none;
 }
+.card .image {
+	display:		block;
+	border:			none;
+}
+
+span.symbol {
+	display:		inline;
+	vertical-align:	middle;
+}
+
+.fullcard {
+	float:			left;
+}
+h2 {
+	clear:			both;
+}
+
+/* image preview */
+#preview-bg {
+	background-color: rgb(0,0,0);
+	width:			100%;
+	height:			100%;
+	cursor:			pointer;
+	position:		absolute;
+	opacity:		0.7;
+	-moz-opacity:	0.7;
+	filter:         alpha(opacity=70);
+}
+#preview-img {
+	background-position:	50% 50%;
+	background-repeat:		no-repeat;
+	width:			100%;
+	height:			100%;
+	cursor:			pointer;
+	position:		absolute;
+}
+#preview {
+	position:		fixed;
+	top:			0;
+	left:			0;
+	width:			100%;
+	height:			100%;
+}
+* html #preview {
+	position:		absolute;
+}