diff options
| -rw-r--r-- | public/assets/javascripts/ui/blueprint/BlueprintEditor.js | 30 | ||||
| -rw-r--r-- | public/assets/javascripts/ui/blueprint/BlueprintScale.js | 0 | ||||
| -rw-r--r-- | public/assets/javascripts/ui/blueprint/BlueprintUpload.js | 35 | ||||
| -rw-r--r-- | public/assets/javascripts/ui/blueprint/BlueprintView.js | 3 | ||||
| -rwxr-xr-x | public/assets/stylesheets/app.css | 2 | ||||
| -rw-r--r-- | views/controls/blueprint/editor.ejs | 104 | ||||
| -rw-r--r-- | views/controls/builder/blueprint.ejs | 92 | ||||
| -rw-r--r-- | views/modal.ejs | 2 | ||||
| -rw-r--r-- | views/partials/scripts.ejs | 1 |
9 files changed, 149 insertions, 120 deletions
diff --git a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js new file mode 100644 index 0000000..227c1c8 --- /dev/null +++ b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js @@ -0,0 +1,30 @@ + +var BlueprintEditor = ModalView.extend({ + el: ".blueprintEditor", + + events: { + "change [name=blueprint-dimensions]": "changeDimensions", + "change [name=blueprint-units]": "changeUnits", + "click #saveBlueprint": "save", + }, + + initialize: function(){ + this.$blueprintMap = this.$("#blueprintMap") + this.$blueprintDimensionsRapper = this.$("#blueprintDimensions") + this.$dimensions = this.$("[name=blueprint-dimensions]") + this.$units = this.$("[name=blueprint-units]") + this.$save = this.$("#saveBlueprint") + + this.map = new Map ({ type: 'ortho' }) + + this.$blueprintMap.append(this.map.el) + }, + + changeDimensions: function(){ + }, + changeUnits: function(){ + }, + save: function(){ + }, + +}) diff --git a/public/assets/javascripts/ui/blueprint/BlueprintScale.js b/public/assets/javascripts/ui/blueprint/BlueprintScale.js deleted file mode 100644 index e69de29..0000000 --- a/public/assets/javascripts/ui/blueprint/BlueprintScale.js +++ /dev/null diff --git a/public/assets/javascripts/ui/blueprint/BlueprintUpload.js b/public/assets/javascripts/ui/blueprint/BlueprintUpload.js index fd3a659..9467715 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintUpload.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintUpload.js @@ -1,5 +1,5 @@ -var BlueprintUploadView = UploadView.extend({ +var BlueprintUpload = UploadView.extend({ el: ".blueprintUpload", mediaTag: "blueprint", @@ -14,9 +14,6 @@ var BlueprintUploadView = UploadView.extend({ "keydown .url": "enterSetUrl", "click .blueprint": "choose", - "change [name=blueprint-dimensions]": "changeDimensions", - "change [name=blueprint-units]": "changeUnits", - "click #saveBlueprint": "save", }, initialize: function(opt){ @@ -24,15 +21,8 @@ var BlueprintUploadView = UploadView.extend({ this.__super__.initialize.call(this) this.$url = this.$(".url") + this.$blueprints = this.$(".blueprints") - this.$blueprintMap = this.$("#blueprintMap") - this.$blueprintDimensionsRapper = this.$("#blueprintDimensions") - this.$dimensions = this.$("[name=blueprint-dimensions]") - this.$units = this.$("[name=blueprint-units]") - this.$save = this.$("#saveBlueprint") - - this.map = new Map ({ type: 'ortho' }) - this.load() }, @@ -52,13 +42,6 @@ var BlueprintUploadView = UploadView.extend({ } }, - append: function(media){ - var $el = $("<div>") - $el.data("id", media._id) - $el.addClass("blueprint") - this.$blueprints.append($el) - }, - pick: function(e){ var $el = $(e.currentTarget) // load map with it @@ -112,11 +95,13 @@ var BlueprintUploadView = UploadView.extend({ add: function(media){ this.append(media) }, - changeDimensions: function(){ - }, - changeUnits: function(){ - }, - save: function(){ - }, + append: function(media){ + var $el = $("<img>") + $el.attr("src", media.url) + $el.data("id", media._id) + $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 f7ee13e..40c61d7 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintView.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintView.js @@ -11,7 +11,8 @@ var BlueprintView = View.extend({ // this.settings = new BuilderSettings ({ parent: this }) // this.colorControl = new ColorControl ({ parent: this }) // this.cursor = new HelpCursor({ parent: this }) - this.blueprintUpload = new BlueprintUploadView ({ parent: this }) + this.blueprintUpload = new BlueprintUpload ({ parent: this }) + this.blueprintEditor = new BlueprintEditor ({ parent: this }) }, load: function(name){ diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index bb32500..0f89242 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1598,7 +1598,7 @@ form .paidPlan label { float: none; font-size: 16px; margin: 0 10px; } .mediaDrawer.alert, .mediaDrawer.confirm, .mediaDrawer.passwordForgot, .mediaDrawer.passwordReset, .mediaDrawer.usernameTaken, .mediaDrawer.layouts, .mediaDrawer.projects, .mediaDrawer.newProject, -.mediaDrawer.blueprintUpload { +.mediaDrawer.blueprintEditor { display:table; } .confirm button { diff --git a/views/controls/blueprint/editor.ejs b/views/controls/blueprint/editor.ejs new file mode 100644 index 0000000..6b80287 --- /dev/null +++ b/views/controls/blueprint/editor.ejs @@ -0,0 +1,104 @@ +<style type="text/css"> +html,body{width:100%;height:100%;margin:0;padding:0;} +body { + overflow: hidden; +} +#perspective, +#perspective .mx-scene { + position: absolute; + left:0%; + top:0px; + -webkit-transform: translateZ(0); + transform: translateZ(0); +} + +#orthographic { + position: absolute; + left:50%; + top:0px +} +.hud { + position: absolute; + top: 0; + left: 0; + padding: 10px; + background: white; +} +.ortho-hud { + left: 50%; + border-left: 1px solid black; +} +#url { width: 300px } +.hud span { color: #888; cursor: pointer; } +.hud span.active { color: #000; } + +.blueprintUpload { + width: 240px; +} +.blueprints .blueprint { + border: 1px solid black; + padding: 5px; + height: 100px; + max-width: 200px; + cursor: pointer; +} +</style> + +<div id="blueprintView"> + <div id="perspective"></div> + <div id="orthographic"></div> + + <div class="hud persp-hud"> + <input type="text" id="url" placeholder="paste an image URL here!"> + <span class="ion-ionic active" data-role="orbit-mode"></span> + <span class="ion-archive" data-role="keyboard-mode"></span> + </div> + + <div class="hud ortho-hud"> + <span class="ion-navigate" data-role="arrow-mode"></span> + <span class="ion-ios-pulse active" data-role="polyline-mode"></span> + <span class="ion-ios-grid-view-outline" data-role="ortho-polyline-mode"></span> + <span class="ion-scissors" data-role="eraser-mode"></span> + </div> +</div> + +<div class="mediaDrawer fixed animate active blueprintEditor"> + <span class="close">X</span> + <div class="box"> + + <h2>Upload your Blueprint</h2> + + <div class="blueprintUpload"> + <input type="hidden" name="_csrf" value="[[- token ]]"> + <div class="wallpaperUpload toolButton"> + <form> + <span class="ion-ios-upload-outline upload-icon"></span> + <label>Upload</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 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> + + <button id="saveBlueprint">Save</button> + </div> + + </div> +</div> diff --git a/views/controls/builder/blueprint.ejs b/views/controls/builder/blueprint.ejs deleted file mode 100644 index e5f3257..0000000 --- a/views/controls/builder/blueprint.ejs +++ /dev/null @@ -1,92 +0,0 @@ -<style type="text/css"> -html,body{width:100%;height:100%;margin:0;padding:0;} -body { - overflow: hidden; -} -#perspective, -#perspective .mx-scene { - position: absolute; - left:0%; - top:0px; - -webkit-transform: translateZ(0); - transform: translateZ(0); -} - -#orthographic { - position: absolute; - left:50%; - top:0px -} -.hud { - position: absolute; - top: 0; - left: 0; - padding: 10px; - background: white; -} -.ortho-hud { - left: 50%; - border-left: 1px solid black; -} -#url { width: 300px } -.hud span { color: #888; cursor: pointer; } -.hud span.active { color: #000; } - -#blueprintForm { - width: 240px; -} -</style> - -<div id="blueprintView"> - <div id="perspective"></div> - <div id="orthographic"></div> - - <div class="hud persp-hud"> - <input type="text" id="url" placeholder="paste an image URL here!"> - <span class="ion-ionic active" data-role="orbit-mode"></span> - <span class="ion-archive" data-role="keyboard-mode"></span> - </div> - - <div class="hud ortho-hud"> - <span class="ion-navigate" data-role="arrow-mode"></span> - <span class="ion-ios-pulse active" data-role="polyline-mode"></span> - <span class="ion-ios-grid-view-outline" data-role="ortho-polyline-mode"></span> - <span class="ion-scissors" data-role="eraser-mode"></span> - </div> - - <div class="mediaDrawer fixed animate blueprintUpload active"> - <span class="close">X</span> - <div class="box"> - - <h2>Upload A Room Image</h2> - - <div id="blueprintForm"> - <div class="wallpaperUpload toolButton"> - <form> - <span class="ion-ios-upload-outline upload-icon"></span> - <label>Upload</label> - <input type="file" accept="image/*" multiple> - </form> - </div> - <input type="text" class="url" placeholder="Enter an image URL or..."> - </div> - - Please tell us the scale of your map. - Click both corners of a wall, and then enter how long the wall is. - - <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> - - <button id="saveBlueprint">Save</button> - </div> - - </div> - </div> -</div>
\ No newline at end of file diff --git a/views/modal.ejs b/views/modal.ejs index 433861e..775ba88 100644 --- a/views/modal.ejs +++ b/views/modal.ejs @@ -10,7 +10,7 @@ <div style="height: 70%; clear: both;" id="content"></div> - [[ include controls/builder/blueprint ]] + [[ include controls/blueprint/editor ]] [[ include partials/confirm-modal ]] [[ include partials/sign-in ]] [[ include projects/layouts-modal ]] diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 64ac135..2a93e9b 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -128,6 +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/BlueprintUpload.js"></script> <script type="text/javascript" src="/assets/javascripts/ui/editor/EditorView.js"></script> |