mirror of
https://github.com/fastmail/Squire.git
synced 2025-03-13 08:01:37 -05:00
Editor now loads from one JS and One CSS file.
This commit is contained in:
Matthew Borden
parent
aa1c78fab3
commit
1b5bf96295
8 changed files with 10513 additions and 288 deletions
|
|
@ -7,10 +7,11 @@
|
|||
<!--[if IE 8]>
|
||||
<script type="text/javascript" src="build/ie8.js"></script>
|
||||
<![endif]-->
|
||||
<link href="build/Squire-UI.css" rel="stylesheet" type="text/css" />
|
||||
<script src="build/Squire-UI.js" type="text/javascript"></script>
|
||||
<script>
|
||||
window.addEventListener('load', function () {
|
||||
var editor = new SquireUI({replace: 'textarea#foo'});
|
||||
$(document).ready(function () {
|
||||
UI = new SquireUI({replace: 'textarea#foo'});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
|
|
|
|||
13
Makefile
13
Makefile
|
|
@ -5,26 +5,25 @@ all: build ui
|
|||
clean:
|
||||
rm -rf build
|
||||
|
||||
ui: build/Squire-UI.html build/Squire-UI.css build/Squire-UI.js build/assets
|
||||
ui: build/Squire-UI.html build/Squire-UI.css build/Squire-UI.js fonts
|
||||
|
||||
build: build/ie8.js build/squire.js build/document.html
|
||||
|
||||
fonts:
|
||||
cp -r ui/assets/font-awesome build
|
||||
|
||||
build/Squire-UI.html: ui/Squire-UI.html
|
||||
mkdir -p $(@D)
|
||||
cp $^ $@
|
||||
|
||||
build/Squire-UI.css: ui/Squire-UI.css
|
||||
build/Squire-UI.css: ui/Squire-UI.css ui/assets/drop/drop-theme-arrows.css ui/assets/font-awesome/font-awesome.min.css
|
||||
mkdir -p $(@D)
|
||||
cat $^ >$@
|
||||
|
||||
build/Squire-UI.js: ui/Squire-UI.js
|
||||
build/Squire-UI.js: build/squire-raw.js ui/assets/jQuery/jQuery.js ui/Squire-UI.js ui/assets/drop/drop.min.js
|
||||
mkdir -p $(@D)
|
||||
cat $^ >$@
|
||||
|
||||
build/assets: ui/assets
|
||||
mkdir -p $(@D)
|
||||
cp -r $^ $@
|
||||
|
||||
build/ie8.js: source/ie8types.js source/ie8dom.js source/ie8range.js
|
||||
mkdir -p $(@D)
|
||||
uglifyjs $^ -c -m -o $@
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -8,7 +8,19 @@ body {
|
|||
}
|
||||
|
||||
iframe {
|
||||
width:100%;
|
||||
width: 100%;
|
||||
border: 1px #919191 solid;
|
||||
border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
padding: 7px 8px;
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
background-repeat: no-repeat;
|
||||
background-position: right center;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 3px;
|
||||
outline: none;
|
||||
box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
|
||||
}
|
||||
|
||||
.menu .item {
|
||||
|
|
@ -34,14 +46,7 @@ iframe {
|
|||
transform:rotateY(180deg)
|
||||
}
|
||||
|
||||
.menu {
|
||||
-webkit-touch-callout:none;
|
||||
-webkit-user-select:none;
|
||||
-khtml-user-select:none;
|
||||
-moz-user-select:none;
|
||||
-ms-user-select:none;
|
||||
user-select:none
|
||||
}
|
||||
|
||||
|
||||
.menu .group .item:hover, .menu .item:first-child:hover {
|
||||
border-left: 3px #55ACEE solid;
|
||||
|
|
|
|||
|
|
@ -1,23 +1,23 @@
|
|||
<div class="menu" contenteditable="false">
|
||||
<div class="group">
|
||||
<div class="item"><i data-action="bold" data-value="" class="fa fa-bold"></i></div>
|
||||
<div class="item"><i data-action="italic" data-value="" class="fa fa-italic"></i></div>
|
||||
<div class="item"><i data-action="underline" data-value="" class="fa fa-underline"></i></div>
|
||||
<div id="font" class="item">
|
||||
<i data-action="" data-value="" class="fa fa-font"></i>
|
||||
<div data-action="bold" data-value="" class="item"><i class="fa fa-bold"></i></div>
|
||||
<div data-action="italic" data-value="" class="item"><i class="fa fa-italic"></i></div>
|
||||
<div data-action="underline" data-value="" class="item"><i class="fa fa-underline"></i></div>
|
||||
<div data-action="" data-value="" id="font" class="item">
|
||||
<i class="fa fa-font"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group">
|
||||
<div class="item"><i class="fa fa-link"></i></div>
|
||||
<div data-action="link" data-value=""class="item"><i class="fa fa-link"></i></div>
|
||||
<div data-action="quote" data-value="" class="item"><i class="fa fa-quote-right"></i></div>
|
||||
<div data-action="list" data-value="" class="item"><i class="fa fa-list"></i></div>
|
||||
<div class="item">
|
||||
<div data-action="image" data-value="" class="item">
|
||||
<i class="fa fa-picture-o"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group">
|
||||
<div class="item"><i data-action="undo" data-value="" class="fa fa-undo"></i></div>
|
||||
<div class="item"><i data-action="redo" data-value="" class="fa fa-undo flip"></i></div>
|
||||
<div data-action="undo" data-value="" class="item"><i class="fa fa-undo"></i></div>
|
||||
<div data-action="redo" data-value="" class="item"><i class="fa fa-undo flip"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="templates hidden">
|
||||
|
|
|
|||
280
ui/Squire-UI.js
280
ui/Squire-UI.js
|
|
@ -1,255 +1,43 @@
|
|||
if (typeof buildPath == "undefined") {
|
||||
buildPath = 'build/';
|
||||
}
|
||||
|
||||
LazyLoad = (function (doc) {
|
||||
var env,
|
||||
function buildPathConCat(value) {
|
||||
return buildPath + value;
|
||||
}
|
||||
|
||||
head,
|
||||
pending = {},
|
||||
pollCount = 0,
|
||||
queue = {css: [], js: []},
|
||||
styleSheets = doc.styleSheets;
|
||||
function createNode(name, attrs) {
|
||||
var node = doc.createElement(name), attr;
|
||||
|
||||
for (attr in attrs) {
|
||||
if (attrs.hasOwnProperty(attr)) {
|
||||
node.setAttribute(attr, attrs[attr]);
|
||||
}
|
||||
}
|
||||
$(document).ready(function () {
|
||||
SquireUI = function(options) {
|
||||
// Create instance of iFrame
|
||||
var container, editor;
|
||||
|
||||
if (options.replace) {
|
||||
container = $(options.replace).parent();
|
||||
$(options.replace).remove();
|
||||
} else if (options.div) {
|
||||
container = $(options.div);
|
||||
} else {
|
||||
throw new Error(
|
||||
"No element was defined for the editor to inject to."
|
||||
);
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
var iframe = document.createElement('iframe');
|
||||
var div = document.createElement('div');
|
||||
|
||||
function finish(type) {
|
||||
var p = pending[type],
|
||||
callback,
|
||||
urls;
|
||||
$(div).load(buildPath + 'Squire-UI.html', function () {
|
||||
$('.item').click(function () {
|
||||
console.log($(this).parent().parent().parent());
|
||||
});
|
||||
});
|
||||
|
||||
if (p) {
|
||||
callback = p.callback;
|
||||
urls = p.urls;
|
||||
|
||||
urls.shift();
|
||||
pollCount = 0;
|
||||
|
||||
// If this is the last of the pending URLs, execute the callback and
|
||||
// start the next request in the queue (if any).
|
||||
if (!urls.length) {
|
||||
callback && callback.call(p.context, p.obj);
|
||||
pending[type] = null;
|
||||
queue[type].length && load(type);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getEnv() {
|
||||
var ua = navigator.userAgent;
|
||||
|
||||
env = {
|
||||
async: doc.createElement('script').async === true
|
||||
$(container).append(div);
|
||||
$(container).append(iframe);
|
||||
editor = new Squire(iframe.contentWindow.document);
|
||||
return editor;
|
||||
};
|
||||
|
||||
(env.webkit = /AppleWebKit\//.test(ua))
|
||||
|| (env.ie = /MSIE|Trident/.test(ua))
|
||||
|| (env.opera = /Opera/.test(ua))
|
||||
|| (env.gecko = /Gecko\//.test(ua))
|
||||
|| (env.unknown = true);
|
||||
}
|
||||
|
||||
function load(type, urls, callback, obj, context) {
|
||||
var _finish = function () { finish(type); },
|
||||
isCSS = type === 'css',
|
||||
nodes = [],
|
||||
i, len, node, p, pendingUrls, url;
|
||||
|
||||
env || getEnv();
|
||||
|
||||
if (urls) {
|
||||
urls = typeof urls === 'string' ? [urls] : urls.concat();
|
||||
|
||||
if (isCSS || env.async || env.gecko || env.opera) {
|
||||
// Load in parallel.
|
||||
queue[type].push({
|
||||
urls : urls,
|
||||
callback: callback,
|
||||
obj : obj,
|
||||
context : context
|
||||
});
|
||||
} else {
|
||||
// Load sequentially.
|
||||
for (i = 0, len = urls.length; i < len; ++i) {
|
||||
queue[type].push({
|
||||
urls : [urls[i]],
|
||||
callback: i === len - 1 ? callback : null, // callback is only added to the last URL
|
||||
obj : obj,
|
||||
context : context
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// If a previous load request of this type is currently in progress, we'll
|
||||
// wait our turn. Otherwise, grab the next item in the queue.
|
||||
if (pending[type] || !(p = pending[type] = queue[type].shift())) {
|
||||
return;
|
||||
}
|
||||
|
||||
head || (head = doc.head || doc.getElementsByTagName('head')[0]);
|
||||
pendingUrls = p.urls.concat();
|
||||
|
||||
for (i = 0, len = pendingUrls.length; i < len; ++i) {
|
||||
url = pendingUrls[i];
|
||||
|
||||
if (isCSS) {
|
||||
node = env.gecko ? createNode('style') : createNode('link', {
|
||||
href: url,
|
||||
rel : 'stylesheet'
|
||||
});
|
||||
} else {
|
||||
node = createNode('script', {src: url});
|
||||
node.async = false;
|
||||
}
|
||||
|
||||
node.className = 'lazyload';
|
||||
node.setAttribute('charset', 'utf-8');
|
||||
|
||||
if (env.ie && !isCSS && 'onreadystatechange' in node && !('draggable' in node)) {
|
||||
node.onreadystatechange = function () {
|
||||
if (/loaded|complete/.test(node.readyState)) {
|
||||
node.onreadystatechange = null;
|
||||
_finish();
|
||||
}
|
||||
};
|
||||
} else if (isCSS && (env.gecko || env.webkit)) {
|
||||
if (env.webkit) {
|
||||
p.urls[i] = node.href; // resolve relative URLs (or polling won't work)
|
||||
pollWebKit();
|
||||
} else {
|
||||
node.innerHTML = '@import "' + url + '";';
|
||||
pollGecko(node);
|
||||
}
|
||||
} else {
|
||||
node.onload = node.onerror = _finish;
|
||||
}
|
||||
|
||||
nodes.push(node);
|
||||
}
|
||||
|
||||
for (i = 0, len = nodes.length; i < len; ++i) {
|
||||
head.appendChild(nodes[i]);
|
||||
}
|
||||
}
|
||||
|
||||
function pollGecko(node) {
|
||||
var hasRules;
|
||||
|
||||
try {
|
||||
// We don't really need to store this value or ever refer to it again, but
|
||||
// if we don't store it, Closure Compiler assumes the code is useless and
|
||||
// removes it.
|
||||
hasRules = !!node.sheet.cssRules;
|
||||
} catch (ex) {
|
||||
// An exception means the stylesheet is still loading.
|
||||
pollCount += 1;
|
||||
|
||||
if (pollCount < 200) {
|
||||
setTimeout(function () { pollGecko(node); }, 50);
|
||||
} else {
|
||||
// We've been polling for 10 seconds and nothing's happened. Stop
|
||||
// polling and finish the pending requests to avoid blocking further
|
||||
// requests.
|
||||
hasRules && finish('css');
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// If we get here, the stylesheet has loaded.
|
||||
finish('css');
|
||||
}
|
||||
|
||||
function pollWebKit() {
|
||||
var css = pending.css, i;
|
||||
|
||||
if (css) {
|
||||
i = styleSheets.length;
|
||||
|
||||
// Look for a stylesheet matching the pending URL.
|
||||
while (--i >= 0) {
|
||||
if (styleSheets[i].href === css.urls[0]) {
|
||||
finish('css');
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
pollCount += 1;
|
||||
|
||||
if (css) {
|
||||
if (pollCount < 200) {
|
||||
setTimeout(pollWebKit, 50);
|
||||
} else {
|
||||
// We've been polling for 10 seconds and nothing's happened, which may
|
||||
// indicate that the stylesheet has been removed from the document
|
||||
// before it had a chance to load. Stop polling and finish the pending
|
||||
// request to prevent blocking further requests.
|
||||
finish('css');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
css: function (urls, callback, obj, context) {
|
||||
load('css', urls, callback, obj, context);
|
||||
},
|
||||
js: function (urls, callback, obj, context) {
|
||||
load('js', urls, callback, obj, context);
|
||||
}
|
||||
|
||||
};
|
||||
})(this.document);
|
||||
|
||||
|
||||
(function() {
|
||||
if (typeof buildPath == "undefined") { buildPath = 'build/'; }
|
||||
|
||||
LazyLoad.js(['squire-raw.js','assets/jQuery/jQuery.js','assets/drop/drop.min.js'].map(function (value) {
|
||||
return buildPath + value;
|
||||
}));
|
||||
|
||||
LazyLoad.css(['Squire-UI.css','assets/font-awesome/font-awesome.min.css', 'assets/drop/drop-theme-hubspot-popovers.css'].map(function (value) {
|
||||
return buildPath + value;
|
||||
}));
|
||||
|
||||
SquireUI = function(options) {
|
||||
// Create instance of iFrame
|
||||
var container, editor;
|
||||
|
||||
if (options.replace) {
|
||||
container = $(options.replace).parent();
|
||||
$(options.replace).remove();
|
||||
} else if (options.div) {
|
||||
container = $(options.div);
|
||||
} else {
|
||||
throw new Error(
|
||||
"No element was defined for the editor to inject to.");
|
||||
}
|
||||
|
||||
var iframe = document.createElement('iframe');
|
||||
var div = document.createElement('div');
|
||||
$(div).load(buildPath + 'Squire-UI.html');
|
||||
|
||||
$(container).append(div);
|
||||
$(container).append(iframe);
|
||||
|
||||
editor = new Squire ($(container).children('iframe').first()[0].contentWindow.document);
|
||||
|
||||
$('i').click(function () {
|
||||
var instance = $(this).parent().children('iframe').first();
|
||||
console.log(instance);
|
||||
});
|
||||
|
||||
return editor;
|
||||
};
|
||||
|
||||
})();
|
||||
|
||||
|
||||
});
|
||||
2
ui/assets/font-awesome/font-awesome.min.css
vendored
2
ui/assets/font-awesome/font-awesome.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Add table
Reference in a new issue