Merge pull request #3949 from novaugust/js-prefixes

`js-` prefix codebase; fix content preview back button
This commit is contained in:
Paul Davis 2014-09-03 15:16:30 +01:00
commit 94db4624e7
9 changed files with 27 additions and 40 deletions

View File

@ -44,17 +44,6 @@ var Codemirror = Ember.TextArea.extend(MarkerManager, {
afterRenderEvent: function () {
var initMarkers = _.bind(this.initMarkers, this);
// Allow tabbing behaviour when viewing on small screen (not mobile)
$('#entry-markdown-header').on('click', function () {
$('.entry-markdown').addClass('active');
$('.entry-preview').removeClass('active');
});
$('#entry-preview-header').on('click', function () {
$('.entry-markdown').removeClass('active');
$('.entry-preview').addClass('active');
});
// replaces CodeMirror with TouchEditor only if we're on mobile
mobileCodeMirror.createIfMobile();
@ -88,7 +77,7 @@ var Codemirror = Ember.TextArea.extend(MarkerManager, {
codemirror.on('scroll', onScrollHandler);
codemirror.on('scroll', Ember.run.bind(Ember.$('.CodeMirror-scroll'), setScrollClassName, {
target: Ember.$('.entry-markdown'),
target: Ember.$('.js-entry-markdown'),
offset: 10
}));

View File

@ -1,8 +1,6 @@
import uploader from 'ghost/assets/lib/uploader';
var Markdown = Ember.Component.extend({
classNames: ['rendered-markdown'],
didInsertElement: function () {
this.set('scrollWrapper', this.$().closest('.entry-preview-content'));
},

View File

@ -1,8 +1,8 @@
var ModalDialog = Ember.Component.extend({
didInsertElement: function () {
this.$('#modal-container').fadeIn(50);
this.$('.js-modal-container').fadeIn(50);
this.$('.modal-background').show().fadeIn(10, function () {
this.$('.js-modal-background').show().fadeIn(10, function () {
$(this).addClass('in');
});
@ -13,7 +13,7 @@ var ModalDialog = Ember.Component.extend({
this.$('.js-modal').removeClass('in');
this.$('.modal-background').removeClass('in');
this.$('.js-modal-background').removeClass('in');
return this._super();
},
@ -46,7 +46,7 @@ var ModalDialog = Ember.Component.extend({
return classNames.join(' ');
}),
acceptButtonClass: Ember.computed('confirm.accept.buttonClass', function () {
return this.get('confirm.accept.buttonClass') ? this.get('confirm.accept.buttonClass') : 'btn btn-green';
}),

View File

@ -71,23 +71,22 @@ var PostsController = Ember.ArrayController.extend(PaginationControllerMixin, {
//let the PaginationControllerMixin know what type of model we will be paginating
//this is necesariy because we do not have access to the model inside the Controller::init method
this._super({'modelType': 'post'});
},
actions: {
resetContentPreview: function () {
$('.content-list').removeAttr('style');
$('.content-preview').removeAttr('style');
$('.js-content-list').removeAttr('style');
$('.js-content-preview').removeAttr('style');
},
showContentPreview: function () {
$('.content-list').animate({right: '100%', left: '-100%', 'margin-right': '15px'}, 300);
$('.content-preview').animate({right: '0', left: '0', 'margin-left': '0'}, 300);
$('.js-content-list').animate({right: '100%', left: '-100%', 'margin-right': '15px'}, 300);
$('.js-content-preview').animate({right: '0', left: '0', 'margin-left': '0'}, 300);
},
hideContentPreview: function () {
$('.content-list').animate({right: '0', left: '0', 'margin-right': '0'}, 300);
$('.content-preview').animate({right: '-100%', left: '100%', 'margin-left': '15px'}, 300);
$('.js-content-list').animate({right: '0', left: '0', 'margin-right': '0'}, 300);
$('.js-content-preview').animate({right: '-100%', left: '100%', 'margin-left': '15px'}, 300);
},
}
});

View File

@ -14,14 +14,14 @@ var EditorViewMixin = Ember.Mixin.create({
// all child views will have rendered when this fires
afterRenderEvent: function () {
var $previewViewPort = this.$('.entry-preview-content');
var $previewViewPort = this.$('.js-entry-preview-content');
// cache these elements for use in other methods
this.set('$previewViewPort', $previewViewPort);
this.set('$previewContent', this.$('.rendered-markdown'));
this.set('$previewContent', this.$('.js-rendered-markdown'));
$previewViewPort.scroll(Ember.run.bind($previewViewPort, setScrollClassName, {
target: this.$('.entry-preview'),
target: this.$('.js-entry-preview'),
offset: 10
}));
},

View File

@ -1,4 +1,4 @@
<div id="modal-container" {{action "closeModal"}}>
<div id="modal-container" class="js-modal-container" {{action "closeModal"}}>
<article {{bind-attr class="klass :js-modal"}}>
<section class="modal-content" {{action bubbles=false preventDefault=false}}>
{{#if title}}<header class="modal-header"><h1>{{title}}</h1></header>{{/if}}
@ -19,4 +19,4 @@
</section>
</article>
</div>
<div class="modal-background fade"></div>
<div class="modal-background fade js-modal-background"></div>

View File

@ -10,7 +10,7 @@
</section>
</header>
<section {{bind-attr class=":entry-markdown isPreview::active"}}>
<section {{bind-attr class=":entry-markdown :js-entry-markdown isPreview::active"}}>
<header {{action "togglePreview" false}} class="floatingheader">
<small>Markdown</small>
<a class="markdown-help" href="" {{action "openModal" "markdown"}}><span class="hidden">What is Markdown?</span></a>
@ -20,16 +20,17 @@
</section>
</section>
<section {{bind-attr class=":entry-preview isPreview:active"}}>
<section {{bind-attr class=":entry-preview :js-entry-preview isPreview:active"}}>
<header {{action "togglePreview" true}} class="floatingheader">
<small>Preview <span class="entry-word-count js-entry-word-count">{{gh-count-words scratch}}</span></small>
</header>
<section class="entry-preview-content">
{{gh-markdown markdown=scratch scrollPosition=view.scrollPosition
<section class="entry-preview-content js-entry-preview-content">
{{gh-markdown classNames="rendered-markdown js-rendered-markdown"
markdown=scratch scrollPosition=view.scrollPosition
uploadStarted="disableCodeMirror" uploadFinished="enableCodeMirror" uploadSuccess="handleImgUpload"}}
</section>
</section>
{{partial "publish-bar"}}
</div>
</div>

View File

@ -1,5 +1,5 @@
<header class="post-preview-header">
<button type="button" class="btn btn-default btn-back" href="#">Back</button>
<button type="button" class="btn btn-default btn-back">Back</button>
<button type="button" {{bind-attr class="featured:featured:unfeatured"}} title="Feature this post" {{action "toggleFeatured"}}>
<span class="hidden">Star</span>
</button>

View File

@ -8,7 +8,7 @@ var PostsView = Ember.View.extend({
mobileInteractions: function () {
Ember.run.scheduleOnce('afterRender', this, function () {
var self = this;
//@TODO Kill all the jqueries.
$(window).resize(function () {
if (!mobileQuery.matches) {
self.send('resetContentPreview');
@ -17,14 +17,14 @@ var PostsView = Ember.View.extend({
// ### Show content preview when swiping left on content list
$('.manage').on('click', '.content-list ol li', function (event) {
responsiveAction(event, '(max-width: 800px)', function () {
responsiveAction(event, '(max-width: 900px)', function () {
self.send('showContentPreview');
});
});
// ### Hide content preview
$('.manage').on('click', '.content-preview .btn .btn-default', function (event) {
responsiveAction(event, '(max-width: 800px)', function () {
$('.manage').on('click', '.content-preview .btn.btn-back', function (event) {
responsiveAction(event, '(max-width: 900px)', function () {
self.send('hideContentPreview');
});
});