44:["$","title",null,{"children":"004 - DMT Gist Tool | PotOfCoffee2Go | Observable"}] 4c:T4cc,Revisions = { class ReleaseLog { constructor() { Object.assign(this, { 'Note': 'Now with examples of Markdown, JSON, and source code Gists', 'Stability':'1 - Experimental', 'Todo': [], 'Maintence':{ '2018-12-07': [ `Weeks worth of rewrite, refactor, upgrading`, ], '2018-10-18': [ `Added fetchCode(gistid, filename) function`, `Changed display of JSON and Sample class`, ], '2018-10-14': [ `Notebook settings (nbs) are in thier own notebook`, ], '2018-10-13': [ `Massive changes - ongoing changes for dev to alpha release`, ], '2018-10-11': [ `Bug - Missing feed resolves - using Promise.race on watches to get all`, `Renamed classes to Toolkit and Tool`, ], '2018-10-09': [ `Bug - renamed a field incorrectly`, `Refactor of Tool classes instantiation - bump release`, `Added hint to see the example display longer`, `Added JSON Gist example`, `Changed Example button text`, `Commented out where toolbox.feed.href was updated, going to leave feed alone for now`, `Initial publish`, ], } })}} return new ReleaseLog; } 4d:T1268,{ // Inspired by https://github.com/morgan3d/misc/blob/master/jsmenu var bgcolor = '#FFF' if (document.body.classList.contains("observablehq--dark")) {bgcolor = '#333';} yield html `

Notebook

Examples GistTool ToolKit Views Modules Settings

Examples

GitHub Authentication Basic Fetch Buttons Display Owner Gists

GistTool

Documentation Functions Promises Events Code

Modules

Moment Remarkable Prismjs Markdeep Octocat spinner

` if (HTMLCollection.prototype.forEach === undefined) {HTMLCollection.prototype.forEach = [].forEach } function closeAllMenus() { document.getElementsByClassName('activeMenu').forEach( function (node) {node.classList.remove('activeMenu')} )} function showMenu(e) { closeAllMenus(); this.classList.add('activeMenu'); e.stopPropagation(); // Move the dropdown under the label clicked document.getElementsByClassName('menuDropDown').forEach(menu => { menu.style.marginLeft = (e.target.offsetLeft - 40)+'px';}) } (function() { function on(e,f){window.addEventListener(e,f)} on('click', closeAllMenus, true) on('keydown', function (event) { (event.key === "Escape") && closeAllMenus() }, true) })(); document.getElementsByClassName('menuLabel').forEach(function(node) {node.onclick = showMenu}) }4e:T697,class Gist extends dmt.Tool { static profile() { return { package: ['v0.3.0', `Gist - Implements GitHub Gist API`], declare: ['response', 'list', 'data'], methods: ['async fetchlist(ownername)', 'async fetchGist(gistid)', 'async fetchCode(gistid, filename)'], resolve: [] }} constructor(settings, toolkit) { super(settings, toolkit); this._list = []; this._data = {ownername: '', gistid: '', gist: {}}; if (settings._gist) {Object.assign(this, settings._gist)} } // ---- // Methods async fetchList(ownername) { this.response = await gists.list(ownername); this.list = this.response.body; this._data = {ownername: this.list[0].owner.login, gistid: '', gist: {}}} async fetchGist(gistid) { gistid = gistid || this.data.gistid || undefined; if (!gistid) {return 'GistID is required to fetch a gist'} let response = await gists.get(gistid); let commentsRsp = await gists.listComments(gistid); response.body.comments = commentsRsp.body; this.response = response; this.data = Object.assign(this.data, { ownername: response.body.owner.login, gistid: gistid, gist: response.body}); } async fetchCode(gistid, filename) { gistid = gistid || this.data.gistid || undefined; filename = filename || this.data.filename || undefined; this.data.gistid = gistid; this.data.filename = filename; if (!(gistid && filename)) {return 'GistID and gist Filename is required to fetch code'} this.response = await gists.get(gistid); // Resolve gist.watch() return Function('return (' + this.response.body.files[this.filename].content + ')')(); } }4f:T64a,function GitHubAuthForm() { const githubUser = html`` const githubPassword = html`` githubUser.value = localStorage.getItem('githubUser'); githubPassword.value = localStorage.getItem('githubPassword'); const buttons = [] buttons[0] = html``; buttons[0].onclick = async () => { mutable BtnsResult = html `${tinyOcto()}`; const filename = 'node-red http codes.md'; await tkit.gist.fetchGist(gistid); mutable BtnsResult = md `${tkit.gist.data.gist.files[filename].content}`; } buttons[1] = html``; buttons[1].onclick = async () => { mutable BtnsResult = html `${tinyOcto()}`; const filename = 'test-jsonplaceholders-users.json'; await tkit.gist.fetchGist(gistid); mutable BtnsResult = {[filename]: JSON.parse(tkit.gist.data.gist.files[filename].content)}; } buttons[2] = html``; buttons[2].onclick = async () => { mutable BtnsResult = html `${tinyOcto()}`; const filename = 'GistBtns.js'; await tkit.gist.fetchGist(gistid); let element = '

' + 
        tkit.gist.data.gist.files[filename].content + 
        '

'; mutable BtnsResult = html `${element}`; await Promises.delay(1); // yield to Observable so it resolves mutable BtnsResult Prism.highlightAll() } buttons[3] = html``; buttons[3].onclick = async () => { mutable BtnsResult = html `${tinyOcto()}`; const filename = 'sample class.js'; await tkit.gist.fetchGist(gistid); mutable BtnsResult = Function('return (' + tkit.gist.data.gist.files[filename].content + ')')(); } buttons[4] = html``; buttons[4].onclick = () => { mutable BtnsResult = ''; } return md`

${buttons[0]} ${buttons[1]} ${buttons[2]} ${buttons[3]} ${buttons[4]}

`; }51:T239d,function GistsForm() { // Is a lotta code - but is a busy form // The getOwnerInfo() and getGistInfo() functions get the Owner/Gist information. const lookup = new PrismLookup; // Language lookup base don file extension const statusFetch = `${Spinner.octocat}`; // Spinner when fetching Gist info let gistTbl = ''; // Table of owner gists for display let commentsTbl = ''; // Table of gist comments for display // Fields in the form const ownername = html`` const gistid = html`` const gistidview = html`` const publicview = html`` const commentsview = html`` const filename = html`` const description = html`` const content = html`` const filebox = html `` // Buttons const ownerBtn = html`