|
|
@@ -28,267 +28,267 @@ $(document).ready(function() {
|
|
|
var exampleList;
|
|
|
|
|
|
|
|
|
- $('#menu-btn').click(() => {
|
|
|
- $('#nav-menus').toggleClass('in');
|
|
|
- });
|
|
|
-
|
|
|
-
|
|
|
- /**
|
|
|
- * Make the left panel resizable
|
|
|
- */
|
|
|
- $panelLeft.resizable({
|
|
|
- handleSelector: ".splitter",
|
|
|
- resizeHeight: false,
|
|
|
- onDrag: function(e) {
|
|
|
- $editor.width($panelLeft.width());
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
-
|
|
|
- /**
|
|
|
- * Handle window resize
|
|
|
- */
|
|
|
- function onResize() {
|
|
|
- $editor.width($panelLeft.width());
|
|
|
- $panelWrap.height($window.height());
|
|
|
- }
|
|
|
- $window.resize(onResize);
|
|
|
- onResize();
|
|
|
-
|
|
|
-
|
|
|
- editor = ace.edit("editor");
|
|
|
- editor.setTheme("ace/theme/eclipse");
|
|
|
- editor.$blockScrolling = Infinity;
|
|
|
- editor.getSession().setUseWrapMode(true);
|
|
|
-
|
|
|
-
|
|
|
- /**
|
|
|
- * Set the current hash. If none given, take it from lococation.hash
|
|
|
- */
|
|
|
- function setCurrentHash(slug) {
|
|
|
- if(slug) {
|
|
|
- window.location.hash = currentHash = slug;
|
|
|
- }
|
|
|
- else {
|
|
|
- currentHash = window.location.hash ?
|
|
|
- window.location.hash.substr(1) : undefined;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- /**
|
|
|
- * Set editor mode (html, javascript, css)
|
|
|
- */
|
|
|
- function setEditorMode(mode) {
|
|
|
- editor.getSession().setMode("ace/mode/" + mode);
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- /**
|
|
|
- * Save a copy in localStorage
|
|
|
- */
|
|
|
- function saveToLocalStorage() {
|
|
|
- var editorContent = editor.getSession().getValue();
|
|
|
- editorStorage.saveSource(activeMode, editorContent);
|
|
|
- saveTimeout1 = undefined;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- /**
|
|
|
- * React to changes in editor by saving a copy
|
|
|
- */
|
|
|
- function editorContentChanged() {
|
|
|
- // console.log('editorContent changed')
|
|
|
- if(saveTimeout1 || saveTimeout2) {
|
|
|
- clearTimeout(saveTimeout1);
|
|
|
- clearTimeout(saveTimeout2);
|
|
|
- }
|
|
|
- saveTimeout1 = setTimeout(saveToLocalStorage, 500);
|
|
|
- // saveTimeout2 = setTimeout(saveChanges, 1000);
|
|
|
- }
|
|
|
-
|
|
|
- editor.getSession().on('change', editorContentChanged);
|
|
|
-
|
|
|
- function setActiveTab(mode) {
|
|
|
- console.log('setting mode', mode);
|
|
|
- var elementId = 'show-' + mode;
|
|
|
- $('#show-' + activeMode).removeClass('active');
|
|
|
- activeMode = mode;
|
|
|
- $('#' + elementId).addClass('active');
|
|
|
- var ed = $('#editor-' + mode);
|
|
|
- setEditorMode(mode);
|
|
|
- editor.getSession().off('change');
|
|
|
- editor.getSession().setValue(ed[0].innerHTML);
|
|
|
- editor.getSession().on('change', editorContentChanged);
|
|
|
- }
|
|
|
-
|
|
|
- $('#tabs button').click(function() {
|
|
|
- saveToLocalStorage();
|
|
|
- var mode = $(this).prop('id').substr(5);
|
|
|
- setActiveTab(mode);
|
|
|
- })
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- function loadExample(exampleSlug) {
|
|
|
- // console.log('loadExample', exampleSlug);
|
|
|
- var serverPath = 'exemples/jquery/' + exampleSlug + '/';
|
|
|
- rp.get(serverPath + 'script.js', 'text')
|
|
|
- .then(javascript => $editorJs.html(javascript))
|
|
|
- .then(() => rp.get(serverPath + 'example.html', 'text'))
|
|
|
- .then(() => rp.get(serverPath + 'styles.css', 'text')
|
|
|
- .then(css => $editorCss.html(css))
|
|
|
- .catch(err => {
|
|
|
- return '';
|
|
|
- })
|
|
|
- )
|
|
|
- .then(html => {
|
|
|
- $editorHtml.html(html);
|
|
|
- $('iframe.panel-right')
|
|
|
- .prop('src', '/examples/' + exampleSlug)
|
|
|
- setActiveTab('html');
|
|
|
- setCurrentHash(exampleSlug);
|
|
|
- var sources = {
|
|
|
- html: $editorHtml.html(),
|
|
|
- javascript: $editorJs.html()
|
|
|
- };
|
|
|
- editorStorage.init(exampleSlug, sources);
|
|
|
- })
|
|
|
- .then(() => {
|
|
|
- var item = _.find(exampleList, { slug: exampleSlug });
|
|
|
- // console.log(item.test ? 'test' : 'no test');
|
|
|
- // loadJS('exemples/' + item.slug + '/test.js', function() {
|
|
|
- // $('#tests').show();
|
|
|
- // });
|
|
|
- });
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- /**
|
|
|
- * Build select option string
|
|
|
- */
|
|
|
- function makeFileSelectOption(item) {
|
|
|
- return '<option value="' + item.slug + '">' +
|
|
|
- item.title +
|
|
|
- '</option>'
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- /**
|
|
|
- * Populate file selector from JSON list content
|
|
|
- */
|
|
|
- function resetFileSelect(exampleList) {
|
|
|
- $fileSelect.html(
|
|
|
- '<option value="-">—</option>' +
|
|
|
- exampleList.map(makeFileSelectOption)
|
|
|
- );
|
|
|
- }
|
|
|
-
|
|
|
- function loadExampleList() {
|
|
|
- rp.get('/list/jquery', 'json')
|
|
|
- .then(function(_exampleList) {
|
|
|
- exampleList = _exampleList;
|
|
|
- var restoredDraft;
|
|
|
- resetFileSelect(exampleList);
|
|
|
- if(currentHash) {
|
|
|
- $fileSelect.val(currentHash);
|
|
|
- var item = _.find(exampleList, { slug: currentHash });
|
|
|
- if( ! item) {
|
|
|
- return;
|
|
|
- }
|
|
|
- restoredDraft = editorStorage.restore(item.slug);
|
|
|
- if(! restoredDraft) {
|
|
|
- loadExample(item.slug);
|
|
|
- }
|
|
|
- else {
|
|
|
- console.log('restore', item.slug, restoredDraft.sources);
|
|
|
- $editorHtml.html(restoredDraft.sources.html);
|
|
|
- $editorCss.html(restoredDraft.sources.css);
|
|
|
- $editorJs.html(restoredDraft.sources.javascript);
|
|
|
- $('iframe.panel-right')
|
|
|
- .prop('src', '/examples/' + item.slug)
|
|
|
-
|
|
|
- // loadJS('exemples/' + item.slug + '/script.js');
|
|
|
- // if(item.test) {
|
|
|
- // loadJS('exemples/' + item.slug + '/test.js', function() {
|
|
|
- // $('#tests').show();
|
|
|
- // });
|
|
|
- // }
|
|
|
- setActiveTab('html');
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- function notify(type, text) {
|
|
|
- $notification
|
|
|
- .addClass(type)
|
|
|
- .addClass('active');
|
|
|
- $notification.html(text);
|
|
|
- setTimeout(function() {
|
|
|
- $notification.removeClass('active');
|
|
|
- }, 2000);
|
|
|
- setTimeout(function() {
|
|
|
- $notification.removeClass(type);
|
|
|
- }, 3000);
|
|
|
- }
|
|
|
-
|
|
|
- function toggleEditor() {
|
|
|
- $addExampleBtn.toggle();
|
|
|
- $selectorNav.toggle();
|
|
|
- $exampleForm.toggle();
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- /**
|
|
|
- * Save new example
|
|
|
- */
|
|
|
- function saveExample(e) {
|
|
|
- e.preventDefault();
|
|
|
- var title = $(this).find('input[name="title"]').val();
|
|
|
- rp.post('/examples', { title: title })
|
|
|
- .then(function(newExample) {
|
|
|
- clearAndCloseEditor();
|
|
|
- $fileSelect.append(makeFileSelectOption(newExample));
|
|
|
- $fileSelect.val(newExample.slug);
|
|
|
- notify('success', "Exemple créé !");
|
|
|
- })
|
|
|
- .catch(errText => notify('error', 'Erreur: ' + errText));
|
|
|
- }
|
|
|
-
|
|
|
- function clearAndCloseEditor() {
|
|
|
- $exampleForm.find('input').val('');
|
|
|
- toggleEditor();
|
|
|
- }
|
|
|
-
|
|
|
- function revertEditor() {
|
|
|
- editorStorage.reset();
|
|
|
- location.reload();
|
|
|
- }
|
|
|
-
|
|
|
- function saveChanges() {
|
|
|
- var payload = editorStorage.getSources();
|
|
|
- rp.put('/examples/' + currentHash, payload)
|
|
|
- .then(function(newExample) {
|
|
|
- notify('success', "Exemple sauvegardé !");
|
|
|
- loadExample(currentHash);
|
|
|
- })
|
|
|
- .catch(function(err) {
|
|
|
- notify('error', 'Erreur: ' + jqXHR.responseText);
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- setCurrentHash();
|
|
|
-
|
|
|
- $fileSelect.change(function() {
|
|
|
- loadExample($(this).val());
|
|
|
- });
|
|
|
- $addExampleBtn.click(toggleEditor);
|
|
|
- $exampleCancel.click(clearAndCloseEditor);
|
|
|
- $saveChanges.click(saveChanges);
|
|
|
- $exampleForm.submit(saveExample);
|
|
|
- $revertEditor.click(revertEditor);
|
|
|
- $.get('/menu', menu => $('#site-menu').html(menu), 'html');
|
|
|
- loadExampleList();
|
|
|
+ // $('#menu-btn').click(() => {
|
|
|
+ // $('#nav-menus').toggleClass('in');
|
|
|
+ // });
|
|
|
+
|
|
|
+
|
|
|
+ // /**
|
|
|
+ // * Make the left panel resizable
|
|
|
+ // */
|
|
|
+ // $panelLeft.resizable({
|
|
|
+ // handleSelector: ".splitter",
|
|
|
+ // resizeHeight: false,
|
|
|
+ // onDrag: function(e) {
|
|
|
+ // $editor.width($panelLeft.width());
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+
|
|
|
+
|
|
|
+ // /**
|
|
|
+ // * Handle window resize
|
|
|
+ // */
|
|
|
+ // function onResize() {
|
|
|
+ // $editor.width($panelLeft.width());
|
|
|
+ // $panelWrap.height($window.height());
|
|
|
+ // }
|
|
|
+ // $window.resize(onResize);
|
|
|
+ // onResize();
|
|
|
+
|
|
|
+
|
|
|
+ // editor = ace.edit("editor");
|
|
|
+ // editor.setTheme("ace/theme/eclipse");
|
|
|
+ // editor.$blockScrolling = Infinity;
|
|
|
+ // editor.getSession().setUseWrapMode(true);
|
|
|
+
|
|
|
+
|
|
|
+ // /**
|
|
|
+ // * Set the current hash. If none given, take it from lococation.hash
|
|
|
+ // */
|
|
|
+ // function setCurrentHash(slug) {
|
|
|
+ // if(slug) {
|
|
|
+ // window.location.hash = currentHash = slug;
|
|
|
+ // }
|
|
|
+ // else {
|
|
|
+ // currentHash = window.location.hash ?
|
|
|
+ // window.location.hash.substr(1) : undefined;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+
|
|
|
+ // /**
|
|
|
+ // * Set editor mode (html, javascript, css)
|
|
|
+ // */
|
|
|
+ // function setEditorMode(mode) {
|
|
|
+ // editor.getSession().setMode("ace/mode/" + mode);
|
|
|
+ // }
|
|
|
+
|
|
|
+
|
|
|
+ // /**
|
|
|
+ // * Save a copy in localStorage
|
|
|
+ // */
|
|
|
+ // function saveToLocalStorage() {
|
|
|
+ // var editorContent = editor.getSession().getValue();
|
|
|
+ // editorStorage.saveSource(activeMode, editorContent);
|
|
|
+ // saveTimeout1 = undefined;
|
|
|
+ // }
|
|
|
+
|
|
|
+
|
|
|
+ // /**
|
|
|
+ // * React to changes in editor by saving a copy
|
|
|
+ // */
|
|
|
+ // function editorContentChanged() {
|
|
|
+ // // console.log('editorContent changed')
|
|
|
+ // if(saveTimeout1 || saveTimeout2) {
|
|
|
+ // clearTimeout(saveTimeout1);
|
|
|
+ // clearTimeout(saveTimeout2);
|
|
|
+ // }
|
|
|
+ // saveTimeout1 = setTimeout(saveToLocalStorage, 500);
|
|
|
+ // // saveTimeout2 = setTimeout(saveChanges, 1000);
|
|
|
+ // }
|
|
|
+
|
|
|
+ // editor.getSession().on('change', editorContentChanged);
|
|
|
+
|
|
|
+ // function setActiveTab(mode) {
|
|
|
+ // console.log('setting mode', mode);
|
|
|
+ // var elementId = 'show-' + mode;
|
|
|
+ // $('#show-' + activeMode).removeClass('active');
|
|
|
+ // activeMode = mode;
|
|
|
+ // $('#' + elementId).addClass('active');
|
|
|
+ // var ed = $('#editor-' + mode);
|
|
|
+ // setEditorMode(mode);
|
|
|
+ // editor.getSession().off('change');
|
|
|
+ // editor.getSession().setValue(ed[0].innerHTML);
|
|
|
+ // editor.getSession().on('change', editorContentChanged);
|
|
|
+ // }
|
|
|
+
|
|
|
+ // $('#tabs button').click(function() {
|
|
|
+ // saveToLocalStorage();
|
|
|
+ // var mode = $(this).prop('id').substr(5);
|
|
|
+ // setActiveTab(mode);
|
|
|
+ // })
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // function loadExample(exampleSlug) {
|
|
|
+ // // console.log('loadExample', exampleSlug);
|
|
|
+ // var serverPath = 'exemples/jquery/' + exampleSlug + '/';
|
|
|
+ // rp.get(serverPath + 'script.js', 'text')
|
|
|
+ // .then(javascript => $editorJs.html(javascript))
|
|
|
+ // .then(() => rp.get(serverPath + 'example.html', 'text'))
|
|
|
+ // .then(() => rp.get(serverPath + 'styles.css', 'text')
|
|
|
+ // .then(css => $editorCss.html(css))
|
|
|
+ // .catch(err => {
|
|
|
+ // return '';
|
|
|
+ // })
|
|
|
+ // )
|
|
|
+ // .then(html => {
|
|
|
+ // $editorHtml.html(html);
|
|
|
+ // $('iframe.panel-right')
|
|
|
+ // .prop('src', '/examples/' + exampleSlug)
|
|
|
+ // setActiveTab('html');
|
|
|
+ // setCurrentHash(exampleSlug);
|
|
|
+ // var sources = {
|
|
|
+ // html: $editorHtml.html(),
|
|
|
+ // javascript: $editorJs.html()
|
|
|
+ // };
|
|
|
+ // editorStorage.init(exampleSlug, sources);
|
|
|
+ // })
|
|
|
+ // .then(() => {
|
|
|
+ // var item = _.find(exampleList, { slug: exampleSlug });
|
|
|
+ // // console.log(item.test ? 'test' : 'no test');
|
|
|
+ // // loadJS('exemples/' + item.slug + '/test.js', function() {
|
|
|
+ // // $('#tests').show();
|
|
|
+ // // });
|
|
|
+ // });
|
|
|
+
|
|
|
+ // }
|
|
|
+
|
|
|
+
|
|
|
+ // /**
|
|
|
+ // * Build select option string
|
|
|
+ // */
|
|
|
+ // function makeFileSelectOption(item) {
|
|
|
+ // return '<option value="' + item.slug + '">' +
|
|
|
+ // item.title +
|
|
|
+ // '</option>'
|
|
|
+ // }
|
|
|
+
|
|
|
+
|
|
|
+ // /**
|
|
|
+ // * Populate file selector from JSON list content
|
|
|
+ // */
|
|
|
+ // function resetFileSelect(exampleList) {
|
|
|
+ // $fileSelect.html(
|
|
|
+ // '<option value="-">—</option>' +
|
|
|
+ // exampleList.map(makeFileSelectOption)
|
|
|
+ // );
|
|
|
+ // }
|
|
|
+
|
|
|
+ // function loadExampleList() {
|
|
|
+ // rp.get('/list/jquery', 'json')
|
|
|
+ // .then(function(_exampleList) {
|
|
|
+ // exampleList = _exampleList;
|
|
|
+ // var restoredDraft;
|
|
|
+ // resetFileSelect(exampleList);
|
|
|
+ // if(currentHash) {
|
|
|
+ // $fileSelect.val(currentHash);
|
|
|
+ // var item = _.find(exampleList, { slug: currentHash });
|
|
|
+ // if( ! item) {
|
|
|
+ // return;
|
|
|
+ // }
|
|
|
+ // restoredDraft = editorStorage.restore(item.slug);
|
|
|
+ // if(! restoredDraft) {
|
|
|
+ // loadExample(item.slug);
|
|
|
+ // }
|
|
|
+ // else {
|
|
|
+ // console.log('restore', item.slug, restoredDraft.sources);
|
|
|
+ // $editorHtml.html(restoredDraft.sources.html);
|
|
|
+ // $editorCss.html(restoredDraft.sources.css);
|
|
|
+ // $editorJs.html(restoredDraft.sources.javascript);
|
|
|
+ // $('iframe.panel-right')
|
|
|
+ // .prop('src', '/examples/' + item.slug)
|
|
|
+
|
|
|
+ // // loadJS('exemples/' + item.slug + '/script.js');
|
|
|
+ // // if(item.test) {
|
|
|
+ // // loadJS('exemples/' + item.slug + '/test.js', function() {
|
|
|
+ // // $('#tests').show();
|
|
|
+ // // });
|
|
|
+ // // }
|
|
|
+ // setActiveTab('html');
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+
|
|
|
+ // function notify(type, text) {
|
|
|
+ // $notification
|
|
|
+ // .addClass(type)
|
|
|
+ // .addClass('active');
|
|
|
+ // $notification.html(text);
|
|
|
+ // setTimeout(function() {
|
|
|
+ // $notification.removeClass('active');
|
|
|
+ // }, 2000);
|
|
|
+ // setTimeout(function() {
|
|
|
+ // $notification.removeClass(type);
|
|
|
+ // }, 3000);
|
|
|
+ // }
|
|
|
+
|
|
|
+ // function toggleEditor() {
|
|
|
+ // $addExampleBtn.toggle();
|
|
|
+ // $selectorNav.toggle();
|
|
|
+ // $exampleForm.toggle();
|
|
|
+ // }
|
|
|
+
|
|
|
+
|
|
|
+ // /**
|
|
|
+ // * Save new example
|
|
|
+ // */
|
|
|
+ // function saveExample(e) {
|
|
|
+ // e.preventDefault();
|
|
|
+ // var title = $(this).find('input[name="title"]').val();
|
|
|
+ // rp.post('/examples', { title: title })
|
|
|
+ // .then(function(newExample) {
|
|
|
+ // clearAndCloseEditor();
|
|
|
+ // $fileSelect.append(makeFileSelectOption(newExample));
|
|
|
+ // $fileSelect.val(newExample.slug);
|
|
|
+ // notify('success', "Exemple créé !");
|
|
|
+ // })
|
|
|
+ // .catch(errText => notify('error', 'Erreur: ' + errText));
|
|
|
+ // }
|
|
|
+
|
|
|
+ // function clearAndCloseEditor() {
|
|
|
+ // $exampleForm.find('input').val('');
|
|
|
+ // toggleEditor();
|
|
|
+ // }
|
|
|
+
|
|
|
+ // function revertEditor() {
|
|
|
+ // editorStorage.reset();
|
|
|
+ // location.reload();
|
|
|
+ // }
|
|
|
+
|
|
|
+ // function saveChanges() {
|
|
|
+ // var payload = editorStorage.getSources();
|
|
|
+ // rp.put('/examples/' + currentHash, payload)
|
|
|
+ // .then(function(newExample) {
|
|
|
+ // notify('success', "Exemple sauvegardé !");
|
|
|
+ // loadExample(currentHash);
|
|
|
+ // })
|
|
|
+ // .catch(function(err) {
|
|
|
+ // notify('error', 'Erreur: ' + jqXHR.responseText);
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+
|
|
|
+ // setCurrentHash();
|
|
|
+
|
|
|
+ // $fileSelect.change(function() {
|
|
|
+ // loadExample($(this).val());
|
|
|
+ // });
|
|
|
+ // $addExampleBtn.click(toggleEditor);
|
|
|
+ // $exampleCancel.click(clearAndCloseEditor);
|
|
|
+ // $saveChanges.click(saveChanges);
|
|
|
+ // $exampleForm.submit(saveExample);
|
|
|
+ // $revertEditor.click(revertEditor);
|
|
|
+ // $.get('/menu', menu => $('#site-menu').html(menu), 'html');
|
|
|
+ // loadExampleList();
|
|
|
});
|
