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

Update: Editor & UI now load into selector.

Browse source 
Need to combat the problem of multiple instances.
This commit is contained in:
Matthew Borden 2014-07-08 09:44:09 +10:00
parent e0fe00bea6
commit e0043013b1
9 changed files with 85 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
Demo.html
View file

@ -8,9 +8,15 @@
<script type="text/javascript" src="build/ie8.js"></script>
<![endif]-->
<script src="build/Squire-UI.js" type="text/javascript"></script>
<script>
window.addEventListener('load', function () {
var editor = new SquireUI({div: '#editor'});
});
</script>
</head>
<body>
<h1>HTML Editor Test</h1>
<textarea id="foo"></textarea>
<div id="editor"></div>
</body>
</html>
</html>

2
Makefile
View file

@ -1,6 +1,6 @@
.PHONY: all build clean
all: build
all: build ui
clean:
rm -rf build

1
build/Squire-UI.css
View file

@ -45,6 +45,7 @@
background: white;
box-shadow: 0 1px 0 rgba(255,255,255,0),0 0 10px rgba(0,0,0,0.1);
-webkit-border-radius: 4px;
border-radius: 4px;
margin-top: 5px;
}

3
build/Squire-UI.html
View file

@ -22,10 +22,9 @@
</div>
<div class="templates hidden">
<div class="drop-font">
<i class="fa fa-chevron-up quit" onclick="this.parentNode.parentNode.removeChild(this.parentNode)"></i>
<i class="fa fa-chevron-up quit"></i>
Text Size: <input type="number" min="12" max="72" step="6" value="12" name="font-size">
<br>
Font: <input type="text">
</div>
</div>

41
build/Squire-UI.js
View file

@ -210,22 +210,39 @@ LazyLoad = (function (doc) {
(function() {
LazyLoad.js(['build/squire.js','build/assets/jQuery/jQuery.js','build/assets/drop/drop.min.js']);
LazyLoad.css(['build/Squire-UI.css','build/assets/font-awesome/font-awesome.min.css', 'build/assets/drop/drop-theme-hubspot-popovers.css']);
console.log(typeof buildPath);
if (typeof buildPath == "undefined") { buildPath = 'build/'; }
LazyLoad.js(['squire.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) {
var originElement = $(options.replace);
var container = originElement.parent();
originElement.remove();
var editorContainer = $('<iframe />').appendTo(container);
var editorDocument = editorContainer[0].contentWindow.document;
SquireUI = function(options) {
// Create instance of iFrame
var container;
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 editor = new Squire(editorDocument);
$('<div />').load(buildPath + 'Squire-UI.html').appendTo(container);
return editor;
};
var editorContainer = $('<iframe />').appendTo(container);
var editorDocument = editorContainer[0].contentWindow.document;
var editor = new Squire(editorDocument);
return editor;
};
})();

15
serve.js Normal file
View file

@ -0,0 +1,15 @@
var static = require('node-static');
var sys = require('sys');
var exec = require('child_process').exec;
var file = new static.Server('./');
function puts(error, stdout, stderr) { sys.puts(stdout) };
require('http').createServer(function (request, response) {
exec("make -f Makefile build", puts);
exec("make -f Makefile ui", puts);
request.addListener('end', function () {
file.serve(request, response);
}).resume();
}).listen(8080);

1
ui/Squire-UI.css
View file

@ -45,6 +45,7 @@
background: white;
box-shadow: 0 1px 0 rgba(255,255,255,0),0 0 10px rgba(0,0,0,0.1);
-webkit-border-radius: 4px;
border-radius: 4px;
margin-top: 5px;
}

3
ui/Squire-UI.html
View file

@ -22,10 +22,9 @@
</div>
<div class="templates hidden">
<div class="drop-font">
<i class="fa fa-chevron-up quit" onclick="this.parentNode.parentNode.removeChild(this.parentNode)"></i>
<i class="fa fa-chevron-up quit"></i>
Text Size: <input type="number" min="12" max="72" step="6" value="12" name="font-size">
<br>
Font: <input type="text">
</div>
</div>

41
ui/Squire-UI.js
View file

@ -210,22 +210,39 @@ LazyLoad = (function (doc) {
(function() {
LazyLoad.js(['build/squire.js','build/assets/jQuery/jQuery.js','build/assets/drop/drop.min.js']);
LazyLoad.css(['build/Squire-UI.css','build/assets/font-awesome/font-awesome.min.css', 'build/assets/drop/drop-theme-hubspot-popovers.css']);
console.log(typeof buildPath);
if (typeof buildPath == "undefined") { buildPath = 'build/'; }
LazyLoad.js(['squire.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) {
var originElement = $(options.replace);
var container = originElement.parent();
originElement.remove();
var editorContainer = $('<iframe />').appendTo(container);
var editorDocument = editorContainer[0].contentWindow.document;
SquireUI = function(options) {
// Create instance of iFrame
var container;
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 editor = new Squire(editorDocument);
$('<div />').load(buildPath + 'Squire-UI.html').appendTo(container);
return editor;
};
var editorContainer = $('<iframe />').appendTo(container);
var editorDocument = editorContainer[0].contentWindow.document;
var editor = new Squire(editorDocument);
return editor;
};
})();