2e:null 2f:["$","title",null,{"children":"Google Drive Embed in Observable | Alex Garcia | Observable"}] 34:T444,md` ## API Reference ### gDriveFile \`docs\`, \`sheets\`, \`slides\`, and \`pdf\` are provided as convenience functions: parameters are forwared to \`gDriveFile\` with appropriate \`type\` set. |Param|Description|default|Values| |-|-|-|-| |id|Google id for the file (see above)|none|\`1hr6CyVAciS2mRQSphyDe4EW6nmkrVE_Rjn6_XzAwsY8\` |w|Width of the iframe|\`width\`|integer |h|Height of the iframe|500|integer |domain|Domain the file appears in|none|'ucsd.edu', 'salesforce.com', etc. |type|Type of document, for special type of rendering|none|'sheets', 'docs','slides','pdf'
### gDriveFolder \`folder\` is given as a conveniece function - same as calling gDriveFolder directly, but easier to type and remember. |Param|Description|default|Values| |-|-|-|-| |id|Google id for the file (see above)|none|\`1hr6CyVAciS2mRQSphyDe4EW6nmkrVE_Rjn6_XzAwsY8\` |w|Width of the iframe|\`width\`|integer |h|Height of the iframe|500|integer |domain|Domain the file appears in|none|'ucsd.edu', 'salesforce.com', etc. |type|How to view contents of the folder|\`'list'\`|\`list\` or \`grid\`, `35:[] 32:{"id":"9888957f671cdb9f","slug":"google-drive","title":"Google Drive Embed in Observable","thumbnail":"c48af50bbd9fdf2110c419b2aaf62be48c027c24da67c2b68ef1a1ba33d4d573","access_level":"public","create_time":"$D2018-06-18T04:41:46.113Z","update_time":"$D2018-06-24T18:40:42.492Z","view_time":null,"first_public_time":"$D2018-06-24T18:40:21.924Z","has_unpublished_edits":null,"fork":false,"stars":25,"starred":false,"owner":{"type":"team","id":"512cbe7209990c30","login":"asg017","name":"Alex Garcia","avatar_url":"https://avatars-next.observableusercontent.com/fa4015f63c3a56af76b90247b0b0f8a98019b671f135157d746d3924eda27c07","tier":"starter_2024"},"version":273,"publish_version":273,"role":null,"authored":false,"authors":[{"type":"individual","id":"113fc3dc69e1f893","login":"asg017","name":"Alex Garcia","avatar_url":"https://avatars-next.observableusercontent.com/fa4015f63c3a56af76b90247b0b0f8a98019b671f135157d746d3924eda27c07","tier":null}],"members":[{"type":"individual","id":"113fc3dc69e1f893","login":"asg017","name":"Alex Garcia","avatar_url":"https://avatars-next.observableusercontent.com/fa4015f63c3a56af76b90247b0b0f8a98019b671f135157d746d3924eda27c07","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":18,"collection":{"id":"87582e51087bae06","slug":"utilities","title":"Toolbox","owner":{"id":"512cbe7209990c30","login":"asg017","name":"Alex Garcia"}},"type":"notebook","body":{"title":"Google Drive Embed in Observable","cells":[{"id":0,"value":"md`# Google Drive Embed in Observable`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"md`Viewers for Google Drive files and folders on Observables`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"md`\n![Thumnail containing google drive logos](https://gist.githubusercontent.com/asg017/39c218cfb5dcbcd3e1bee8a9cf7cadef/raw/50f908a5bb6a2f29bb5dbdcc9327ccf4121dc381/google-drive-thumbnail.png)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"md`\n## Usage\nAll found examples found in [this drive folder](https://drive.google.com/drive/u/0/folders/1YZGlgoUjJFJk-1NmWdsqU6vecYmqFk7p)\n\\`\\`\\` javascript\nimport {docs,sheets,slides,pdf,folder} from '@asg017/google-drive'\n\\`\\`\\`\nEven better, add it to your [toolbox!](https://beta.observablehq.com/@asg017/toolbox)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"examples = html`\n

Examples

\n
\n

\n\n

Slides

\n ${slides({id:'1z2uxddCl6dc7f4uEYw4APO_0kL93lxoC2RaABU0tM0U',w:width/2,h:300})}\n

\n\n

Sheets

\n ${sheets({id:'1u9RVx_rclqazlqFmxnKZPEWhoUuA4gItfBFjomE4uaM', w:width/2,h:300})}\n

\n\n

Docs

\n ${docs({id:'1KYGjtZOLgP_rPQxGysjrhBwuQock7qT1fXIVsbdjWI4', w:width/2,h:300})}\n

\n\n

PDF

\n ${pdf({id:'10-26OdEGsPlqcAgzX-21yPchtv8uvC-v', w:width/2,h:300})}\n

\n\n

Folder (List)

\n ${folder({id:'1YZGlgoUjJFJk-1NmWdsqU6vecYmqFk7p', type:'list', w:width/2, h:350})}\n

Folder (Grid)

\n ${folder({id:'1YZGlgoUjJFJk-1NmWdsqU6vecYmqFk7p', type:'grid', w:width/2, h:350})}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"md`\n## Why?\n\nSometimes, you need to share a quick file in an Observable notebook - maybe it's a simple PDF of homework solutions or \na live spreadsheet of game results. A link doesn't show anything and API's are a pain. These simple functions will get you going in no time!\n\n### Advantages\n- Privacy and security is handled by google drive sharing settings \n- Easier hosting and managing files\n\n### Disadvantages\n- Forms, Drawings not supported.\n- iFrame API may change in the future\n- getting id's and info can be a struggle \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"md`## Roadmap\n\n

Ideas

\n${md`\n- Forms and Drawing need support\n- Add more params for sheets and slides\n- Given full link, extract id\n`}\n

In Progress

\n${md`\n- Documentation\n- More domain examples\n- Google sheets iframe api has params that aren't exposed here\n- file's \\`type\\` does nothing\n`}\n

Bugs

\n${md`\n- None found (yet)\n`}\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"md`## Definition`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"/*\n id - id of the google drive file - get from the link of the file, e.g. \"1YZGlgoUjJFJk-1NmWdsqU6vecYmqFk7p\"\n w - width of the ifram - default width value in observable\n h - height of the iframe - default 500\n domain - domain that the folder exists in (e.g. \"ucsd.edu\") \n type - not used as of now\n*/\ngDriveFile = (params) => {\n if (typeof(params)==='string') {\n params = {id:params}\n }\n let {id='', w=width, h=500, domain='', type='list'} = params;\n\n return html`\n\n` \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"/*\n id - id of the google drive folder - get from the link of the folder, e.g. \"1YZGlgoUjJFJk-1NmWdsqU6vecYmqFk7p\"\n w - width of the ifram - default width value in observable\n h - height of the iframe - default 500\n domain - domain that the folder exists in (e.g. \"ucsd.edu\") \n type - 'list' or 'grid', default 'grid'\n*/\n\ngDriveFolder = (params={}) => {\n if (typeof(params)==='string') {\n params = {id:params}\n }\n let {id='', w=width, h=500, domain='', type='list'} = params;\n return html`\n\n `\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"// Wrapper/convenience, delegates to gDriveFile\nsheets = (params) => {\n if (typeof(params)==='string') {\n params = {id:params}\n }\n return gDriveFile({...params, type:'sheets'})\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"// Wrapper/convenience, delegates to gDriveFile\nslides = (params) => {\n if (typeof(params)==='string') {\n params = {id:params}\n }\n return gDriveFile({...params, type:'slides'})\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"// Wrapper/convenience, delegates to gDriveFile\ndocs = (params) => {\n if (typeof(params)==='string') {\n params = {id:params}\n }\n return gDriveFile({...params, type:'docs'})\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"// Wrapper/convenience, delegates to gDriveFile\npdf = (params) => {\n if (typeof(params)==='string') {\n params = {id:params}\n }\n return gDriveFile({...params, type:'pdf'})\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"folder = (params) => gDriveFolder(params)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"html2canvas = require('https://bundle.run/html2canvas@1.0.0-alpha.12')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"import {signOff} from '@asg017/toolbox'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"signOff()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"