Skip to content

Commit

Permalink
Issue #13 - Introducing require.js
Browse files Browse the repository at this point in the history
  • Loading branch information
Yoric committed Dec 10, 2014
1 parent 2c7f628 commit 376ee49
Show file tree
Hide file tree
Showing 14 changed files with 246 additions and 152 deletions.
3 changes: 3 additions & 0 deletions .gitmodules
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
[submodule "lib/require.js"]
path = lib/require.js
url = https://github.com/jrburke/requirejs
9 changes: 8 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,19 @@ The project is split in two modules: **the app** and **the runtime (HTMLRunner)*

**Setup**

1. Clone this repository somewhere on your computer;
1. Clone this repository somewhere on your computer using `git clone --recursive https://github.com/paulrouget/firefox.html` or the github application;
2. Download HTMLRunner runtime: http://people.mozilla.org/~prouget/htmlrunner/ (package is named `firefox-XX.XX`);
3. Run HTMLRunner runtime (binary name is `firefox`);
4. HTMLRunner will ask (only once) the location of the `firefox.html` directory you cloned in step 1;
5. You should now see the browser running.

Note: If you have cloned without `--recursive`, you may find out that `lib/require.js` is empty. To fix this:

````
git submodule update --init
````


**How to change code**

1. Change code in the `firefox.html` directory
Expand Down
28 changes: 28 additions & 0 deletions app.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
require.config({
scriptType: "text/javascript;version=1.8",
enforceDefine: true,
});

define([
'js/browser',
'js/commands',
'js/curvedTabs',
'js/keybindings',
'js/navbar',
'js/os',
'js/tab',
'js/url_helper',
], function(
Browser,
Commands,
CurvedTabs,
Keybindings,
Navbar,
OS,
Tab,
Url_helper) {
"use strict";

Commands.createNewTab("http://medium.com");

})
12 changes: 4 additions & 8 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,10 @@
<title>tabs</title>
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/theme.css">
<script defer type="application/javascript;version=1.8" src="js/url_helper.js"></script>
<script defer type="application/javascript;version=1.8" src="js/os.js"></script>
<script defer type="application/javascript;version=1.8" src="js/curvedTabs.js"></script>
<script defer type="application/javascript;version=1.8" src="js/commands.js"></script>
<script defer type="application/javascript;version=1.8" src="js/keybindings.js"></script>
<script defer type="application/javascript;version=1.8" src="js/navbar.js"></script>
<script defer type="application/javascript;version=1.8" src="js/tab.js"></script>
<script defer type="application/javascript;version=1.8" src="js/gBrowser.js"></script>
<!-- Module handling -->
<!-- All further JS code is loaded from javascript -->
<script data-main="app" src="lib/require.js/require.js"
type="text/javascript" defer="defer"></script>
</head>

<body>
Expand Down
33 changes: 24 additions & 9 deletions js/gBrowser.js → js/browser.js
Original file line number Diff line number Diff line change
@@ -1,21 +1,35 @@
define([
'js/url_helper'
], function(
UrlHelper
) {

"use strict";

// Break circular dependencies
let Dependencies = {
get Tab() {
return require("js/tab");
},
}

// gBrowser
// Extend Iframe prototype

HTMLIFrameElement.prototype.show = function() {
this.removeAttribute("hidden");
if (IS_PRIVILEGED) {
if (window.IS_PRIVILEGED) {
this.setVisible(true);
}
}

HTMLIFrameElement.prototype.hide = function() {
this.setAttribute("hidden", "true");
if (IS_PRIVILEGED) {
if (window.IS_PRIVILEGED) {
this.setVisible(false);
}
}

// gBrowser

let gBrowser = {
_tabs: new Set(),

Expand Down Expand Up @@ -62,7 +76,7 @@ let gBrowser = {
urlinput.value = tab.location;
}

if (!IS_PRIVILEGED) {
if (!window.IS_PRIVILEGED) {
return;
}

Expand Down Expand Up @@ -109,10 +123,10 @@ let gBrowser = {
},

addTab: function(url, select) {
let tab = new Tab(document.querySelector(".iframes"));
let tab = new Dependencies.Tab(document.querySelector(".iframes"));
this._tabs.add(tab);

if (url && IS_PRIVILEGED) {
if (url && window.IS_PRIVILEGED) {
tab.iframe.src = url;
}

Expand Down Expand Up @@ -203,6 +217,7 @@ let gBrowser = {

return input;
},
}
};

Cmds.createNewTab("http://medium.com");
return gBrowser;
});
8 changes: 7 additions & 1 deletion js/commands.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
// Commands. Used by keybindings and buttons.
define([
'js/browser'
], function(gBrowser) {
"use strict";

const Cmds = {
goBack: function() {
Expand Down Expand Up @@ -51,3 +54,6 @@ const Cmds = {
gBrowser.selectedTab.resetZoom();
},
}

return Cmds;
});
51 changes: 26 additions & 25 deletions js/curvedTabs.js
Original file line number Diff line number Diff line change
@@ -1,32 +1,32 @@
window.addEventListener("load", function drawCurves() {
window.removeEventListener("load", drawCurve);
let curveDummyElt = document.querySelector(".dummy-tab-curve");
let style = window.getComputedStyle(curveDummyElt);
define(function() {
"use strict";

let curveBorder = style.getPropertyValue("--curve-border");
let curveGradientStart = style.getPropertyValue("--curve-gradient-start");
let curveGradientEnd = style.getPropertyValue("--curve-gradient-end");
let curveHoverBorder = style.getPropertyValue("--curve-hover-border");
let curveHoverGradientStart = style.getPropertyValue("--curve-hover-gradient-start");
let curveHoverGradientEnd = style.getPropertyValue("--curve-hover-gradient-end");
let curveDummyElt = document.querySelector(".dummy-tab-curve");
let style = window.getComputedStyle(curveDummyElt);

let c1 = document.createElement("canvas");
c1.id = "canvas-tab-selected";
c1.hidden = true;
c1.width = 3 * 28;
c1.height = 28;
drawBackgroundTab(c1, curveGradientStart, curveGradientEnd, curveBorder);
document.body.appendChild(c1);
let curveBorder = style.getPropertyValue("--curve-border");
let curveGradientStart = style.getPropertyValue("--curve-gradient-start");
let curveGradientEnd = style.getPropertyValue("--curve-gradient-end");
let curveHoverBorder = style.getPropertyValue("--curve-hover-border");
let curveHoverGradientStart = style.getPropertyValue("--curve-hover-gradient-start");
let curveHoverGradientEnd = style.getPropertyValue("--curve-hover-gradient-end");

let c2 = document.createElement("canvas");
c2.id = "canvas-tab-hover";
c2.hidden = true;
c2.width = 3 * 28;
c2.height = 28;
drawBackgroundTab(c2, curveHoverGradientStart, curveHoverGradientEnd, curveHoverBorder);
document.body.appendChild(c2);
let c1 = document.createElement("canvas");
c1.id = "canvas-tab-selected";
c1.hidden = true;
c1.width = 3 * 28;
c1.height = 28;
drawBackgroundTab(c1, curveGradientStart, curveGradientEnd, curveBorder);
document.body.appendChild(c1);

let c2 = document.createElement("canvas");
c2.id = "canvas-tab-hover";
c2.hidden = true;
c2.width = 3 * 28;
c2.height = 28;
drawBackgroundTab(c2, curveHoverGradientStart, curveHoverGradientEnd, curveHoverBorder);
document.body.appendChild(c2);

});

function drawBackgroundTab(canvas, bg1, bg2, borderColor) {
canvas.width = window.devicePixelRatio * canvas.width;
Expand Down Expand Up @@ -74,3 +74,4 @@ function drawCurve(ctx,r) {
3 * r - r * 0, r * 0.984);
}

});
146 changes: 75 additions & 71 deletions js/keybindings.js
Original file line number Diff line number Diff line change
@@ -1,86 +1,90 @@
// Keybindings
define([
'js/commands'
], function(
Commands
) {
"use strict";

(function() {
let allKeyBindings = [];

let allKeyBindings = [];
RegisterKeyBindings(
["", "Esc", "stop"],
["Ctrl", "Tab", "selectNextTab"],
["Ctrl Shift", "code:9", "selectPreviousTab"]
);

if (window.OS == "linux" || window.OS == "windows") {
RegisterKeyBindings(
["", "Esc", "stop"],
["Ctrl", "Tab", "selectNextTab"],
["Ctrl Shift", "code:9", "selectPreviousTab"]
["Ctrl", "t", "createNewTab"],
["Ctrl", "r", "reload"],
["Alt", "Left", "goBack"],
["Alt", "Right", "goForward"],
["Ctrl", "l", "focusURLBar"],
["Ctrl", "k", "focusSearchBar"],
["Ctrl", "w", "closeTab"],
["Ctrl Shift", "+", "zoomIn"],
["Ctrl", "=", "zoomIn"],
["Ctrl", "-", "zoomOut"],
["Ctrl", "0", "resetZoom"]
);
}

if (window.OS == "linux" || window.OS == "windows") {
RegisterKeyBindings(
["Ctrl", "t", "createNewTab"],
["Ctrl", "r", "reload"],
["Alt", "Left", "goBack"],
["Alt", "Right", "goForward"],
["Ctrl", "l", "focusURLBar"],
["Ctrl", "k", "focusSearchBar"],
["Ctrl", "w", "closeTab"],
["Ctrl Shift", "+", "zoomIn"],
["Ctrl", "=", "zoomIn"],
["Ctrl", "-", "zoomOut"],
["Ctrl", "0", "resetZoom"]
);
}

if (window.OS == "osx") {
RegisterKeyBindings(
["Cmd", "t", "createNewTab"],
["Cmd", "r", "reload"],
["Cmd", "Left", "goBack"],
["Cmd", "Right", "goForward"],
["Cmd", "l", "focusURLBar"],
["Cmd", "k", "focusSearchBar"],
["Cmd", "w", "closeTab"],
["Cmd Shift", "+", "zoomIn"],
["Cmd", "=", "zoomIn"],
["Cmd", "-", "zoomOut"],
["Cmd", "0", "resetZoom"]
);
}
if (window.OS == "osx") {
RegisterKeyBindings(
["Cmd", "t", "createNewTab"],
["Cmd", "r", "reload"],
["Cmd", "Left", "goBack"],
["Cmd", "Right", "goForward"],
["Cmd", "l", "focusURLBar"],
["Cmd", "k", "focusSearchBar"],
["Cmd", "w", "closeTab"],
["Cmd Shift", "+", "zoomIn"],
["Cmd", "=", "zoomIn"],
["Cmd", "-", "zoomOut"],
["Cmd", "0", "resetZoom"]
);
}

function RegisterKeyBindings(...bindings) {
for (let b of bindings) {
let mods = b[0];
let key = b[1];
let func = b[2];
function RegisterKeyBindings(...bindings) {
for (let b of bindings) {
let mods = b[0];
let key = b[1];
let func = b[2];

let e = {
ctrlKey: false,
shiftKey: false,
metaKey: false,
altKey: false
}
let e = {
ctrlKey: false,
shiftKey: false,
metaKey: false,
altKey: false
}

if (mods.indexOf("Ctrl") > -1) e.ctrlKey = true;
if (mods.indexOf("Shift") > -1) e.shiftKey = true;
if (mods.indexOf("Alt") > -1) e.altKey = true;
if (mods.indexOf("Cmd") > -1) e.metaKey = true;
if (mods.indexOf("Ctrl") > -1) e.ctrlKey = true;
if (mods.indexOf("Shift") > -1) e.shiftKey = true;
if (mods.indexOf("Alt") > -1) e.altKey = true;
if (mods.indexOf("Cmd") > -1) e.metaKey = true;

if (key.indexOf("code:") > -1) {
e.keyCode = key.split(":")[1];
} else {
e.key = key;
}
allKeyBindings.push({event:e,func:func});
if (key.indexOf("code:") > -1) {
e.keyCode = key.split(":")[1];
} else {
e.key = key;
}
allKeyBindings.push({event:e,func:func});
}
}

window.addEventListener("keypress", e => {
for (let oneKeyBinding of allKeyBindings) {
let matches = true;
for (let prop in oneKeyBinding.event) {
if (e[prop] != oneKeyBinding.event[prop]) {
matches = false;
break;
}
}
if (matches) {
Cmds[oneKeyBinding.func]();
window.addEventListener("keypress", e => {
for (let oneKeyBinding of allKeyBindings) {
let matches = true;
for (let prop in oneKeyBinding.event) {
if (e[prop] != oneKeyBinding.event[prop]) {
matches = false;
break;
}
}
});
})();
if (matches) {
Commands[oneKeyBinding.func]();
}
}
});

});
Loading

0 comments on commit 376ee49

Please sign in to comment.