Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(1584)

Unified Diff: experimental/webtry/res/js/webtry.js

Issue 294903017: Add the ability to select a source image to use in the code. (Closed) Base URL: https://skia.googlesource.com/skia.git@master
Patch Set: Created 6 years, 7 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « experimental/webtry/res/css/webtry.css ('k') | experimental/webtry/result.cpp » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: experimental/webtry/res/js/webtry.js
diff --git a/experimental/webtry/res/js/webtry.js b/experimental/webtry/res/js/webtry.js
index b1fe3dd8065228b162cb400361d35dec8644d343..b24501e14363f9b235b69f25f47f84eb9a902a36 100644
--- a/experimental/webtry/res/js/webtry.js
+++ b/experimental/webtry/res/js/webtry.js
@@ -18,29 +18,33 @@
*/
(function() {
function onLoad() {
- var run = document.getElementById('run');
- var permalink = document.getElementById('permalink');
- var embed = document.getElementById('embed');
- var embedButton = document.getElementById('embedButton');
- var code = document.getElementById('code');
- var output = document.getElementById('output');
- var stdout = document.getElementById('stdout');
- var img = document.getElementById('img');
- var tryHistory = document.getElementById('tryHistory');
- var parser = new DOMParser();
- var tryTemplate = document.getElementById('tryTemplate');
+ var run = document.getElementById('run');
+ var permalink = document.getElementById('permalink');
+ var embed = document.getElementById('embed');
+ var embedButton = document.getElementById('embedButton');
+ var code = document.getElementById('code');
+ var output = document.getElementById('output');
+ var stdout = document.getElementById('stdout');
+ var img = document.getElementById('img');
+ var tryHistory = document.getElementById('tryHistory');
+ var parser = new DOMParser();
+ var tryTemplate = document.getElementById('tryTemplate');
+ var sourcesTemplate = document.getElementById('sourcesTemplate');
- var editor = CodeMirror.fromTextArea(code, {
- theme: "default",
- lineNumbers: true,
- matchBrackets: true,
- mode: "text/x-c++src",
- indentUnit: 4,
- });
+ var enableSource = document.getElementById('enableSource');
+ var selectedSource = document.getElementById('selectedSource');
+ var sourceCode = document.getElementById('sourceCode');
+ var chooseSource = document.getElementById('chooseSource');
+ var chooseList = document.getElementById('chooseList');
+
+ // Id of the source image to use, 0 if no source image is used.
+ var sourceId = 0;
+
+ sourceId = parseInt(enableSource.getAttribute('data-id'));
+ if (sourceId) {
+ sourceSelectByID(sourceId);
+ }
- // Match the initial textarea size.
- editor.setSize(editor.defaultCharWidth() * code.cols,
- editor.defaultTextHeight() * code.rows);
function beginWait() {
document.body.classList.add('waiting');
@@ -54,6 +58,101 @@
}
+ function sourceSelectByID(id) {
+ sourceId = id;
+ if (id > 0) {
+ enableSource.checked = true;
+ selectedSource.innerHTML = '<img with=64 height=64 src="/i/image-'+sourceId+'.png" />';
+ selectedSource.classList.add('show');
+ sourceCode.classList.add('show');
+ chooseSource.classList.remove('show');
+ } else {
+ enableSource.checked = false;
+ selectedSource.classList.remove('show');
+ sourceCode.classList.remove('show');
+ }
+ }
+
+
+ /**
+ * A selection has been made in the choiceList.
+ */
+ function sourceSelect() {
+ sourceSelectByID(parseInt(this.getAttribute('data-id')));
+ }
+
+
+ /**
+ * Callback when the loading of the image sources is complete.
+ *
+ * Fills in the list of images from the data returned.
+ */
+ function sourcesComplete(e) {
+ endWait();
+ // The response is JSON of the form:
+ // [
+ // {"id": 1},
+ // {"id": 3},
+ // ...
+ // ]
+ body = JSON.parse(e.target.response);
+ // Clear out the old list if present.
+ while (chooseList.firstChild) {
+ chooseList.removeChild(chooseList.firstChild);
+ }
+ body.forEach(function(source) {
+ var id = 'i'+source.id;
+ var imgsrc = '/i/image-'+source.id+'.png';
+ var clone = sourcesTemplate.content.cloneNode(true);
+ clone.querySelector('img').src = imgsrc;
+ clone.querySelector('button').setAttribute('id', id);
+ clone.querySelector('button').setAttribute('data-id', source.id);
+ chooseList.insertBefore(clone, chooseList.firstChild);
+ chooseList.querySelector('#'+id).addEventListener('click', sourceSelect, true);
+ });
+ chooseSource.classList.add('show');
+ }
+
+
+ /**
+ * Toggle the use of a source image, or select a new source image.
+ *
+ * If enabling source images then load the list of available images via
+ * XHR.
+ */
+ function sourceClick(e) {
+ selectedSource.classList.remove('show');
+ sourceCode.classList.remove('show');
+ if (enableSource.checked) {
+ beginWait();
+ var req = new XMLHttpRequest();
+ req.addEventListener('load', sourcesComplete);
+ req.addEventListener('error', xhrError);
+ req.overrideMimeType('application/json');
+ req.open('GET', '/sources/', true);
+ req.send();
+ } else {
+ sourceId = 0;
+ }
+ }
+
+ enableSource.addEventListener('click', sourceClick, true);
+ selectedSource.addEventListener('click', sourceClick, true);
+
+
+ var editor = CodeMirror.fromTextArea(code, {
+ theme: "default",
+ lineNumbers: true,
+ matchBrackets: true,
+ mode: "text/x-c++src",
+ indentUnit: 4,
+ });
+
+ // Match the initial textarea size.
+ editor.setSize(editor.defaultCharWidth() * code.cols,
+ editor.defaultTextHeight() * code.rows);
+
+
/**
* Callback when there's an XHR error.
* @param e The callback event.
@@ -100,6 +199,7 @@
code.value = body.code;
editor.setValue(body.code);
img.src = '/i/'+body.hash+'.png';
+ sourceSelectByID(body.source);
if (permalink) {
permalink.href = '/c/' + body.hash;
}
@@ -172,7 +272,7 @@
req.overrideMimeType('application/json');
req.open('POST', '/', true);
req.setRequestHeader('content-type', 'application/json');
- req.send(JSON.stringify({'code': editor.getValue(), 'name': workspaceName}));
+ req.send(JSON.stringify({'code': editor.getValue(), 'name': workspaceName, 'source': sourceId}));
}
run.addEventListener('click', onSubmitCode);
« no previous file with comments | « experimental/webtry/res/css/webtry.css ('k') | experimental/webtry/result.cpp » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698