This repository has been archived by the owner on Jan 19, 2022. It is now read-only.
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
index.html and bare.html are now separate pages that embed friendlycode.
Specifically, index.html assumes embedding within the Thimble website and features Thimble-specific branding, while bare.html is a trivial embedding of friendlycode. The many stylesheets used by both pages are now consolidated into friendlycode.css, which (for now) just @imports all the stylesheets. A production build system can compile these into a single file for better performance.
- Loading branch information
Showing
9 changed files
with
253 additions
and
208 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| <!DOCTYPE html> | ||
| <html class="deployment-type-development"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <base target="_blank"> | ||
|
|
||
| <title>Barebones Friendlycode Editor</title> | ||
| <link rel="stylesheet" href="css/friendlycode.css"> | ||
| </head> | ||
| <body> | ||
| <div id="bare-fc-holder" class="friendlycode-loading"></div> | ||
|
|
||
| <script src="js/require-config.js"></script> | ||
| <script src="js/require.min.js"></script> | ||
| <script> | ||
| require(["jquery", "friendlycode"], function($, FriendlycodeEditor) { | ||
| return FriendlycodeEditor({ | ||
| publishURL: "https://webpagemaker-dev.allizom.org", | ||
| container: $("#bare-fc-holder") | ||
| }); | ||
| }); | ||
| </script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| /* | ||
| * This stylesheet is only intended for development purposes, | ||
| * due to the inefficiency of @import [1]. For production use, this | ||
| * file should be a raw concatenation of all the @import rules below. | ||
| * | ||
| * [1] http://www.stevesouders.com/blog/2009/04/09/dont-use-import/ | ||
| */ | ||
|
|
||
| @import url(../codemirror2/lib/codemirror.css); | ||
|
|
||
| @import url(jsbin-codemirror-theme.css); | ||
| @import url(tipsy.css); | ||
| @import url(ubuntumono/stylesheet.css); | ||
| @import url(opensans/stylesheet.css); | ||
| @import url(opensymbolcropped/stylesheet.css); | ||
| @import url(editor.css); | ||
| @import url(errorhelp.css); | ||
| @import url(modals.css); | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -9,3 +9,9 @@ | |
| z-index: 9001; | ||
| right: 6em; | ||
| } | ||
|
|
||
| @media screen and (max-width: 620px) { | ||
| #tabzilla { | ||
| right: 16% !important; | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| #thimble-friendlycode-holder { | ||
| position: absolute; | ||
| top: 79px; | ||
| bottom: 0; | ||
| left: 0; | ||
| right: 0; | ||
| } | ||
|
|
||
| #thimble-header { | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| right: 0; | ||
| height: 79px; | ||
|
|
||
| background: #f5f5f5; | ||
| background-image: url("../img/header-gradient.png"); | ||
| background-position: 0 0; | ||
| -webkit-box-shadow: 0 5px 5px 0 rgba(233,233,233,0.5); | ||
| box-shadow: 0 5px 5px 0 rgba(233,233,233,0.5); | ||
| border-top: 2px solid white; | ||
|
|
||
| z-index: 2; | ||
| } | ||
|
|
||
| #thimble-header .logo { | ||
| display: inline-block; | ||
| font-family: OpenSansLight, sans-serif; | ||
| margin-left: 15px; | ||
| width: 200px; | ||
| margin-top: 10px; | ||
| } | ||
|
|
||
| #thimble-header .logo a { | ||
| color: #27AAE1; | ||
| text-decoration: none; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,140 @@ | ||
| define(function(require) { | ||
| var $ = require("jquery"), | ||
| TwoPanedEditor = require("fc/ui/two-paned-editor"), | ||
| EditorToolbar = require("fc/ui/editor-toolbar"), | ||
| Modals = require("fc/ui/modals"), | ||
| Parachute = require("fc/parachute"), | ||
| Publisher = require("fc/publisher"), | ||
| PublishUI = require("fc/ui/publish"); | ||
|
|
||
| return function FriendlycodeEditor(options) { | ||
| var publishURL = options.publishURL, | ||
| pageToLoad = options.pageToLoad, | ||
| defaultContent = options.defaultContent || "default-content.html", | ||
| remixURLTemplate = options.remixURLTemplate || | ||
| location.protocol + "//" + location.host + | ||
| location.pathname + "#{{VIEW_URL}}", | ||
| container = options.container.empty() | ||
| .addClass("friendlycode-loading"), | ||
| toolbarDiv = $('<div class="friendlycode-toolbar"></div>') | ||
| .appendTo(container), | ||
| editorDiv = $('<div class="friendlycode-editor"></div>') | ||
| .appendTo(container), | ||
| supportsPushState = window.history.pushState ? true : false, | ||
| ready = $.Deferred(); | ||
|
|
||
| if (supportsPushState) | ||
| window.history.replaceState({pageToLoad: pageToLoad}, "", | ||
| location.href); | ||
|
|
||
| var editor = TwoPanedEditor({ | ||
| container: editorDiv | ||
| }); | ||
| var modals = Modals({ | ||
| container: $('<div></div>').appendTo(document.body) | ||
| }); | ||
| var publisher = Publisher(publishURL); | ||
| var publishUI = PublishUI({ | ||
| modals: modals, | ||
| codeMirror: editor.codeMirror, | ||
| publisher: publisher, | ||
| remixURLTemplate: remixURLTemplate | ||
| }); | ||
| var toolbar = EditorToolbar({ | ||
| container: toolbarDiv, | ||
| editor: editor, | ||
| startPublish: publishUI.start | ||
| }); | ||
| var parachute = Parachute(window, editor.codeMirror, pageToLoad); | ||
|
|
||
| // If a URL hash is specified, it should override anything provided by | ||
| // a server. | ||
| if (window.location.hash.slice(1)) | ||
| pageToLoad = window.location.hash.slice(1); | ||
|
|
||
| window.addEventListener("hashchange", function(event) { | ||
| // We don't currently support dynamically changing the URL | ||
| // without a full page reload, unfortunately, so just trigger a | ||
| // reload if the user clicked the 'back' button after we pushed | ||
| // a new URL to it. | ||
| var newPageToLoad = window.location.hash.slice(1); | ||
| if (newPageToLoad != pageToLoad) | ||
| window.location.reload(); | ||
| }, false); | ||
|
|
||
| if (supportsPushState) | ||
| window.addEventListener("popstate", function(event) { | ||
| // We don't currently support dynamically changing the URL | ||
| // without a full page reload, unfortunately, so just trigger a | ||
| // reload if the user clicked the 'back' button after we pushed | ||
| // a new URL to it. | ||
| // | ||
| // Also, for some reason Webkit is sending a spurious popstate with | ||
| // state == null on page load, so we want to check that it's | ||
| // non-null first (see #39). | ||
| if (event.state && event.state.pageToLoad != pageToLoad) | ||
| window.location.reload(); | ||
| }, false); | ||
|
|
||
| publishUI.on("publish", function(info) { | ||
| // If the browser supports history.pushState, set the URL to | ||
| // be the new URL to remix the page they just published, so they | ||
| // can share/bookmark the URL and it'll be what they expect it | ||
| // to be. | ||
| pageToLoad = info.path; | ||
| // 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 | ||
| // page the current page is based on. | ||
| parachute.clearCurrentPage(); | ||
| parachute.changePage(pageToLoad); | ||
| // It's possible that the server sanitized some stuff that the | ||
| // user will be confused by, so save the new state of the page | ||
| // to be what they expect it to be, just in case. | ||
| parachute.save(); | ||
| if (supportsPushState) | ||
| window.history.pushState({pageToLoad: pageToLoad}, "", info.remixURL); | ||
| else | ||
| window.location.hash = "#" + pageToLoad; | ||
| }); | ||
|
|
||
| function doneLoading() { | ||
| container.removeClass("friendlycode-loading"); | ||
| editor.codeMirror.clearHistory(); | ||
| toolbar.refresh(); | ||
| if (parachute.restore()) { | ||
| 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(); | ||
| ready.resolve(); | ||
| } | ||
|
|
||
| if (!pageToLoad) { | ||
| $.get(defaultContent, function(html) { | ||
| editor.codeMirror.setValue(html.trim()); | ||
| doneLoading(); | ||
| }, "text"); | ||
| } else | ||
| publisher.loadCode(pageToLoad, function(err, data, url) { | ||
| if (err) { | ||
| modals.showErrorDialog({ | ||
| text: 'Sorry, an error occurred while trying to get the page.' | ||
| }); | ||
| } else { | ||
| editor.codeMirror.setValue(data); | ||
| publishUI.setCurrentURL(url); | ||
| doneLoading(); | ||
| } | ||
| }); | ||
|
|
||
| return { | ||
| codeMirror: editor.codeMirror, | ||
| parachute: parachute, | ||
| ready: ready | ||
| }; | ||
| }; | ||
| }); |
Oops, something went wrong.