diff options
Diffstat (limited to 'public')
| -rw-r--r-- | public/assets/javascripts/rectangles/engine/scenery/move.js | 6 | ||||
| -rw-r--r-- | public/assets/javascripts/ui/editor/EditorToolbar.js | 2 | ||||
| -rw-r--r-- | public/assets/javascripts/ui/editor/EditorView.js | 2 | ||||
| -rw-r--r-- | public/assets/javascripts/ui/editor/MediaEditor.js | 69 | ||||
| -rwxr-xr-x | public/assets/stylesheets/app.css | 23 |
5 files changed, 93 insertions, 9 deletions
diff --git a/public/assets/javascripts/rectangles/engine/scenery/move.js b/public/assets/javascripts/rectangles/engine/scenery/move.js index bad0a55..aa7ddd1 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/move.js +++ b/public/assets/javascripts/rectangles/engine/scenery/move.js @@ -26,6 +26,12 @@ Scenery.move = function(base){ Scenery.remove(base.id) return } + + if (editor.permissions.pick) { + // load the modal + app.router.editorView.mediaEditor.pick(base) + } + if (! (editor.permissions.move || editor.permissions.resize) ) { e.clickAccepted = false return diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js index 4a7c3e8..a3abc5a 100644 --- a/public/assets/javascripts/ui/editor/EditorToolbar.js +++ b/public/assets/javascripts/ui/editor/EditorToolbar.js @@ -87,7 +87,7 @@ var EditorToolbar = View.extend({ var editor = new function(){ this.permissions = new Permissions({ - 'pick': false, + 'pick': true, 'move': true, 'resize': false, 'destroy': false, diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js index 2bb2d61..017e241 100644 --- a/public/assets/javascripts/ui/editor/EditorView.js +++ b/public/assets/javascripts/ui/editor/EditorView.js @@ -13,6 +13,7 @@ var EditorView = View.extend({ this.settings = new EditorSettings ({ parent: this }) this.mediaViewer = new MediaViewer ({ parent: this }) this.mediaUpload = new MediaUpload ({ parent: this }) + this.mediaEditor = new MediaEditor ({ parent: this }) this.wallpaperPicker = new WallpaperPicker ({ parent: this }) this.lightControl = new LightControl ({ parent: this }) }, @@ -39,4 +40,3 @@ var EditorView = View.extend({ } }) - diff --git a/public/assets/javascripts/ui/editor/MediaEditor.js b/public/assets/javascripts/ui/editor/MediaEditor.js new file mode 100644 index 0000000..8d6d517 --- /dev/null +++ b/public/assets/javascripts/ui/editor/MediaEditor.js @@ -0,0 +1,69 @@ + +var MediaEditor = FormView.extend({ + el: "#mediaEditor", + + events: { + }, + + initialize: function(opt){ + this.parent = opt.parent + this.__super__.initialize.call(this) + + this.$name = this.$("[name=name]") + this.$description = this.$("[name=description]") + this.$autoplay = this.$("[name=autoplay]") + + // image fields + this.$widthDimension = this.$("[name=width]") + this.$heightDimension = this.$("[name=height]") + this.$units = this.$("[name=units]") + + // video fields + this.$playButton = this.$(".play") + this.$loop = this.$("[name=loop]") + this.$mute = this.$("[name=mute]") + this.$keyframe = this.$("[name=keyframe]") + }, + + toggle: function(state) { + this.$el.toggleClass("active", state); + }, + + pick: function(scenery) { + this.$el.addClass("active") + + var media = scenery.media + + this.$name.val(media.title) + this.$description.val(media.description) + + switch (media.type) { + case "image": + this.$(".image").show() + this.$(".video").hide() + /* + this.$widthDimension + this.$heightDimension + this.$units + */ + + break + + case "youtube": + case "vimeo": + case "video": + this.$(".video").show() + this.$(".image").hide() + + /* + this.$loop + this.$mute + this.$keyframe + */ + + + break + } + }, + +}) diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 684761c..7389810 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1106,7 +1106,7 @@ input[type=range] { -webkit-appearance: none; -moz-appearance: none; background-color: black; - width: 200px; + width: 180px; height:3px; } @@ -1176,13 +1176,15 @@ input[type="range"]::-webkit-slider-thumb { #startpoint.active:hover { text-decoration:none; } -.settings input[type="text"], textarea{ +.settings input[type="text"] { border: 1px solid #000; font-size: 15px; padding: 5px; } .settings textarea { + border: 1px solid #000; + padding: 5px; font-size: 12px; width: 100%; max-height: 200px; @@ -1193,7 +1195,7 @@ input[type="range"]::-webkit-slider-thumb { border: 1px solid #000; } -.settings .setting{ +.settings .setting { margin-bottom:10px; } .setting.subButtons { @@ -1210,6 +1212,13 @@ input[type="range"]::-webkit-slider-thumb { .settings .setting:last-child{ margin-bottom:0px; } +.settings input[type="text"].number { + width: 60px; +} + +.setting label { + padding-right: 5px; +} button { padding: 8px; @@ -1372,23 +1381,23 @@ form li textarea { margin-top: 20px; } -.video { +.demo .video { height:80vh; min-height:300px; } -.video span { +.demo .video span { font-size:100px; color:white; cursor:pointer; } -.video span.videoTitle { +.demo .video span.videoTitle { font-size: 29px; font-weight: 300; padding: 3px 7px; } -.video span.icon-ios7-play-outline:hover { +.demo .video span.icon-ios7-play-outline:hover { color:lightgreen; } |