Permalink
Browse files

Merge branch 'editor-with-toolbar-widget' into gh-pages

Conflicts:
	js/fc/ui/editor-toolbar.js
	js/friendlycode.js
  • Loading branch information...
2 parents 330ca51 + 2bed478 commit c55b22a99751467048ede7e1786d8194d609924b @toolness committed Aug 29, 2012
View
@@ -89,7 +89,7 @@
z-index: 2;
top: 0;
- height: 40px; /* corresponds with .friendlycode-editor.top */
+ height: 40px; /* corresponds with .friendlycode-panes.top */
width: 100%;
margin: 0;
padding: 0;
@@ -458,7 +458,7 @@
/* ------ CONTENT AREA ------ */
-.friendlycode-editor {
+.friendlycode-panes {
position: absolute;
top: 30px; /* corresponds to .friendlycode-toolbar.height */
left: 0;
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <base target="_blank">
+
+ <title>Editor Only</title>
+ <link rel="stylesheet" href="../css/friendlycode.css">
+ </head>
+ <body style="margin: 0">
+ <div id="editor" class="friendlycode-loading"></div>
+
+ <script src="../js/require-config.js"></script>
+ <script src="../js/require.min.js"></script>
+ <script>
+ require([
+ "jquery",
+ "fc/ui/editor"
+ ], function($, Editor) {
+ var editor = Editor({
+ container: $("#editor"),
+ value: "<p>Just an editor widget, no publishing.</p>"
+ });
+ editor.panes.codeMirror.focus();
+ });
+ </script>
+ </body>
+</html>
@@ -15,9 +15,10 @@ define(function(require) {
require('slowparse-errors');
require("codemirror/html");
- return function Editor(options) {
+ return function EditorPanes(options) {
var self = {},
div = options.container,
+ initialValue = options.value || "",
sourceCode = $('<div class="source-code"></div>').appendTo(div),
previewArea = $('<div class="preview-holder"></div>').appendTo(div),
helpArea = $('<div class="help hidden"></div>').appendTo(div),
@@ -29,6 +30,7 @@ define(function(require) {
tabMode: "indent",
lineWrapping: true,
lineNumbers: true,
+ value: initialValue,
parse: function(html) {
return Slowparse.HTML(document, html, [TreeInspectors.forbidJS]);
}
@@ -30,26 +30,26 @@ define(function(require) {
return function Toolbar(options) {
var self = {},
div = options.container,
- editor = options.editor,
- startPublish = options.startPublish,
+ panes = options.panes,
navOptions = $(NavOptionsTemplate()).appendTo(div),
publishButton = navOptions.find(".publish-button"),
- undoNavItem = navOptions.find(".undo-nav-item");
+ undoNavItem = navOptions.find(".undo-nav-item"),
+ startPublish;
var historyUI = HistoryUI({
- codeMirror: editor.codeMirror,
+ codeMirror: panes.codeMirror,
undo: undoNavItem,
redo: navOptions.find(".redo-nav-item")
});
var textUI = TextUI({
- codeMirror: editor.codeMirror,
+ codeMirror: panes.codeMirror,
navItem: navOptions.find(".text-nav-item")
});
var hintsUI = HintsUI({
navItem: navOptions.find(".hints-nav-item")
});
- editor.preview.on("refresh", function(event) {
+ panes.preview.on("refresh", function(event) {
var title = event.window.document.title;
if (title.length)
$(".preview-title", navOptions).text(title).show();
@@ -58,8 +58,8 @@ define(function(require) {
});
// If the editor has no content, disable the publish button.
- editor.codeMirror.on("change", function() {
- var codeLength = editor.codeMirror.getValue().trim().length;
+ panes.codeMirror.on("change", function() {
+ var codeLength = panes.codeMirror.getValue().trim().length;
publishButton.toggleClass("enabled", codeLength ? true : false);
});
publishButton.click(function(){
@@ -69,6 +69,10 @@ define(function(require) {
self.refresh = function() {
historyUI.refresh();
};
+ self.setStartPublish = function(func) {
+ startPublish = func;
+ publishButton.toggle(!!startPublish);
+ };
self.showDataRestoreHelp = function() {
// Display a non-modal message telling the user that their
// previous data has been restored, and that they can click 'undo'
@@ -88,6 +92,7 @@ define(function(require) {
setTimeout(function() { undoNavItem.tipsy("hide"); }, 6000);
};
+ self.setStartPublish(null);
return self;
};
});
View
@@ -0,0 +1,33 @@
+define([
+ "jquery",
+ "./editor-panes",
+ "./editor-toolbar"
+], function($, EditorPanes, EditorToolbar) {
+ return function Editor(options) {
+ var value = options.value,
+ container = options.container.empty()
+ .addClass("friendlycode-base"),
+ toolbarDiv = $('<div class="friendlycode-toolbar"></div>')
+ .appendTo(container),
+ panesDiv = $('<div class="friendlycode-panes"></div>')
+ .appendTo(container);
+
+ var panes = EditorPanes({
+ container: panesDiv,
+ value: value
+ });
+ var toolbar = EditorToolbar({
+ container: toolbarDiv,
+ panes: panes
+ });
+
+ container.removeClass("friendlycode-loading");
+ panes.codeMirror.refresh();
+
+ return {
+ container: container,
+ panes: panes,
+ toolbar: toolbar
+ };
+ };
+});
View
@@ -1,8 +1,7 @@
define(function(require) {
var $ = require("jquery"),
Preferences = require("fc/prefs"),
- TwoPanedEditor = require("fc/ui/two-paned-editor"),
- EditorToolbar = require("fc/ui/editor-toolbar"),
+ Editor = require("fc/ui/editor"),
Modals = require("fc/ui/modals"),
Parachute = require("fc/parachute"),
CurrentPageManager = require("fc/current-page-manager"),
@@ -19,56 +18,45 @@ define(function(require) {
remixURLTemplate = options.remixURLTemplate ||
location.protocol + "//" + location.host +
location.pathname + "#{{VIEW_URL}}",
- container = options.container.empty()
- .addClass("friendlycode-base friendlycode-loading"),
- toolbarDiv = $('<div class="friendlycode-toolbar"></div>')
- .appendTo(container),
- editorDiv = $('<div class="friendlycode-editor"></div>')
- .appendTo(container),
+ editor = Editor({container: options.container}),
ready = $.Deferred();
- var editor = TwoPanedEditor({
- container: editorDiv
- });
var modals = Modals({
container: $('<div class="friendlycode-base"></div>')
.appendTo(document.body)
});
var publisher = Publisher(publishURL);
var publishUI = PublishUI({
modals: modals,
- codeMirror: editor.codeMirror,
+ codeMirror: editor.panes.codeMirror,
publisher: publisher,
remixURLTemplate: remixURLTemplate
});
- var toolbar = EditorToolbar({
- container: toolbarDiv,
- editor: editor,
- startPublish: publishUI.start
- });
- var parachute = Parachute(window, editor.codeMirror);
+ var parachute = Parachute(window, editor.panes.codeMirror);
var pageManager = CurrentPageManager({
window: window,
currentPage: pageToLoad
});
function doneLoading() {
- container.removeClass("friendlycode-loading");
- editor.codeMirror.clearHistory();
- toolbar.refresh();
+ editor.container.removeClass("friendlycode-loading");
+ editor.panes.codeMirror.clearHistory();
+ editor.toolbar.refresh();
if (parachute.restore()) {
- toolbar.showDataRestoreHelp();
+ editor.toolbar.showDataRestoreHelp();
} else {
// Only save data on page unload if it's different from
// the URL we just (hopefully) loaded.
parachute.refresh();
}
- editor.codeMirror.reparse();
- editor.codeMirror.focus();
- editor.codeMirror.refresh();
+ editor.panes.codeMirror.reparse();
+ editor.panes.codeMirror.focus();
+ editor.panes.codeMirror.refresh();
ready.resolve();
}
+ editor.toolbar.setStartPublish(publishUI.start);
+ editor.container.addClass("friendlycode-loading");
publishUI.on("publish", function(info) {
// If the user clicks their back button, we don't want to show
// them the page they just published--we want to show them the
@@ -89,7 +77,7 @@ define(function(require) {
if (!pageManager.currentPage()) {
setTimeout(function() {
- editor.codeMirror.setValue(defaultContent);
+ editor.panes.codeMirror.setValue(defaultContent);
doneLoading();
}, 0);
} else
@@ -99,14 +87,14 @@ define(function(require) {
text: 'Sorry, an error occurred while trying to get the page.'
});
} else {
- editor.codeMirror.setValue(data);
+ editor.panes.codeMirror.setValue(data);
publishUI.setCurrentURL(url);
doneLoading();
}
});
return {
- codeMirror: editor.codeMirror,
+ codeMirror: editor.panes.codeMirror,
parachute: parachute,
ready: ready
};
@@ -2,18 +2,18 @@
defineTests([
"jquery",
- "fc/ui/two-paned-editor",
+ "fc/ui/editor-panes",
"fc/ui/editor-toolbar"
-], function($, TwoPanedEditor, EditorToolbar) {
- var parentDiv, editorDiv, toolbarDiv, editor, options;
+], function($, EditorPanes, EditorToolbar) {
+ var parentDiv, panesDiv, toolbarDiv, panes, options;
module("EditorToolbar", {
setup: function() {
parentDiv = $('<div></div>').appendTo("#qunit-fixture").hide();
- editorDiv = $('<div></div>').appendTo(parentDiv);
+ panesDiv = $('<div></div>').appendTo(parentDiv);
toolbarDiv = $('<div></div>').appendTo(parentDiv);
- editor = TwoPanedEditor({container: editorDiv});
- options = {editor: editor, container: toolbarDiv};
+ panes = EditorPanes({container: panesDiv});
+ options = {panes: panes, container: toolbarDiv};
},
teardown: function() {
parentDiv.remove();
@@ -22,8 +22,8 @@ defineTests([
test("shows page title when <title> is present", function() {
var toolbar = EditorToolbar(options);
- editor.codeMirror.setValue("<title>supdog</title>");
- editor.codeMirror.reparse();
+ panes.codeMirror.setValue("<title>supdog</title>");
+ panes.codeMirror.reparse();
ok(!$(".preview-title", toolbarDiv).attr("style"),
"navbar preview title is not hidden");
equal($(".preview-title", toolbarDiv).text(), "supdog",
@@ -32,8 +32,8 @@ defineTests([
test("doesn't show page title when <title> is absent", function() {
var toolbar = EditorToolbar(options);
- editor.codeMirror.setValue("<p>hello</p>");
- editor.codeMirror.reparse();
+ panes.codeMirror.setValue("<p>hello</p>");
+ panes.codeMirror.reparse();
ok($(".preview-title", toolbarDiv).attr("style").match(/display:\s*none/),
"navbar preview title is hidden");
});

0 comments on commit c55b22a

Please sign in to comment.