non-interactive embed

5 files changed, 64 insertions, 18 deletions

diff --git a/public/assets/javascripts/ui/reader/EmbedView.js b/public/assets/javascripts/ui/reader/EmbedView.js
index a0b3c6f..21e351c 100644
--- a/public/assets/javascripts/ui/reader/EmbedView.js
+++ b/public/assets/javascripts/ui/reader/EmbedView.js
@@ -6,7 +6,9 @@ var EmbedView = ModalView.extend({
     "input [name=width]": "build",
     "input [name=height]": "build",
     "click [name=mute]": "build",
+    "click [name=interactive]": "build",
     "click textarea": "selectAll",
+    "click #test": "test",
   },
   
   defaultWidth: 600,
@@ -18,6 +20,7 @@ var EmbedView = ModalView.extend({
     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)
@@ -29,18 +32,38 @@ var EmbedView = ModalView.extend({
 	},
 
   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()
-    link += "?mute=" + mute
-//    link += "&noui=1"
-    var kode = "<iframe src='" + encodeURI(link) + "' width='" + width + "' height='" + height + "'"
-             + " seamless scrolling='no' style='border: 0'"
-             + " webkitAllowFullScreen mozallowfullscreen allowfullscreen"
-             + "></iframe>"
+    var embed_link = link
+    embed_link += "?mute=" + mute
+    embed_link += "&embed=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>"
     
-    this.$embedCode.val( kode )
+    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(){
diff --git a/public/assets/javascripts/ui/reader/ReaderView.js b/public/assets/javascripts/ui/reader/ReaderView.js
index 9e0d21e..db2ab2f 100644
--- a/public/assets/javascripts/ui/reader/ReaderView.js
+++ b/public/assets/javascripts/ui/reader/ReaderView.js
@@ -13,17 +13,39 @@ var ReaderView = View.extend({
 	},
 
 	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"
 		}
-		else {
-		  this.tracker = new Tracker ()
+		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 })
+
+    $.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){
diff --git a/public/assets/javascripts/ui/reader/Tracker.js b/public/assets/javascripts/ui/reader/Tracker.js
index beef071..bad42a8 100644
--- a/public/assets/javascripts/ui/reader/Tracker.js
+++ b/public/assets/javascripts/ui/reader/Tracker.js
@@ -13,7 +13,7 @@ var Tracker = Fiber.extend(function(base){
 		  this.events = []
 		  
 		  this.bind()
-		  this.trackPageview()
+		  this.trackPageview(opt)
 		},
 		
 		bind: function () {
@@ -29,7 +29,7 @@ var Tracker = Fiber.extend(function(base){
 		},
 		
 		trackPageview: function(opt){
-      this.pushEvent([ "view" ])
+      this.pushEvent([ "view", opt.mode ])
 		},
 
     //
diff --git a/views/controls/reader/about-room.ejs b/views/controls/reader/about-room.ejs
index eba8c98..7e02e93 100644
--- a/views/controls/reader/about-room.ejs
+++ b/views/controls/reader/about-room.ejs
@@ -17,6 +17,6 @@
 	</div>
 
 	  [[ if (canEdit) { ]]
-	   <a href="[[- editlink ]]" class="btn warn marg">Edit Room</a>
+	   <a href="[[- editlink ]]" class="btn warn marg" id="edit-room-link">Edit Room</a>
 	  [[ } ]]
 </div>
diff --git a/views/controls/reader/embed.ejs b/views/controls/reader/embed.ejs
index a897fbe..d8e3d4a 100644
--- a/views/controls/reader/embed.ejs
+++ b/views/controls/reader/embed.ejs
@@ -13,12 +13,13 @@
         
         dimensions: <input type="text" name="width">x<input type="text" name="height">
         <input type="checkbox" name="mute" id="mute" checked> <label for="mute">mute</label>
+        <input type="checkbox" name="interactive" id="interactive" checked> <label for="interactive">interactive</label>
 <!-- 
         <input type="checkbox" id=""> <label for=""></label>
         <input type="checkbox" id=""> <label for=""></label>
         <input type="checkbox" id=""> <label for=""></label>
  -->
-
+        <button id="test">test</button>
       </div>
     </div>
   </div>