{"id":32263293,"url":"https://github.com/barraq/deck.ext.js","last_synced_at":"2026-02-22T17:06:24.517Z","repository":{"id":1790707,"uuid":"2714620","full_name":"barraq/deck.ext.js","owner":"barraq","description":"Provide extensions, themes and use cases for deck.js","archived":false,"fork":false,"pushed_at":"2015-06-08T08:35:20.000Z","size":451,"stargazers_count":17,"open_issues_count":2,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2026-01-23T18:08:31.771Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"gorakhargosh/watchdog","license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/barraq.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2011-11-05T09:54:47.000Z","updated_at":"2017-05-26T01:43:43.000Z","dependencies_parsed_at":"2022-08-20T04:50:35.321Z","dependency_job_id":null,"html_url":"https://github.com/barraq/deck.ext.js","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/barraq/deck.ext.js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/barraq%2Fdeck.ext.js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/barraq%2Fdeck.ext.js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/barraq%2Fdeck.ext.js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/barraq%2Fdeck.ext.js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/barraq","download_url":"https://codeload.github.com/barraq/deck.ext.js/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/barraq%2Fdeck.ext.js/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29719516,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-22T15:10:41.462Z","status":"ssl_error","status_checked_at":"2026-02-22T15:10:04.636Z","response_time":110,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-10-22T20:53:19.715Z","updated_at":"2026-02-22T17:06:24.508Z","avatar_url":"https://github.com/barraq.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"#deck.ext.js\n\nDeck.ext.js provides a set of extensions, themes and use cases for the deck.js framework.\nDeck.js is a JavaScript library for building modern HTML presentations which is flexible enough to let advanced CSS and JavaScript authors craft highly customized decks, but also provides templates and themes for the HTML novice to build a standard slideshow.\n\nCurrently Deck.ext.js provides the following extensions:\n\n- deck.toc.js, provides a support for TOC,\n- deck.asvg.js, provides a support for including and animating SVG images,\n- deck.clone.js, provides a support for cloning a deck presentation to another window,\n- deck.notes.js, provides a support for adding and viewing speaker notes.\n- deck.animator.js, provides a support for animating HTML elements.\n\nCurrently Deck.ext.js provides the following themes:\n\n- beamer, aims to provides a team similar to the Latex beamer\n\nI'll soon provide an illustration on how to use deck.toc.js together with the beamer themes. \n\n##deck.toc.js extension\n\nThis extension provides the support for TOC within the deck.js framework.\n\n### General Idea\n\nThe `deck.toc.js` extension uses the H* tags to build the TOC.\n\n- H1 represents the title of the presentation\n- H2 corresponds to a section\n- H3 corresponds to a subsection\n- H4 corresponds to a subsubsection\n\nThe TOC is automatically constructed when `deck.init` is called, and pressing\non `t` will toggle the TOC panel.\n\nElements in the TOC panel are clickable and thus it provides another way\nto navigate easily in the slides.\n\n### Example\n\nThe following:\n\n        \u003csection class=\"slide\" id=\"title-slide\"\u003e\n            \u003ch1\u003eThe Presentation Title\u003c/h1\u003e\n        \u003c/section\u003e\n\n        \u003csection class=\"slide\"\u003e\n            \u003ch2\u003eSection 1\u003c/h2\u003e\n            \u003cp\u003eIf you want to learn about making your own themes, extending deck.js, and more, check out the\u0026nbsp;\u003ca href=\"../docs/\"\u003edocumentation\u003c/a\u003e.\u003c/p\u003e\n        \u003c/section\u003e\n\n        \u003csection class=\"slide\"\u003e\n            \u003ch3\u003eSection 1.1\u003c/h3\u003e\n            \u003cp\u003eIf you want to learn about making your own themes, extending deck.js, and more, check out the\u0026nbsp;\u003ca href=\"../docs/\"\u003edocumentation\u003c/a\u003e.\u003c/p\u003e\n        \u003c/section\u003e\n\n        \u003csection class=\"slide\"\u003e\n            \u003ch3\u003eSection 1.2\u003c/h3\u003e\n            \u003cp\u003eIf you want to learn about making your own themes, extending deck.js, and more, check out the\u0026nbsp;\u003ca href=\"../docs/\"\u003edocumentation\u003c/a\u003e.\u003c/p\u003e\n        \u003c/section\u003e\n\n        \u003csection class=\"slide\"\u003e\n            \u003ch2\u003eSection 2\u003c/h2\u003e\n            \u003cp\u003eIf you want to learn about making your own themes, extending deck.js, and more, check out the\u0026nbsp;\u003ca href=\"../docs/\"\u003edocumentation\u003c/a\u003e.\u003c/p\u003e\n        \u003c/section\u003e\n\n        \u003csection class=\"slide\"\u003e\n            \u003ch2\u003eSection 3\u003c/h2\u003e\n            \u003cp\u003eIf you want to learn about making your own themes, extending deck.js, and more, check out the\u0026nbsp;\u003ca href=\"../docs/\"\u003edocumentation\u003c/a\u003e.\u003c/p\u003e\n        \u003c/section\u003e\n\nwill build the following TOC:\n\n- The Presentation Title\n    - Section 1\n        - Section 1.1\n        - Section 1.2\n    - Section 2\n    - Section 3\n\n##deck.asvg.js extension\n\nThe `deck.asvg.js` extension (for Animated SVG) allows users to add animated schema into their presentation.\n\nTO DETAIL THIS SECTION\n\n##deck.clone.js extension\n\n**ONLY TESTED WITH CHROMIUM and CHROME browser**\n\nThe `deck.clone.js` extension allows users to clone a deck presentation so that a clone of this presentation appears in a separate popup window.\nThe `deck.change` events of the master presentation are propagated to the cloned windows, so that when you navigate between the slides in the master window the navigation will operate nicely in the all the cloned windows. \nThe advantage of cloning a deck presentation is that, on the master window you have the slides displayed while in the cloned window you have the speaker notes displayed.\nThe speaker notes can be displayed by using the `deck.notes.js` extension.\n\nTo clone a deck presentation just press `c`.\n\n##deck.notes.js extension\n\nThe `deck.notes.js` extensions allows users to toggle speaker notes display by pressing the `n` key.\nTo add a note to a slide just add a simple div with a .notes class like below:\n\n\n### Example\n\n        \u003csection class=\"slide\" id=\"title-slide\"\u003e\n            \u003ch1\u003eThe Presentation Title\u003c/h1\u003e\n        \u003c/section\u003e\n\n        \u003csection class=\"slide\"\u003e\n            \u003ch2\u003eSection 1\u003c/h2\u003e\n            \u003cp\u003eIf you want to learn about making your own themes, extending deck.js, and more, check out the\u0026nbsp;\u003ca href=\"../docs/\"\u003edocumentation\u003c/a\u003e.\u003c/p\u003e\n            \u003cdiv class=\"notes\"\u003e\n            This slide has speaker notes.\n            \u003c/div\u003e\n        \u003c/section\u003e\n\n        \u003csection class=\"slide\"\u003e\n            \u003ch3\u003eSection 1.1\u003c/h3\u003e\n            \u003cp\u003eIf you want to learn about making your own themes, extending deck.js, and more, check out the\u0026nbsp;\u003ca href=\"../docs/\"\u003edocumentation\u003c/a\u003e.\u003c/p\u003e\n        \u003c/section\u003e\n\n        \u003csection class=\"slide\"\u003e\n            \u003ch3\u003eSection 1.2\u003c/h3\u003e\n            \u003cp\u003eIf you want to learn about making your own themes, extending deck.js, and more, check out the\u0026nbsp;\u003ca href=\"../docs/\"\u003edocumentation\u003c/a\u003e.\u003c/p\u003e\n            \u003cdiv class=\"notes\"\u003e\n            This slide has speaker notes too.\n            \u003c/div\u003e\n        \u003c/section\u003e\n\nThis extension is better used together with the `deck.clone.js` extension.\n\n##deck.animator.js extension\n\nThe `deck.animator.js` extension allows users animate HTML elements in their slides.\nThere is at most an animator for each slide.\n\nThe slide is linked to its animator thanks to the value of its custom attribute `data-dahu-animator`.\nThe JSON description of an animation follows the following format: \n\n        {\n          \"target\": A CSS selector for the slides in which the animation occurs,\n          \"actions\": [\n            {\n              \"id\": A chain to identify the action,\n              \"type\": either \"move\", \"appear\" or \"disappear\",\n              \"target\": The id of the HTML element to which the action applies,\n              \"duration\": The duration of the action in ms,\n              \"trX\": (\"move\" type only) the value in pixels of the abs translation,\n              \"trY\": (\"move\" type only) the value in pixels of the ord translation\n            },\n            ...\n          ]\n        }\n\nThe following example makes the text disappear, then move and reappear as it moves:\n\n\n### Example\n\n        \u003csection class=\"slide\" id=\"containing_slide\" data-dahu-animator=\"animDescription\"\u003e\n            \u003cdiv id=\"moving_text\"\u003e\n                This text is animated\n            \u003c/div\u003e\n            \u003cscript type=\"text/javascript\"\u003e\n                var animDescription = {\n                    \"target\": \"#containing_slide\",\n                    \"actions\": [\n                        {\n                            \"id\": \"action1\",\n                            \"type\": \"disappear\",\n                            \"target\": \"#moving_text\",\n                            \"trigger\": \"onChange\",\n                            \"duration\": 1000\n                        },\n                        {  \n                            \"id\": \"action2,\n                            \"type\": \"move\",\n                            \"target\": \"#moving_text\",\n                            \"trigger\": \"afterPrevious\",\n                            \"trX\": 150,\n                            \"trY\": 100,\n                            \"duration\": 2000\n                        },\n                        {\n                            \"id\": \"action3\",\n                            \"type\": \"appear\",\n                            \"target\": \"#moving_text\",\n                            \"trigger\": \"withPrevious\",\n                            \"duration\": 1000\n                        }\n                    ]\n                };\n            \u003c/script\u003e\n        \u003c/section\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbarraq%2Fdeck.ext.js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbarraq%2Fdeck.ext.js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbarraq%2Fdeck.ext.js/lists"}