Changeset 29803 for other-projects
- Timestamp:
- 2015-03-20T20:51:01+13:00 (9 years ago)
- Location:
- other-projects/nz-flag-design/trunk/main-form
- Files:
-
- 1 added
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
other-projects/nz-flag-design/trunk/main-form/choose-canvas.html
r29787 r29803 47 47 <script src='bgrins-spectrum/spectrum.js'></script> 48 48 <link rel='stylesheet' href='bgrins-spectrum/spectrum.css' /> 49 50 <script src="../similarity-2d/js-lib/Colour.js"></script> 51 <script src="../similarity-2d/flag-processing.js"></script> 52 53 <script src="choose-canvas.js" /> 49 54 50 55 <!-- css for choose-palette --> 56 <!-- 51 57 <style> 52 58 .ui-slider-track { … … 57 63 } 58 64 </style> 65 --> 59 66 60 67 <script> … … 66 73 <title>Canvas Size</title> 67 74 68 <script>69 70 // Variable for the currently selected flag ratio71 var currentRatio = null;72 73 $(function() {74 $.getJSON( "../similarity-2d/flag-aspect-ratios-json.jsp", function( data ) {75 76 77 //var scale_to_y_dim = 130;78 79 // express scale_to_y_dim to use relative to height of window80 81 var la_y_dim = $(window).height() - $('#aspect-ratio-div').position().top;82 var scale_to_y_dim = la_y_dim/4;83 84 //alert("scale_to_y_dim = " + scale_to_y_dim);85 86 var items = [];87 88 var max_ratio = 0;89 $.each( data, function( key, ratio_table ) {90 var ratio_array = key.split(":");91 var ratio_x = ratio_array[0];92 var ratio_y = ratio_array[1];93 var ratio = ratio_y / ratio_x;94 95 if (ratio > max_ratio) {96 max_ratio = ratio;97 }98 });99 100 $.each( data, function( key, ratio_table ) {101 var freq = ratio_table.freq;102 var ratio_array = key.split(":");103 var ratio_x = ratio_array[0];104 var ratio_y = ratio_array[1];105 var ratio = ratio_y / ratio_x;106 107 var ratioScale = max_ratio/ratio;108 109 var x_dim = Math.round(scale_to_y_dim * ratioScale);110 var y_dim = scale_to_y_dim;111 112 var innertext = "<div style='font-size: 180%;'>"+freq + " countries, " + key + "</div>";113 114 var flags = [];115 116 var nz_prioritized_flags = ratio_table.flags.sort();117 118 // Promote NZ flag to start of array, but otherwise keep sorted119 var p = nz_prioritized_flags.length-1;120 var found_nz = false;121 122 while (p>0) {123 var curr;124 var curr_title;125 126 if (!found_nz) {127 curr = ratio_table.flags[p];128 curr_title = curr.replace(/^.*\//,"").replace(/\.(.*?)$/,"");129 }130 131 if (curr_title == "nz") {132 found_nz = true;133 134 // swap with adjacent cell135 var tmp_m1 = nz_prioritized_flags[p-1];136 nz_prioritized_flags[p-1] = curr;137 nz_prioritized_flags[p] = tmp_m1;138 }139 p--;140 }141 142 $.each(nz_prioritized_flags, function(index, flag_filename) {143 var title = flag_filename.replace(/^.*\//,"").replace(/\.(.*?)$/,"");144 145 flags.push("<img src='../similarity-2d/"+flag_filename+"' style='height: 70px; padding: 3px; ' title='" + title.toUpperCase() + "'/>");146 });147 148 innertext += flags.join("");149 150 var ratio_id = "ratio-" + key;151 if (found_nz) {152 currentRatio = ratio_id;153 }154 155 var id = " id='" + ratio_id + "'";156 157 var style = "style='width:" + x_dim + "px; height:" + y_dim + "px;";158 if (found_nz) {159 style += "border-color:white; border-width:4px;"160 }161 //if (ratio_table.flags.length>4) {162 style += " overflow-y:scroll;";163 //}164 style += "'";165 166 var onclick = " onclick='updateCanvasDimensions("+ratio_y + "," + ratio_x + ")'";167 168 items.push( "<div class='ratioDiv'" + id + style+ onclick + ">"+ innertext + "</div>" );169 170 });171 172 $('#aspect-ratio-div').append("<div class='centredDiv' style='width: 100%'>"+items.join("\n")+"</div>");173 174 175 // now change the flag tooltip labels into their country names176 $.getJSON( "../similarity-2d/iso-3166-keyed-by-alpha-2-countrycodes.json", function( data ) {177 178 });179 180 });181 });182 </script>183 75 </head> 184 76 … … 208 100 <div class="dialog" id="dialog" title="Flat Aspect Ratio Selection Panel" widthXX="800px"> 209 101 <br><br> 210 <h2>Please choose from the following aspect ratios .</h2>102 <h2>Please choose from the following aspect ratios to select the width and height of your flag.</h2> 211 103 <p> 212 104 Once chosen, swipe the page or click/press on the right arrow to go onto the next step. 105 You can swipe/click back to this page at any time to change your selection. 213 106 </p> 214 107 … … 236 129 </div> 237 130 238 <script>239 240 function updateCanvasDimensions(height, width) {241 242 // Show feedback by highlighting the chosen square243 document.getElementById(currentRatio).style.borderColor = 'black';244 document.getElementById(currentRatio).style.borderWidth = '1px';245 currentRatio = "ratio-" + width + ":" + height;246 document.getElementById(currentRatio).style.borderColor = 'white';247 document.getElementById(currentRatio).style.borderWidth = '4px';248 249 // Changing the value of sizeConstant will change the250 // size of the svg canvas without affecting the251 // width/height ratios252 253 var sizeConstant = 400;254 255 var h = sizeConstant;256 var w = (sizeConstant / height) * width;257 258 if (typeof flagCanvasSettings !== 'undefined') {259 flagCanvasSettings.width = w;260 flagCanvasSettings.height = h;261 }262 }263 264 265 </script>266 267 131 <!-- end of putting custom content --> 268 132
Note:
See TracChangeset
for help on using the changeset viewer.