don't use an iframe for the composer anymore. yayyyyy

app/assets/javascripts/app/pages/framer.js

@@ -13,19 +13,25 @@ app.pages.Framer = app.views.Base.extend({
     this.model.authorIsCurrentUser = function(){ return true }
 
     this.model.bind("change", this.render, this)
-    this.model.bind("sync", this.navigateToShow, this)
+    this.model.bind("sync", this.navigateNext, this)
 
     this.framerControls = new app.views.framerControls({model : this.model})
   },
 
   postView : function(){
-    return app.views.Post.showFactory(this.model)
+    return new app.views.SmallFrame({model : this.model})
   },
 
-  navigateToShow : function(){
+  navigateNext : function(){
-    app.router.navigate(app.currentUser.expProfileUrl(), {trigger: true, replace: true})
+    if(parent.location.pathname == '/new_bookmarklet'){
+       parent.close()
+    } else {
+      var url = app.currentUser.expProfileUrl()
+//      app.router.navigate(url, {trigger: true, replace: true})
+      //window.location = app.currentUser.expProfileUrl();
     }
-})
+  }
+});
 
 app.views.framerControls = app.views.Base.extend({
   templateName : 'framer-controls',
@@ -44,25 +50,7 @@ app.views.framerControls = app.views.Base.extend({
 
   saveFrame : function(){
     this.$('button').prop('disabled', 'disabled')
-    this.$('button').addClass('disabled')
+                    .addClass('disabled')
-    // this is gross hack to make this action work in the iframe version and not iframe version.
+    this.model.save()
-    var callback = {}
-    var parentDoc = parent;
-    var parentPath = parentDoc.location.pathname
-
-    if(parentPath == '/new_bookmarklet'){
-      callback.success = function(){ parentDoc.close() }
-    } else if(parentPath != '/framer'){
-      callback.success = function(){ parentDoc.goToCurrentUserProfile() }
-    } else{
-      // do nothing, and let the navigate event fire
-    }
-
-    this.model.save({}, callback)
   }
 });
-
-//crazy hack for model publisher.
-function goToCurrentUserProfile(){
-  location = "/people/" + app.currentUser.get("guid")
-};

app/assets/javascripts/app/pages/profile.js

@@ -8,18 +8,21 @@ app.pages.Profile = app.views.Base.extend({
   subviews : {
     "#profile-info" : "profileInfo",
     "#canvas" : "canvasView",
-    "#wallpaper-upload" : "wallpaperForm"
+    "#wallpaper-upload" : "wallpaperForm",
+    "#composer" : "composerView"
   },
 
   events : {
     "click #edit-mode-toggle" : "toggleEdit",
-    "click #logout-button" : "logOutConfirm"
+    "click #logout-button" : "logOutConfirm",
+    "click #composer-button" : "showComposer"
   },
 
   tooltipSelector : "*[rel=tooltip]",
 
   personGUID : null,
   editMode : false,
+  composeMode : false,
 
   initialize : function(options) {
     this.personGUID = options.personId
@@ -39,6 +42,10 @@ app.pages.Profile = app.views.Base.extend({
     this.canvasView = new app.views.Canvas({ model : this.stream })
     this.wallpaperForm = new app.forms.Wallpaper()
     this.profileInfo = new app.views.ProfileInfo({ model : this.model })
+    this.composerView = new app.pages.Composer();
+
+    /* binds */
+    $(window).on("keydown", _.bind(this.closeComposer, this))
   },
 
   presenter : function(){
@@ -71,6 +78,40 @@ app.pages.Profile = app.views.Base.extend({
     this.$el.toggleClass("edit-mode")
   },
 
+  showComposer : function(evt) {
+    if(evt) { evt.preventDefault() }
+
+    this.toggleComposer()
+    this.$("#post_text").focus()
+
+    app.router.navigate("/posts/new")
+  },
+
+  closeComposer : function(evt) {
+    if(!evt) { return }
+
+    if(this.composeMode && evt.keyCode == 27) {
+      this.toggleComposer()
+      evt.preventDefault()
+
+      // we should check for text and fire a warning prompt before exiting & clear the form
+      app.router.navigate(app.currentUser.expProfileUrl(), {replace : true})
+    }
+  },
+
+  toggleComposer : function(){
+    this.composeMode = !this.composeMode
+    $("body").toggleClass("lock")
+
+    if(!this.composeMode) {
+      this.$("#composer").toggleClass("zoom-out")
+      setTimeout('this.$("#composer").toggleClass("hidden").toggleClass("zoom-out")', 200)
+    } else {
+      this.$("#composer").toggleClass("hidden")
+    }
+    this.$("#composer").toggleClass("zoom-in")
+  },
+
   logOutConfirm : function(evt) {
     if(!confirm("Are you sure you want to log out?"))
       evt.preventDefault();

app/assets/stylesheets/new_styles/_animations.scss

@@ -13,3 +13,30 @@
 	65%  { @include opacity(0.9); }
 	100% { @include opacity(0.3); }
 }
+
+
+@-webkit-keyframes ease-over {
+	0%   { @include opacity(0); -webkit-transform : scale(1.3); }
+	100% { @include opacity(1); -webkit-transform : scale(1); }
+}
+@-moz-keyframes ease-over {
+	0%   { @include opacity(0); -moz-transform : scale(1.3); }
+	100% { @include opacity(1); -moz-transform : scale(1); }
+}
+@-ms-keyframes ease-over {
+	0%   { @include opacity(0); -ms-transform : scale(1.3); }
+	100% { @include opacity(1); -ms-transform : scale(1); }
+}
+
+@-webkit-keyframes ease-out {
+	0%     { @include opacity(1); -webkit-transform : scale(1); }
+	100%   { @include opacity(0); -webkit-transform : scale(1.3); }
+}
+@-moz-keyframes ease-out {
+	0%     { @include opacity(1); -moz-transform : scale(1); }
+	100%   { @include opacity(0); -moz-transform : scale(1.3); }
+}
+@-ms-keyframes ease-out {
+	0%     { @include opacity(1); -ms-transform : scale(1); }
+	100%   { @include opacity(0); -ms-transform : scale(1.3); }
+}

app/assets/stylesheets/new_styles/_base.scss

@@ -1,6 +1,10 @@
 body {
   background-image : image_url("pattern.png");
   padding : none;
+
+  &.lock {
+    overflow: hidden;
+  }
 }
 
 /* new link color */
@@ -300,140 +304,6 @@ article { //mood posts
 
 $bring-dark-accent-forward-color: #DDD;
 
-
-
-div[data-template=flow] {
-  display : table;
-  width : 100%;
-  height : 100%;
-  position : absolute;
-}
-
-.flow-content {
-  display : table;
-  width : 100%;
-  height : 100%;
-}
-
-.post-form {
-  margin-top: 2%;
-}
-
-.flow-controls {
-  @include info-container-base();
-  z-index: 999;
-
-  position: fixed;
-  width: 100%;
-  bottom: 0;
-
-  padding: 20px 0;
-  max-height: 68px;
-
-  box-sizing: border-box;
-  -moz-box-sizing: border-box;
-
-
-  .controls {
-    margin: 0 auto;
-    max-width: 960px;
-
-    text-align: center;
-
-    button {
-      float : right;
-    }
-    #controls-wrapper {
-      margin: 0 9%;
-    }
-  }
-
-  .aspect-selector {
-    float: left;
-
-    i {
-      display: none;
-    }
-
-    .selected i {
-      display: inline-block;
-      position: absolute;
-      left : 3px;
-      margin-top : 1px;
-    }
-
-    a {
-      display : block;
-
-      span:not(.caret) {
-        padding-left: 5px;
-      }
-    }
-  }
-
-  .service-selector {
-    float: left;
-    margin-left: 100px;
-  }
-
-  .dropdown-menu {
-    bottom : 0;
-    top: auto;
-    text-align: left;
-  }
-
-  a.mood {
-    @include border-radius();
-    margin-right: 11px;
-    padding: 7px;
-    color: #999;
-    font-size: 14px;
-    line-height: 2em;
-
-    &#selected_mood {
-      background-color: #222;
-    }
-
-    &:hover {
-      background-color: #222;
-      text-decoration: none;
-    }
-  }
-}
-
-// this is about the service toggle icons, there is a jasmine test that tests this in service_selector spec
-// if you change this, check toggling the new publisher service broadcasts is still sensible
-// the checkbox should be hidden, and in the off state the service icons should be lighter
-// when the service icons are clicked they should be lighter, and toggle the hidden checkbox.
-.magic-service-selector {
-  label { display : inline;}
-
-  img {
-    @include transition(opacity);
-
-    cursor : pointer;
-    height : 28px;
-    width : 28px;
-  }
-
-  input:not(:checked) + label {
-    img {
-      @include opacity(0.4);
-    }
-  }
-
-  input:checked + label {
-    &:hover img {
-      @include opacity(1);
-    }
-  }
-
-  input {
-    display : none;
-  }
-}
-
-
 #top-right-nav {
   z-index: 10;
   position : absolute;

app/assets/stylesheets/new_styles/_canvas.scss

@@ -1,6 +1,7 @@
 @mixin wide() {
   width : $two-column-width + px;
 }
+
 .no-post-message {
   text-align: center;
   margin-top: 50px;

app/assets/stylesheets/new_styles/_composer.scss

@@ -1,3 +1,139 @@
+#composer.zoom-in #framer {
+  -webkit-animation: ease-over 0.2s;
+  -moz-animation: ease-over 0.2s;
+  -ms-animation: ease-over 0.2s;
+}
+
+#composer.zoom-out #framer {
+  -webkit-animation: ease-out 0.2s;
+  -moz-animation: ease-out 0.2s;
+  -ms-animation: ease-out 0.2s;
+}
+
+#composer #framer {
+  padding-top : 100px;
+}
+
+#framer {
+  color : #fff;
+  background-color : rgba(0,0,0,0.8);
+  z-index : 200;
+
+  position : absolute;
+  left : 0;
+  top : 0;
+
+  height : 100%;
+  width : 100%;
+
+  overflow : auto;
+
+  .new_picture{
+    margin-top: 4%;
+  }
+
+  .photos{
+    margin-top: 5px;
+  }
+
+  legend {
+    color : #fff;
+    text-align : left;
+  }
+
+  textarea#post_text{
+    height: 200px;
+    padding : 10px;
+  }
+
+  .flow-controls {
+    padding: 20px 0;
+    max-height: 68px;
+
+    .aspect-selector {
+      float: left;
+
+      i {
+        display: none;
+      }
+
+      .selected i {
+        display: inline-block;
+        position: absolute;
+        left : 3px;
+        margin-top : 1px;
+      }
+
+      a {
+        display : block;
+
+        span:not(.caret) {
+          padding-left: 5px;
+        }
+      }
+    }
+
+    .service-selector {
+      float: left;
+      margin-left: 100px;
+    }
+
+    .dropdown-menu {
+      text-align: left;
+    }
+
+    a.mood {
+      @include border-radius();
+      margin-right: 11px;
+      padding: 7px;
+      color: #999;
+      font-size: 14px;
+      line-height: 2em;
+
+      &#selected_mood {
+        background-color: #222;
+      }
+
+      &:hover {
+        background-color: #222;
+        text-decoration: none;
+      }
+    }
+  }
+
+  // this is about the service toggle icons, there is a jasmine test that tests this in service_selector spec
+  // if you change this, check toggling the new publisher service broadcasts is still sensible
+  // the checkbox should be hidden, and in the off state the service icons should be lighter
+  // when the service icons are clicked they should be lighter, and toggle the hidden checkbox.
+  .magic-service-selector {
+    label { display : inline; }
+
+    img {
+      @include transition(opacity);
+
+      cursor : pointer;
+      height : 28px;
+      width : 28px;
+    }
+
+    input:not(:checked) + label {
+      img {
+        @include opacity(0.4);
+      }
+    }
+
+    input:checked + label {
+      &:hover img {
+        @include opacity(1);
+      }
+    }
+
+    input {
+      display : none;
+    }
+  }
+}
+
 .new_photo .photo{
   display: inline;
   max-width: 200px;
@@ -5,10 +141,6 @@
   padding: 2px;
 }
 
-.new_picture{
-  margin-top: 4%;
-}
-
 #photo_upload_button {
   position: relative;
   margin-bottom : 9px;
@@ -22,12 +154,3 @@
     cursor : pointer;
   }
 }
-
-.photos{
-  margin-top: 5px;
-}
-
-textarea#post_text{
-  height: 200px;
-  padding : 10px;
-}

app/assets/templates/flow.jst.hbs

@@ -1,5 +1,19 @@
+<div id="framer">
+    <div class="container">
+        <div class="row">
+            <div class="span8 offset2">
+                <div class="row">
                     <div class="flow-content"/>
-
+                </div>
+                <div class="row">
+                    <div class="span8">
                         <div class="flow-controls">
                             <div class="controls"/>
                         </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+

app/assets/templates/framer-controls.jst.hbs

@@ -1,4 +1,4 @@
 <div id='controls-wrapper'>
-  <button id='done' class="done btn btn-success">Post <i class='icon-white icon-ok-sign'></i></button>
   <div class='template-picker'></div>
+  <button id='done' class="done btn btn-success">Post <i class='icon-white icon-ok-sign'></i></button>
 </div>

app/assets/templates/post-form.jst.hbs

@@ -1,6 +1,3 @@
-<div class="container">
-    <div id="new-post" class="row">
-        <div class='new-post-section'>
 <div class='span5'>
     <form class="new-post">
         <fieldset>
@@ -14,6 +11,3 @@
 </div>
 
 <div class="span3 new_picture"/>
-        </div>
-    </div>
-</div>

app/assets/templates/profile.jst.hbs

@@ -47,18 +47,14 @@
 
     <section id="profile-controls">
         {{#if is_own_profile}}
-            <a href="#composer" id="composer-button" class="control small label label-inverse" rel="facebox">
+            <div id="composer" class="hidden"></div>
+
+            <a href="#composer" id="composer-button" class="control small label label-inverse">
                 MAKE
             </a>
             <a href="#" id="edit-mode-toggle" class="control small label label-inverse" title="Edit Posts" rel="tooltip">
                 <img src='{{imageUrl "buttons/edit2@2x.png"}}'/>
             </a>
-
-            <!-- only load up this iframe if the current user is on their own page.
-                 this should be ajax'ed in, regardless. -->
-            <div id="composer" style="display:none;">
-                <iframe src="/posts/new" height=500 width=700 style="border:none;"></iframe>
-            </div>
         {{/if}}
     </section>
 

spec/javascripts/app/pages/framer_spec.js

@@ -20,17 +20,16 @@ describe("app.pages.Framer", function(){
       expect(app.frame.save).toHaveBeenCalled();
     });
 
-    it("navigates on save", function(){
+    it("calls navigateNext on save", function(){
-      spyOn(app.router, "navigate")
+      spyOn(this.page, "navigateNext")
       this.page.model.trigger("sync")
-      expect(app.router.navigate).toHaveBeenCalled()
+      expect(this.page.navigateNext).toHaveBeenCalled()
     })
 
-    it("makes and renders a new post view when the template is changed", function(){
+    it("makes and renders a new smallFrame when the template is changed", function(){
-      expect(app.frame.get("frame_name")).not.toBe("Night") //pre conditions, yo
+      expect(app.frame.get("frame_name")).not.toBe("night") //pre conditions, yo
       this.page.$("a.mood[data-mood=Night]").click()
       expect(app.frame.get("frame_name")).toBe("Night")
-      expect(this.page.$("article")).toHaveClass("night")
     })
   });
 });