extlib/leaflet/build/build.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4         <title>Leaflet Build Helper</title>
   5
   6         <script type="text/javascript" src="deps.js"></script>
   7
   8         <style type="text/css">
   9                 body {
  10                         font: 12px/1.4 Verdana, sans-serif;
  11                         text-align: center;
  12                         padding: 2em 0;
  13                 }
  14                 #container {
  15                         text-align: left;
  16                         margin: 0 auto;
  17                         width: 600px;
  18                 }
  19                 #deplist {
  20                         list-style: none;
  21                         padding: 0;
  22                 }
  23                 #deplist li {
  24                         padding-top: 10px;
  25                         padding-bottom: 10px;
  26                         border-top: 1px solid #eee;
  27                 }
  28                 #deplist li.heading {
  29                         border: none;
  30                         background: #eee;
  31                         padding: 5px 10px;
  32                         margin-top: 10px;
  33                 }
  34                 #deplist input {
  35                         float: left;
  36                         margin-right: 5px;
  37                         display: inline;
  38                 }
  39                 #deplist label {
  40                         float: left;
  41                         width: 190px;
  42                         font-weight: bold;
  43                 }
  44                 #deplist div {
  45                         display: table-cell;
  46                         height: 1%;
  47                 }
  48                 #deplist .desc {
  49                 }
  50
  51                 #deplist .deps {
  52                         color: #777;
  53                 }
  54
  55                 #command {
  56                         width: 100%;
  57                 }
  58         </style>
  59 </head>
  60 <body>
  61         <div id="container">
  62                 <h1>Leaflet Build Helper</h1>
  63
  64                 <p>
  65                         <a id="select-all" href="#all">Select All</a> |
  66                         <a id="deselect-all" href="#none">Deselect All</a>
  67                 </p>
  68
  69                 <ul id="deplist"></ul>
  70
  71                 <p>
  72                         Run this command in the build directory:<br />
  73                         <input type="text" id="command" />
  74                 </p>
  75         </div>
  76
  77         <script type="text/javascript">
  78                 var deplist = document.getElementById('deplist'),
  79                         commandInput = document.getElementById('command');
  80
  81                 document.getElementById('select-all').onclick = function() {
  82                         var checks = deplist.getElementsByTagName('input');
  83                         for (var i = 0; i < checks.length; i++) {
  84                                 checks[i].checked = true;
  85                         }
  86                         updateCommand();
  87                         return false;
  88                 };
  89
  90                 document.getElementById('deselect-all').onclick = function() {
  91                         var checks = deplist.getElementsByTagName('input');
  92                         for (var i = 0; i < checks.length; i++) {
  93                                 if (!checks[i].disabled) {
  94                                         checks[i].checked = false;
  95                                 }
  96                         }
  97                         updateCommand();
  98                         return false;
  99                 };
 100
 101                 function updateCommand() {
 102                         var files = {};
 103                         var checks = deplist.getElementsByTagName('input');
 104                         for (var i = 0; i < checks.length; i++) {
 105                                 if (checks[i].checked) {
 106                                         var srcs = deps[checks[i].id].src;
 107                                         for (var j = 0; j < srcs.length; j++) {
 108                                                 files[srcs[j]] = true;
 109                                         }
 110                                 }
 111                         }
 112
 113                         var command = 'java -jar ../lib/closure-compiler/compiler.jar ';
 114                         for (var src in files) {
 115                                 command += '--js ../src/' + src + ' ';
 116                         }
 117                         command += '--js_output_file ../dist/leaflet-custom.js';
 118
 119                         commandInput.value = command;
 120                 }
 121
 122                 commandInput.onclick = function() {
 123                         commandInput.focus();
 124                         commandInput.select();
 125                 };
 126
 127                 function onCheckboxChange() {
 128                         if (this.checked) {
 129                                 var depDeps = deps[this.id].deps;
 130                                 if (!depDeps) { return; }
 131                                 for (var i = 0; i < depDeps.length; i++) {
 132                                         var check = document.getElementById(depDeps[i]);
 133                                         if (!check.checked) {
 134                                                 check.checked = true;
 135                                                 check.onchange();
 136                                         }
 137                                 }
 138                         } else {
 139                                 var checks = deplist.getElementsByTagName('input');
 140                                 for (var i = 0; i < checks.length; i++) {
 141                                         var dep = deps[checks[i].id];
 142                                         if (!dep.deps) { continue; }
 143                                         for (var j = 0; j < dep.deps.length; j++) {
 144                                                 if (dep.deps[j] == this.id) {
 145                                                         if (checks[i].checked) {
 146                                                                 checks[i].checked = false;
 147                                                                 checks[i].onchange();
 148                                                         }
 149                                                 }
 150                                         }
 151                                 }
 152                         }
 153                         updateCommand();
 154                 }
 155
 156                 for (var name in deps) {
 157                         var li = document.createElement('li');
 158
 159                         if (deps[name].heading) {
 160                                 var heading = document.createElement('li');
 161                                 heading.className = 'heading';
 162                                 heading.appendChild(document.createTextNode(deps[name].heading));
 163                                 deplist.appendChild(heading);
 164                         }
 165
 166                         var div = document.createElement('div');
 167
 168                         var label = document.createElement('label');
 169
 170                         var check = document.createElement('input');
 171                         check.type = 'checkbox';
 172                         check.id = name;
 173                         label.appendChild(check);
 174                         check.onchange = onCheckboxChange;
 175
 176                         if (name == 'Core') {
 177                                 check.checked = true;
 178                                 check.disabled = true;
 179                         }
 180
 181                         label.appendChild(document.createTextNode(name));
 182                         label.htmlFor = name;
 183
 184                         li.appendChild(label);
 185
 186                         var desc = document.createElement('span');
 187                         desc.className = 'desc';
 188                         desc.appendChild(document.createTextNode(deps[name].desc));
 189
 190                         var depText = deps[name].deps && deps[name].deps.join(', ');
 191                         if (depText) {
 192                                 var depspan = document.createElement('span');
 193                                 depspan.className = 'deps';
 194                                 depspan.appendChild(document.createTextNode('Deps: ' + depText));
 195                         }
 196
 197                         div.appendChild(desc);
 198                         div.appendChild(document.createElement('br'));
 199                         if (depText) { div.appendChild(depspan); }
 200
 201                         li.appendChild(div);
 202
 203                         deplist.appendChild(li);
 204                 }
 205                 updateCommand();
 206         </script>
 207 </body>
 208 </html>