public-mirrors/NewsBlur-viq
1
0
Fork 0
mirror of https://github.com/viq/NewsBlur.git synced 2025-09-18 21:43:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Trying to rewrite sideoptions resize.

Browse source
This commit is contained in:
Samuel Clay 2013-08-08 17:35:26 -07:00
parent 9e54266dcf
commit c117035362
5 changed files with 185 additions and 168 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
media/css/reader.css
View file

@ -3042,7 +3042,12 @@ background: transparent;
.NB-sideoption-save-wrapper {
height: 0;
overflow: hidden;
display: none;
}
.NB-sideoption-save-wrapper.NB-active {
display: block;
}
.NB-narrow-content .NB-sideoption-save-wrapper {
clear: both;
width: 100%;
@ -3054,6 +3059,13 @@ background: transparent;
text-align: left;
color: #606060;
}
.NB-sideoption-save .NB-sideoption-save-title {
text-transform: uppercase;
font-size: 10px;
text-align: left;
text-shadow: 0 1px 0 #F6F6F6;
color: #202020;
}
.NB-sideoption-save .NB-sideoption-save-tag {
width: 100%;

12
media/js/newsblur/views/story_detail_view.js
View file

@ -66,17 +66,15 @@ NEWSBLUR.Views.StoryDetailView = Backbone.View.extend({
render: function() {
var params = this.get_render_params();
params['story_header'] = this.story_header_template(params);
this.save_view = new NEWSBLUR.Views.StorySaveView({
model: this.model,
el: this.el
});
this.share_view = new NEWSBLUR.Views.StoryShareView({
this.sideoptions_view = new NEWSBLUR.Views.StorySideoptionsView({
model: this.model,
el: this.el
});
this.save_view = this.sideoptions_view.save_view;
this.share_view = this.sideoptions_view.share_view;
params['story_save_view'] = this.save_view.render();
params['story_share_view'] = this.share_view.template({
params['story_save_view'] = this.sideoptions_view.save_view.render();
params['story_share_view'] = this.sideoptions_view.share_view.template({
story: this.model,
social_services: NEWSBLUR.assets.social_services,
profile: NEWSBLUR.assets.user_profile

128
media/js/newsblur/views/story_save_view.js
View file

@ -1,12 +1,14 @@
NEWSBLUR.Views.StorySaveView = Backbone.View.extend({
events: {
"click .NB-feed-story-save" : "toggle_feed_story_save_dialog",
"click .NB-sideoption-save-populate" : "populate_story_tags"
},
initialize: function() {
_.bindAll(this, 'toggle_feed_story_save_dialog');
this.sideoptions_view = this.options.sideoptions_view;
this.model.story_save_view = this;
this.model.bind('change:starred', this.toggle_feed_story_save_dialog);
},
render: function() {
@ -32,10 +34,14 @@ NEWSBLUR.Views.StorySaveView = Backbone.View.extend({
template: _.template('\
<div class="NB-sideoption-save-wrapper">\
<div class="NB-sideoption-save">\
<div class="NB-sideoption-save-populate">\
Add <%= Inflector.pluralize("story tag", story_tags.length, true) %>\
<% if (story_tags.length) { %>\
<div class="NB-sideoption-save-populate">\
Add <%= Inflector.pluralize("story tag", story_tags.length, true) %>\
</div>\
<% } %>\
<div class="NB-sideoption-save-title">\
Tags:\
</div>\
<div class="NB-sideoption-title">Tags</div>\
<ul class="NB-sideoption-save-tag">\
<% _.each(tags, function(tag) { %>\
<li><%= tag %></li>\
@ -95,44 +101,14 @@ NEWSBLUR.Views.StorySaveView = Backbone.View.extend({
var $story_content = this.$('.NB-feed-story-content,.NB-story-content');
var $tag_input = this.$('.NB-sideoption-save-tag');
if (options.close ||
($sideoption.hasClass('NB-active') && !options.resize_open)) {
if (options.close || !this.model.get('starred')) {
// Close
$save_wrapper.animate({
'height': 0
}, {
'duration': 300,
'easing': 'easeInOutQuint',
'queue': false,
'complete': _.bind(function() {
this.$('.NB-error').remove();
if (NEWSBLUR.app.story_list) {
NEWSBLUR.app.story_list.fetch_story_locations_in_feed_view();
}
}, this)
});
$sideoption.removeClass('NB-active');
if ($story_content.data('original_height')) {
$story_content.animate({
'height': $story_content.data('original_height')
}, {
'duration': 300,
'easing': 'easeInOutQuint',
'queue': false,
'complete': function() {
if (NEWSBLUR.app.story_list) {
NEWSBLUR.app.story_list.fetch_story_locations_in_feed_view();
}
}
});
$story_content.removeData('original_height');
}
this.resize({close: true});
} else {
// Open/resize
if (!options.resize_open) {
this.$('.NB-error').remove();
}
$sideoption.addClass('NB-active');
$tag_input.tagit({
fieldName: "tags",
availableTags: this.all_tags(),
@ -180,21 +156,28 @@ NEWSBLUR.Views.StorySaveView = Backbone.View.extend({
options = options || {};
var $sideoption_container = this.$('.NB-feed-story-sideoptions-container');
var $save_wrapper = this.$('.NB-sideoption-save-wrapper');
var $save_content = this.$('.NB-sideoption-save');
var $story_content = this.$('.NB-feed-story-content,.NB-story-content');
var $story_wrapper = this.$('.NB-story-content-container');
var $story_comments = this.$('.NB-feed-story-comments');
var $tag_input = this.$('.NB-sideoption-save-tag');
var $save_clone = $save_wrapper.clone();
var dialog_height = $save_clone.css({
'height': 'auto',
$save_wrapper.after($save_clone.css({
'height': options.close ? 0 : 'auto',
'position': 'absolute',
'visibility': 'hidden'
}).appendTo($save_wrapper.parent()).height();
'visibility': 'hidden',
'display': 'block'
}));
var sideoption_content_height = $save_clone.height();
$save_clone.remove();
var new_sideoptions_height = $sideoption_container.height() - $save_wrapper.height() + sideoption_content_height;
if (!options.close) {
$save_wrapper.addClass('NB-active');
}
$save_wrapper.animate({
'height': dialog_height
'height': sideoption_content_height
}, {
'duration': options.immediate ? 0 : 350,
'easing': 'easeInOutQuint',
@ -206,24 +189,23 @@ NEWSBLUR.Views.StorySaveView = Backbone.View.extend({
if (NEWSBLUR.app.story_list) {
NEWSBLUR.app.story_list.fetch_story_locations_in_feed_view();
}
if (options.close) {
$save_wrapper.removeClass('NB-active');
}
}, this)
});
var sideoptions_height = $sideoption_container.outerHeight(true);
var wrapper_height = $story_wrapper.height();
var sideoptions_height = $sideoption_container.height();
var content_height = $story_content.height();
var content_outerheight = $story_content.outerHeight(true);
var comments_height = $story_comments.outerHeight(true);
var left_height = content_outerheight + comments_height;
var container_offset = $sideoption_container.length &&
($sideoption_container.position().top - 32);
var comments_height = $story_comments.height();
var left_height = content_height + comments_height;
var container_offset = $sideoption_container.position().top;
var original_height = $story_content.data('original_height') || content_height;
console.log(["heights", dialog_height, sideoptions_height, wrapper_height, content_height, content_outerheight, comments_height, left_height, container_offset]);
if (left_height < sideoptions_height) {
$story_content.css('height', $sideoption_container.height());
if (!options.close && new_sideoptions_height >= original_height) {
// Sideoptions too big, embiggen left side
$story_content.animate({
'height': sideoptions_height + dialog_height - comments_height
'height': new_sideoptions_height
}, {
'duration': 350,
'easing': 'easeInOutQuint',
@ -233,21 +215,29 @@ NEWSBLUR.Views.StorySaveView = Backbone.View.extend({
NEWSBLUR.app.story_list.fetch_story_locations_in_feed_view();
}
}
}).data('original_height', content_height);
} else if (sideoptions_height + dialog_height > wrapper_height) {
$story_content.animate({
'height': content_height + dialog_height - container_offset
}, {
'duration': 350,
'easing': 'easeInOutQuint',
'queue': false,
'complete': function() {
if (NEWSBLUR.app.story_list) {
NEWSBLUR.app.story_list.fetch_story_locations_in_feed_view();
});
if (!$story_content.data('original_height')) {
$story_content.data('original_height', content_height);
}
} else {
// Content is bigger, move content back to normal
if ($story_content.data('original_height')) {
$story_content.animate({
'height': $story_content.data('original_height')
}, {
'duration': 300,
'easing': 'easeInOutQuint',
'queue': false,
'complete': function() {
if (NEWSBLUR.app.story_list) {
NEWSBLUR.app.story_list.fetch_story_locations_in_feed_view();
}
}
}
}).data('original_height', content_height);
} else if (NEWSBLUR.app.story_list) {
});
}
}
if (NEWSBLUR.app.story_list) {
NEWSBLUR.app.story_list.fetch_story_locations_in_feed_view();
}
}

185
media/js/newsblur/views/story_share_view.js
View file

@ -12,6 +12,7 @@ NEWSBLUR.Views.StoryShareView = Backbone.View.extend({
},
initialize: function() {
this.sideoptions_view = this.options.sideoptions_view;
this.model.story_share_view = this;
},
@ -67,36 +68,7 @@ NEWSBLUR.Views.StoryShareView = Backbone.View.extend({
if (options.close ||
($sideoption.hasClass('NB-active') && !options.resize_open)) {
// Close
$share.animate({
'height': 0
}, {
'duration': 300,
'easing': 'easeInOutQuint',
'queue': false,
'complete': _.bind(function() {
this.$('.NB-error').remove();
if (NEWSBLUR.app.story_list) {
NEWSBLUR.app.story_list.fetch_story_locations_in_feed_view();
}
}, this)
});
$comment_input.blur();
$sideoption.removeClass('NB-active');
if ($story_content.data('original_height')) {
$story_content.animate({
'height': $story_content.data('original_height')
}, {
'duration': 300,
'easing': 'easeInOutQuint',
'queue': false,
'complete': function() {
if (NEWSBLUR.app.story_list) {
NEWSBLUR.app.story_list.fetch_story_locations_in_feed_view();
}
}
});
$story_content.removeData('original_height');
}
this.resize({close: true});
} else {
// Open/resize
if (!options.resize_open) {
@ -108,14 +80,6 @@ NEWSBLUR.Views.StoryShareView = Backbone.View.extend({
$facebook_button.removeClass('NB-active');
$appdotnet_button.removeClass('NB-active');
this.update_share_button_label();
var $share_clone = $share.clone();
var dialog_height = $share_clone.css({
'height': 'auto',
'position': 'absolute',
'visibility': 'hidden'
}).appendTo($share.parent()).height();
$share_clone.remove();
if (options.animate_scroll) {
var $scroll_container = NEWSBLUR.reader.$s.$story_titles;
@ -130,61 +94,9 @@ NEWSBLUR.Views.StoryShareView = Backbone.View.extend({
$scroll_container.height()
});
}
$share.animate({
'height': dialog_height
}, {
'duration': options.immediate ? 0 : 350,
'easing': 'easeInOutQuint',
'queue': false,
'complete': _.bind(function() {
if ($comment_input.length == 1) {
$comment_input.focus();
}
if (NEWSBLUR.app.story_list) {
NEWSBLUR.app.story_list.fetch_story_locations_in_feed_view();
}
}, this)
});
var sideoptions_height = $sideoption_container.outerHeight(true);
var wrapper_height = $story_wrapper.height();
var content_height = $story_content.height();
var content_outerheight = $story_content.outerHeight(true);
var comments_height = $story_comments.outerHeight(true);
var container_offset = $sideoption_container.length &&
($sideoption_container.position().top - 32);
if (content_outerheight + comments_height < sideoptions_height) {
$story_content.css('height', $sideoption_container.height());
$story_content.animate({
'height': sideoptions_height + dialog_height - comments_height
}, {
'duration': 350,
'easing': 'easeInOutQuint',
'queue': false,
'complete': function() {
if (NEWSBLUR.app.story_list) {
NEWSBLUR.app.story_list.fetch_story_locations_in_feed_view();
}
}
}).data('original_height', content_height);
} else if (sideoptions_height + dialog_height > wrapper_height) {
$story_content.animate({
'height': content_height + dialog_height - container_offset
}, {
'duration': 350,
'easing': 'easeInOutQuint',
'queue': false,
'complete': function() {
if (NEWSBLUR.app.story_list) {
NEWSBLUR.app.story_list.fetch_story_locations_in_feed_view();
}
}
}).data('original_height', content_height);
} else if (NEWSBLUR.app.story_list) {
NEWSBLUR.app.story_list.fetch_story_locations_in_feed_view();
}
this.resize(options);
var share = _.bind(function(e) {
e.preventDefault();
this.mark_story_as_shared({'source': 'sideoption'});
@ -196,6 +108,95 @@ NEWSBLUR.Views.StoryShareView = Backbone.View.extend({
}
},
resize: function(options) {
options = options || {};
var $sideoption_container = this.$('.NB-feed-story-sideoptions-container');
var $share_wrapper = this.$('.NB-sideoption-share-wrapper');
var $share_content = this.$('.NB-sideoption-share');
var $story_content = this.$('.NB-feed-story-content,.NB-story-content');
var $story_comments = this.$('.NB-feed-story-comments');
var $sideoption = this.$('.NB-sideoption.NB-feed-story-share');
var $share_clone = $share_wrapper.clone();
$share_wrapper.after($share_clone.css({
'height': options.close ? 0 : 'auto',
'position': 'absolute',
'visibility': 'hidden',
'display': 'block'
}));
var sideoption_content_height = $share_clone.height();
$share_clone.remove();
var new_sideoptions_height = $sideoption_container.height() - $share_wrapper.height() + sideoption_content_height;
if (!options.close) {
$share_wrapper.addClass('NB-active');
$sideoption.addClass('NB-active');
}
$share_wrapper.animate({
'height': sideoption_content_height
}, {
'duration': options.immediate ? 0 : 350,
'easing': 'easeInOutQuint',
'queue': false,
'complete': _.bind(function() {
if (NEWSBLUR.app.story_list) {
NEWSBLUR.app.story_list.fetch_story_locations_in_feed_view();
}
if (options.close) {
$share_wrapper.removeClass('NB-active');
$sideoption.removeClass('NB-active');
}
}, this)
});
var sideoptions_height = $sideoption_container.height();
var content_height = $story_content.height();
var comments_height = $story_comments.height();
var left_height = content_height + comments_height;
var container_offset = $sideoption_container.position().top;
var original_height = $story_content.data('original_height') || content_height;
if (!options.close && new_sideoptions_height >= original_height) {
// Sideoptions too big, embiggen left side
$story_content.animate({
'height': new_sideoptions_height
}, {
'duration': 350,
'easing': 'easeInOutQuint',
'queue': false,
'complete': function() {
if (NEWSBLUR.app.story_list) {
NEWSBLUR.app.story_list.fetch_story_locations_in_feed_view();
}
}
});
if (!$story_content.data('original_height')) {
$story_content.data('original_height', content_height);
}
} else {
// Content is bigger, move content back to normal
if ($story_content.data('original_height')) {
$story_content.animate({
'height': $story_content.data('original_height')
}, {
'duration': 300,
'easing': 'easeInOutQuint',
'queue': false,
'complete': function() {
if (NEWSBLUR.app.story_list) {
NEWSBLUR.app.story_list.fetch_story_locations_in_feed_view();
}
}
});
}
}
if (NEWSBLUR.app.story_list) {
NEWSBLUR.app.story_list.fetch_story_locations_in_feed_view();
}
},
mark_story_as_shared: function(options) {
options = options || {};
var $share_button = this.$('.NB-sideoption-share-save');

16
media/js/newsblur/views/story_sideoptions_view.js Normal file
View file

@ -0,0 +1,16 @@
NEWSBLUR.Views.StorySideoptionsView = Backbone.View.extend({
initialize: function() {
this.save_view = new NEWSBLUR.Views.StorySaveView({
model: this.model,
el: this.el,
sideoptions_view: this
});
this.share_view = new NEWSBLUR.Views.StoryShareView({
model: this.model,
el: this.el,
sideoptions_view: this
});
}
});