Create a dist directory

This directory will contain the built sources (iD.js, iD.css)
and images. On a release branch, we will check in the generated
files. For the osm.us/master deploy, it should run make and use
dist/ as the root.

Paths in css are relative, e.g. url(img/foo.png).

.gitignore

@@ -1,5 +1,4 @@
-iD.js
-iD.min.js
-iD.css
-build
+dist/iD.js
+dist/iD.min.js
+dist/iD.css
 transifex.auth

Makefile

@@ -6,19 +6,19 @@ JS_COMPILER = $(UGLIFY)
 LOCALE ?= en_US
 
 all: \
-	iD.js \
-	iD.min.js \
-	img/line-presets.png \
-	iD.css
+	dist/iD.js \
+	dist/iD.min.js \
+	dist/img/line-presets.png \
+	dist/iD.css
 
 DATA_FILES = $(shell find data -type f -name '*.json' -o -name '*.md')
-data/data.js: $(DATA_FILES) img/maki-sprite.png
+data/data.js: $(DATA_FILES) dist/img/maki-sprite.png
 	node build.js
 
 data/locales/en.js: data/core.yaml data/presets.yaml
 	node build.js
 
-iD.js: \
+dist/iD.js: \
 	js/lib/bootstrap-tooltip.js \
 	js/lib/d3.v3.js \
 	js/lib/d3.combobox.js \
@@ -66,30 +66,22 @@ iD.js: \
 	data/introGraph.js \
 	data/locales.js
 
-.INTERMEDIATE iD.js: data/data.js
+.INTERMEDIATE dist/iD.js: data/data.js
 
-iD.js: node_modules/.install Makefile
+dist/iD.js: node_modules/.install Makefile
 	@rm -f $@
 	cat $(filter %.js,$^) > $@
 
-iD.css: css/*.css
+dist/iD.min.js: dist/iD.js Makefile
+	@rm -f $@
+	$(JS_COMPILER) $< -c -m -o $@
+
+dist/iD.css: css/*.css
 	cat css/reset.css css/map.css css/app.css css/line-presets.css css/maki-sprite.css > $@
 
 node_modules/.install: package.json
 	npm install && touch node_modules/.install
 
-%.min.js: %.js Makefile
-	@rm -f $@
-	$(JS_COMPILER) $< -c -m -o $@
-
-install_root ?= build
-install: all
-	mkdir -p $(install_root)
-	cp iD.js iD.min.js land.html $(install_root)
-	cp index_packaged.html $(install_root)/index.html
-	cp -R css/. $(install_root)/css
-	cp -R img/. $(install_root)/img
-
 clean:
 	rm -f iD*.js
 
@@ -99,12 +91,12 @@ translations:
 data/locales.js: data/locales/*.js
 	cat $^ > $@
 
-SPRITE = inkscape --export-area-page --export-png=img/line-presets.png svg/line-presets.svg
+SPRITE = inkscape --export-area-page --export-png=dist/img/line-presets.png svg/line-presets.svg
 
-img/line-presets.png: svg/line-presets.svg
+dist/img/line-presets.png: svg/line-presets.svg
 	if [ `which inkscape` ]; then $(SPRITE); else echo "Inkscape is not installed"; fi;
 
-img/maki-sprite.png: $(wildcard node_modules/maki/renders/*.png)
+dist/img/maki-sprite.png: $(wildcard node_modules/maki/renders/*.png)
 	node data/maki_sprite
 
 D3_FILES = \

css/app.css

@@ -64,10 +64,10 @@ button,
 .opacity-options li,
 .radial-menu-item {
     cursor: pointer; /* Opera */
-    cursor: url(../img/cursor-pointer.png) 6 1, pointer; /* FF */
+    cursor: url(img/cursor-pointer.png) 6 1, pointer; /* FF */
     cursor: -webkit-image-set(
-        url(../img/cursor-pointer.png) 1x,
-        url(../img/cursor-pointer2x.png) 2x
+        url(img/cursor-pointer.png) 1x,
+        url(img/cursor-pointer2x.png) 2x
         ) 6 1, pointer;
 }
 
@@ -290,7 +290,7 @@ ul.link-list li:last-child {
 }
 
 .fillL2 {
-    background: #f7f7f7 url(../img/background-pattern-1.png) repeat;
+    background: #f7f7f7 url(img/background-pattern-1.png) repeat;
     color: #333;
 }
 
@@ -323,7 +323,7 @@ a.hide {
 }
 
 .loading {
-    background: url(../img/loader_bg.gif);
+    background: url(img/loader_bg.gif);
     background-size:5px 5px;
 }
 
@@ -469,7 +469,7 @@ button.save.has-count .count::before {
   vertical-align:top;
   width:20px;
   height:20px;
-  background:transparent url(../img/sprite.svg) no-repeat 0 0;
+  background:transparent url(img/sprite.svg) no-repeat 0 0;
   text-indent:-9999px;
   overflow:hidden;
   }
@@ -870,16 +870,16 @@ a:hover .icon.out-link   { background-position: -500px -14px;}
     margin: auto;
     position: absolute;
     left: 0; right: 0; top: 19px;
-    background:transparent url(../img/sprite.svg) no-repeat -240px -80px;
+    background:transparent url(img/sprite.svg) no-repeat -240px -80px;
 }
 
 .preset-icon-fill.tag-shop,
 .preset-icon-fill.tag-building {
-    background:transparent url(../img/sprite.svg) no-repeat 0 -80px;
+    background:transparent url(img/sprite.svg) no-repeat 0 -80px;
 }
 
 .preset-icon-fill.tag-natural-water {
-    background:transparent url(../img/sprite.svg) no-repeat -60px -80px;
+    background:transparent url(img/sprite.svg) no-repeat -60px -80px;
 }
 
 .preset-icon-fill.tag-landuse,
@@ -887,11 +887,11 @@ a:hover .icon.out-link   { background-position: -500px -14px;}
 .preset-icon-fill.tag-natural-tree,
 .preset-icon-fill.tag-natural-grassland,
 .preset-icon-fill.tag-leisure-park {
-    background:transparent url(../img/sprite.svg) no-repeat -120px -80px;
+    background:transparent url(img/sprite.svg) no-repeat -120px -80px;
 }
 
 .preset-icon-fill.tag-amenity-parking {
-    background:transparent url(../img/sprite.svg) no-repeat -180px -80px;
+    background:transparent url(img/sprite.svg) no-repeat -180px -80px;
 }
 
 /* preset form basics */
@@ -1648,7 +1648,7 @@ img.wiki-image {
 }
 
 .opacity-options {
-    background: url(../img/background-pattern-opacity.png) 0 0 repeat;
+    background: url(img/background-pattern-opacity.png) 0 0 repeat;
     height:20px;
     width:62px;
     position: absolute;
@@ -2036,7 +2036,7 @@ img.wiki-image {
     width: 100px;
     margin: auto;
     margin-bottom: 10px;
-    background:transparent url(../img/sprite.svg) no-repeat 0 -220px;
+    background:transparent url(img/sprite.svg) no-repeat 0 -220px;
 }
 
 .modal-actions :first-child {
@@ -2496,7 +2496,7 @@ img.wiki-image {
     content: "";
     height: 80px;
     width: 200px;
-    background:transparent url(../img/sprite.svg) no-repeat 0 -320px;
+    background:transparent url(img/sprite.svg) no-repeat 0 -320px;
 }
 
 .intro-areas-add .tooltip-inner::before {
@@ -2516,6 +2516,6 @@ img.wiki-image {
 .huge-modal-button .illustration {
     height: 100px;
     width: 100px;
-    background: rgba(0, 0, 0, 0) url(../img/sprite.svg) no-repeat -301px -220px;
+    background: rgba(0, 0, 0, 0) url(img/sprite.svg) no-repeat -301px -220px;
     margin: auto;
 }

css/img

@@ -0,0 +1 @@
+../dist/img/

css/line-presets.css

@@ -1,5 +1,5 @@
 .preset-line-icon {
-    background-image: url(../img/line-presets.png);
+    background-image: url(img/line-presets.png);
     width: 60px;
     height: 60px;
     overflow: hidden;

css/maki-sprite.css

@@ -1,6 +1,6 @@
 /* This file is generated by make. Do NOT edit manually. */
 
-.maki-icon{background-image:url('../img/maki-sprite.png');background-repeat:no-repeat;}
+.maki-icon{background-image:url(img/maki-sprite.png);background-repeat:no-repeat;}
 .maki-airfield{background-position:-0px -34px;width:24px;height:24px;}
 .maki-airport{background-position:-0px -94px;width:24px;height:24px;}
 .maki-alcohol-shop{background-position:-0px -154px;width:24px;height:24px;}

css/map.css

@@ -864,69 +864,69 @@ text.point {
 
 #map:hover {
     cursor: auto; /* Opera */
-    cursor: url(../img/cursor-grab.png) 9 9, auto; /* FF */
+    cursor: url(img/cursor-grab.png) 9 9, auto; /* FF */
     cursor: -webkit-image-set(
-        url(../img/cursor-grab.png) 1x,
-        url(../img/cursor-grab2x.png) 2x
+        url(img/cursor-grab.png) 1x,
+        url(img/cursor-grab2x.png) 2x
         ) 9 9, auto;
 }
 
 #map:active {
     cursor: pointer; /* Opera */
-    cursor: url(../img/cursor-grabbing.png) 9 9, auto; /* FF */
+    cursor: url(img/cursor-grabbing.png) 9 9, auto; /* FF */
     cursor: -webkit-image-set(
-        url(../img/cursor-grabbing.png) 1x,
-        url(../img/cursor-grabbing2x.png) 2x
+        url(img/cursor-grabbing.png) 1x,
+        url(img/cursor-grabbing2x.png) 2x
         ) 9 9, auto;
 }
 
 .mode-browse .point,
 .mode-select .point {
     cursor: pointer; /* Opera */
-    cursor: url(../img/cursor-select-point.png), pointer; /* FF */
+    cursor: url(img/cursor-select-point.png), pointer; /* FF */
     cursor: -webkit-image-set(
-        url(../img/cursor-select-point.png) 1x,
-        url(../img/cursor-select-point2x.png) 2x
+        url(img/cursor-select-point.png) 1x,
+        url(img/cursor-select-point2x.png) 2x
         ), pointer;
 }
 
 .mode-select .vertex,
 .mode-browse .vertex {
     cursor: pointer; /* Opera */
-    cursor: url(../img/cursor-select-vertex.png), pointer; /* FF */
+    cursor: url(img/cursor-select-vertex.png), pointer; /* FF */
     cursor: -webkit-image-set(
-        url(../img/cursor-select-vertex.png) 1x,
-        url(../img/cursor-select-vertex2x.png) 2x
+        url(img/cursor-select-vertex.png) 1x,
+        url(img/cursor-select-vertex2x.png) 2x
         ), pointer;
 }
 
 .mode-browse .line,
 .mode-select .line {
     cursor: pointer; /* Opera */
-    cursor: url(../img/cursor-select-line.png), pointer; /* FF */
+    cursor: url(img/cursor-select-line.png), pointer; /* FF */
     cursor: -webkit-image-set(
-        url(../img/cursor-select-line.png) 1x,
-        url(../img/cursor-select-line2x.png) 2x
+        url(img/cursor-select-line.png) 1x,
+        url(img/cursor-select-line2x.png) 2x
         ), pointer;
 }
 
 .mode-select .area,
 .mode-browse .area {
     cursor: pointer; /* Opera */
-    cursor: url(../img/cursor-select-area.png), pointer; /* FF */
+    cursor: url(img/cursor-select-area.png), pointer; /* FF */
     cursor: -webkit-image-set(
-        url(../img/cursor-select-area.png) 1x,
-        url(../img/cursor-select-area2x.png) 2x
+        url(img/cursor-select-area.png) 1x,
+        url(img/cursor-select-area2x.png) 2x
         ), pointer;
 }
 
 .mode-select .midpoint,
 .mode-browse .midpoint {
     cursor: pointer; /* Opera */
-    cursor: url(../img/cursor-select-split.png), pointer; /* FF */
+    cursor: url(img/cursor-select-split.png), pointer; /* FF */
     cursor: -webkit-image-set(
-        url(../img/cursor-select-split.png) 1x,
-        url(../img/cursor-select-split2x.png) 2x
+        url(img/cursor-select-split.png) 1x,
+        url(img/cursor-select-split2x.png) 2x
         ), pointer;
 }
 
@@ -935,19 +935,19 @@ text.point {
 .mode-select .behavior-multiselect .line,
 .mode-select .behavior-multiselect .area {
     cursor: pointer; /* Opera */
-    cursor: url(../img/cursor-select-add.png), pointer; /* FF */
+    cursor: url(img/cursor-select-add.png), pointer; /* FF */
     cursor: -webkit-image-set(
-        url(../img/cursor-select-add.png) 1x,
-        url(../img/cursor-select-add2x.png) 2x
+        url(img/cursor-select-add.png) 1x,
+        url(img/cursor-select-add2x.png) 2x
         ), pointer;
 }
 
 .mode-select .behavior-multiselect .selected {
     cursor: pointer; /* Opera */
-    cursor: url(../img/cursor-select-remove.png), pointer; /* FF */
+    cursor: url(img/cursor-select-remove.png), pointer; /* FF */
     cursor: -webkit-image-set(
-        url(../img/cursor-select-remove.png) 1x,
-        url(../img/cursor-select-remove2x.png) 2x
+        url(img/cursor-select-remove.png) 1x,
+        url(img/cursor-select-remove2x.png) 2x
         ), pointer;
 }
 
@@ -958,10 +958,10 @@ text.point {
 #map .midpoint:active,
 #map .mode-select .selected {
     cursor: pointer; /* Opera */
-    cursor: url(../img/cursor-select-acting.png), pointer; /* FF */
+    cursor: url(img/cursor-select-acting.png), pointer; /* FF */
     cursor: -webkit-image-set(
-        url(../img/cursor-select-acting.png) 1x,
-        url(../img/cursor-select-acting2x.png) 2x
+        url(img/cursor-select-acting.png) 1x,
+        url(img/cursor-select-acting2x.png) 2x
         ), pointer;
 }
 
@@ -971,10 +971,10 @@ text.point {
 .mode-add-area  #map:hover,
 .mode-drag-node #map:hover {
     cursor: crosshair; /* Opera */
-    cursor: url(../img/cursor-draw.png) 9 9, crosshair; /* FF */
+    cursor: url(img/cursor-draw.png) 9 9, crosshair; /* FF */
     cursor: -webkit-image-set(
-        url(../img/cursor-draw.png) 1x,
-        url(../img/cursor-draw2x.png) 2x
+        url(img/cursor-draw.png) 1x,
+        url(img/cursor-draw2x.png) 2x
         ) 9 9, crosshair;
 }
 
@@ -984,10 +984,10 @@ text.point {
 .mode-add-area  .behavior-hover .way,
 .mode-drag-node .behavior-hover .way {
     cursor: crosshair; /* Opera */
-    cursor: url(../img/cursor-draw-connect-line.png) 9 9, crosshair; /* FF */
+    cursor: url(img/cursor-draw-connect-line.png) 9 9, crosshair; /* FF */
     cursor: -webkit-image-set(
-        url(../img/cursor-draw-connect-line.png) 1x,
-        url(../img/cursor-draw-connect-line2x.png) 2x
+        url(img/cursor-draw-connect-line.png) 1x,
+        url(img/cursor-draw-connect-line2x.png) 2x
         ) 9 9, crosshair;
 }
 
@@ -997,10 +997,10 @@ text.point {
 .mode-add-area  .behavior-hover .vertex,
 .mode-drag-node .behavior-hover .vertex {
     cursor: crosshair; /* Opera */
-    cursor: url(../img/cursor-draw-connect-vertex.png) 9 9, crosshair; /* FF */
+    cursor: url(img/cursor-draw-connect-vertex.png) 9 9, crosshair; /* FF */
     cursor: -webkit-image-set(
-        url(../img/cursor-draw-connect-vertex.png) 1x,
-        url(../img/cursor-draw-connect-vertex2x.png) 2x
+        url(img/cursor-draw-connect-vertex.png) 1x,
+        url(img/cursor-draw-connect-vertex2x.png) 2x
         ) 9 9, crosshair;
 }
 
@@ -1009,10 +1009,10 @@ text.point {
 .lasso .way,
 .lasso .vertex {
     cursor: crosshair; /* Opera */
-    cursor: url(../img/cursor-draw.png) 9 9, crosshair; /* FF */
+    cursor: url(img/cursor-draw.png) 9 9, crosshair; /* FF */
     cursor: -webkit-image-set(
-        url(../img/cursor-draw.png) 1x,
-        url(../img/cursor-draw2x.png) 2x
+        url(img/cursor-draw.png) 1x,
+        url(img/cursor-draw2x.png) 2x
         ) 9 9, crosshair;
 }
 

data/maki_sprite.js

@@ -8,13 +8,13 @@ sprite.sprite('renders', { path: makipath }, function(err, makiSprite) {
     if (err) process.exit(1);
 
     // Move image and json files
-    fs.renameSync(path.join(makipath, makiSprite.filename()), './img/maki-sprite.png');
+    fs.renameSync(path.join(makipath, makiSprite.filename()), './dist/img/maki-sprite.png');
     fs.renameSync(path.join(makipath, 'renders.json'), './data/maki-sprite.json');
 
     // Generate CSS
     var template = '.maki-{name}{background-position:{x} {y};width:{w};height:{h};}\n';
     var css = "/* This file is generated by make. Do NOT edit manually. */\n\n";
-    css += ".maki-icon{background-image:url('../img/maki-sprite.png');background-repeat:no-repeat;}\n";
+    css += ".maki-icon{background-image:url(img/maki-sprite.png);background-repeat:no-repeat;}\n";
 
     makiSprite.images.forEach(function(image) {
         if (image.width !== 24) return;

dist/index.html

@@ -3,11 +3,7 @@
     <head>
         <meta charset='utf-8'>
         <title>iD</title>
-        <link rel='stylesheet' href='css/reset.css'>
-        <link rel='stylesheet' href='css/map.css'>
-        <link rel='stylesheet' href='css/app.css'>
-        <link rel='stylesheet' href='css/line-presets.css'>
-        <link rel='stylesheet' href='css/maki-sprite.css'>
+        <link rel='stylesheet' href='iD.css'>
 
         <!-- mobile devices -->
         <meta name='viewport' content='initial-scale=1.0 maximum-scale=1.0'>

dist/land.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html><head></head>
+    <body>
+        <script>
+            opener.authComplete(window.location.href);
+            window.close();
+        </script>
+    </body>
+</html>

index.html

@@ -211,7 +211,7 @@
             }
 
             iD.data.load(function() {
-                id = iD();
+                id = iD().imagePath('css/img/');
 
                 d3.select("#id-container")
                     .call(id.ui());

land.html

@@ -1,9 +0,0 @@
-<!DOCTYPE html>
-<html><head></head>
-    <body>
-        <script>
-            opener.authComplete(window.location.href);
-            window.close();
-        </script>
-    </body>
-</html>

land.html

@@ -0,0 +1 @@
+dist/land.html

test/img

@@ -1 +1 @@
-../img
+../dist/img/

test/index_packaged.html

@@ -17,7 +17,7 @@
     <script src="lib/bind-shim.js"></script>
 
     <!-- include source files here... -->
-    <script src='../iD.min.js'></script>
+    <script src='../dist/iD.min.js'></script>
 
     <script src="spec/spec_helpers.js"></script>