Korbs/Squire
0
Fork 0
mirror of https://github.com/fastmail/Squire.git synced 2025-01-03 05:00:13 -05:00
Code Issues Activity

Working: Images

Browse source
This commit is contained in:
Matthew Borden 2014-07-10 08:27:59 +10:00
parent 5c49fcf543
commit fa6868e4af
4 changed files with 106 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
build/Squire-UI.css
View file

@ -46,7 +46,39 @@ iframe {
transform:rotateY(180deg)
}
.btn {
background: #516066;
display: block;
position: relative;
padding: 10px 15px;
margin-top: 10px;
text-transform: uppercase;
font-size: 11px;
font-weight: 500;
color: #fff;
text-align: center;
overflow: hidden;
letter-spacing: 1px;
border-radius: 4px;
}
input[type=text] {
background-color: #fff;
vertical-align: middle;
max-width: 100%;
border: 1px solid #a8afb2;
border-color: #a8afb2 #d4d7d9 #d4d7d9;
color: #516066;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: border linear 150ms;
-moz-transition: border linear 150ms;
-o-transition: border linear 150ms;
transition: border linear 150ms;
font-size: 14px;
padding: 5px;
width: 100%;
}
.menu .group .item:hover, .menu .item:first-child:hover {
border-left: 3px #55ACEE solid;
@ -74,6 +106,7 @@ iframe {
float: right;
top:0;
right:0;
margin-bottom: 5px;
}
.drop-element, .drop-element:after, .drop-element:before, .drop-element *, .drop-element *:after, .drop-element *:before {

33
ui/Squire-UI.css
View file

@ -46,7 +46,39 @@ iframe {
transform:rotateY(180deg)
}
.btn {
background: #516066;
display: block;
position: relative;
padding: 10px 15px;
margin-top: 10px;
text-transform: uppercase;
font-size: 11px;
font-weight: 500;
color: #fff;
text-align: center;
overflow: hidden;
letter-spacing: 1px;
border-radius: 4px;
}
input[type=text] {
background-color: #fff;
vertical-align: middle;
max-width: 100%;
border: 1px solid #a8afb2;
border-color: #a8afb2 #d4d7d9 #d4d7d9;
color: #516066;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: border linear 150ms;
-moz-transition: border linear 150ms;
-o-transition: border linear 150ms;
transition: border linear 150ms;
font-size: 14px;
padding: 5px;
width: 100%;
}
.menu .group .item:hover, .menu .item:first-child:hover {
border-left: 3px #55ACEE solid;
@ -74,6 +106,7 @@ iframe {
float: right;
top:0;
right:0;
margin-bottom: 5px;
}

12
ui/Squire-UI.html
View file

@ -28,4 +28,16 @@
<br>
Font: <input type="text">
</div>
<div id="drop-link">
<label>Insert Link</label>
<i class="fa fa-chevron-up quit"></i>
<input placeholder="Link URL" type="text" id="url" />
<div class="btn submitLink">Insert</div>
</div>
<div id="drop-image">
<label>Insert Image</label>
<i class="fa fa-chevron-up quit"></i>
<input placeholder="Image URL" type="text" id="imageUrl" />
<div class="btn sumbitImageURL">Insert</div>
</div>
</div>

32
ui/Squire-UI.js
View file

@ -37,19 +37,36 @@ $(document).ready(function() {
element.drop = new Drop({
target: element,
content: content,
position: 'bottom left',
position: 'bottom center',
openOn: 'click'
});
element.drop.iframe = iframe;
element.drop.on('open', function () {
$('.quit').click(function () {
$(this).parent().parent().removeClass('drop-open');
});
_iframe = this.iframe;
$('.sumbitImageURL').click(function () {
editor = _iframe.contentWindow.editor;
url = $(this).parent().children('#imageUrl').first()[0];
editor.insertImage(url.value);
$(this).parent().parent().removeClass('drop-open');
});
$('.sumbitLink').click(function () {
editor = _iframe.contentWindow.editor;
url = $(this).parent().children('#url').first()[0];
editor.makeLink(url.value);
$(this).parent().parent().removeClass('drop-open');
});
});
}
createDrop($('#makeLink').first()[0], "Hello World");
createDrop($('#insertImage').first()[0], "Hello World");
createDrop($('#makeLink').first()[0], $('#drop-link').first().html());
createDrop($('#insertImage').first()[0], $('#drop-image').first().html());
createDrop($('#selectFont').first()[0], $('#drop-font').first().html());
@ -88,7 +105,7 @@ $(document).ready(function() {
if (test.testOrderedList) editor.removeList();
if (test.testQuote) editor.decreaseQuoteLevel();
} else if (test.isNotValue('makeLink') | test.isNotValue('insertImage') | test.isNotValue('selectFont')) {
// do nothing
// do nothing these are dropdowns.
} else {
editor[$(this).data('action')]();
}
@ -100,6 +117,13 @@ $(document).ready(function() {
iframe.contentWindow.editor.setHTML(
"<div><b>Bold</b><br></div><div><i>Italics</i><br></div><div><u>Underline</u><br></div><ol><li><div>List<br></div></li><li><div>List<br></div></li><li><div>List<br></div></li></ol><blockquote>Quote<br></blockquote><div><br></div><div>Heading 1<br></div><div>Heading 2<br></div><div>Image<br></div><div>Link</div><div><br></div>"
);
iframe.addEventListener('load', function() {
iframe.contentWindow.editor = new Squire(iframe.contentWindow.document);
iframe.contentWindow.editor.setHTML(
"<div><b>Bold</b><br></div><div><i>Italics</i><br></div><div><u>Underline</u><br></div><ol><li><div>List<br></div></li><li><div>List<br></div></li><li><div>List<br></div></li></ol><blockquote>Quote<br></blockquote><div><br></div><div>Heading 1<br></div><div>Heading 2<br></div><div>Image<br></div><div>Link</div><div><br></div>"
);
});
return iframe.contentWindow.editor;
};
});