diff options
| -rw-r--r-- | public/assets/javascripts/ui/editor/EditorToolbar.js | 17 | ||||
| -rw-r--r-- | public/assets/javascripts/ui/editor/EditorView.js | 1 | ||||
| -rw-r--r-- | public/assets/javascripts/ui/editor/TextEditor.js | 41 | ||||
| -rw-r--r-- | server/lib/views/index.js | 2 | ||||
| -rw-r--r-- | views/controls/editor/light-control.ejs | 72 | ||||
| -rw-r--r-- | views/controls/editor/text-editor.ejs | 32 | ||||
| -rw-r--r-- | views/controls/editor/toolbar.ejs | 10 | ||||
| -rwxr-xr-x | views/editor.ejs | 1 | ||||
| -rw-r--r-- | views/partials/header.ejs | 3 | ||||
| -rw-r--r-- | views/partials/scripts.ejs | 1 |
10 files changed, 131 insertions, 49 deletions
diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js index bb4b145..513306d 100644 --- a/public/assets/javascripts/ui/editor/EditorToolbar.js +++ b/public/assets/javascripts/ui/editor/EditorToolbar.js @@ -10,7 +10,7 @@ var EditorToolbar = View.extend({ "click [data-role='destroy-media']": 'destroyMedia', "click [data-role='toggle-wallpaper-panel']": 'toggleWallpaper', "click [data-role='toggle-light-control']": 'toggleLightControl', - "click [data-role='edit-wall-text']": 'editWallText', + "click [data-role='toggle-text-editor']": 'toggleTextEditor', }, initialize: function(opt){ @@ -24,6 +24,7 @@ var EditorToolbar = View.extend({ toggleSettings: function(){ // this.resetMode() + this.parent.textEditor.hide() this.parent.lightControl.hide() this.parent.wallpaperPicker.hide() this.parent.mediaEditor.hide() @@ -47,6 +48,7 @@ var EditorToolbar = View.extend({ resetControls: function(){ $(".inuse").removeClass("inuse") + this.parent.textEditor.hide() this.parent.wallpaperPicker.hide() this.parent.lightControl.hide() this.parent.settings.hide() @@ -107,6 +109,7 @@ var EditorToolbar = View.extend({ $("[data-role='toggle-wallpaper-panel']").toggleClass("inuse", state) this.parent.mediaEditor.hide() this.parent.lightControl.hide() + this.parent.textEditor.hide() this.parent.settings.hide() this.parent.wallpaperPicker.toggle(state) }, @@ -117,12 +120,20 @@ var EditorToolbar = View.extend({ $("[data-role='toggle-light-control']").toggleClass("inuse", state) this.parent.mediaEditor.hide() this.parent.wallpaperPicker.hide() + this.parent.textEditor.hide() this.parent.settings.hide() this.parent.lightControl.toggle(state) }, - editWallText: function(){ - }, + toggleTextEditor: function(){ + var state = ! $("[data-role='toggle-text-editor']").hasClass("inuse") + this.resetMode() + $("[data-role='toggle-text-editor']").toggleClass("inuse", state) + this.parent.mediaEditor.hide() + this.parent.wallpaperPicker.hide() + this.parent.settings.hide() + this.parent.textEditor.toggle(state) + }, }) diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js index 6636a8c..83db532 100644 --- a/public/assets/javascripts/ui/editor/EditorView.js +++ b/public/assets/javascripts/ui/editor/EditorView.js @@ -16,6 +16,7 @@ var EditorView = View.extend({ this.mediaEditor = new MediaEditor ({ parent: this }) this.wallpaperPicker = new WallpaperPicker ({ parent: this }) this.lightControl = new LightControl ({ parent: this }) + this.textEditor = new TextEditor ({ parent: this }) this.collaborators = new Collaborators ({ parent: this }) }, diff --git a/public/assets/javascripts/ui/editor/TextEditor.js b/public/assets/javascripts/ui/editor/TextEditor.js new file mode 100644 index 0000000..0319a31 --- /dev/null +++ b/public/assets/javascripts/ui/editor/TextEditor.js @@ -0,0 +1,41 @@ + +var TextEditor = FormView.extend({ + el: "#textEditor", + + events: { + "keydown": 'taint', + "focus [name]": "clearMinotaur", + "mousedown": "stopPropagation", + "change [name=font-family]": 'changeFontFamily', + "change [name=font-size]": 'changeFontSize', + "input [name=text-body]": 'changeText', + "click [data-role=destroy-media]": "destroy", + }, + + initialize: function(opt){ + this.parent = opt.parent + this.__super__.initialize.call(this) + + this.$fontFamily = this.$("[name=font-family]") + this.$fontSize = this.$("[name=font-size]") + this.$textBody = this.$("[name=text-body]") + }, + + toggle: function(state){ + this.$el.toggleClass("active", state); + }, + + taint: function(e){ + e.stopPropagation() + }, + + changeFontFamily: function(){ + }, + + changeFontSize: function(){ + }, + + changeText: function(){ + }, + +}) diff --git a/server/lib/views/index.js b/server/lib/views/index.js index 29b84d8..ca48159 100644 --- a/server/lib/views/index.js +++ b/server/lib/views/index.js @@ -27,6 +27,7 @@ views.editor_new = function (req, res) { res.redirect('/') } else { + res.locals.opt.editing = true res.render('editor') } } @@ -36,6 +37,7 @@ views.editor = function (req, res) { res.redirect('/') } else if (req.isOwner || req.isCollaborator || req.isStaff) { + res.locals.opt.editing = true res.render('editor') } else { diff --git a/views/controls/editor/light-control.ejs b/views/controls/editor/light-control.ejs index 37a243c..fdf95a7 100644 --- a/views/controls/editor/light-control.ejs +++ b/views/controls/editor/light-control.ejs @@ -8,49 +8,33 @@ </div> <div class="color-swatches"> - <span> - <div class="swatch" id="wall-color" data-mode="wall"></div><label>wall</label> - </span> - <span class="active"> - <div class="swatch" id="floor-color" data-mode="floor"></div><label>floor</label> - </span> - <span> - <div class="swatch" id="ceiling-color" data-mode="ceiling"></div><label>ceiling</label> - </span> - <span> - <div class="swatch" id="outline-color" data-mode="outline"></div><label>outlines</label> - </span> - <span> + <span> + <div class="swatch" id="wall-color" data-mode="wall"></div><label>wall</label> + </span> + <span class="active"> + <div class="swatch" id="floor-color" data-mode="floor"></div><label>floor</label> + </span> + <span> + <div class="swatch" id="ceiling-color" data-mode="ceiling"></div><label>ceiling</label> + </span> + <span> + <div class="swatch" id="outline-color" data-mode="outline"></div><label>outlines</label> + </span> + </div> + + <h4>Preset Styles</h4> + <div class="color-swatches defaults"> + <span> + Wireframe + </span> + <span> + Shaded + </span> + <span> + P.Funk + </span> + <span> + SeaPunk + </span> </div> -<h4>Preset Styles</h4> -<div class="color-swatches defaults"> - <span> - Wireframe - </span> - <span> - Shaded - </span> - <span> - P.Funk - </span> - <span> - SeaPunk - </span> -</div> - -</div> -<!-- - <div class="slider"> - <input type="range" min="0" max="100" value="100" id="wall-hue" /> - <h4>Wall Hue</h4> - </div> - <div class="slider"> - <input type="range" min="0" max="100" value="0" id="brightness-control" /> - <h4>Brightness</h4> - </div> - <div class="slider"> - <input type="range" min="0" max="100" value="0" id="shadow-control" /> - <h4>Shadow</h4> - </div> ---> </div> diff --git a/views/controls/editor/text-editor.ejs b/views/controls/editor/text-editor.ejs new file mode 100644 index 0000000..205fbdf --- /dev/null +++ b/views/controls/editor/text-editor.ejs @@ -0,0 +1,32 @@ +<div class="vvbox settings" id="textEditor"> + <h4>Edit Text</h4> + + <div class="setting"> + <select name="font-family"> + <option>Helvetica</option> + <option>Times New Roman</option> + <option>Lato</option> + <option></option> + </select> + <select name="font-size"> + <option value="9">9pt</option> + <option value="10">10pt</option> + <option value="12">12pt</option> + <option value="16">16pt</option> + <option value="24">24pt</option> + <option value="36">36pt</option> + <option value="72">72pt</option> + </select> + </div> + + <div class="setting"> + <textarea name="text-body"></textarea> + </div> + + <div class="setting"> + <a href="#" class="warn btn" data-role="destroy-text">remove from wall</a> + </div> +</div> + +<style> +</style>
\ No newline at end of file diff --git a/views/controls/editor/toolbar.ejs b/views/controls/editor/toolbar.ejs index 63df73c..92807e1 100644 --- a/views/controls/editor/toolbar.ejs +++ b/views/controls/editor/toolbar.ejs @@ -12,9 +12,8 @@ data-role='destroy-media' data-info="delete media" class="icon-ios7-trash-outline"></span> - <span - data-role='edit-wall-text' + data-role='toggle-text-editor' data-info="edit wall text" class="icon-ios7-compose-outline"></span> --> @@ -26,6 +25,13 @@ data-role='toggle-light-control' data-info="edit room colors" class="icon-ios7-sunny-outline"></span> + +[[ if (user.username == "test12343") { ]] + <span + data-role='toggle-text-editor' + data-info="edit wall text" + class="icon-ios7-compose-outline"></span> +[[ } ]] <span data-role='toggle-project-settings' diff --git a/views/editor.ejs b/views/editor.ejs index 9950878..e029225 100755 --- a/views/editor.ejs +++ b/views/editor.ejs @@ -17,6 +17,7 @@ [[ include controls/editor/media-editor ]] [[ include controls/editor/wallpaper ]] [[ include controls/editor/light-control ]] + [[ include controls/editor/text-editor ]] [[ include controls/editor/collaborators ]] [[ include controls/editor/settings ]] </div> diff --git a/views/partials/header.ejs b/views/partials/header.ejs index 88d832d..065385d 100644 --- a/views/partials/header.ejs +++ b/views/partials/header.ejs @@ -67,7 +67,10 @@ [[ } else if (! profile) { ]] <a href="/profile" class="topLink">Profile</a> [[ } ]] + + [[ if (opt.editing) { ]] <a href="#" class="icon-help-circled" id="help-button"></a> + [[ } ]] [[ } else { ]] <a href="/signup" data-role="show-signup-modal" class="signUp topLink">Sign Up</a> diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 2e2d8b6..1ce180a 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -100,6 +100,7 @@ <script type="text/javascript" src="/assets/javascripts/ui/editor/MediaEditor.js"></script> <script type="text/javascript" src="/assets/javascripts/ui/editor/MediaUpload.js"></script> <script type="text/javascript" src="/assets/javascripts/ui/editor/MediaViewer.js"></script> +<script type="text/javascript" src="/assets/javascripts/ui/editor/TextEditor.js"></script> <script type="text/javascript" src="/assets/javascripts/ui/editor/WallpaperPicker.js"></script> <script type="text/javascript" src="/assets/javascripts/ui/reader/ReaderView.js"></script> |