mirror of
https://github.com/flarum/core.git
synced 2025-08-09 01:46:35 +02:00
Upgrade to Ember 1.11-beta.1
HTMLBars goodness! Since there was some breakage and a lot of fiddling around to get some things working, I took this opportunity to do a big cleanup of the whole Ember app. I accidentally worked on some new features too :3 Note that the app is still broken right now, pending on https://github.com/emberjs/ember.js/issues/10401 Cleanup: - Restructuring of components - Consolidation of some stuff into mixins, cleanup of some APIs that will be public - Change all instances of .property() / .observes() / .on() to Ember.computed() / Ember.observer() / Ember.on() respectively (I think it is more readable) - More comments - Start conforming to a code style (2 spaces for indentation) New features: - Post hiding/restoring - Mark individual discussions as read by clicking - Clicking on a read discussion jumps to the end - Mark all discussions as read - Progressively mark the discussion as read as the page is scrolled - Unordered list post formatting - Post permalink popup Demo once that Ember regression is fixed!
This commit is contained in:
Toby Zerner
@@ -1,193 +1,101 @@
|
||||
import Ember from 'ember';
|
||||
|
||||
import ActionButton from '../components/ui/controls/action-button';
|
||||
import SearchInput from '../components/ui/controls/search-input';
|
||||
import DropdownSelect from '../components/ui/controls/dropdown-select';
|
||||
import DropdownButton from '../components/ui/controls/dropdown-button';
|
||||
import SeparatorItem from '../components/ui/items/separator-item';
|
||||
import TaggedArray from '../utils/tagged-array';
|
||||
import HasItemLists from 'flarum/mixins/has-item-lists';
|
||||
import SearchInput from 'flarum/components/ui/search-input';
|
||||
import UserDropdown from 'flarum/components/application/user-dropdown';
|
||||
import GoToTop from 'flarum/components/application/go-to-top';
|
||||
import ForumStatistic from 'flarum/components/application/forum-statistic';
|
||||
import PoweredBy from 'flarum/components/application/powered-by';
|
||||
|
||||
var $ = Ember.$;
|
||||
|
||||
export default Ember.View.extend({
|
||||
export default Ember.View.extend(HasItemLists, {
|
||||
itemLists: ['headerPrimary', 'headerSecondary', 'footerPrimary', 'footerSecondary'],
|
||||
|
||||
// When either the forum title or the page title changes, we want to
|
||||
// refresh the document's title.
|
||||
updateTitle: function() {
|
||||
var parts = [this.get('controller.forumTitle')];
|
||||
var pageTitle = this.get('controller.pageTitle');
|
||||
if (pageTitle) {
|
||||
parts.unshift(pageTitle);
|
||||
}
|
||||
document.title = parts.join(' - ');
|
||||
}.observes('controller.pageTitle', 'controller.forumTitle'),
|
||||
title: Ember.computed.alias('controller.forumTitle'),
|
||||
|
||||
title: function() {
|
||||
return this.get('controller.forumTitle');
|
||||
}.property('controller.forumTitle'),
|
||||
// When either the forum title or the page title changes, we want to
|
||||
// refresh the document's title.
|
||||
updateTitle: Ember.observer('controller.pageTitle', 'controller.forumTitle', function() {
|
||||
var parts = [this.get('controller.forumTitle')];
|
||||
var pageTitle = this.get('controller.pageTitle');
|
||||
if (pageTitle) {
|
||||
parts.unshift(pageTitle);
|
||||
}
|
||||
document.title = parts.join(' - ');
|
||||
}),
|
||||
|
||||
modalShowingChanged: function() {
|
||||
if (!this.$()) { return; }
|
||||
modalShowingChanged: Ember.observer('controller.modalController', function() {
|
||||
Ember.run.scheduleOnce('afterRender', this, function() {
|
||||
this.$('#modal').modal(this.get('controller.modalController') ? 'show' : 'hide');
|
||||
});
|
||||
}),
|
||||
|
||||
if (this.get('controller.modalController')) {
|
||||
this.$('#modal').modal('show');
|
||||
} else {
|
||||
this.$('#modal').modal('hide');
|
||||
}
|
||||
}.observes('controller.modalController'),
|
||||
didInsertElement: function() {
|
||||
// Add a class to the body when the window is scrolled down.
|
||||
$(window).scroll(function() {
|
||||
$('body').toggleClass('scrolled', $(window).scrollTop() > 0);
|
||||
}).scroll();
|
||||
|
||||
didInsertElement: function() {
|
||||
|
||||
// Resize the main content area so that the footer sticks to the
|
||||
// bottom of the viewport.
|
||||
$(window).resize(function() {
|
||||
$('#main').css('min-height', $(window).height() - $('#header').outerHeight() - $('#footer').outerHeight(true));
|
||||
}).resize();
|
||||
|
||||
// Create and populate an array of items to be rendered in the footer.
|
||||
this.set('footerPrimaryItems', TaggedArray.create());
|
||||
this.set('footerSecondaryItems', TaggedArray.create());
|
||||
this.trigger('populateFooter', this.get('footerPrimaryItems'), this.get('footerSecondaryItems'));
|
||||
var view = this;
|
||||
this.$('#modal').on('hide.bs.modal', function() {
|
||||
view.get('controller').send('closeModal');
|
||||
}).on('hidden.bs.modal', function() {
|
||||
view.get('controller').send('destroyModal');
|
||||
}).on('shown.bs.modal', function() {
|
||||
view.get('controller.modalController').send('focus');
|
||||
});
|
||||
},
|
||||
|
||||
// Add a class to the body when the window is scrolled down.
|
||||
$(window).scroll(function() {
|
||||
$('body').toggleClass('scrolled', $(window).scrollTop() > 0);
|
||||
}).scroll();
|
||||
switchHeader: Ember.observer('controller.session.user', function() {
|
||||
this.initItemList('headerPrimary');
|
||||
this.initItemList('headerSecondary');
|
||||
}),
|
||||
|
||||
// Resize the main content area so that the footer sticks to the
|
||||
// bottom of the viewport.
|
||||
$(window).resize(function() {
|
||||
$('#main').css('min-height', $(window).height() - $('#header').outerHeight() - $('#footer').outerHeight(true));
|
||||
}).resize();
|
||||
populateHeaderSecondary: function(items) {
|
||||
var controller = this.get('controller');
|
||||
|
||||
var view = this;
|
||||
this.$('#modal').on('hide.bs.modal', function() {
|
||||
view.get('controller').send('closeModal');
|
||||
}).on('hidden.bs.modal', function() {
|
||||
view.get('controller').send('destroyModal');
|
||||
}).on('shown.bs.modal', function() {
|
||||
view.get('controller.modalController').send('focus');
|
||||
});
|
||||
},
|
||||
items.pushObjectWithTag(SearchInput.create({
|
||||
placeholder: 'Search Forum',
|
||||
controller: controller,
|
||||
valueBinding: Ember.Binding.oneWay('controller.searchQuery'),
|
||||
activeBinding: Ember.Binding.oneWay('controller.searchActive'),
|
||||
action: function(value) { controller.send('search', value); }
|
||||
}), 'search');
|
||||
|
||||
switchHeader: function() {
|
||||
// Create and populate an array of items to be rendered in the header.
|
||||
this.set('headerPrimaryItems', TaggedArray.create());
|
||||
this.set('headerSecondaryItems', TaggedArray.create());
|
||||
this.trigger('populateHeader', this.get('headerPrimaryItems'), this.get('headerSecondaryItems'));
|
||||
}.observes('controller.session.user'),
|
||||
if (this.get('controller.session.isAuthenticated')) {
|
||||
items.pushObjectWithTag(UserDropdown.create({
|
||||
user: this.get('controller.session.user'),
|
||||
logout: function() { controller.send('invalidateSession'); }
|
||||
}), 'user');
|
||||
} else {
|
||||
this.addActionItem(items, 'signup', 'Sign Up').set('className', 'btn btn-link');
|
||||
this.addActionItem(items, 'login', 'Log In').set('className', 'btn btn-link');
|
||||
}
|
||||
},
|
||||
|
||||
populateHeaderDefault: function(primary, secondary) {
|
||||
var controller = this.get('controller');
|
||||
populateFooterPrimary: function(items) {
|
||||
items.pushObjectWithTag(GoToTop.create(), 'top');
|
||||
|
||||
var search = SearchInput.create({
|
||||
placeholder: 'Search Forum',
|
||||
controller: controller,
|
||||
valueBinding: Ember.Binding.oneWay('controller.searchQuery'),
|
||||
activeBinding: Ember.Binding.oneWay('controller.searchActive'),
|
||||
action: function(value) {
|
||||
controller.send('search', value);
|
||||
}
|
||||
});
|
||||
secondary.pushObjectWithTag(search, 'search');
|
||||
|
||||
if (this.get('controller.session.isAuthenticated')) {
|
||||
var userItems = TaggedArray.create();
|
||||
|
||||
var profile = ActionButton.create({
|
||||
label: 'Profile',
|
||||
icon: 'user'
|
||||
});
|
||||
userItems.pushObjectWithTag(profile, 'profile');
|
||||
|
||||
var settings = ActionButton.create({
|
||||
label: 'Settings',
|
||||
icon: 'cog'
|
||||
});
|
||||
userItems.pushObjectWithTag(settings, 'settings');
|
||||
|
||||
userItems.pushObject(SeparatorItem.create());
|
||||
|
||||
var logOut = ActionButton.create({
|
||||
label: 'Log Out',
|
||||
icon: 'sign-out',
|
||||
action: function() {
|
||||
controller.send('invalidateSession');
|
||||
}
|
||||
});
|
||||
userItems.pushObjectWithTag(logOut, 'logOut');
|
||||
|
||||
var userDropdown = DropdownButton.extend({
|
||||
label: Ember.computed.alias('user.username'),
|
||||
buttonClass: 'btn btn-default btn-naked btn-rounded btn-user',
|
||||
buttonPartial: 'partials/user-button',
|
||||
menuClass: 'pull-right'
|
||||
});
|
||||
secondary.pushObjectWithTag(userDropdown.create({
|
||||
items: userItems,
|
||||
user: this.get('controller.session.user')
|
||||
}), 'user');
|
||||
} else {
|
||||
var signUp = ActionButton.create({
|
||||
label: 'Sign Up',
|
||||
className: 'btn btn-link',
|
||||
action: function() {
|
||||
controller.send('signup');
|
||||
}
|
||||
});
|
||||
secondary.pushObjectWithTag(signUp, 'signUp');
|
||||
|
||||
var logIn = ActionButton.create({
|
||||
label: 'Log In',
|
||||
className: 'btn btn-link',
|
||||
action: function() {
|
||||
controller.send('login');
|
||||
}
|
||||
});
|
||||
secondary.pushObjectWithTag(logIn, 'logIn');
|
||||
}
|
||||
}.on('populateHeader'),
|
||||
|
||||
populateFooterDefault: function(primary, secondary) {
|
||||
primary.pushObjectWithTag(ActionButton.create({
|
||||
icon: 'arrow-up',
|
||||
action: function() { $('html, body').stop(true).animate({scrollTop: 0}); },
|
||||
title: 'Go to Top',
|
||||
class: 'control-top'
|
||||
}), 'top');
|
||||
|
||||
primary.pushObjectWithTag(Ember.Component.create({
|
||||
layout: Ember.Handlebars.compile('{{discussions}} discussions'),
|
||||
discussions: 12
|
||||
}), 'statistics.discussions');
|
||||
|
||||
primary.pushObjectWithTag(Ember.Component.create({
|
||||
layout: Ember.Handlebars.compile('{{posts}} posts'),
|
||||
posts: 12
|
||||
}), 'statistics.posts');
|
||||
|
||||
primary.pushObjectWithTag(Ember.Component.create({
|
||||
layout: Ember.Handlebars.compile('{{users}} users'),
|
||||
users: 12
|
||||
}), 'statistics.users');
|
||||
|
||||
primary.pushObjectWithTag(Ember.Component.create({
|
||||
layout: Ember.Handlebars.compile('{{online}} online'),
|
||||
online: 12
|
||||
}), 'statistics.online');
|
||||
|
||||
var languages = TaggedArray.create();
|
||||
languages.pushObjectWithTag(Ember.Component.create({
|
||||
layout: Ember.Handlebars.compile('<a href="#">{{label}}</a>'),
|
||||
label: 'English',
|
||||
tagName: 'li',
|
||||
classNameBindings: ['active'],
|
||||
active: true
|
||||
}));
|
||||
secondary.pushObjectWithTag(DropdownSelect.create({
|
||||
buttonClass: '',
|
||||
class: 'dropup',
|
||||
items: languages
|
||||
}), 'language');
|
||||
|
||||
secondary.pushObjectWithTag(Ember.Component.create({
|
||||
layout: Ember.Handlebars.compile('<a href="http://flarum.org" target="_blank">Powered by Flarum</a>'),
|
||||
}), 'poweredBy');
|
||||
}.on('populateFooter'),
|
||||
var addStatistic = function(label, number) {
|
||||
items.pushObjectWithTag(ForumStatistic.create({
|
||||
label: label,
|
||||
number: number
|
||||
}), 'statistics.'+label);
|
||||
};
|
||||
// addStatistic('discussions', 12);
|
||||
// addStatistic('posts', 12);
|
||||
// addStatistic('users', 12);
|
||||
// addStatistic('online', 12);
|
||||
},
|
||||
|
||||
populateFooterSecondary: function(items) {
|
||||
items.pushObjectWithTag(PoweredBy.create(), 'poweredBy');
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user