Nemcio/NodeBB
1
0
Fork 0
mirror of https://github.com/NodeBB/NodeBB.git synced 2025-11-02 03:55:55 +01:00
Code Issues Packages Projects Releases Wiki Activity

composer changeS

Browse Source
This commit is contained in:
Baris Soner Usakli
2014-01-17 16:16:00 -05:00
parent 51abf60b3a
commit 48eb6a3f22
3 changed files with 78 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
public/src/modules/composer.js
View File

@@ -192,7 +192,7 @@ define(['taskbar'], function(taskbar) {
});
postContainer.on('click', '.action-bar button', function() {
postContainer.on('click', '.formatting-bar button', function() {
var action = $(this).attr('data-action');
switch(action) {
@@ -283,25 +283,39 @@ define(['taskbar'], function(taskbar) {
$('#fileForm')[0].reset();
});
postContainer.find('.nav-tabs a').click(function (e) {
e.preventDefault();
$(this).tab('show');
return false;
});
postContainer.find('.nav-tabs a').on('shown.bs.tab', function (e) {
if($(e.target).attr('href') === '#preview') {
socket.emit('modules.composer.renderPreview', bodyEl.val(), function(err, preview) {
postContainer.find('.preview').html(preview);
});
}
});
var resizeActive = false,
resizeCenterX = 0,
resizeCenterY = 0,
resizeOffset = 0,
resizeStart = function(e) {
bodyRect = document.body.getBoundingClientRect();
resizeRect = resizeEl.getBoundingClientRect();
resizeCenterX = resizeRect.left + (resizeRect.width/2);
resizeOffset = resizeCenterX - e.clientX;
resizeSnaps.half = bodyRect.width / 2;
resizeSnaps.none = bodyRect.width;
resizeCenterY = resizeRect.top + (resizeRect.height/2);
resizeOffset = resizeCenterY - e.clientY;
resizeActive = true;
$(document.body).on('mousemove', resizeAction);
$(document.body).on('mouseup', resizeStop);
document.body.addEventListener('touchmove', resizeTouchAction);
},
resizeStop = function() {
resizeActive = false;
$(document.body).off('mousemove', resizeAction);
$(document.body).off('mouseup', resizeStop);
document.body.removeEventListener('touchmove', resizeTouchAction);
},
resizeTouchAction = function(e) {
@@ -310,41 +324,23 @@ define(['taskbar'], function(taskbar) {
},
resizeAction = function(e) {
if (resizeActive) {
position = (e.clientX + resizeOffset);
if (Math.abs(position - resizeSnaps.half) <= 15) {
// Half snap
postContainer.css('width', resizeSnaps.half);
resizeSavePosition(resizeSnaps.half);
} else if (Math.abs(position - resizeSnaps.none) <= 30) {
// Minimize snap
postContainer.css('width', bodyRect.width - resizeSnaps.none + 15);
resizeSavePosition(resizeSnaps.none);
} else if (position <= 30) {
// Full snap
postContainer.css('width', bodyRect.width - 15);
resizeSavePosition(bodyRect.width - 15);
} else {
// OH SNAP, NO SNAPS!
postContainer.css('width', bodyRect.width - position);
resizeSavePosition(bodyRect.width - position);
}
position = (e.clientY + resizeOffset);
postContainer.css('height', $(window).height() - position);
resizeSavePosition($(window).height() - position);
}
return false;
},
resizeSavePosition = function(px) {
var percentage = px/bodyRect.width;
var percentage = px / $(window).height();
localStorage.setItem('composer:resizePercentage', percentage);
},
resizeSnaps = {
none: 0,
half: 0,
full: 0
},
resizeRect, bodyRect;
var resizeEl = postContainer.find('.resizer')[0];
resizeEl.addEventListener('mousedown', resizeStart);
resizeEl.addEventListener('mouseup', resizeStop);
resizeEl.addEventListener('touchstart', function(e) {
e.preventDefault();
resizeStart(e.touches[0]);
@@ -364,6 +360,24 @@ define(['taskbar'], function(taskbar) {
});
}
//http://stackoverflow.com/questions/14441456/how-to-detect-which-device-view-youre-on-using-twitter-bootstrap-api
function findBootstrapEnvironment() {
var envs = ['xs', 'sm', 'md', 'lg'];
$el = $('<div>');
$el.appendTo($('body'));
for (var i = envs.length - 1; i >= 0; i--) {
var env = envs[i];
$el.addClass('hidden-'+env);
if ($el.is(':hidden')) {
$el.remove();
return env;
}
}
}
composer.activateReposition = function(post_uuid) {
if(composer.active && composer.active !== post_uuid) {
@@ -375,15 +389,18 @@ define(['taskbar'], function(taskbar) {
postContainer = $('#cmp-uuid-' + post_uuid);
composer.active = post_uuid;
var env = findBootstrapEnvironment();
if (percentage) {
if (bodyRect.width >= 768) {
postContainer.css('width', Math.floor(bodyRect.width * percentage) + 'px');
} else {
postContainer.css('width', '100%');
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.imgurClientIDSet) {
postContainer.find('.upload-instructions').removeClass('hide');
postContainer.find('.img-upload-btn').removeClass('hide');

31
public/templates/composer.tpl
View File

@@ -17,20 +17,31 @@
<input type="file" id="files" name="files[]" multiple class="hide"/>
</form>
</div>
<!-- <div class="btn btn-link pull-right">Preview</div> -->
</div>
<textarea tabIndex="2"></textarea>
<div class="preview"></div>
<div class="imagedrop"><div>Drag and Drop Images Here</div></div>
<div class="text-center upload-instructions hide visible-lg visible-md">
<small>Upload images by dragging & dropping them</small>
</div>
<div class="btn-toolbar action-bar">
<div class="btn-group pull-right">
<button class="btn btn-default" data-action="discard" tabIndex="5"><i class="fa fa-times"></i> Discard</button>
<button data-action="post" class="btn btn-default" tabIndex="3"><i class="fa fa-check"></i> Submit</button>
</div>
</div>
<div class="resizer"><div class="trigger"><i class="fa fa-chevron-left"></i></div></div>
<ul class="nav nav-tabs">
<li class="active"><a href="#write" data-toggle="tab">Write</a></li>
<li><a href="#preview" data-toggle="tab">Preview</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="write">
<textarea class="write" tabIndex="2"></textarea>
</div>
<div class="tab-pane" id="preview">
<div class="preview well"></div>
</div>
</div>
<div class="imagedrop"><div>Drag and Drop Images Here</div></div>
<div class="text-center upload-instructions hide visible-lg visible-md">
<small>Upload images by dragging & dropping them</small>
</div>
<div class="resizer"><div class="trigger text-center"><i class="fa fa-chevron-up"></i></div></div>
</div>
</div>

5
src/socket.io/modules.js
View File

@@ -63,6 +63,11 @@ SocketModules.composer.editCheck = function(socket, pid, callback) {
});
};
SocketModules.composer.renderPreview = function(socket, content, callback) {
var preview = require('marked')(content);
callback(null, preview);
}
/* Chat */
SocketModules.chats = {};