Skip to content

Commit

Permalink
npm script for min bundle, refactor
Browse files Browse the repository at this point in the history
  • Loading branch information
david-wolgemuth committed May 20, 2017
1 parent de4f1a7 commit 1299326
Show file tree
Hide file tree
Showing 8 changed files with 283 additions and 273 deletions.
346 changes: 171 additions & 175 deletions dist/bundle.js

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions dist/bundle.min.js

Large diffs are not rendered by default.

76 changes: 3 additions & 73 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,81 +4,11 @@
<title>Code Runner</title>
<script type="text/javascript" src="/dist/problems.js"></script>
<script type="text/javascript" src="/dist/bundle.js"></script>
<link rel="stylesheet" type="text/css" href="/styles/sakura.css">
<script src="https://use.fontawesome.com/c580d027b1.js"></script>
<link rel="stylesheet" type="text/css" href="/node_modules/codemirror/lib/codemirror.css">
<style type="text/css" media="screen">
body {
max-width: 48em;
}
h1 {
text-align: center;
}
#code-editor {
outline: 1px solid gray;
}
#run {
font-size: 24px;
}
.success {
color: #2c8898;
}
.failure {
color: #982c61;
}
nav {
display: inline-block;
vertical-align: top;
width: 20%;
}
nav.closed {
display: block;
margin: 16px;
}
nav.closed > ol {
display: none;
}
ol, ul {
padding-left: 0px;
}
ul {
list-style: none;
}
#main {
display: block;
width: 100%;
}
#main.nav-open {
display: inline-block;
width: 75%;
}
.tooltip {
position: relative;
/*display: inline-block;
border-bottom: 1px dotted black;*/
}

.tooltip .tooltiptext {
font-size: 16px;
visibility: hidden;
background-color: black;
color: #fff;
opacity: 0.7;
text-align: center;
border-radius: 6px;
padding: 6px;

/* Position the tooltip */
position: absolute;
left: 20px;
top: 20px;
z-index: 1;
}

.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<link rel="stylesheet" type="text/css" href="/node_modules/codemirror/lib/codemirror.css">
<link rel="stylesheet" type="text/css" href="/styles/sakura.css">
<link rel="stylesheet" type="text/css" href="/styles/main.css">
</head>
<body>
<div id="wrapper">
Expand Down
9 changes: 6 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,19 @@
"main": "index.js",
"scripts": {
"dev": "concurrently --kill-others \"npm run watchify\" \"npm run serve\"",
"watchify": "./node_modules/watchify/bin/cmd.js src -o dist/bundle.js",
"serve": "./node_modules/http-server/bin/http-server -p 3000 -o -c-1",
"bundle": "node bundle-problems && ./node_modules/browserify/bin/cmd.js src -o dist/bundle.js"
"watchify": "./node_modules/watchify/bin/cmd.js src -t [ babelify --presets [ es2015 ] ] -o dist/bundle.js",
"serve": "./node_modules/http-server/bin/http-server -p 3000 -c-1",
"bundle": "node bundle-problems && ./node_modules/browserify/bin/cmd.js src -t [ babelify --presets [ es2015 ] ] | ./node_modules/uglify-js/bin/uglifyjs -o dist/bundle.min.js"
},
"keywords": [],
"author": "David Wolgemuth <[email protected]> (https://david-wolgemuth.github.io)",
"license": "ISC",
"devDependencies": {
"babel-preset-es2015": "^6.24.1",
"babelify": "^7.3.0",
"concurrently": "^3.4.0",
"http-server": "^0.10.0",
"uglify-js": "^3.0.10",
"watchify": "^3.9.0",
"yaml-js": "^0.1.5"
},
Expand Down
28 changes: 17 additions & 11 deletions src/editor.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,9 @@
const CodeMirror = require('codemirror');
require('codemirror/mode/javascript/javascript');

const setTabs = (cm) => {
if (cm.somethingSelected()) {
cm.indentSelection("add");
} else {
cm.replaceSelection(cm.getOption("indentWithTabs")? "\t":
Array(cm.getOption("indentUnit") + 1).join(" "), "end", "+input");
}
};

const setupEditor = (area) => (
CodeMirror(area, {
value: 'const sum = (arr) => (\n arr.reduce((s, x) => s + x)\n);\n',
value: '/* Select a problem */',
mode: 'javascript',
tabSize: 2,
extraKeys: { Tab: setTabs },
Expand All @@ -23,7 +14,22 @@ const setupEditor = (area) => (
);

const displayProblem = (problem, editor) => {
editor.setValue(problem.solutions[0]);
if (problem) {
editor.setValue(problem.solutions[0]);
}
};

module.exports = { setupEditor, displayProblem };


/*------------ PRIVATE ------------*/


const setTabs = (cm) => {
if (cm.somethingSelected()) {
cm.indentSelection("add");
} else {
cm.replaceSelection(cm.getOption("indentWithTabs")? "\t":
Array(cm.getOption("indentUnit") + 1).join(" "), "end", "+input");
}
};
2 changes: 1 addition & 1 deletion src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const main = () => {
};

const updateProblem = (problem) => {
renderNavList();
renderNavList(problem);
addListenersToNavbar();
displayProblem(problem, editor);
};
Expand Down
16 changes: 6 additions & 10 deletions src/navbar.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
/* global PROBLEMS */

const renderNavList = () => {
const renderNavList = (currentProblem) => {
const list = document.querySelectorAll('nav > ol')[0];
const listHtml = PROBLEMS.reduce((html, group) => (html + renderProblemGroup(group)), '')
const listHtml = PROBLEMS.reduce((html, group) => (html + renderProblemGroup(group, currentProblem)), '')
list.innerHTML = listHtml;
};

Expand All @@ -20,21 +20,17 @@ module.exports = { addListenersToNavbar, renderNavList };
/*------------ PRIVATE ------------*/


const renderProblemGroup = (group) => `
const renderProblemGroup = (group, currentProblem) => `
<li>${group.group}
<ul>
${group.problems.reduce((html, problem) => html + renderProblem(group.group, problem), '')}
${group.problems.reduce((html, problem) => html + renderProblem(group.group, problem, currentProblem), '')}
</ul>
</li>
`;

const renderProblem = (group, problem) => `<li>
const renderProblem = (group, problem, currentProblem) => `<li class="${(currentProblem && currentProblem.functionName === problem.functionName) ? 'active' : ''}">
<i class="fa fa-circle success"></i>
<a
data-group="${group}"
data-problem="${problem.functionName}"
href="/?problem=${problem.functionName}&group=${group}"
>${problem.functionName}</a>
<a href="/?problem=${problem.functionName}&group=${group}">${problem.functionName}</a>
</li>`;

const updateSearch = (event) => {
Expand Down
78 changes: 78 additions & 0 deletions styles/main.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
body {
max-width: 48em;
}
h1 {
text-align: center;
}
#code-editor {
outline: 1px solid gray;
}
#run {
font-size: 24px;
}
.success {
color: #2c8898;
}
.failure {
color: #982c61;
}
nav {
display: inline-block;
vertical-align: top;
width: 20%;
}
nav.closed {
display: block;
margin: 16px;
}
nav.closed > ol {
display: none;
}
ol, ul {
padding-left: 0px;
}
ul {
list-style: none;
}
nav ul > li {
padding: 4px 8px;
border-radius: 6px;
}
nav li.active, nav li.active * {
background: #2c8898;
color: #fff;
}
#main {
display: block;
width: 100%;
}
#main.nav-open {
display: inline-block;
width: 75%;
}
.tooltip {
position: relative;
/*display: inline-block;
border-bottom: 1px dotted black;*/
}

.tooltip .tooltiptext {
font-size: 16px;
visibility: hidden;
background-color: black;
color: #fff;
opacity: 0.7;
text-align: center;
border-radius: 6px;
padding: 6px;

/* Position the tooltip */
position: absolute;
left: 20px;
top: 20px;
z-index: 1;
}

.tooltip:hover .tooltiptext {
visibility: visible;
}

0 comments on commit 1299326

Please sign in to comment.