diff options
| -rw-r--r-- | public/assets/javascripts/rectangles/engine/map/ui/ortho.js | 4 | ||||
| -rw-r--r-- | public/assets/javascripts/ui/blueprint/BlueprintScaler.js (renamed from public/assets/javascripts/ui/blueprint/BlueprintEditor.js) | 23 | ||||
| -rw-r--r-- | public/assets/javascripts/ui/blueprint/BlueprintUpload.js | 36 | ||||
| -rw-r--r-- | public/assets/javascripts/ui/blueprint/BlueprintView.js | 2 | ||||
| -rw-r--r-- | views/controls/blueprint/editor.ejs | 122 | ||||
| -rw-r--r-- | views/partials/scripts.ejs | 2 |
6 files changed, 153 insertions, 36 deletions
diff --git a/public/assets/javascripts/rectangles/engine/map/ui/ortho.js b/public/assets/javascripts/rectangles/engine/map/ui/ortho.js index 52f7339..5be7446 100644 --- a/public/assets/javascripts/rectangles/engine/map/ui/ortho.js +++ b/public/assets/javascripts/rectangles/engine/map/ui/ortho.js @@ -81,7 +81,9 @@ Map.UI.Ortho = function(map){ } base.set_tool = function(s){ console.log("set tool to", s) - base.tools[currentTool].cancel() + if (base.tools[currentTool]) { + base.tools[currentTool].cancel() + } currentTool = s tool = base.tools[currentTool] } diff --git a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js index 227c1c8..e11b61e 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js @@ -1,6 +1,6 @@ -var BlueprintEditor = ModalView.extend({ - el: ".blueprintEditor", +var BlueprintScaler = ModalView.extend({ + el: ".blueprintScaler", events: { "change [name=blueprint-dimensions]": "changeDimensions", @@ -15,9 +15,22 @@ var BlueprintEditor = ModalView.extend({ this.$units = this.$("[name=blueprint-units]") this.$save = this.$("#saveBlueprint") - this.map = new Map ({ type: 'ortho' }) - - this.$blueprintMap.append(this.map.el) + this.map = map = new Map ({ + type: "ortho", + el: this.$blueprintMap.get(0), + width: window.innerWidth/2, + height: window.innerHeight, + zoom: -2, + zoom_min: -6.2, + zoom_max: 1, + }) + map.ui.add_tool("arrow", new ArrowTool) + map.ui.add_tool("position", new PositionTool) + map.ui.set_tool("position") + }, + + pick: function(){ + }, changeDimensions: function(){ diff --git a/public/assets/javascripts/ui/blueprint/BlueprintUpload.js b/public/assets/javascripts/ui/blueprint/BlueprintUpload.js index 9467715..deb1075 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintUpload.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintUpload.js @@ -13,7 +13,8 @@ var BlueprintUpload = UploadView.extend({ "change .url": "enterUrl", "keydown .url": "enterSetUrl", - "click .blueprint": "choose", + "click .blueprint": "pick", + "click .remove": "destroy", }, initialize: function(opt){ @@ -34,25 +35,33 @@ var BlueprintUpload = UploadView.extend({ populate: function(data){ this.loaded = true if (data && data.length) { + this.$blueprints.show() data.forEach(this.append.bind(this)) - this.$(".txt").hide() + this.show() } else { - this.$(".txt").show() + this.show() } }, pick: function(e){ var $el = $(e.currentTarget) - // load map with it + var media = $el.data("media") + this.hide() + this.parent.blueprintScaler.pick(media) }, - destroy: function(_id, cb){ + destroy: function(e){ + e.stopPropagation() + var $el = $(e.currentTarget) + var _id = $el.closest(".blueprint").data("id") + $el.remove() $.ajax({ type: "delete", url: this.destroyAction, data: { _id: _id, _csrf: $("[name=_csrf]").val() } - }).complete(cb || function(){}) + }).complete(function(){ + }) }, show: function(){ @@ -93,13 +102,24 @@ var BlueprintUpload = UploadView.extend({ }, add: function(media){ + this.$blueprints.show() this.append(media) + this.hide() + this.parent.blueprintScaler.pick(media) }, append: function(media){ - var $el = $("<img>") - $el.attr("src", media.url) + var $el = $("<span>") + var img = new Image () + img.src = media.url + var remove = document.createElement("span") + remove.className = "remove" + remove.innerHTML = "<span>x</span>" + $el.data("id", media._id) + $el.data("media", media) + $el.append(img) + $el.append(remove) $el.addClass("blueprint") this.$blueprints.append($el) }, diff --git a/public/assets/javascripts/ui/blueprint/BlueprintView.js b/public/assets/javascripts/ui/blueprint/BlueprintView.js index 40c61d7..a803f12 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintView.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintView.js @@ -12,7 +12,7 @@ var BlueprintView = View.extend({ // this.colorControl = new ColorControl ({ parent: this }) // this.cursor = new HelpCursor({ parent: this }) this.blueprintUpload = new BlueprintUpload ({ parent: this }) - this.blueprintEditor = new BlueprintEditor ({ parent: this }) + this.blueprintScaler = new BlueprintScaler ({ parent: this }) }, load: function(name){ diff --git a/views/controls/blueprint/editor.ejs b/views/controls/blueprint/editor.ejs index 6b80287..aec5e25 100644 --- a/views/controls/blueprint/editor.ejs +++ b/views/controls/blueprint/editor.ejs @@ -33,13 +33,88 @@ body { .hud span.active { color: #000; } .blueprintUpload { - width: 240px; + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + width: 340px; + position: absolute; + top: 50%; left: 50%; + background: white; + padding: 10px; + border: 1px solid black; + box-shadow: -3px 3px #000; + -webkit-transform: translate3D(0%,-200%,0); + transform: translate3D(0%,-200%,0); + margin-left: -175px; + margin-top: -200px; + opacity: 0; +} +.blueprintUpload.active { + -webkit-transform: translate3D(0,0,0); + transform: translate3D(0,0,0); + opacity: 1; +} +.blueprintUpload .toolButton { + float: none; + width: 108px; + display: inline-block; +} +.blueprintUpload .url { + font-size: 15px; + border: 1px solid #888; + padding: 2px; + font-weight: 300; + position: relative; + top: 3px; + margin-right: 10px; + width: 190px; +} +.blueprintUpload p { + font-weight: 300; + font-size: 13px; +} +.blueprintUpload .blueprints { + display: none; +} +.blueprintUpload .blueprints h5 { + width: 250px; + margin: 10px auto; + padding-top: 9px; } .blueprints .blueprint { border: 1px solid black; - padding: 5px; + background: white; + padding: 0px; + position: relative; + display: inline-block; +} +.blueprints .blueprint img { height: 100px; max-width: 200px; + display: block; + cursor: pointer; +} +.blueprints .blueprint .remove { + box-shadow: 0 1px 2px #888; + cursor: pointer; + position: absolute; + color: red; + top: 7px; + right: 7px; + width: 20px; height: 20px; + text-align: center; + background: #fff; + border-radius: 50%; +} +.blueprints .blueprint .remove span { + position: relative; + top: -2px; +} +.blueprintUpload .wallpaperUpload .upload-icon { + margin: 0 4px; +} +.uploadNewBlueprint { + color: #333; + border-bottom: 1px solid; cursor: pointer; } </style> @@ -63,42 +138,49 @@ body { </div> <div class="mediaDrawer fixed animate active blueprintEditor"> - <span class="close">X</span> <div class="box"> - <h2>Upload your Blueprint</h2> - <div class="blueprintUpload"> + <h2>Upload your Blueprint</h2> + <p> + Upload an image which you will trace to make a floor plan. + Images should be at least 1000x1000. + </p> <input type="hidden" name="_csrf" value="[[- token ]]"> + <input type="text" class="url" placeholder="Enter an image URL or..."> <div class="wallpaperUpload toolButton"> <form> <span class="ion-ios-upload-outline upload-icon"></span> - <label>Upload</label> + <label>Upload a File</label> <input type="file" accept="image/*" multiple> </form> </div> - <input type="text" class="url" placeholder="Enter an image URL or..."> <div class="blueprints"> <h5>Your uploaded blueprints</h5> </div> </div> - Please tell us the scale of your blueprint. - Click both corners of a wall, and then enter how long the wall is. - https://s3.amazonaws.com/luckyplop/fbf4295da80f1f66c5e4a248f2ea3e1ce7a22c3d.jpg + <div class="blueprintScaler"> + <div class="blueprintInfo"> + Please tell us the scale of your blueprint. + Click both corners of a wall, and then enter how long the wall is. + <br><br> + Do you want to <span class="uploadNewBlueprint">upload a blueprint?</span> + </div> - <div id="blueprintMap"> - </div> + <div id="blueprintMap"> + </div> - <div id="blueprintDimensions"> - <input type="text" name="blueprint-dimensions"> - <select id="blueprint-units" name="blueprint-units"> - <option value="ft">foot</option> - <option value="m">meter</option> - </select> + <div id="blueprintDimensions"> + <input type="text" name="blueprint-dimensions"> + <select id="blueprint-units" name="blueprint-units"> + <option value="ft">foot</option> + <option value="m">meter</option> + </select> - <button id="saveBlueprint">Save</button> + <button id="saveBlueprint">Save</button> + </div> </div> - + </div> </div> diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 2a93e9b..136bd4d 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -128,7 +128,7 @@ <script type="text/javascript" src="/assets/javascripts/ui/builder/BuilderInfo.js"></script> <script type="text/javascript" src="/assets/javascripts/ui/blueprint/BlueprintView.js"></script> -<script type="text/javascript" src="/assets/javascripts/ui/blueprint/BlueprintEditor.js"></script> +<script type="text/javascript" src="/assets/javascripts/ui/blueprint/BlueprintScaler.js"></script> <script type="text/javascript" src="/assets/javascripts/ui/blueprint/BlueprintUpload.js"></script> <script type="text/javascript" src="/assets/javascripts/ui/editor/EditorView.js"></script> |