franzz/mythoughts
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

create boundaries (bottom only)

Browse Source
This commit is contained in:
francois.lutran
2016-12-22 17:31:12 +13:00
parent 5fc9260041
commit 6a09f7a921
4 changed files with 90 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
masks/write.html
View File

@@ -18,6 +18,8 @@
<p>In-extremist, I manage to babble some excuses about a rigorous lunch break time and leave the premises.</p>
</div>
</div>
<div class="shade bottom"></div>
<div class="shade bottomplus"></div>
</div>
</div>
<script type="text/javascript">
@@ -29,12 +31,13 @@
self.vars('working', false);
self.vars('prec_displayed', 0);
self.vars('prec_content', 0);
self.vars('page', 0);
//self.vars('page', 0);
self.vars('editor', $('#editor_content'));
self.vars('page_height', $('#editor_container').height());
var oQuill = new Quill('#editor', {
oQuill = new Quill('#editor', {
theme: 'bubble',
modules:
{
@@ -42,58 +45,82 @@
}
});
var oEditorBound = {top: self.vars('page_height'),
bottom: self.vars('page_height'),
left: 0,
right: self.vars('editor').width()};
oEditorBound = {top: self.vars('page_height'), bottom: self.vars('page_height')};
oQuill.on('text-change', function(delta, oldDelta, source) {
if(source == 'user')
{
var range = oQuill.getSelection();
if(range)
{
var oSelBound = oQuill.getBounds(range.index, range.length);
//$('#editor').append($('<div>', {style:'background:red;width:1px;height:'+(oBound.bottom - oBound.top)+'px;position:absolute;top:'+oBound.top+'px;left:'+oBound.left+'px;'}));
$('#editor').append($('<div>', {style:'background:red;width:10px;height:1px;position:absolute;top:0px;left:0px;'}));
$('#editor').append($('<div>', {style:'background:red;width:10px;height:1px;position:absolute;top:'+($('#editor').height() - 1)+'px;left:'+($('#editor').width() - 10)+'px;'}));
var oEditorPos = $('.ql-editor').position();
var oEditorCurBound = { top: oEditorBound.top*self.vars('page'),
bottom: oEditorBound.bottom*(self.vars('page') + 1),
left: 0,
right: oEditorBound.right};
//console.log(oSelBound.top+' < '+oEditorCurBound.top);
console.log(oSelBound.bottom+' - '+oEditorPos.top+' = '+(oSelBound.bottom - oEditorPos.top)+' > '+oEditorCurBound.bottom);
//if(oSelBound.top < oEditorCurBound.top)
//{
// moveToPage(self.vars('page') - 1);
//}
if((oSelBound.bottom - oEditorPos.top) > oEditorCurBound.bottom)
{
moveToPage(self.vars('page') + 1);
}
}
}
});
oQuill.on('text-change', onChange);
oQuill.on('selection-change', onChange);
oQuill.focus();
moveToPage(0);
$('.fa-prev').click(function(){moveToPage(-1);});
$('.fa-next').click(function(){moveToPage(1);});
};
function onChange(delta, oldDelta, source)
{
if(source == 'user')
{
var range = oQuill.getSelection();
if(range)
{
//Quill.debug('info');
var oSelBound = oQuill.getBounds(range.index, range.length);
//$('#editor').append($('<div>', {style:'background:red;width:1px;height:'+(oBound.bottom - oBound.top)+'px;position:absolute;top:'+oBound.top+'px;left:'+oBound.left+'px;'}));
//$('#editor').append($('<div>', {style:'background:red;width:10px;height:1px;position:absolute;top:0px;left:0px;'}));
//$('#editor').append($('<div>', {style:'background:red;width:10px;height:1px;position:absolute;top:'+($('#editor').height() - 1)+'px;left:'+($('#editor').width() - 10)+'px;'}));
//var oSelBoundAvg = oSelBound.top + (oSelBound.bottom - oSelBound.top)/2;
var oEditorCurBound = { top: oEditorBound.top*self.vars('page'),
bottom: oEditorBound.bottom*(self.vars('page') + 1)};
console.log(oSelBound.top+' < '+oEditorCurBound.top);
console.log(oSelBound.bottom+' > '+oEditorCurBound.bottom);
var sNewPage = self.vars('page');
if(oSelBound.top < oEditorCurBound.top)
{
sNewPage--;
}
else if(oSelBound.bottom > oEditorCurBound.bottom)
{
sNewPage++;
}
moveToPage(sNewPage);
}
}
}
function moveToPage(iNewPage)
{
if(iNewPage!=self.vars('page'))
{
self.vars('page', iNewPage);
console.log('moving to index '+self.vars('page')+' (page '+(self.vars('page')+1)+')');
console.log('moving to index '+self.vars('page')+' (page '+(self.vars('page') + 1)+')');
$('.page_nb').text(self.vars('page') + 1);
self.vars('editor').css('top', self.vars('page')*self.vars('page_height')*-1);
self.vars('editor').css('top', self.vars('page') * self.vars('page_height') * -1);
}
//Build shades
//if(self.vars('page') > 0)
//{
//
//}
var iIndex = oQuill.getSelection().index;
var oEditorCurBound = { top: oEditorBound.top*self.vars('page'),
bottom: oEditorBound.bottom*(self.vars('page') + 1)};
while(oQuill.getBounds(iIndex).bottom < oEditorCurBound.bottom && iIndex < oQuill.getLength())
{
//console.log(oQuill.getBounds(iIndex).bottom+' inf '+oEditorCurBound.bottom);
iIndex++;
}
console.log("stopping at "+iIndex+'('+oQuill.getBounds(iIndex).bottom+' sup '+oEditorCurBound.bottom+')');
var sMaxHeight = oQuill.getBounds(iIndex - 1).bottom;
$('.shade.bottom').css('height', oEditorCurBound.bottom - sMaxHeight);
}
oMyThoughts.onFeedback = function(sType, sMsg)

22
style/_write.scss
View File

@@ -4,9 +4,11 @@
#editor_container {
padding:1em;
border: 1em solid #EDE0D0;
border-radius: 0.5em;
height: calc(100% - 4em);
overflow: hidden;
position:relative;
#editor_content {
@@ -23,6 +25,24 @@
}
}
}
.shade {
position: absolute;
width: 100%;
background:red;
&.top {
top:0;
}
&.bottom {
bottom:0;
}
&.bottomplus {
top:100%;
height:2em;
}
}
}
}

2
style/mythoughts.css
View File

File diff suppressed because one or more lines are too long

2
style/mythoughts.css.map
View File

File diff suppressed because one or more lines are too long