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

setting up bounds

Browse Source
This commit is contained in:
francois.lutran
2016-12-19 17:25:26 +13:00
parent 5b74289001
commit def50a1b08
7 changed files with 640 additions and 619 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
masks/index.html
View File

@@ -10,12 +10,12 @@
<script type="text/javascript" src="scripts/mythoughts.js"></script> <script type="text/javascript" src="scripts/mythoughts.js"></script>
<link rel="shortcut icon" href="images/favicon2.ico" /> <link rel="shortcut icon" href="images/favicon2.ico" />
<title>My Thoughts</title> <title>My Thoughts</title>
</head>
<body>
<div id="container"></div>
<script type="text/javascript"> <script type="text/javascript">
var oMyThoughts = new MyThoughts(asGlobalVars); var oMyThoughts = new MyThoughts(asGlobalVars);
$(document).ready(oMyThoughts.init); $(document).ready(oMyThoughts.init);
</script> </script>
</head>
<body>
<div id="container"></div>
</body> </body>
</html> </html>

13
masks/write.html
View File

@@ -5,6 +5,7 @@
<span class="page_nb">1</span> <span class="page_nb">1</span>
<A class="fa fa-next"></a> <A class="fa fa-next"></a>
</div> </div>
<div id="editor_container">
<div id="editor"> <div id="editor">
<p>So, I'm there, wondering about myself and my future - such a luxury by the way - when suddenly, someone approaches. mid-40s i'd say, elegant cold women, the kind you've learned not to talk to, to eventually avoid feeling repressed, or bad for yourself, or both.</p> <p>So, I'm there, wondering about myself and my future - such a luxury by the way - when suddenly, someone approaches. mid-40s i'd say, elegant cold women, the kind you've learned not to talk to, to eventually avoid feeling repressed, or bad for yourself, or both.</p>
<p>Anyhow, it would seem that in this particular situation, the choice wasn't given to me to decide whether or not to talk to that precise women. She seats down next to me and engage a conversation. 'How is it you're here today?' I'm already regretting not having gone away when i still had the chance.</p> <p>Anyhow, it would seem that in this particular situation, the choice wasn't given to me to decide whether or not to talk to that precise women. She seats down next to me and engage a conversation. 'How is it you're here today?' I'm already regretting not having gone away when i still had the chance.</p>
@@ -16,6 +17,7 @@
<p>In-extremist, I manage to babble some excuses about a rigorous lunch break time and leave the premises.</p> <p>In-extremist, I manage to babble some excuses about a rigorous lunch break time and leave the premises.</p>
</div> </div>
</div> </div>
</div>
<script type="text/javascript"> <script type="text/javascript">
oMyThoughts.pageInit = function(asHash, bFirstPage) oMyThoughts.pageInit = function(asHash, bFirstPage)
{ {
@@ -37,10 +39,17 @@
} }
}); });
quill.on('text-change', function(delta, oldDelta, source) { oQuill.on('text-change', function(delta, oldDelta, source) {
if(source == 'user') if(source == 'user')
{ {
var range = oQuill.getSelection();
if(range)
{
var oBound = 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:1px;height:10px;position:absolute;top:0px;left:0px;'}));
$('#editor').append($('<div>', {style:'background:red;width:1px;height:10px;position:absolute;top:'+($('#editor').height() - 10)+'px;left:'+($('#editor').width() - 1)+'px;'}));
}
} }
}); });

42
style/_logon.scss Normal file
View File

@@ -0,0 +1,42 @@
/* Log on */
#logon {
width: 496px;
height: 225px;
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin: auto;
background: transparent url('../images/bubble_inverted.png') 0 0 no-repeat;
}
#logon, #logon input {
font-size:30px;
border:none;
background-color:transparent;
}
#logon .credentials {
margin:45px 0 0 0 ;
}
#logon .credentials input {
width: 305px;
padding:0 60px;
text-align: center;
}
#logon input.connection {
position:absolute;
left:374px;
top:140px;
cursor:pointer;
}
#logon .register {
margin-top:60px;
text-align: center;
}

88
style/_write.scss
View File

@@ -1,6 +1,94 @@
#write { #write {
height:100%;
#editor_container {
padding:1em;
height: calc(100% - 4em);
overflow: hidden;
.ql-container { .ql-container {
font-family: 'Indie Flower', cursive; font-family: 'Indie Flower', cursive;
font-size: 16px; font-size: 16px;
padding:0;
overflow: hidden;
.ql-editor {
padding:0;
height:auto;
} }
} }
}
}
/* Write - Editor */
#write #editor div {
margin:0;
}
#write #editor p {
text-indent: 1.5em;
margin:1em 0 0 0;
padding:0;
text-align: justify;
}
#write .jqte_editor p:FIRST-CHILD, #write .jqte_toolbar {
margin-top:0.5em;
}
/* Write - Toolbar */
#write #nav {
position:absolute;
bottom:0;
right:0;
left:0;
text-align: center;
}
#write .fa-prev, #write .page_nb, #write .fa-next {
color:#997E60;
font-size:1.5em;
margin:0 0 0.5em 0;
cursor:pointer;
}
#write .page_nb {
font-size: 1em;
vertical-align:0.25em;
cursor: default;
padding-left:0.5em;
padding-right:0.5em;
}
#write .fa-prev:hover, #write .fa-next:hover {
color:#584127;
}
#write .fa-prev.disabled, #write .fa-next.disabled,
#write .fa-prev.disabled:hover, #write .fa-next.disabled:hover {
color:#EDE0D0;
}
/* Write - Placeholder */
#write .jqte_placeholder_text {
top:1em;
left:0;
text-indent: 1.5em;
}
#write .jqte_focused .jqte_placeholder_text {
display:none;
}
/* Write - Feedback */
#write_feedback {
position:absolute;
top: -1.5em;
right:0.5em;
}

2
style/mythoughts.css
View File

File diff suppressed because one or more lines are too long

4
style/mythoughts.css.map
View File

File diff suppressed because one or more lines are too long

122
style/mythoughts.scss
View File

@@ -18,8 +18,10 @@ red lines : #EC3B45
/* Pages */ /* Pages */
@import 'logon';
@import 'write'; @import 'write';
/* General */ /* General */
body { body {
@@ -230,126 +232,6 @@ a.calendar_direction {
border-radius: 0.5em; border-radius: 0.5em;
} }
/* Log on */
#logon {
width: 496px;
height: 225px;
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin: auto;
background: transparent url('../images/bubble_inverted.png') 0 0 no-repeat;
}
#logon, #logon input {
font-size:30px;
border:none;
background-color:transparent;
}
#logon .credentials {
margin:45px 0 0 0 ;
}
#logon .credentials input {
width: 305px;
padding:0 60px;
text-align: center;
}
#logon input.connection {
position:absolute;
left:374px;
top:140px;
cursor:pointer;
}
#logon .register {
margin-top:60px;
text-align: center;
}
/* Write */
/* Write - Container */
#write {
height:100%;
}
/* Write - Editor */
#write #editor div {
margin:0;
}
#write #editor p {
text-indent: 1.5em;
margin:1em 0 0 0;
padding:0;
text-align: justify;
}
#write .jqte_editor p:FIRST-CHILD, #write .jqte_toolbar {
margin-top:0.5em;
}
/* Write - Toolbar */
#write #nav {
position:absolute;
bottom:0;
right:0;
left:0;
text-align: center;
}
#write .fa-prev, #write .page_nb, #write .fa-next {
color:#997E60;
font-size:1.5em;
margin:0 0 0.5em 0;
cursor:pointer;
}
#write .page_nb {
font-size: 1em;
vertical-align:0.25em;
cursor: default;
padding-left:0.5em;
padding-right:0.5em;
}
#write .fa-prev:hover, #write .fa-next:hover {
color:#584127;
}
#write .fa-prev.disabled, #write .fa-next.disabled,
#write .fa-prev.disabled:hover, #write .fa-next.disabled:hover {
color:#EDE0D0;
}
/* Write - Placeholder */
#write .jqte_placeholder_text {
top:1em;
left:0;
text-indent: 1.5em;
}
#write .jqte_focused .jqte_placeholder_text {
display:none;
}
/* Write - Feedback */
#write_feedback {
position:absolute;
top: -1.5em;
right:0.5em;
}
/* Read */ /* Read */
div.read { div.read {