Fix #645 - Don't use CDNs, improve requirejs config/loading

bower.json

@@ -1,13 +1,10 @@
 {
   "name": "thimble.webmaker.org",
   "dependencies": {
-    "zepto": "~1.1.6",
+    "jquery": "http://code.jquery.com/jquery-2.1.4.min.js",
     "cookies-js": "~1.2.1",
     "node-uuid": "~1.4.3",
     "webmaker-i18n": "https://github.com/mozilla/node-webmaker-i18n/archive/v0.3.8.tar.gz"
   },
-  "resolutions": {
-    "selectize": "0.10.1"
-  },
   "version": "1.0.94"
 }

public/scripts/main.js

@@ -0,0 +1,41 @@
+require.config({
+  baseUrl: "scripts/editor/js",
+  paths: {
+    "text": "../vendor/require.text",
+    "i18n": "../vendor/require.i18n",
+    "sso-override": "../../sso-override",
+    "jquery": "/bower/jquery/index",
+    "localized": "/bower/webmaker-i18n/localized",
+    "uuid": "/bower/node-uuid/uuid",
+    "cookies": "/bower/cookies-js/dist/cookies"
+  },
+  shim: {
+    "jquery": {
+      exports: "$"
+    }
+  },
+  config: {
+    template: {
+      htmlPath: "templates",
+      i18nPath: "fc/nls/ui"
+    }
+  }
+});
+
+define(["bramble-editor", "sso-override"], function(BrambleEditor) {
+  var thimbleScript = document.getElementById("thimble-script");
+  var appUrl = thimbleScript.getAttribute("data-app-url");
+  var makeDetails = thimbleScript.getAttribute("data-make-details");
+  var editorUrl = thimbleScript.getAttribute("data-editor-url");
+  var editorHost = thimbleScript.getAttribute("data-editor-host");
+
+  // unpack makedetails
+  makeDetails = JSON.parse(decodeURIComponent(makeDetails));
+
+  var editor = BrambleEditor({
+    makeDetails: makeDetails,
+    editorUrl: editorUrl,
+    editorHost: editorHost,
+    appUrl: appUrl
+  });
+});

public/scripts/sso-override.js

@@ -0,0 +1,73 @@
+/**
+ * This code ensures the "publish" button is only
+ * visible when the user is logged in according
+ * the persona SSO that we employ for webmaker.org
+ */
+define(["jquery", "uuid", "cookies"], function($, uuid, cookies) {
+  function setStateCookie(state) {
+    cookies.expire("state");
+    cookies.set("state", state);
+  }
+
+  var overrideElement = document.getElementById("publish-ssooverride");
+  var authHostname = overrideElement.getAttribute("data-login-authHostname");
+  var oauthClientId = overrideElement.getAttribute("data-oauth-clientid");
+
+  var user = {
+    username: overrideElement.getAttribute("data-oauth-username"),
+    avatar: overrideElement.getAttribute("data-oauth-avatar")
+  };
+
+  var joinEl = $('#signup-link');
+  var loginEl = $('#login-link');
+  var logoutEl = $('#logout-link');
+
+  var basicQuery = "?" + [
+    "client_id=" + oauthClientId,
+    "response_type=code",
+    "scopes=user email"
+  ].join("&");
+
+  // Signup login flow
+  joinEl.on('click', function(e) {
+    e.preventDefault();
+
+    var state = uuid.v4();
+    var oauthRoute = "/login/oauth/authorize";
+
+    var query = authHostname + oauthRoute + basicQuery + [
+      "&state=" + state,
+      "action=signup"
+    ].join("&");
+
+    setStateCookie(state);
+
+    window.location = query;
+  });
+
+  // Login flow
+  loginEl.on('click', function(e) {
+    e.preventDefault();
+
+    var state = uuid.v4();
+    var oauthRoute = "/login/oauth/authorize";
+
+    var query = authHostname + oauthRoute + basicQuery + [
+      "&state=" + state,
+      "action=signin"
+    ].join("&");
+
+    setStateCookie(state);
+
+    window.location = query;
+  });
+
+  logoutEl.on('click', function(e) {
+    e.preventDefault();
+
+    var oauthRoute = "/logout";
+    var query = authHostname + oauthRoute + "?client_id=" + oauthClientId;
+
+    window.location = query;
+  });
+});

views/bramble.html

@@ -3,13 +3,4 @@
         {% include 'nav-options.html' %}
     </div>
     <div id="webmaker-bramble"></div>
-
-    <script src="/scripts/editor/js/require-config.js"></script>
-    <script src="scripts/editor/vendor/require.min.js"></script>
-    <script id="friendly-code" src="/scripts/thimble-page.js"
-            data-make-details="{{ makedetails }}"
-            data-editor-host="{{ editorHOST }}"
-            data-editor-url="{{ editorURL }}"
-            data-app-url="{{ appURL }}">
-    </script>
 {% endblock %}

views/index.html

@@ -3,14 +3,4 @@
     {% include 'userbar.html' %}
     {% include 'bramble.html' %}
     {% include 'publish.html' %}
-    {% block ssooverride %}
-      <script id="ssooverride" src="/scripts/ssooverride.js"
-              data-login-authHostname="{{ OAUTH_AUTHORIZATION_URL }}"
-              data-login-thimbleHostname="{{ appURL }}"
-              data-oauth-clientid="{{ OAUTH_CLIENT_ID }}"
-              data-oauth-username="{{ username }}"
-              data-oauth-avatar="{{ avatar }}"
-              async>
-      </script>
-    {% endblock %}
 {% endblock %}

views/layout.html

@@ -18,6 +18,14 @@
     <link rel="stylesheet" href="/stylesheets/publish.css">
 
     <script src="{{ editorHOST }}/dist/bramble.js"></script>
+    <script id="thimble-script"
+            src="scripts/editor/vendor/require.min.js"
+            data-main="/scripts/main.js"
+            data-make-details="{{ makedetails }}"
+            data-editor-host="{{ editorHOST }}"
+            data-editor-url="{{ editorURL }}"
+            data-app-url="{{ appURL }}">
+    </script>
     {% if GA_ACCOUNT %}
     <script id="google-analytics-js" src="/scripts/google-analytics.js"
             data-ga-account="{{ GA_ACCOUNT }}"

views/publish.html

@@ -1,4 +1,11 @@
 {% block publishdialog %}
+<div id="publish-ssooverride" class="hide"
+     data-login-authHostname="{{ OAUTH_AUTHORIZATION_URL }}"
+     data-login-thimbleHostname="{{ appURL }}"
+     data-oauth-clientid="{{ OAUTH_CLIENT_ID }}"
+     data-oauth-username="{{ username }}"
+     data-oauth-avatar="{{ avatar }}"
+</div>
 <div id="publish-underlay" class="hide"></div>
 <div id="publish-dialog" class="hide">
   <div id="publish-title">