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

OMG SNAPS

Browse Source
This commit is contained in:
Julian Lam
2013-12-18 18:48:42 -05:00
parent c4623e2447
commit 83f20c1cdb
2 changed files with 62 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -241,9 +241,50 @@ define(['taskbar'], function(taskbar) {
} }
}); });
resizeEl.on('dragstart', function() { var resizeActive = false,
console.log('dragging'); resizeCenterX = 0,
}); resizeOffset = 0,
resizeAction = function(e) {
if (resizeActive) {
position = (e.clientX + resizeOffset);
if (Math.abs(position - resizeSnaps.half) <= 15) {
// Half snap
jPostContainer.css('width', resizeSnaps.half);
} else if (Math.abs(position - resizeSnaps.none) <= 15) {
// Minimize snap
jPostContainer.css('width', bodyRect.width - resizeSnaps.none);
} else if (position <= 15) {
// Full snap
jPostContainer.css('width', bodyRect.width - 15);
} else {
// OH SNAP, NO SNAPS!
jPostContainer.css('width', bodyRect.width - position);
}
}
},
resizeSnaps = {
none: 0,
half: 0,
full: 0
},
resizeRect, bodyRect;
resizeEl
.on('mousedown', function(e) {
bodyRect = document.body.getBoundingClientRect();
resizeRect = resizeEl[0].getBoundingClientRect();
resizeCenterX = resizeRect.left + (resizeRect.width/2);
resizeOffset = resizeCenterX - e.clientX;
resizeSnaps.half = bodyRect.width / 2;
resizeSnaps.none = bodyRect.width;
resizeActive = true;
$(document.body).on('mousemove', resizeAction);
})
.on('mouseup', function() {
resizeActive = false;
$(document.body).off('mousemove', resizeAction);
});
window.addEventListener('resize', function() { window.addEventListener('resize', function() {
if (composer.active !== undefined) composer.reposition(composer.active); if (composer.active !== undefined) composer.reposition(composer.active);

34
public/templates/composer.tpl
View File

@@ -1,21 +1,23 @@
<div class="composer"> <div class="composer">
<input class="title" type="text" tabIndex="1" placeholder="Enter your topic title here..." /> <div class="composer-container">
<div class="btn-toolbar formatting-bar"> <input class="title" type="text" tabIndex="1" placeholder="Enter your topic title here..." />
<div class="btn-group"> <div class="btn-toolbar formatting-bar">
<span class="btn btn-link" tabindex="-1"><i class="fa fa-bold"></i></span> <div class="btn-group">
<span class="btn btn-link" tabindex="-1"><i class="fa fa-italic"></i></span> <span class="btn btn-link" tabindex="-1"><i class="fa fa-bold"></i></span>
<span class="btn btn-link" tabindex="-1"><i class="fa fa-list"></i></span> <span class="btn btn-link" tabindex="-1"><i class="fa fa-italic"></i></span>
<span class="btn btn-link" tabindex="-1"><i class="fa fa-link"></i></span> <span class="btn btn-link" tabindex="-1"><i class="fa fa-list"></i></span>
<span class="btn btn-link" tabindex="-1"><i class="fa fa-link"></i></span>
</div>
<div class="btn btn-link pull-right">Preview</div>
</div> </div>
<div class="btn btn-link pull-right">Preview</div> <textarea tabIndex="2"></textarea>
</div> <div class="imagedrop"><div>Drag and Drop Images Here</div></div>
<textarea tabIndex="2"></textarea> <div class="btn-toolbar action-bar">
<div class="imagedrop"><div>Drag and Drop Images Here</div></div> <div class="btn-group pull-right">
<div class="btn-toolbar action-bar"> <button class="btn" data-action="discard" tabIndex="5"><i class="fa fa-times"></i> Discard</button>
<div class="btn-group pull-right"> <button data-action="post" class="btn" tabIndex="3"><i class="fa fa-check"></i> Submit</button>
<button class="btn" data-action="discard" tabIndex="5"><i class="fa fa-times"></i> Discard</button> </div>
<button data-action="post" class="btn" 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>
</div> </div>
<div class="resizer"><div class="trigger"><i class="fa fa-chevron-left"></i></div></div>
</div> </div>