diff options
Diffstat (limited to 'public/assets/javascripts/ui/reader')
| -rw-r--r-- | public/assets/javascripts/ui/reader/EmbedView.js | 76 | ||||
| -rw-r--r-- | public/assets/javascripts/ui/reader/MediaPlayer.js | 28 | ||||
| -rw-r--r-- | public/assets/javascripts/ui/reader/ReaderView.js | 88 | ||||
| -rw-r--r-- | public/assets/javascripts/ui/reader/ShareView.js | 62 | ||||
| -rw-r--r-- | public/assets/javascripts/ui/reader/Tracker.js | 133 | ||||
| -rw-r--r-- | public/assets/javascripts/ui/reader/_router.js | 24 |
6 files changed, 395 insertions, 16 deletions
diff --git a/public/assets/javascripts/ui/reader/EmbedView.js b/public/assets/javascripts/ui/reader/EmbedView.js new file mode 100644 index 0000000..7a75e00 --- /dev/null +++ b/public/assets/javascripts/ui/reader/EmbedView.js @@ -0,0 +1,76 @@ +var EmbedView = ModalView.extend({ + el: ".embedView", + + events: { + "keydown": "stopPropagation", + "input [name=width]": "build", + "input [name=height]": "build", + "click [name=mute]": "build", + "click [name=interactive]": "build", + "click textarea": "selectAll", + "click #testEmbed": "test", + }, + + defaultWidth: 600, + defaultHeight: 450, + + initialize: function(opt){ + this.parent = opt.parent + this.$embedCode = this.$("#embedCode") + this.$width = this.$("[name=width]") + this.$height = this.$("[name=height]") + this.$mute = this.$("[name=mute]") + this.$interactive = this.$("[name=interactive]") + + this.$width.val(this.defaultWidth) + this.$height.val(this.defaultHeight) + }, + + show: function(){ + this.build() + this.__super__.show.call(this) + }, + + build: function(){ + var kode = this.getEmbedCode() + this.$embedCode.val( kode ) + }, + + getEmbedCode: function(){ + var mute = this.$mute.prop('checked') ? 1 : 0 + var interactive = this.$interactive.prop('checked') ? 1 : 0 + var width = clamp( this.$width.int(), 0, 2000) || this.defaultWidth + var height = clamp( this.$height.int(), 0, 2000) || this.defaultHeight + var link = this.parent.getLink() + var embed_link = link + embed_link += "?mute=" + mute + embed_link += "&embed=1" + if (interactive) { + embed_link += "&interactive=1" + } + + var kode = "<iframe src='" + encodeURI(embed_link) + "' width='" + width + "' height='" + height + "'" + kode += " seamless scrolling='no' style='border: 0'" + kode += " webkitallowfullscreen mozallowfullscreen allowfullscreen" + if (! interactive) { + kode += " style='pointer-events:none;'" + } + kode += "></iframe>" + + if (! interactive) { + kode = "<div style='position:relative'>" + kode + "<a href='" + encodeURI(link) + "' style='display:block;position:absolute;top:0;left:0;width:" + width + "px;height:" + height + "px;'></a></div>" + } + + return kode + }, + + test: function(){ + var kode = this.getEmbedCode() + window.open("data:text/html," + kode, "_blank") + }, + + selectAll: function(){ + this.$embedCode[0].select() + }, + +}) diff --git a/public/assets/javascripts/ui/reader/MediaPlayer.js b/public/assets/javascripts/ui/reader/MediaPlayer.js index df2d075..8e65976 100644 --- a/public/assets/javascripts/ui/reader/MediaPlayer.js +++ b/public/assets/javascripts/ui/reader/MediaPlayer.js @@ -1,5 +1,5 @@ -var MediaPlayer = FormView.extend({ +var MediaPlayer = View.extend({ el: "#mediaPlayer", events: { @@ -44,22 +44,26 @@ var MediaPlayer = FormView.extend({ this.unbind() } if (media.type == "image") { - if ((! media.title || ! media.title.length) && (! media.description || ! media.description.length)) { + if ( ! media.description && (! media.title || media.title == filenameFromUrl(media.url)) ) { this.hide() - return + return false } } + else if (media.type == "text") { + return false + } this.bind(scenery) this.$el.addClass("active") - this.$name.html(media.title) - this.$description.html(media.description) + this.$name.html( sanitize(media.title) ) + this.$description.html( marked(media.description) ) switch (media.type) { case "image": - this.$(".image").show() this.$(".video").hide() + this.$(".audio").hide() + this.$(".image").show() // this.$widthDimension.html( Number(media.widthDimension) || "" ) // this.$heightDimension.html( Number(media.heightDimension) || "" ) @@ -70,14 +74,24 @@ var MediaPlayer = FormView.extend({ case "youtube": case "vimeo": case "video": - this.$(".video").show() this.$(".image").hide() + this.$(".audio").hide() + this.$(".video").show() this.$playButton.toggleClass("paused", ! this.scenery.paused()) this.$muteButton.toggleClass("muted", this.scenery.muted()) break + + case "soundcloud": + this.$(".image").hide() + this.$(".video").hide() + this.$(".audio").show() + + this.$playButton.toggleClass("paused", ! this.scenery.paused()) + break } + return true }, hide: function(scenery){ diff --git a/public/assets/javascripts/ui/reader/ReaderView.js b/public/assets/javascripts/ui/reader/ReaderView.js index d80f225..43e81d8 100644 --- a/public/assets/javascripts/ui/reader/ReaderView.js +++ b/public/assets/javascripts/ui/reader/ReaderView.js @@ -9,36 +9,98 @@ var ReaderView = View.extend({ initialize: function(){ this.mediaPlayer = new MediaPlayer ({ parent: this }) + this.shareView = new ShareView ({ parent: this }) }, load: function(name){ - if (window.location.search.indexOf("noui") !== -1) { - $(".logo,.topLinks,#editorView").hide() + var opt = this.getQS() + var mode = "default" + var name = sanitize(name) + + if (opt.noui) { + $(".logo, .topLinks, #editorView, #keyhint").hide() + mode = "noui" + } + if (opt.embed) { + $(".topLinks, .share, #edit-room-link, #keyhint").hide() + mode = "embed" } - if (window.location.search.indexOf("mute") !== -1) { + if (opt.mute) { app.muted = true } - name = sanitize(name) - $.get(this.projectAction + name, this.ready.bind(this)) + + this.tracker = new Tracker ({ mode: mode }) + + if ('vvalls_data' in window) { + this.ready(window.vvalls_data) + } + else { + $.get(this.projectAction + name, this.ready.bind(this)) + } + }, + + getQS: function(){ + var qs = {} + window.location.search.replace(/^\?/,"").split("&").forEach(function(s){ + var pair = s.split("=") + if (pair.length < 2) { + qs[pair[0]] = true + } + else { + qs[pair[0]] = pair[1] + } + }) + return qs }, ready: function(data){ $("#map").hide() + this.data = data + var is_landscape = window.innerWidth > window.innerHeight - data.rooms && Rooms.deserialize(data.rooms) + if (is_desktop || (is_mobile && is_landscape)) { + this.build(data) + return + } + + // don't build anything until we're in landscape mode, otherwise ios might crash!! + var orientationFn = orientationchange.bind(this) + window.addEventListener('orientationchange', orientationFn) + function orientationchange (e) { + var is_landscape = window.innerWidth > window.innerHeight + if (is_landscape) { + window.removeEventListener('orientationchange', orientationFn) + this.build(data) + } + } + }, + + build: function(data){ + if (data.shapes.length) { + Rooms.deserializeFromShapes(data) + } + else { + Rooms.deserialize(data.rooms) + } data.walls && Walls.deserialize(data.walls) data.media && Scenery.deserialize(data.media) + data.sculpture && Sculpture.deserialize(data.sculpture) data.startPosition && scene.camera.move(data.startPosition) + cam.y = window.viewHeight = data.viewHeight || app.defaults.viewHeight + var colors = data.colors || app.defaults.colors var modes = [ "wall", "outline", "floor", "ceiling" ] modes.forEach(function(mode){ Walls.setColor[mode](colors[mode]) }) - editor.permissions.clear() + window.editor && editor.permissions.clear() - this.listen() + // disable until we start using spinning again + // this.listen() + + app.tube("site-ready") }, listen: function(){ @@ -71,11 +133,19 @@ var ReaderView = View.extend({ }, pick: function(scenery){ - this.mediaPlayer.pick(scenery) + var has_info = this.mediaPlayer.pick(scenery) + $("#minimap").toggleClass('active', ! has_info) + app.tube("pick-scenery", { scenery: scenery }) + }, + + pickWall: function(wall, pos){ + this.hideExtras() }, hideExtras: function(){ + $("#minimap").addClass('active') this.mediaPlayer.hide() + app.tube("close-scenery") } }) diff --git a/public/assets/javascripts/ui/reader/ShareView.js b/public/assets/javascripts/ui/reader/ShareView.js new file mode 100644 index 0000000..dbe6f64 --- /dev/null +++ b/public/assets/javascripts/ui/reader/ShareView.js @@ -0,0 +1,62 @@ +var ShareView = View.extend({ + el: ".share", + + events: { + "keydown": "stopPropagation", + "click #share_facebook": "facebook", + "click #share_twitter": "twitter", + "click #share_embed": "embed", + }, + + initialize: function(opt){ + this.parent = opt.parent + this.embedView = new EmbedView ({ parent: this }) + this.$link = this.$("#share_link") + }, + + toggle: function(state){ + if (typeof state == "boolean") { + this.$el.toggleClass("active", state) + } + else { + this.$el.toggleClass("active") + } + }, + show: function(){ + this.toggle(true) + }, + hide: function(){ + this.toggle(false) + }, + + setLink: function(url){ + this.$link.val( url ) + }, + getLink: function(){ + var link = window.location.origin + window.location.pathname + link = link.replace(/\/edit\/?$/, "") + return link + }, + + facebook: function (e) { + e.preventDefault() + var link = this.getLink() + var msg = app.controller.data.name + " on VValls" + var url = "https://www.facebook.com/share.php?u=" + encodeURIComponent(link) + "&t=" + encodeURIComponent(msg) + window.open(url, "_blank") + }, + + twitter: function (e) { + e.preventDefault() + var link = this.getLink() + var msg = app.controller.data.name + " on VValls" + var url = "https://twitter.com/home?status=" + encodeURIComponent(link + " " + msg) + window.open(url, "_blank") + }, + + embed: function (e) { + e.preventDefault() + this.embedView.show() + }, + +}) diff --git a/public/assets/javascripts/ui/reader/Tracker.js b/public/assets/javascripts/ui/reader/Tracker.js new file mode 100644 index 0000000..d2dec39 --- /dev/null +++ b/public/assets/javascripts/ui/reader/Tracker.js @@ -0,0 +1,133 @@ +if (window.location.host.indexOf("lvh.me") === -1) { + (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ + (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), + m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) + })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); +} +else { + ga = function(){} +} +ga('create', 'UA-56883705-1', 'auto'); +ga('send', 'pageview'); + +var Tracker = Fiber.extend(function(base){ + + var exports = { + init: function(opt){ + this.wall_id = null + this.scenery_id = null + this.clicks = 0 + + this.wallTimer = new Timer () + this.roomTimer = new Timer () + this.sceneryTimer = new Timer () + + this.bind() + // this.trackPageview(opt) + }, + + bind: function () { + window.addEventListener("click", this.trackClick.bind(this), true) + app.on("change-wall", this.changeWall.bind(this)) + app.on("pick-scenery", this.pickScenery.bind(this)) + app.on("close-scenery", this.trackScenery.bind(this)) + app.on("change-room", this.changeRoom.bind(this)) + }, + + pushEvent: function(event){ + // this.events.push(event) + event.unshift("send") + ga.apply( ga, event ) + }, + + trackPageview: function(opt){ + // this.pushEvent([ "view", opt.mode ]) + }, + + // + // how long they spend in front of each wall + + changeWall: function(opt){ + var duration = this.wallTimer.currentTime() + if (this.wall_id && duration > 5000) { + this.pushEvent([ "wall", this.wall_id, duration ]) + } + this.wall_id = opt.wall.id + this.wallTimer.start() + }, + + // + // how long the user spends on each item they click + + pickScenery: function(opt){ + if (this.scenery_id && opt.scenery.id !== this.scenery_id) { + this.trackScenery() + } + else { + this.sceneryTimer.start() + } + this.scenery_id = opt.scenery.id + }, + + trackScenery: function(){ + var duration = this.sceneryTimer.currentTime() + if (this.scenery_id && duration > 1000) { + this.pushEvent([ "scenery", this.scenery_id, duration ]) + } + this.scenery_id = null + this.sceneryTimer.reset() + }, + + // + // how long they spend in the room + + changeRoom: function(opt){ + var duration = this.roomTimer.currentTime() + if (this.room_id !== opt.room.id) { + if (this.room_id && duration > 5000) { + this.pushEvent([ "room", this.room_id, duration ]) + } + this.roomTimer.start() + this.room_id = opt.room.id + } + }, + + // + // how many clicks per room + + trackClick: function(opt){ + this.clicks += 1 + }, + + save: function () { + // possibly just push to google analytics + }, + + } + + return exports +}) + + +var Timer = Fiber.extend(function(base){ + var exports = { + + init: function(opt){ + this.time = 0 + }, + + reset: function(){ + this.time = 0 + }, + + start: function(){ + this.time = Date.now() + }, + + currentTime: function(){ + return this.time ? Date.now() - this.time : 0 + }, + } + + return exports +}) diff --git a/public/assets/javascripts/ui/reader/_router.js b/public/assets/javascripts/ui/reader/_router.js new file mode 100644 index 0000000..f3b121b --- /dev/null +++ b/public/assets/javascripts/ui/reader/_router.js @@ -0,0 +1,24 @@ + +var SiteRouter = Router.extend({ + el: "body", + + initialize: function(){ + app.launch() + if (app.unsupported) return + + this.readerView = app.controller = new ReaderView() + this.readerView.load() + + $("body").removeClass("loading") + } + +}) + +var editor = { + permissions: new Permissions({ + 'pick': true, + 'move': true, + 'resize': true, + 'destroy': false, + }) +} |