Korbs/Squire
0
Fork 0
mirror of https://github.com/fastmail/Squire.git synced 2025-01-18 12:42:37 -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> <script type="text/javascript" src="build/ie8.js"></script>
<![endif]--> <![endif]-->
<script src="build/Squire-UI.js" type="text/javascript"></script> <script src="build/Squire-UI.js" type="text/javascript"></script>
<script>
window.addEventListener('load', function () {
var editor = new SquireUI({div: '#editor'});
});
</script>
</head> </head>
<body> <body>
<h1>HTML Editor Test</h1> <h1>HTML Editor Test</h1>
<textarea id="foo"></textarea> <textarea id="foo"></textarea>
<div id="editor"></div>
</body> </body>
</html> </html>

2
Makefile
View file

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

1
build/Squire-UI.css
View file

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

3
build/Squire-UI.html
View file

@ -22,10 +22,9 @@
</div> </div>
<div class="templates hidden"> <div class="templates hidden">
<div class="drop-font"> <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"> Text Size: <input type="number" min="12" max="72" step="6" value="12" name="font-size">
<br> <br>
Font: <input type="text"> Font: <input type="text">
</div> </div>
</div> </div>

41
build/Squire-UI.js
View file

@ -210,22 +210,39 @@ LazyLoad = (function (doc) {
(function() { (function() {
LazyLoad.js(['build/squire.js','build/assets/jQuery/jQuery.js','build/assets/drop/drop.min.js']); console.log(typeof buildPath);
LazyLoad.css(['build/Squire-UI.css','build/assets/font-awesome/font-awesome.min.css', 'build/assets/drop/drop-theme-hubspot-popovers.css']); 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) { SquireUI = function(options) {
var originElement = $(options.replace); // Create instance of iFrame
var container = originElement.parent(); var container;
if (options.replace) {
originElement.remove(); container = $(options.replace).parent();
var editorContainer = $('<iframe />').appendTo(container); $(options.replace).remove();
var editorDocument = editorContainer[0].contentWindow.document; } 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; background: white;
box-shadow: 0 1px 0 rgba(255,255,255,0),0 0 10px rgba(0,0,0,0.1); box-shadow: 0 1px 0 rgba(255,255,255,0),0 0 10px rgba(0,0,0,0.1);
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
border-radius: 4px;
margin-top: 5px; margin-top: 5px;
} }

3
ui/Squire-UI.html
View file

@ -22,10 +22,9 @@
</div> </div>
<div class="templates hidden"> <div class="templates hidden">
<div class="drop-font"> <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"> Text Size: <input type="number" min="12" max="72" step="6" value="12" name="font-size">
<br> <br>
Font: <input type="text"> Font: <input type="text">
</div> </div>
</div> </div>

41
ui/Squire-UI.js
View file

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