nocebo/diaspora
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
danielgrippi 2012-05-16 18:55:18 -07:00
parent a6758c0832
commit ed6785d7cb
11 changed files with 266 additions and 213 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
app/assets/javascripts/app/pages/framer.js
View file

@ -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(){
app.router.navigate(app.currentUser.expProfileUrl(), {trigger: true, replace: true})
navigateNext : function(){
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',
@ -39,30 +45,12 @@ app.views.framerControls = app.views.Base.extend({
},
initialize : function(){
this.templatePicker = new app.views.TemplatePicker({ model: this.model })
this.templatePicker = new app.views.TemplatePicker({model: this.model})
},
saveFrame : function(){
this.$('button').prop('disabled', 'disabled')
this.$('button').addClass('disabled')
// this is gross hack to make this action work in the iframe version and not iframe version.
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)
.addClass('disabled')
this.model.save()
}
});
//crazy hack for model publisher.
function goToCurrentUserProfile(){
location = "/people/" + app.currentUser.get("guid")
};

45
app/assets/javascripts/app/pages/profile.js
View file

@ -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();

29
app/assets/stylesheets/new_styles/_animations.scss
View file

@ -12,4 +12,31 @@
0% { @include opacity(0.3); }
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); }
}

138
app/assets/stylesheets/new_styles/_base.scss
View file

@ -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;

1
app/assets/stylesheets/new_styles/_canvas.scss
View file

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

151
app/assets/stylesheets/new_styles/_composer.scss
View file

@ -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;
@ -17,17 +149,8 @@
@include opacity(0);
position: absolute;
top: 0;
left: 0;
left: 0;
height:100%;
cursor : pointer;
}
}
.photos{
margin-top: 5px;
}
textarea#post_text{
height: 200px;
padding : 10px;
}

22
app/assets/templates/flow.jst.hbs
View file

@ -1,5 +1,19 @@
<div class="flow-content"/>
<div class="flow-controls">
<div class="controls"/>
<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>

2
app/assets/templates/framer-controls.jst.hbs
View file

@ -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>

30
app/assets/templates/post-form.jst.hbs
View file

@ -1,19 +1,13 @@
<div class="container">
<div id="new-post" class="row">
<div class='new-post-section'>
<div class='span5'>
<form class="new-post">
<fieldset>
<legend>
Make Something!
</legend>
<textarea name="text" id='post_text' class="text span8" placeholder="Add Text"/>
<textarea id="text_with_markup" style="display:none;"/>
</fieldset>
</form>
</div>
<div class="span3 new_picture"/>
</div>
</div>
<div class='span5'>
<form class="new-post">
<fieldset>
<legend>
Make Something!
</legend>
<textarea name="text" id='post_text' class="text span8" placeholder="Add Text"/>
<textarea id="text_with_markup" style="display:none;"/>
</fieldset>
</form>
</div>
<div class="span3 new_picture"/>

10
app/assets/templates/profile.jst.hbs
View file

@ -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>

11
spec/javascripts/app/pages/framer_spec.js
View file

@ -20,17 +20,16 @@ describe("app.pages.Framer", function(){
expect(app.frame.save).toHaveBeenCalled();
});
it("navigates on save", function(){
spyOn(app.router, "navigate")
it("calls navigateNext on save", function(){
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(){
expect(app.frame.get("frame_name")).not.toBe("Night") //pre conditions, yo
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
this.page.$("a.mood[data-mood=Night]").click()
expect(app.frame.get("frame_name")).toBe("Night")
expect(this.page.$("article")).toHaveClass("night")
})
});
});