Merge pull request #59 from crobi/pr/58

Adding support for pictures

generator/css/cards.css

@@ -23,7 +23,7 @@
 }
 
 .card-back {
-    background-color: white;
+/*     background-color: white; */
     border-radius: 4mm;
     border-color: inherit;
     margin: 3mm;
@@ -129,13 +129,17 @@
 }
 .card-subtitle {
     height: 18px;
-    line-height: 18px;
     margin-bottom: 0.0em;
+    line-height: 18px;
     font-family: 'Noto Sans', 'Myriad Pro', Calibri, Helvetica, Arial, sans-serif;
     font-size: 10pt;
     font-style: italic;
 }
-
+.card-picture {
+    height: 80px;
+    line-height: 18px;
+    margin-bottom: 0.0em;
+}
 .card-property-line {
     text-indent: -1em;
     margin-left: 1em;

generator/generate.html

@@ -303,6 +303,12 @@
                             </div>
                         </div>
                     </div>
+                    <div class="form-group">
+                        <label for="card-background" class="col-sm-2 control-label">Background</label>
+                        <div class="col-sm-10">
+                            <input type="text" id="card-background" class="form-control" placeholder="Background image URL" data-property="background_image">
+                        </div>
+                    </div>
                     <div class="form-group">
                         <label for="card-contents" class="col-sm-2 control-label">Contents</label>
                         <div class="col-sm-10">

generator/js/cards.js

@@ -108,6 +108,12 @@ function card_element_subtitle(params, card_data, options) {
     return '<div class="card-element card-subtitle">' + subtitle + '</div>';
 }
 
+function card_element_picture(params, card_data, options) {
+    var url = params[0] || "";
+	var height = params[1] || "";
+    return '<div class="card-element card-picture" style ="background-image: url(&quot;' + url + '&quot;); background-size: contain; background-position: center;background-repeat: no-repeat; height:' + height + 'px"></div>';
+}
+
 function card_element_ruler(params, card_data, options) {
     var color = card_data_color_front(card_data, options);
     var fill = 'fill="' + color + '"';
@@ -144,6 +150,13 @@ function card_element_property(params, card_data, options) {
     result += '<div class="card-element card-property-line">';
     result += '   <h4 class="card-property-name">' + params[0] + '</h4>';
     result += '   <p class="card-p card-property-text">' + params[1] + '</p>';
+	if (params[2])
+	{
+		result += '   <div style="float:right">';
+		result += '       <h4 class="card-property-name">' + params[2] + '</h4>';
+		result += '       <p class="card-p card-property-text">' + params[3] + '</p>';
+		result += '   </div>';
+	}
     result += '</div>';
     return result;
 }
@@ -241,7 +254,8 @@ var card_element_generators = {
     bullet: card_element_bullet,
     fill: card_element_fill,
     section: card_element_section,
-    disabled: card_element_empty
+    disabled: card_element_empty,
+	picture: card_element_picture
 };
 
 // ============================================================================
@@ -299,15 +313,27 @@ function card_generate_front(data, options) {
 function card_generate_back(data, options) {
     var color = card_data_color_back(data, options)
     var style_color = card_generate_color_style(color, options);
-    var style_gradient = card_generate_color_gradient_style(color, options);
-    var icon = card_data_icon_back(data, options);
+	var url = data.background_image;
+	var background_style = "";
+	if (url)
+	{
+		background_style = 'style = "background-image: url(&quot;' + url + '&quot;); background-size: contain; background-position: center; background-repeat: no-repeat;"'
+	}
+	else 
+	{
+		background_style = card_generate_color_gradient_style(color, options);
+    }
+	var icon = card_data_icon_back(data, options);
 
     var result = "";
     result += '<div class="card card-size-' + options.card_size + '" ' + style_color + '>';
-    result += '  <div class="card-back" ' + style_gradient + '>';
-    result += '    <div class="card-back-inner">';
-    result += '      <div class="card-back-icon icon-' + icon + '" ' + style_color + '></div>';
-    result += '    </div>';
+    result += '  <div class="card-back" ' + background_style + '>';
+	if (!url)
+	{
+		result += '    <div class="card-back-inner">';
+		result += '      <div class="card-back-icon icon-' + icon + '" ' + style_color + '></div>';
+		result += '    </div>';
+	}
     result += '  </div>';
     result += '</div>';
 

generator/js/colors.js

@@ -154,5 +154,145 @@ var card_colors = {
     "darkblue": "darkblue",
     "royalblue": "royalblue",
     "darkgreen": "darkgreen",
-    "#666633": "#666633"
+    "DimGray": "DimGray",
+    "Black": "Black",
+    "DarkGoldenrod": "DarkGoldenrod",
+    "SaddleBrown": "SaddleBrown",
+    "IndianRed": "IndianRed",
+    "Maroon": "Maroon",
+    "Indigo": "Indigo",
+    "DarkBlue": "DarkBlue",
+    "RoyalBlue": "RoyalBlue",
+    "DarkGreen": "DarkGreen",
+    "#666633": "#666633",
+    "Navy": "Navy",          
+    "MediumBlue": "MediumBlue",           
+    "Blue": "Blue",           
+    "Green": "Green",                
+    "Teal": "Teal",                 
+    "DarkCyan": "DarkCyan",             
+    "DeepSkyBlue": "DeepSkyBlue",          
+    "DarkTurquoise": "DarkTurquoise",        
+    "MediumSpringGreen": "MediumSpringGreen",    
+    "Lime": "Lime",                 
+    "SpringGreen": "SpringGreen",          
+    "Aqua": "Aqua",                 
+    "Cyan": "Cyan",                 
+    "MidnightBlue": "MidnightBlue",     
+    "DodgerBlue": "DodgerBlue",
+    "LightSeaGreen": "LightSeaGreen",
+    "ForestGreen": "ForestGreen",
+    "SeaGreen": "SeaGreen",
+    "DarkSlateGray": "DarkSlateGray",
+    "LimeGreen": "LimeGreen",
+    "MediumSeaGreen": "MediumSeaGreen",
+    "Turquoise": "Turquoise",
+    "SteelBlue": "SteelBlue",
+    "DarkSlateBlue": "DarkSlateBlue",
+    "MediumTurquoise": "MediumTurquoise",
+    "DarkOliveGreen": "DarkOliveGreen",
+    "CadetBlue": "CadetBlue",
+    "CornflowerBlue": "CornflowerBlue",
+    "MediumAquaMarine": "MediumAquaMarine",
+    "SlateBlue": "SlateBlue",
+    "OliveDrab": "OliveDrab",
+    "SlateGray": "SlateGray",
+    "LightSlateGray": "LightSlateGray",
+    "MediumSlateBlue": "MediumSlateBlue",
+    "LawnGreen": "LawnGreen",
+    "Chartreuse": "Chartreuse",
+    "Aquamarine": "Aquamarine",
+    "Purple": "Purple",
+    "Olive": "Olive",
+    "Gray": "Gray",
+    "SkyBlue": "SkyBlue",
+    "LightSkyBlue": "LightSkyBlue",
+    "BlueViolet": "BlueViolet",
+    "DarkRed": "DarkRed",
+    "DarkMagenta": "DarkMagenta",
+    "DarkSeaGreen": "DarkSeaGreen",
+    "LightGreen": "LightGreen",
+    "MediumPurple": "MediumPurple",
+    "DarkViolet": "DarkViolet",
+    "PaleGreen": "PaleGreen",
+    "DarkOrchid": "DarkOrchid",
+    "YellowGreen": "YellowGreen",
+    "Sienna": "Sienna",
+    "Brown": "Brown",
+    "DarkGray": "DarkGray",
+    "LightBlue": "LightBlue",
+    "GreenYellow": "GreenYellow",
+    "PaleTurquoise": "PaleTurquoise",
+    "LightSteelBlue": "LightSteelBlue",
+    "PowderBlue": "PowderBlue",
+    "FireBrick": "FireBrick",
+    "MediumOrchid": "MediumOrchid",
+    "RosyBrown": "RosyBrown",
+    "DarkKhaki": "DarkKhaki",
+    "Silver": "Silver",
+    "MediumVioletRed": "MediumVioletRed",
+    "Peru": "Peru",
+    "Chocolate": "Chocolate",
+    "Tan": "Tan",
+    "LightGray": "LightGray",
+    "Thistle": "Thistle",
+    "Orchid": "Orchid",
+    "GoldenRod": "GoldenRod",
+    "PaleVioletRed": "PaleVioletRed",
+    "Crimson": "Crimson",
+    "Gainsboro": "Gainsboro",
+    "Plum": "Plum",
+    "BurlyWood": "BurlyWood",
+    "LightCyan": "LightCyan",
+    "Lavender": "Lavender",
+    "DarkSalmon": "DarkSalmon",
+    "Violet": "Violet",
+    "PaleGoldenRod": "PaleGoldenRod",
+    "LightCoral": "LightCoral",
+    "Khaki": "Khaki",
+    "AliceBlue": "AliceBlue",
+    "HoneyDew": "HoneyDew",
+    "Azure": "Azure",
+    "SandyBrown": "SandyBrown",
+    "Wheat": "Wheat",
+    "Beige": "Beige",
+    "WhiteSmoke": "WhiteSmoke",
+    "MintCream": "MintCream",
+    "GhostWhite": "GhostWhite",
+    "Salmon": "Salmon",
+    "AntiqueWhite": "AntiqueWhite",
+    "Linen": "Linen",
+    "LightGoldenRodYellow": "LightGoldenRodYellow",
+    "OldLace": "OldLace",
+    "Red": "Red",
+    "Fuchsia": "Fuchsia",
+    "Magenta": "Magenta",
+    "DeepPink": "DeepPink",
+    "OrangeRed": "OrangeRed",
+    "Tomato": "Tomato",
+    "HotPink": "HotPink",
+    "Coral": "Coral",
+    "DarkOrange": "DarkOrange",
+    "LightSalmon": "LightSalmon",
+    "Orange": "Orange",
+    "LightPink": "LightPink",
+    "Pink": "Pink",
+    "Gold": "Gold",
+    "PeachPuff": "PeachPuff",
+    "NavajoWhite": "NavajoWhite",
+    "Moccasin": "Moccasin",
+    "Bisque": "Bisque",
+    "MistyRose": "MistyRose",
+    "BlanchedAlmond": "BlanchedAlmond",
+    "PapayaWhip": "PapayaWhip",
+    "LavenderBlush": "LavenderBlush",
+    "SeaShell": "SeaShell",
+    "Cornsilk": "Cornsilk",
+    "LemonChiffon": "LemonChiffon",
+    "FloralWhite": "FloralWhite",
+    "Snow": "Snow",
+    "Yellow": "Yellow",
+    "LightYellow": "LightYellow",
+    "Ivory": "Ivory",
+    "White": "White",
 }

generator/js/ui.js

@@ -176,6 +176,7 @@ function ui_update_selected_card() {
         $("#card-count").val(card.count);
         $("#card-icon").val(card.icon);
         $("#card-icon-back").val(card.icon_back);
+		$("#card-background").val(card.background_image);
         $("#card-contents").val(card.contents.join("\n"));
         $("#card-tags").val(card.tags.join(", "));
         $("#card-color").val(card.color).change();
@@ -185,6 +186,7 @@ function ui_update_selected_card() {
         $("#card-count").val(1);
         $("#card-icon").val("");
         $("#card-icon-back").val("");
+		$("#card-background").val("")
         $("#card-contents").val("");
         $("#card-tags").val("");
         $("#card-color").val("").change();
@@ -454,7 +456,8 @@ $(document).ready(function () {
     $("#card-icon").change(ui_change_card_property);
     $("#card-count").change(ui_change_card_property);
     $("#card-icon-back").change(ui_change_card_property);
-    $("#card-color").change(ui_change_card_color);
+	$("#card-background").change(ui_change_card_property);
+	$("#card-color").change(ui_change_card_color);
     $("#card-contents").change(ui_change_card_contents);
     $("#card-tags").change(ui_change_card_tags);
 

generator/lib/colorpicker/css/bootstrap-colorselector.css

@@ -12,8 +12,8 @@
   top: 80%;
   left: -7px;
   padding: 4px;
-  min-width: 130px;
-  max-width: 130px;
+/*  min-width: 130px;*/
+/*  max-width: 130px;*/
 }
 
 /*