diff --git a/public/src/modules/composer.js b/public/src/modules/composer.js index b29baa07a6..3c6d12ee38 100644 --- a/public/src/modules/composer.js +++ b/public/src/modules/composer.js @@ -9,10 +9,11 @@ var dependencies = [ 'composer/formatting', 'composer/drafts', 'composer/tags', - 'composer/preview' + 'composer/preview', + 'composer/resize' ]; -define('composer', dependencies, function(taskbar, controls, uploads, formatting, drafts, tags, preview) { +define('composer', dependencies, function(taskbar, controls, uploads, formatting, drafts, tags, preview, resize) { var composer = { active: undefined, posts: {}, @@ -29,7 +30,7 @@ define('composer', dependencies, function(taskbar, controls, uploads, formatting function onWindowResize() { if (composer.active !== undefined) { - activateReposition(composer.active); + resize.reposition($('#cmp-uuid-' + composer.active)); } } @@ -117,7 +118,7 @@ define('composer', dependencies, function(taskbar, controls, uploads, formatting composer.addQuote = function(tid, pid, title, username, text){ var uuid = composer.active; - if(uuid === undefined){ + if (uuid === undefined) { composer.newReply(tid, pid, title, '[[modules:composer.user_said, ' + username + ']]' + text); return; } @@ -170,8 +171,11 @@ define('composer', dependencies, function(taskbar, controls, uploads, formatting }; composer.load = function(post_uuid) { - if($('#cmp-uuid-' + post_uuid).length) { - activateReposition(post_uuid); + var postContainer = $('#cmp-uuid-' + post_uuid); + if (postContainer.length) { + activate(post_uuid); + resize.reposition(postContainer); + focusElements(postContainer); } else { createNewComposer(post_uuid); } @@ -191,7 +195,7 @@ define('composer', dependencies, function(taskbar, controls, uploads, formatting var isTopic = composer.posts[post_uuid] ? !!composer.posts[post_uuid].cid : false; var isMain = composer.posts[post_uuid] ? !!composer.posts[post_uuid].isMain : false; - composer.bsEnvironment = utils.findBootstrapEnvironment() + composer.bsEnvironment = utils.findBootstrapEnvironment(); var template = (composer.bsEnvironment === 'xs' || composer.bsEnvironment === 'sm') ? 'composer-mobile' : 'composer'; @@ -203,24 +207,23 @@ define('composer', dependencies, function(taskbar, controls, uploads, formatting $(document.body).append(composerTemplate); - var postContainer = $(composerTemplate[0]); + var postContainer = $(composerTemplate[0]), + postData = composer.posts[post_uuid], + bodyEl = postContainer.find('textarea'), + draft = drafts.getDraft(postData.save_id); tags.init(postContainer, composer.posts[post_uuid]); + updateTitle(postData, postContainer); - activateReposition(post_uuid); + activate(post_uuid); + resize.reposition(postContainer); - if(config.allowFileUploads || config.hasImageUploadPlugin) { + if (config.allowFileUploads || config.hasImageUploadPlugin) { uploads.initialize(post_uuid); } formatting.addHandler(postContainer); - var postData = composer.posts[post_uuid], - bodyEl = postContainer.find('textarea'), - draft = drafts.getDraft(postData.save_id); - - updateTitle(postData, postContainer); - if (allowTopicsThumbnail) { uploads.toggleThumbEls(postContainer, composer.posts[post_uuid].topic_thumb || ''); } @@ -249,25 +252,13 @@ define('composer', dependencies, function(taskbar, controls, uploads, formatting }); }); - postContainer.find('.nav-tabs a').click(function (e) { - e.preventDefault(); - $(this).tab('show'); - var selector = $(this).attr('data-pane'); - postContainer.find('.tab-content div').removeClass('active'); - postContainer.find(selector).addClass('active'); - if(selector === '.tab-write') { - bodyEl.focus(); - } - return false; - }); - bodyEl.on('input propertychange', function() { preview.render(postContainer); }); bodyEl.on('scroll', function() { preview.matchScroll(postContainer); - }) + }); bodyEl.val(draft ? draft : postData.body); preview.render(postContainer, function() { @@ -275,7 +266,7 @@ define('composer', dependencies, function(taskbar, controls, uploads, formatting }); drafts.init(postContainer, postData); - handleResize(postContainer); + resize.handleResize(postContainer); handleHelp(postContainer); @@ -284,7 +275,7 @@ define('composer', dependencies, function(taskbar, controls, uploads, formatting }); formatting.addComposerButtons(); - + focusElements(postContainer); }); }); } @@ -324,133 +315,24 @@ define('composer', dependencies, function(taskbar, controls, uploads, formatting } } - function handleResize(postContainer) { - var resizeActive = false, - resizeOffset = 0, - resizeStart = function(e) { - var resizeRect = resizeEl[0].getBoundingClientRect(); - var resizeCenterY = resizeRect.top + (resizeRect.height/2); - resizeOffset = resizeCenterY - e.clientY; - resizeActive = true; - - $(window).on('mousemove', resizeAction); - $(window).on('mouseup', resizeStop); - $('body').on('touchmove', resizeTouchAction); - }, - resizeStop = function() { - resizeActive = false; - postContainer.find('textarea').focus(); - $(window).off('mousemove', resizeAction); - $(window).off('mouseup', resizeStop); - $('body').off('touchmove', resizeTouchAction); - }, - resizeTouchAction = function(e) { - e.preventDefault(); - resizeAction(e.touches[0]); - }, - resizeAction = function(e) { - if (resizeActive) { - var position = (e.clientY + resizeOffset); - var newHeight = $(window).height() - position; - - if(newHeight > $(window).height() - $('#header-menu').height() - 20) { - newHeight = $(window).height() - $('#header-menu').height() - 20; - } else if (newHeight < 100) { - newHeight = 100; - } - - postContainer.css('height', newHeight); - $('body').css({'margin-bottom': newHeight}); - resizeTabContent(postContainer); - resizeSavePosition(newHeight); - } - e.preventDefault(); - return false; - }, - resizeSavePosition = function(px) { - var percentage = px / $(window).height(); - localStorage.setItem('composer:resizePercentage', percentage); - }; - - var resizeEl = postContainer.find('.resizer'); - - resizeEl.on('mousedown', resizeStart); - - resizeEl.on('touchstart', function(e) { - e.preventDefault(); - resizeStart(e.touches[0]); - }); - - resizeEl.on('touchend', function(e) { - e.preventDefault(); - resizeStop(); - }); - } - - function activateReposition(post_uuid) { + function activate(post_uuid) { if(composer.active && composer.active !== post_uuid) { composer.minimize(composer.active); } - var percentage = localStorage.getItem('composer:resizePercentage'), - postContainer = $('#cmp-uuid-' + post_uuid); - composer.active = post_uuid; - var env = composer.bsEnvironment; - - if (percentage) { - if ( env === 'md' || env === 'lg') { - postContainer.css('height', Math.floor($(window).height() * percentage) + 'px'); - } - } - - if(env === 'sm' || env === 'xs') { - postContainer.css('height', $(window).height() - $('#header-menu').height()); - } - - if(config.hasImageUploadPlugin) { - postContainer.find('.img-upload-btn').removeClass('hide'); - postContainer.find('#files.lt-ie9').removeClass('hide'); - } - - if(config.allowFileUploads) { - postContainer.find('.file-upload-btn').removeClass('hide'); - postContainer.find('#files.lt-ie9').removeClass('hide'); - } - - postContainer.css('visibility', 'visible') - .css('z-index', 2); - - $('body').css({'margin-bottom': postContainer.css('height')}); - - if (env !== 'sm' && env !== 'xs') { - focusElements(post_uuid); - } - - resizeTabContent(postContainer); } - function resizeTabContent(postContainer) { - var h1 = postContainer.find('.title').outerHeight(true); - var h2 = postContainer.find('.tags-container').outerHeight(true); - var h3 = postContainer.find('.formatting-bar').outerHeight(true); - var h4 = postContainer.find('.topic-thumb-container').outerHeight(true); - var h5 = $('.taskbar').height(); - var total = h1 + h2 + h3 + h4 + h5; - postContainer.find('.write-preview-container').css('height', postContainer.height() - total); - } - - function focusElements(post_uuid) { - var postContainer = $('#cmp-uuid-' + post_uuid), - postData = composer.posts[post_uuid], + function focusElements(postContainer) { + var title = postContainer.find('.title'), bodyEl = postContainer.find('textarea'); - if ((parseInt(postData.tid, 10) || parseInt(postData.pid, 10)) > 0) { + if (title.is(':disabled')) { bodyEl.focus(); bodyEl.selectionStart = bodyEl.val().length; bodyEl.selectionEnd = bodyEl.val().length; - } else if (parseInt(postData.cid, 10) > 0) { - postContainer.find('.title').focus(); + } else { + title.focus(); } } diff --git a/public/src/modules/composer/resize.js b/public/src/modules/composer/resize.js new file mode 100644 index 0000000000..8b88482f28 --- /dev/null +++ b/public/src/modules/composer/resize.js @@ -0,0 +1,121 @@ + +'use strict'; + +/* globals define, config, utils*/ + +define('composer/resize', function() { + var resize = {}; + + var env = utils.findBootstrapEnvironment(); + + resize.reposition = function(postContainer) { + var percentage = localStorage.getItem('composer:resizePercentage'); + + if (percentage) { + if (env === 'md' || env === 'lg') { + postContainer.css('height', Math.floor($(window).height() * percentage) + 'px'); + } + } + + if (env === 'sm' || env === 'xs') { + postContainer.css('height', $(window).height() - $('#header-menu').height()); + } + + if (config.hasImageUploadPlugin) { + postContainer.find('.img-upload-btn').removeClass('hide'); + postContainer.find('#files.lt-ie9').removeClass('hide'); + } + + if (config.allowFileUploads) { + postContainer.find('.file-upload-btn').removeClass('hide'); + postContainer.find('#files.lt-ie9').removeClass('hide'); + } + + postContainer.css('visibility', 'visible').css('z-index', 2); + + $('body').css({'margin-bottom': postContainer.css('height')}); + + resizeWritePreview(postContainer); + }; + + resize.handleResize = function(postContainer) { + function resizeStart(e) { + var resizeRect = resizeEl[0].getBoundingClientRect(); + var resizeCenterY = resizeRect.top + (resizeRect.height/2); + resizeOffset = resizeCenterY - e.clientY; + resizeActive = true; + + $(window).on('mousemove', resizeAction); + $(window).on('mouseup', resizeStop); + $('body').on('touchmove', resizeTouchAction); + } + + function resizeStop() { + resizeActive = false; + postContainer.find('textarea').focus(); + $(window).off('mousemove', resizeAction); + $(window).off('mouseup', resizeStop); + $('body').off('touchmove', resizeTouchAction); + } + + function resizeTouchAction(e) { + e.preventDefault(); + resizeAction(e.touches[0]); + } + + function resizeAction(e) { + if (resizeActive) { + var position = (e.clientY + resizeOffset); + var newHeight = $(window).height() - position; + + if(newHeight > $(window).height() - $('#header-menu').height() - 20) { + newHeight = $(window).height() - $('#header-menu').height() - 20; + } else if (newHeight < 100) { + newHeight = 100; + } + + postContainer.css('height', newHeight); + $('body').css({'margin-bottom': newHeight}); + resizeWritePreview(postContainer); + resizeSavePosition(newHeight); + } + e.preventDefault(); + return false; + } + + function resizeSavePosition(px) { + var percentage = px / $(window).height(); + localStorage.setItem('composer:resizePercentage', percentage); + } + + var resizeActive = false, + resizeOffset = 0, + resizeEl = postContainer.find('.resizer'); + + resizeEl.on('mousedown', resizeStart); + + resizeEl.on('touchstart', function(e) { + e.preventDefault(); + resizeStart(e.touches[0]); + }); + + resizeEl.on('touchend', function(e) { + e.preventDefault(); + resizeStop(); + }); + }; + + + function resizeWritePreview(postContainer) { + var h1 = postContainer.find('.title').outerHeight(true); + var h2 = postContainer.find('.tags-container').outerHeight(true); + var h3 = postContainer.find('.formatting-bar').outerHeight(true); + var h4 = postContainer.find('.topic-thumb-container').outerHeight(true); + var h5 = $('.taskbar').height(); + var total = h1 + h2 + h3 + h4 + h5; + postContainer.find('.write-preview-container').css('height', postContainer.height() - total); + } + + + return resize; +}); \ No newline at end of file