From 00e824434f61ff65206608ac026236e7b5af428d Mon Sep 17 00:00:00 2001 From: Tom MacWright Date: Wed, 17 Oct 2012 17:09:16 -0400 Subject: [PATCH] Set CSS states for states --- css/app.css | 4 +++ js/iD/Controller.js | 34 ++++++++++++++++---------- js/iD/controller/edit/EditBaseState.js | 25 ++++++++++--------- js/iD/controller/shape/NoSelection.js | 27 +++++++++++--------- 4 files changed, 55 insertions(+), 35 deletions(-) diff --git a/css/app.css b/css/app.css index d1f814e26..464996632 100644 --- a/css/app.css +++ b/css/app.css @@ -24,6 +24,10 @@ text { -moz-user-select: none; } +#map.state-drawing { + cursor: pointer; +} + .currentMode { font-weight: bold; } diff --git a/js/iD/Controller.js b/js/iD/Controller.js index 6b234fffa..eb1257333 100755 --- a/js/iD/Controller.js +++ b/js/iD/Controller.js @@ -12,35 +12,43 @@ declare("iD.Controller", [Evented], { presets: null, // tag presets editorCache: null, // cache of tag editor objects, means we don't have to repeatedly load them - constructor:function(_map) { + constructor:function(map) { // summary: The Controller marshalls ControllerStates and passes events to them. - this.map=_map; - this.undoStack=new iD.actions.UndoStack(); - this.presets={}; - this.editorCache={}; + this.map = map; + this.undoStack = new iD.actions.UndoStack(); + this.presets = {}; + this.editorCache = {}; }, - setStepper:function(_stepper) { + setStepper:function(stepper) { // summary: Set reference for the singleton-like class for the step-by-step instruction panel. - this.stepper=_stepper; + this.stepper = stepper; }, - setTagPresets:function(type,url) { + setTagPresets:function(type, url) { // summary: Load and store a JSON tag preset file. - this.presets[type]=new iD.tags.PresetList(type,url); + this.presets[type] = new iD.tags.PresetList(type,url); }, setState:function(newState) { // summary: Enter a new ControllerState, firing exitState on the old one, and enterState on the new one. - if (newState==this.state) { return; } + if (newState === this.state) { return; } if (this.state) { this.state.exitState(newState); - this.emit("exitState", { bubbles: true, cancelable: true, state: this.state.stateNameAsArray() }); + this.emit("exitState", { + bubbles: true, + cancelable: true, + state: this.state.stateNameAsArray() + }); } newState.setController(this); - this.state=newState; + this.state = newState; newState.enterState(); - this.emit("enterState", { bubbles: true, cancelable: true, state: this.state.stateNameAsArray() }); + this.emit("enterState", { + bubbles: true, + cancelable: true, + state: this.state.stateNameAsArray() + }); }, entityMouseEvent:function(event,entityUI) { diff --git a/js/iD/controller/edit/EditBaseState.js b/js/iD/controller/edit/EditBaseState.js index f849d4459..8b565e0dc 100644 --- a/js/iD/controller/edit/EditBaseState.js +++ b/js/iD/controller/edit/EditBaseState.js @@ -12,21 +12,22 @@ declare("iD.controller.edit.EditBaseState", [iD.controller.ControllerState], { editortooltip: null, constructor:function() { - // summary: Base state for the 'Edit object' states - where an object is selected and the user is making changes to it. + // summary: Base state for the 'Edit object' states - where an + // object is selected and the user is making changes to it. }, - + openEditorTooltip:function(x,y,entity) { // summary: Open the initial 'Edit tags/Edit shape' tooltip. // x: Number Screen co-ordinate. // y: Number Screen co-ordinate. - // entity: iD.Entity The entity to be edited. + // entity: iD.Entity The entity to be edited. var h = iD.Util.friendlyName(entity); - this.editortooltip = new dijit.TooltipDialog({ - content: h+" " - +" ", - autoFocus: false - }); - on(registry.byId('editTags'), 'click', lang.hitch(this,this.editTags,entity)); + this.editortooltip = new dijit.TooltipDialog({ + content: h + " " + + " ", + autoFocus: false + }); + on(registry.byId('editTags'), 'click', lang.hitch(this,this.editTags,entity)); dijit.popup.open({ popup: this.editortooltip, x: x, y: y }); }, @@ -34,10 +35,12 @@ declare("iD.controller.edit.EditBaseState", [iD.controller.ControllerState], { // summary: Close the tooltip. array.forEach(['editTags','editShape'], function(b){ if (!registry.byId(b)) return; - registry.byId(b).type=''; // fix Safari issue + registry.byId(b).type = ''; // fix Safari issue registry.byId(b).destroy(); // remove from registry so we can reinitialise next time }); - if (this.editortooltip) { dijit.popup.close(this.editortooltip); } + if (this.editortooltip) { + dijit.popup.close(this.editortooltip); + } }, editTags:function(entity) { diff --git a/js/iD/controller/shape/NoSelection.js b/js/iD/controller/shape/NoSelection.js index d866d23f8..1e9eb8301 100644 --- a/js/iD/controller/shape/NoSelection.js +++ b/js/iD/controller/shape/NoSelection.js @@ -30,12 +30,17 @@ declare("iD.controller.shape.NoSelection", [iD.controller.ControllerState], { // summary: In 'Draw shape' mode but nothing is selected. }, - enterState:function() { + exitState: function() { + this.controller.map.div.className = ''; + }, + + enterState: function() { + this.controller.map.div.className = 'state-drawing'; this.controller.stepper.setSteps({ - begin: "Click anywhere on the map to start drawing there", - draw: "Keep clicking to add each point, and press Enter or double-click when you're done", + begin: "Click anywhere on the map to start drawing", + draw: "Keep clicking to add each point then double-click when you're done", tag: "Set the type of the road or shape" - },['begin','draw','tag']).highlight('begin'); + }, ['begin', 'draw', 'tag']).highlight('begin'); }, processMouseEvent:function(event,entityUI) { @@ -47,13 +52,13 @@ declare("iD.controller.shape.NoSelection", [iD.controller.ControllerState], { switch (entityType) { case 'node': // Click to select a node - var ways=entity.parentWays(); - if (ways.length==0) { return new iD.controller.shape.SelectedPOINode(entity); } -// else { return new iD.controller.shape.SelectedWayNode(entity,ways[0]); } -// ** FIXME: ^^^ the above should start a new branching way, not select the node - return this; - case 'way': - // Click to select a way + var ways=entity.parentWays(); + if (ways.length==0) { return new iD.controller.shape.SelectedPOINode(entity); } + // else { return new iD.controller.shape.SelectedWayNode(entity,ways[0]); } + // ** FIXME: ^^^ the above should start a new branching way, not select the node + return this; + case 'way': + // Click to select a way return new iD.controller.shape.SelectedWay(entityUI.entity); default: // Click to start a new way