embed modal

11 files changed, 124 insertions, 9 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..a0b3c6f
--- /dev/null
+++ b/public/assets/javascripts/ui/reader/EmbedView.js
@@ -0,0 +1,50 @@
+var EmbedView = ModalView.extend({
+  el: ".embedView",
+  
+  events: {
+    "keydown": "stopPropagation",
+    "input [name=width]": "build",
+    "input [name=height]": "build",
+    "click [name=mute]": "build",
+    "click textarea": "selectAll",
+  },
+  
+  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.$width.val(this.defaultWidth)
+    this.$height.val(this.defaultHeight)
+	},
+	
+	show: function(){
+	  this.build()
+	  this.__super__.show.call(this)
+	},
+
+  build: function(){
+    var mute = this.$mute.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>"
+    
+    this.$embedCode.val( kode )
+  },
+  
+  selectAll: function(){
+    this.$embedCode[0].select()
+  },
+
+})
diff --git a/public/assets/javascripts/ui/reader/ShareView.js b/public/assets/javascripts/ui/reader/ShareView.js
index 8a205ba..dbe6f64 100644
--- a/public/assets/javascripts/ui/reader/ShareView.js
+++ b/public/assets/javascripts/ui/reader/ShareView.js
@@ -10,6 +10,7 @@ var ShareView = View.extend({
 
 	initialize: function(opt){
 	  this.parent = opt.parent
+	  this.embedView = new EmbedView ({ parent: this })
 	  this.$link = this.$("#share_link")
 	},
 	
@@ -55,6 +56,7 @@ var ShareView = View.extend({
 	
 	embed: function (e) {
 	  e.preventDefault()
+	  this.embedView.show()
 	},
 
 })
diff --git a/public/assets/javascripts/util.js b/public/assets/javascripts/util.js
index 2fa994a..1749836 100644
--- a/public/assets/javascripts/util.js
+++ b/public/assets/javascripts/util.js
@@ -239,4 +239,17 @@ if (!Function.prototype.bind) {
 }());
 
 
+function selectElementContents(el) {
+  if (window.getSelection && document.createRange) {
+    var sel = window.getSelection();
+    var range = document.createRange();
+    range.selectNodeContents(el);
+    sel.removeAllRanges();
+    sel.addRange(range);
+  } else if (document.selection && document.body.createTextRange) {
+    var textRange = document.body.createTextRange();
+    textRange.moveToElementText(el);
+    textRange.select();
+  }
+}
 
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 3fe9741..32fc817 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -2566,13 +2566,13 @@ a[data-role="forgot-password"] {
 
 /* COLLABORATORS */
 
-.collaborators .rap {
+.mediaDrawer .rap {
 	display: table;
 	width: 100%;
 	height: 100%;
 }
 
-.collaborators .rap .holder .inner {
+.mediaDrawer .rap .holder .inner {
   width: 480px;
   margin: 0 auto;
   text-align: left;
@@ -2607,7 +2607,7 @@ a[data-role="forgot-password"] {
   background-color: black;
   border-color: black;
 }
-.collaborators p {
+.mediaDrawer .rap p {
 	margin: 10px 0 20px;
 	font-weight: 300;
 }
@@ -2615,7 +2615,7 @@ a[data-role="forgot-password"] {
   font-size: 16px;
   width: 300px;
 }
-.collaborators h2 {
+.mediaDrawer .rap h2 {
   margin: 20px auto 0;
 }
 #collaborator-list {
@@ -2672,6 +2672,30 @@ a[data-role="forgot-password"] {
   display: block;
 }
 
+/* EMBED CODE GENERATOR */
+
+.embedView textarea {
+  border: 1px solid black;
+  width: 100%;
+  height: 100px;
+  font-family: 'Menlo', 'Monaco', 'Lucida Sans Console', monospace;
+  padding: 5px;
+  line-height: 15px;
+}
+.embedView input[type=text] {
+  border: 1px solid black;
+  width: 40px;
+  padding: 2px;
+  font-size: 14px;
+  margin: 5px;
+}
+.embedView label {
+  font-size: 14px;
+}
+.embedView {
+  font-weight: 300;
+}
+
 /* MARCHING ANTS ANIMATION */
 
 @-webkit-keyframes borderanimation {
diff --git a/views/controls/editor/share.ejs b/views/controls/editor/share.ejs
index 97f4ceb..7e7ad3c 100644
--- a/views/controls/editor/share.ejs
+++ b/views/controls/editor/share.ejs
@@ -14,6 +14,3 @@
   </div>
 
 </div>
-
-<style>
-</style>
\ No newline at end of file
diff --git a/views/controls/reader/about-room.ejs b/views/controls/reader/about-room.ejs
index c9ad626..eba8c98 100644
--- a/views/controls/reader/about-room.ejs
+++ b/views/controls/reader/about-room.ejs
@@ -13,6 +13,7 @@
 		<h2>Share on–</h2>
 		<a id="share_facebook">Facebook</a>
 		<a id="share_twitter">Twitter</a>
+    <a id="share_embed">Embed</a>
 	</div>
 
 	  [[ if (canEdit) { ]]
diff --git a/views/controls/reader/embed.ejs b/views/controls/reader/embed.ejs
new file mode 100644
index 0000000..a897fbe
--- /dev/null
+++ b/views/controls/reader/embed.ejs
@@ -0,0 +1,25 @@
+<div class="embedView fixed mediaDrawer animate">
+	<span class="close">X</span>
+
+  <div class="rap">
+		<div class="holder">
+			<div class="inner vvbox">
+        <h2>Embed Vvalls</h2>
+
+        <p>
+          This code generates an iframe which will embed this room in your website or blog.
+        </p>
+        <textarea id="embedCode"></textarea>
+        
+        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" id=""> <label for=""></label>
+        <input type="checkbox" id=""> <label for=""></label>
+        <input type="checkbox" id=""> <label for=""></label>
+ -->
+
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/views/editor.ejs b/views/editor.ejs
index b031759..efc4b9d 100755
--- a/views/editor.ejs
+++ b/views/editor.ejs
@@ -21,6 +21,7 @@
 			[[ include controls/editor/text-editor ]]
 			[[ include controls/editor/collaborators ]]
 			[[ include controls/editor/share ]]
+			[[ include controls/reader/embed ]]
 			[[ include controls/editor/settings ]]
 			[[ include controls/editor/presets ]]
 		</div>
diff --git a/views/partials/footer.ejs b/views/partials/footer.ejs
index f44b611..a94acb1 100644
--- a/views/partials/footer.ejs
+++ b/views/partials/footer.ejs
@@ -5,7 +5,7 @@
 	<a href="/about/terms">Terms</a>
 	<a href="/about/privacy">Privacy</a>
 
-	<span>©2014 VVALLS Inc.</span>
+	<span>©2014 Dot Dash 3, Inc.</span>
 
 	[[ if (logged_in) { ]]
 	<br><br>
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs
index 3e61a5a..70c3b27 100644
--- a/views/partials/scripts.ejs
+++ b/views/partials/scripts.ejs
@@ -7,7 +7,7 @@
 <script type="text/javascript" src="/assets/javascripts/vendor/tube.js"></script>
 <script type="text/javascript" src="/assets/javascripts/vendor/loader.js"></script>
 <script type="text/javascript" src="/assets/javascripts/vendor/polyfill.js"></script>
-<!--<script type="text/javascript" src="/assets/javascripts/vendor/wow.js"></script>-->
+<!-- <script type="text/javascript" src="/assets/javascripts/vendor/wow.js"></script> -->
 <script type="text/javascript" src="/assets/javascripts/vendor/chardinjs.min.js"></script>
 <script type="text/javascript" src="/assets/javascripts/vendor/sha1.js"></script>
 <script type="text/javascript" src="/assets/javascripts/vendor/dataUriToBlob.js"></script>
@@ -115,6 +115,7 @@
 
 <script type="text/javascript" src="/assets/javascripts/ui/reader/ReaderView.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/reader/ShareView.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/reader/EmbedView.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/reader/MediaPlayer.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/reader/Tracker.js"></script>
 
diff --git a/views/reader.ejs b/views/reader.ejs
index e86bab1..b9b53d2 100644
--- a/views/reader.ejs
+++ b/views/reader.ejs
@@ -15,6 +15,7 @@
 		<div id="editorView">
 			[[ include controls/reader/about-room ]]
 			[[ include controls/reader/media-player ]]
+			[[ include controls/reader/embed ]]
 		</div>
 
 <!--