diff options
| -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 | ||||
| -rw-r--r-- | views/controls/editor/media-editor.ejs | 30 | ||||
| -rwxr-xr-x | views/editor.ejs | 2 | ||||
| -rw-r--r-- | views/partials/scripts.ejs | 3 |
8 files changed, 115 insertions, 22 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; } diff --git a/views/controls/editor/media-editor.ejs b/views/controls/editor/media-editor.ejs index 95aabb5..483fa72 100644 --- a/views/controls/editor/media-editor.ejs +++ b/views/controls/editor/media-editor.ejs @@ -1,4 +1,4 @@ -<div class="vvbox settings" id="editorMediaSettings"> +<div class="vvbox settings" id="mediaEditor"> <input type="hidden" name="_csrf" value="[[- token ]]"> <input type="hidden" name="_id" value="new"> @@ -15,24 +15,32 @@ <span class="ion-play"></span> <span class="ion-pause"></span> </span> - <!-- ion-volume-high ion-volume-mute --> - - <input type="checkbox" name="autoplay" value="1"> Autoplay - <input type="checkbox" name="loop" value="1"> Loop - <input type="checkbox" name="mute" value="1"> Mute - <input type="range" min="0" max="1" name="keyframe"> Initial Still + </div> + <div class="video setting"> + <input type="checkbox" name="autoplay" value="1" id="video_autoplay"> + <label for="video_autoplay">Autoplay</label> + <input type="checkbox" name="loop" value="1" id="video_loop"> + <label for="video_loop">Loop</label> + <input type="checkbox" name="mute" value="1" id="video_mute"> + <label for="video_mute">Mute</label> + </div> + + <div class="video setting"> + Initial Still + <br> + <input type="range" min="0" max="1" value="0" step="0.01" name="keyframe"> </div> <div class="image setting"> - Dimensions - <input type="text" name="width"> Width - <input type="text" name="height"> Height + Dimensions<br> + <input type="text" name="width" placeholder="width" class="number"> + <input type="text" name="height" placeholder="height" class="number"> <select name="units"> - <option value="inches">in</option> + <option value="inch">inch</option> <option value="cm">cm</option> </select> </div> diff --git a/views/editor.ejs b/views/editor.ejs index a79eb9a..5d1e052 100755 --- a/views/editor.ejs +++ b/views/editor.ejs @@ -13,8 +13,8 @@ <div id="editorView"> [[ include controls/editor/toolbar ]] - [[ include controls/editor/video-toolbar ]] [[ include controls/editor/media-drawer ]] + [[ include controls/editor/media-editor ]] [[ include controls/editor/wallpaper ]] [[ include controls/editor/light-control ]] [[ include controls/editor/settings ]] diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 6dd4480..40bb306 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -78,13 +78,14 @@ <script type="text/javascript" src="/assets/javascripts/ui/builder/BuilderToolbar.js"></script> <script type="text/javascript" src="/assets/javascripts/ui/builder/BuilderView.js"></script> +<script type="text/javascript" src="/assets/javascripts/ui/editor/EditorView.js"></script> <script type="text/javascript" src="/assets/javascripts/ui/editor/EditorSettings.js"></script> <script type="text/javascript" src="/assets/javascripts/ui/editor/EditorToolbar.js"></script> <script type="text/javascript" src="/assets/javascripts/ui/editor/LightControl.js"></script> +<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/WallpaperPicker.js"></script> -<script type="text/javascript" src="/assets/javascripts/ui/editor/EditorView.js"></script> <script type="text/javascript" src="/assets/javascripts/ui/reader/ReaderView.js"></script> |