This window should close automatically. If it doesn't, go ahead and close it.
\n \n \n\n\n" }, { "path": "authorize.html", "content": "\n\n \n \n \n \n \n\n To make full use of our Power-Up, we're going to need you to authorize us to access your Trello account!\n
\n \n\n \n \n\n" }, { "path": "board-bar.html", "content": "\n \n \n \n \n \n \nThis is the HTML connector for the Power-Up. It will be loaded into a hidden iframe when your Power-Up is enabled.
\nIf you're looking for the manifest file, you should head over here.
\nNot sure what is going on? Head on over to the README.
\n\n \n \n \n\n" }, { "path": "js/board-bar.js", "content": "/* global TrelloPowerUp */\n\nvar t = TrelloPowerUp.iframe();\n\n// want to know when you are being closed?\nwindow.addEventListener('unload', function(e) {\n // Our board bar is being closed, clean up if we need to\n});\n\nt.render(function(){\n // this function we be called once on initial load\n // and then called each time something changes that\n // you might want to react to, such as new data being\n // stored with t.set()\n});\n" }, { "path": "js/client.js", "content": "/* global TrelloPowerUp */\n\n// we can access Bluebird Promises as follows\nvar Promise = TrelloPowerUp.Promise;\n\n/*\n\nTrello Data Access\n\nThe following methods show all allowed fields, you only need to include those you want.\nThey all return promises that resolve to an object with the requested fields.\n\nGet information about the current board\nt.board('id', 'name', 'url', 'shortLink', 'members')\n\nGet information about the current list (only available when a specific list is in context)\nSo for example available inside 'attachment-sections' or 'card-badges' but not 'show-settings' or 'board-buttons'\nt.list('id', 'name', 'cards')\n\nGet information about all open lists on the current board\nt.lists('id', 'name', 'cards')\n\nGet information about the current card (only available when a specific card is in context)\nSo for example available inside 'attachment-sections' or 'card-badges' but not 'show-settings' or 'board-buttons'\nt.card('id', 'name', 'desc', 'due', 'closed', 'cover', 'attachments', 'members', 'labels', 'url', 'shortLink', 'idList')\n\nGet information about all open cards on the current board\nt.cards('id', 'name', 'desc', 'due', 'closed', 'cover', 'attachments', 'members', 'labels', 'url', 'shortLink', 'idList')\n\nGet information about the current active Trello member\nt.member('id', 'fullName', 'username')\n\nFor access to the rest of Trello's data, you'll need to use the RESTful API. This will require you to ask the\nuser to authorize your Power-Up to access Trello on their behalf. We've included an example of how to\ndo this in the `š Authorization Capabilities š` section at the bottom.\n\n*/\n\n/*\n\nStoring/Retrieving Your Own Data\n\nYour Power-Up is afforded 4096 chars of space per scope/visibility\nThe following methods return Promises.\n\nStoring data follows the format: t.set('scope', 'visibility', 'key', 'value')\nWith the scopes, you can only store data at the 'card' scope when a card is in scope\nSo for example in the context of 'card-badges' or 'attachment-sections', but not 'board-badges' or 'show-settings'\nAlso keep in mind storing at the 'organization' scope will only work if the active user is a member of the team\n\nInformation that is private to the current user, such as tokens should be stored using 'private' at the 'member' scope\n\nt.set('organization', 'private', 'key', 'value');\nt.set('board', 'private', 'key', 'value');\nt.set('card', 'private', 'key', 'value');\nt.set('member', 'private', 'key', 'value');\n\nInformation that should be available to all users of the Power-Up should be stored as 'shared'\n\nt.set('organization', 'shared', 'key', 'value');\nt.set('board', 'shared', 'key', 'value');\nt.set('card', 'shared', 'key', 'value');\nt.set('member', 'shared', 'key', 'value');\n\nIf you want to set multiple keys at once you can do that like so\n\nt.set('board', 'shared', { key: value, extra: extraValue });\n\nReading back your data is as simple as\n\nt.get('organization', 'shared', 'key');\n\nOr want all in scope data at once?\n\nt.getAll();\n\n*/\n\nvar GLITCH_ICON = './images/glitch.svg';\nvar WHITE_ICON = './images/icon-white.svg';\nvar GRAY_ICON = './images/icon-gray.svg';\n\nvar randomBadgeColor = function() {\n return ['green', 'yellow', 'red', 'none'][Math.floor(Math.random() * 4)];\n};\n\nvar getBadges = function(t){\n return t.card('name')\n .get('name')\n .then(function(cardName){\n console.log('We just loaded the card name for fun: ' + cardName);\n \n return [{\n // dynamic badges can have their function rerun after a set number\n // of seconds defined by refresh. Minimum of 10 seconds.\n dynamic: function(){\n // we could also return a Promise that resolves to this as well if we needed to do something async first\n return {\n title: 'Detail Badge', // for detail badges only\n text: 'Dynamic ' + (Math.random() * 100).toFixed(0).toString(),\n icon: GRAY_ICON, // for card front badges only\n color: randomBadgeColor(),\n refresh: 10 // in seconds\n };\n }\n }, {\n // its best to use static badges unless you need your badges to refresh\n // you can mix and match between static and dynamic\n title: 'Detail Badge', // for detail badges only\n text: 'Static',\n icon: GRAY_ICON, // for card front badges only\n color: null\n }, {\n // card detail badges (those that appear on the back of cards)\n // also support callback functions so that you can open for example\n // open a popup on click\n title: 'Popup Detail Badge', // for detail badges only\n text: 'Popup',\n icon: GRAY_ICON, // for card front badges only\n callback: function(context) { // function to run on click\n return context.popup({\n title: 'Card Detail Badge Popup',\n url: './settings.html',\n height: 184 // we can always resize later, but if we know the size in advance, its good to tell Trello\n });\n }\n }, {\n // or for simpler use cases you can also provide a url\n // when the user clicks on the card detail badge they will\n // go to a new tab at that url\n title: 'URL Detail Badge', // for detail badges only\n text: 'URL',\n icon: GRAY_ICON, // for card front badges only\n url: 'https://trello.com/home',\n target: 'Trello Landing Page' // optional target for above url\n }];\n });\n};\n\nvar boardButtonCallback = function(t){\n return t.popup({\n title: 'Popup List Example',\n items: [\n {\n text: 'Open Modal',\n callback: function(t){\n return t.modal({ \n url: './modal.html', // The URL to load for the iframe\n args: { text: 'Hello' }, // Optional args to access later with t.arg('text') on './modal.html'\n accentColor: '#F2D600', // Optional color for the modal header \n height: 500, // Initial height for iframe; not used if fullscreen is true\n fullscreen: true, // Whether the modal should stretch to take up the whole screen\n callback: () => console.log('Goodbye.'), // optional function called if user closes modal (via `X` or escape)\n title: 'Hello, Modal!', // Optional title for modal header\n // You can add up to 3 action buttons on the modal header - max 1 on the right side.\n actions: [{\n icon: GRAY_ICON,\n url: 'https://google.com', // Opens the URL passed to it.\n alt: 'Leftmost',\n position: 'left',\n }, {\n icon: GRAY_ICON,\n callback: (tr) => tr.popup({ // Callback to be called when user clicks the action button.\n title: 'Settings',\n url: 'settings.html',\n height: 164,\n }),\n alt: 'Second from left',\n position: 'left',\n }, {\n icon: GRAY_ICON,\n callback: () => console.log('š'),\n alt: 'Right side',\n position: 'right',\n }],\n })\n }\n },\n {\n text: 'Open Board Bar',\n callback: function(t){\n return t.boardBar({\n url: './board-bar.html',\n height: 200\n })\n .then(function(){\n return t.closePopup();\n });\n }\n }\n ]\n });\n};\n\nvar cardButtonCallback = function(t){\n // Trello Power-Up Popups are actually pretty powerful\n // Searching is a pretty common use case, so why reinvent the wheel\n var items = ['acad', 'arch', 'badl', 'crla', 'grca', 'yell', 'yose'].map(function(parkCode){\n var urlForCode = 'http://www.nps.gov/' + parkCode + '/';\n var nameForCode = 'š ' + parkCode.toUpperCase();\n return {\n text: nameForCode,\n url: urlForCode,\n callback: function(t){\n // In this case we want to attach that park to the card as an attachment\n // but first let's ensure that the user can write on this model\n if (t.memberCanWriteToModel('card')){\n return t.attach({ url: urlForCode, name: nameForCode })\n .then(function(){\n // once that has completed we should tidy up and close the popup\n return t.closePopup();\n });\n } else {\n console.log(\"Oh no! You don't have permission to add attachments to this card.\")\n return t.closePopup(); // We're just going to close the popup for now.\n };\n }\n };\n });\n\n // we could provide a standard iframe popup, but in this case we\n // will let Trello do the heavy lifting\n return t.popup({\n title: 'Popup Search Example',\n items: items, // Trello will search client-side based on the text property of the items\n search: {\n count: 5, // How many items to display at a time\n placeholder: 'Search National Parks',\n empty: 'No parks found'\n }\n });\n \n // in the above case we let Trello do the searching client side\n // but what if we don't have all the information up front?\n // no worries, instead of giving Trello an array of `items` you can give it a function instead\n /*\n return t.popup({\n title: 'Popup Async Search',\n items: function(t, options) {\n // use options.search which is the search text entered so far\n // and return a Promise that resolves to an array of items\n // similar to the items you provided in the client side version above\n },\n search: {\n placeholder: 'Start typing your search',\n empty: 'Huh, nothing there',\n searching: 'Scouring the internet...'\n }\n });\n */\n};\n\n// We need to call initialize to get all of our capability handles set up and registered with Trello\nTrelloPowerUp.initialize({\n // NOTE about asynchronous responses\n // If you need to make an asynchronous request or action before you can reply to Trello\n // you can return a Promise (bluebird promises are included at TrelloPowerUp.Promise)\n // The Promise should resolve to the object type that is expected to be returned\n 'attachment-sections': function(t, options){\n // options.entries is a list of the attachments for this card\n // you can look through them and 'claim' any that you want to\n // include in your section.\n\n // we will just claim urls for Yellowstone\n var claimed = options.entries.filter(function(attachment){\n return attachment.url.indexOf('http://www.nps.gov/yell/') === 0;\n });\n\n // you can have more than one attachment section on a card\n // you can group items together into one section, have a section\n // per attachment, or anything in between.\n if(claimed && claimed.length > 0){\n // if the title for your section requires a network call or other\n // potentially length operation you can provide a function for the title\n // that returns the section title. If you do so, provide a unique id for\n // your section\n return [{\n id: 'Yellowstone', // optional if you aren't using a function for the title\n claimed: claimed,\n icon: GLITCH_ICON,\n title: 'Example Attachment Section: Yellowstone',\n content: {\n type: 'iframe',\n url: t.signUrl('./section.html', { arg: 'you can pass your section args here' }),\n height: 230\n }\n }];\n } else {\n return [];\n }\n },\n 'attachment-thumbnail': function(t, options){\n // options.url has the url of the attachment for us\n // return an object (or a Promise that resolves to it) with some or all of these properties:\n // url, title, image, modified (Date), created (Date), createdBy, modifiedBy\n \n // You should use this if you have useful information about an attached URL but it\n // doesn't warrant pulling it out into a section via the attachment-sections capability\n // for example if you just want to show a preview image and give it a better name\n // then attachment-thumbnail is the best option\n return {\n url: options.url,\n title: 'š ' + options.url + ' š',\n image: {\n url: GLITCH_ICON,\n logo: true // false if you are using a thumbnail of the content\n },\n };\n \n // if we don't actually have any valuable information about the url\n // we can let Trello know like so:\n // throw t.NotHandled();\n },\n 'board-buttons': function(t, options){\n return [{\n // we can either provide a button that has a callback function\n // that callback function should probably open a popup, overlay, or boardBar\n icon: WHITE_ICON,\n text: 'Popup',\n callback: boardButtonCallback\n }, {\n // or we can also have a button that is just a simple url\n // clicking it will open a new tab at the provided url\n icon: WHITE_ICON,\n text: 'URL',\n url: 'https://trello.com/inspiration',\n target: 'Inspiring Boards' // optional target for above url\n }];\n },\n 'card-badges': function(t, options){\n return getBadges(t);\n },\n 'card-buttons': function(t, options) {\n return [{\n // usually you will provide a callback function to be run on button click\n // we recommend that you use a popup on click generally\n icon: GRAY_ICON, // don't use a colored icon here\n text: 'Open Popup',\n callback: cardButtonCallback\n }, {\n // but of course, you could also just kick off to a url if that's your thing\n icon: GRAY_ICON,\n text: 'Just a URL',\n url: 'https://developers.trello.com',\n target: 'Trello Developer Site' // optional target for above url\n }];\n },\n 'card-detail-badges': function(t, options) {\n return getBadges(t);\n },\n 'card-from-url': function(t, options) {\n // options.url has the url in question\n // if we know cool things about that url we can give Trello a name and desc\n // to use when creating a card. Trello will also automatically add that url\n // as an attachment to the created card\n // As always you can return a Promise that resolves to the card details\n \n return new Promise(function(resolve) {\n resolve({\n name: 'š» ' + options.url + ' š¤',\n desc: 'This Power-Up knows cool things about the attached url'\n });\n });\n \n // if we don't actually have any valuable information about the url\n // we can let Trello know like so:\n // throw t.NotHandled();\n },\n 'format-url': function(t, options) {\n // options.url has the url that we are being asked to format\n // in our response we can include an icon as well as the replacement text\n \n return {\n icon: GRAY_ICON, // don't use a colored icon here\n text: 'š ' + options.url + ' š' \n };\n \n // if we don't actually have any valuable information about the url\n // we can let Trello know like so:\n // throw t.NotHandled();\n },\n 'show-settings': function(t, options){\n // when a user clicks the gear icon by your Power-Up in the Power-Ups menu\n // what should Trello show. We highly recommend the popup in this case as\n // it is the least disruptive, and fits in well with the rest of Trello's UX\n return t.popup({\n title: 'Settings',\n url: './settings.html',\n height: 184 // we can always resize later, but if we know the size in advance, its good to tell Trello\n });\n },\n \n /* \n \n š Authorization Capabiltiies š\n \n The following two capabilities should be used together to determine:\n 1. whether a user is appropriately authorized\n 2. what to do when a user isn't completely authorized\n \n */\n 'authorization-status': function(t, options){\n // Return a promise that resolves to an object with a boolean property 'authorized' of true or false\n // The boolean value determines whether your Power-Up considers the user to be authorized or not.\n \n // When the value is false, Trello will show the user an \"Authorize Account\" options when\n // they click on the Power-Up's gear icon in the settings. The 'show-authorization' capability\n // below determines what should happen when the user clicks \"Authorize Account\"\n \n // For instance, if your Power-Up requires a token to be set for the member you could do the following:\n return t.get('member', 'private', 'token')\n .then(function(token){\n if(token){\n return { authorized: true };\n }\n return { authorized: false };\n });\n // You can also return the object synchronously if you know the answer synchronously.\n },\n 'show-authorization': function(t, options){\n // Returns what to do when a user clicks the 'Authorize Account' link from the Power-Up gear icon\n // which shows when 'authorization-status' returns { authorized: false }.\n \n // If we want to ask the user to authorize our Power-Up to make full use of the Trello API\n // you'll need to add your API from trello.com/app-key below:\n let trelloAPIKey = '';\n // This key will be used to generate a token that you can pass along with the API key to Trello's\n // RESTful API. Using the key/token pair, you can make requests on behalf of the authorized user.\n \n // In this case we'll open a popup to kick off the authorization flow.\n if (trelloAPIKey) {\n return t.popup({\n title: 'My Auth Popup',\n args: { apiKey: trelloAPIKey }, // Pass in API key to the iframe\n url: './authorize.html', // Check out public/authorize.html to see how to ask a user to auth\n height: 140,\n });\n } else {\n console.log(\"š Looks like you need to add your API key to the project!\");\n }\n }\n});\n\nconsole.log('Loaded by: ' + document.referrer);" }, { "path": "js/modal.js", "content": "/* global TrelloPowerUp */\n\nvar t = TrelloPowerUp.iframe();\n\n// you can access arguments passed to your iframe like so\nvar num = t.arg('rand');\n\nt.render(function(){\n // this function we be called once on initial load\n // and then called each time something changes that\n // you might want to react to, such as new data being\n // stored with t.set()\n});\n\n// Important! If you are using the overlay, you should implement\n// the following two methods to ensure that closing the overlay\n// is simple and consistent for the Trello user\n\n// close overlay if user clicks outside our content\ndocument.addEventListener('click', function(e) {\n if(e.target.tagName == 'BODY') {\n t.closeOverlay().done();\n }\n});\n\n// close overlay if user presses escape key\ndocument.addEventListener('keyup', function(e) {\n if(e.keyCode == 27) {\n t.closeOverlay().done();\n }\n});\n" }, { "path": "js/section.js", "content": "/* global TrelloPowerUp */\n\nvar t = TrelloPowerUp.iframe();\n\n// you can access arguments passed to your iframe like so\nvar arg = t.arg('arg');\n\nt.render(function(){\n // make sure your rendering logic lives here, since we will\n // recall this method as the user adds and removes attachments\n // from your section\n t.card('attachments')\n .get('attachments')\n .filter(function(attachment){\n return attachment.url.indexOf('http://www.nps.gov/yell/') == 0;\n })\n .then(function(yellowstoneAttachments){\n var urls = yellowstoneAttachments.map(function(a){ return a.url; });\n document.getElementById('urls').textContent = urls.join(', ');\n })\n .then(function(){\n return t.sizeTo('#content');\n });\n});\n" }, { "path": "js/settings.js", "content": "/* global TrelloPowerUp */\n\nvar Promise = TrelloPowerUp.Promise;\nvar t = TrelloPowerUp.iframe();\n\nvar fruitSelector = document.getElementById('fruit');\nvar vegetableSelector = document.getElementById('vegetable');\n\nt.render(function(){\n return Promise.all([\n t.get('board', 'shared', 'fruit'),\n t.get('board', 'private', 'vegetable')\n ])\n .spread(function(savedFruit, savedVegetable){\n if(savedFruit && /[a-z]+/.test(savedFruit)){\n fruitSelector.value = savedFruit;\n }\n if(savedVegetable && /[a-z]+/.test(savedVegetable)){\n vegetableSelector.value = savedVegetable;\n }\n })\n .then(function(){\n t.sizeTo('#content')\n .done();\n })\n});\n\ndocument.getElementById('save').addEventListener('click', function(){\n return t.set('board', 'private', 'vegetable', vegetableSelector.value)\n .then(function(){\n return t.set('board', 'shared', 'fruit', fruitSelector.value);\n })\n .then(function(){\n t.closePopup();\n })\n})\n" }, { "path": "modal.html", "content": "\n \n \n \n \n \n \nTips for using attachment-sections
\nClaimed attachment urls:
\nShared - Select a fruit
\n \nPrivate - Select a vegetable
\n \n \n