Платформа ЦРНП "Мирокод" для разработки проектов
https://git.mirocod.ru
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
227 lines
4.9 KiB
227 lines
4.9 KiB
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<title>Leaflet Build Helper</title> |
|
|
|
<script type="text/javascript" src="deps.js"></script> |
|
|
|
<style type="text/css"> |
|
body { |
|
font: 12px/1.4 Verdana, sans-serif; |
|
text-align: center; |
|
padding: 2em 0; |
|
} |
|
#container { |
|
text-align: left; |
|
margin: 0 auto; |
|
width: 780px; |
|
} |
|
#deplist { |
|
list-style: none; |
|
padding: 0; |
|
} |
|
#deplist li { |
|
padding-top: 7px; |
|
padding-bottom: 7px; |
|
border-bottom: 1px solid #ddd; |
|
} |
|
#deplist li.heading { |
|
border: none; |
|
background: #ddd; |
|
padding: 5px 10px; |
|
margin-top: 25px; |
|
border-radius: 5px; |
|
} |
|
#deplist input { |
|
float: left; |
|
margin-right: 5px; |
|
display: inline; |
|
} |
|
#deplist label { |
|
float: left; |
|
width: 160px; |
|
font-weight: bold; |
|
} |
|
#deplist div { |
|
display: table-cell; |
|
height: 1%; |
|
} |
|
#deplist .desc { |
|
} |
|
|
|
#deplist .deps { |
|
color: #777; |
|
} |
|
|
|
#command { |
|
width: 100%; |
|
} |
|
#command2 { |
|
width: 200px; |
|
} |
|
|
|
#toolbar { |
|
padding-bottom: 10px; |
|
border-bottom: 1px solid #ddd; |
|
} |
|
|
|
h2 { |
|
margin-top: 2em; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div id="container"> |
|
<h1>Leaflet Build Helper</h1> |
|
|
|
<p id="toolbar"> |
|
<a id="select-all" href="#all">Select All</a> | |
|
<a id="deselect-all" href="#none">Deselect All</a> |
|
</p> |
|
|
|
<ul id="deplist"></ul> |
|
|
|
<h2>Building using Node and UglifyJS</h2> |
|
<ol> |
|
<li><a href="http://nodejs.org/#download">Download and install Node</a></li> |
|
<li>Run this in the command line:<br /> |
|
<pre><code>npm install -g jake |
|
npm install</code></pre></li> |
|
<li>Run this command inside the Leaflet directory: <br /><input type="text" id="command2" /> |
|
</ol> |
|
</div> |
|
|
|
<script type="text/javascript"> |
|
var deplist = document.getElementById('deplist'), |
|
commandInput = document.getElementById('command2'); |
|
|
|
document.getElementById('select-all').onclick = function() { |
|
var checks = deplist.getElementsByTagName('input'); |
|
for (var i = 0; i < checks.length; i++) { |
|
checks[i].checked = true; |
|
} |
|
updateCommand(); |
|
return false; |
|
}; |
|
|
|
document.getElementById('deselect-all').onclick = function() { |
|
var checks = deplist.getElementsByTagName('input'); |
|
for (var i = 0; i < checks.length; i++) { |
|
if (!checks[i].disabled) { |
|
checks[i].checked = false; |
|
} |
|
} |
|
updateCommand(); |
|
return false; |
|
}; |
|
|
|
function updateCommand() { |
|
var files = {}; |
|
var checks = deplist.getElementsByTagName('input'); |
|
var compsStr = ''; |
|
|
|
for (var i = 0, len = checks.length; i < len; i++) { |
|
if (checks[i].checked) { |
|
var srcs = deps[checks[i].id].src; |
|
for (var j = 0, len2 = srcs.length; j < len2; j++) { |
|
files[srcs[j]] = true; |
|
} |
|
compsStr = '1' + compsStr; |
|
} else { |
|
compsStr = '0' + compsStr; |
|
} |
|
} |
|
|
|
commandInput.value = 'jake build[' + parseInt(compsStr, 2).toString(32) + ',custom]'; |
|
} |
|
|
|
function inputSelect() { |
|
this.focus(); |
|
this.select(); |
|
}; |
|
|
|
commandInput.onclick = inputSelect; |
|
|
|
function onCheckboxChange() { |
|
if (this.checked) { |
|
var depDeps = deps[this.id].deps; |
|
if (depDeps) { |
|
for (var i = 0; i < depDeps.length; i++) { |
|
var check = document.getElementById(depDeps[i]); |
|
if (!check.checked) { |
|
check.checked = true; |
|
check.onchange(); |
|
} |
|
} |
|
} |
|
} else { |
|
var checks = deplist.getElementsByTagName('input'); |
|
for (var i = 0; i < checks.length; i++) { |
|
var dep = deps[checks[i].id]; |
|
if (!dep.deps) { continue; } |
|
for (var j = 0; j < dep.deps.length; j++) { |
|
if (dep.deps[j] === this.id) { |
|
if (checks[i].checked) { |
|
checks[i].checked = false; |
|
checks[i].onchange(); |
|
} |
|
} |
|
} |
|
} |
|
} |
|
updateCommand(); |
|
} |
|
|
|
for (var name in deps) { |
|
var li = document.createElement('li'); |
|
|
|
if (deps[name].heading) { |
|
var heading = document.createElement('li'); |
|
heading.className = 'heading'; |
|
heading.appendChild(document.createTextNode(deps[name].heading)); |
|
deplist.appendChild(heading); |
|
} |
|
|
|
var div = document.createElement('div'); |
|
|
|
var label = document.createElement('label'); |
|
|
|
var check = document.createElement('input'); |
|
check.type = 'checkbox'; |
|
check.id = name; |
|
label.appendChild(check); |
|
check.onchange = onCheckboxChange; |
|
|
|
if (name == 'Core') { |
|
check.checked = true; |
|
check.disabled = true; |
|
} |
|
|
|
label.appendChild(document.createTextNode(name)); |
|
label.htmlFor = name; |
|
|
|
li.appendChild(label); |
|
|
|
var desc = document.createElement('span'); |
|
desc.className = 'desc'; |
|
desc.appendChild(document.createTextNode(deps[name].desc)); |
|
|
|
var depText = deps[name].deps && deps[name].deps.join(', '); |
|
if (depText) { |
|
var depspan = document.createElement('span'); |
|
depspan.className = 'deps'; |
|
depspan.appendChild(document.createTextNode('Deps: ' + depText)); |
|
} |
|
|
|
div.appendChild(desc); |
|
div.appendChild(document.createElement('br')); |
|
if (depText) { div.appendChild(depspan); } |
|
|
|
li.appendChild(div); |
|
|
|
deplist.appendChild(li); |
|
} |
|
updateCommand(); |
|
</script> |
|
</body> |
|
</html>
|
|
|