"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", code: "code", h1: "h1", h2: "h2", p: "p", path: "path", pre: "pre", span: "span", svg: "svg", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsxs(_components.h1, { id: "custom-controls", children: [_jsx(_components.a, { className: "heading-link", href: "#custom-controls", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Custom controls"] }), "\n", _jsx(_components.p, { children: "This plugin allows to add responsive custom controls to reveal.js which allow arbitrary positioning, layout, and behaviour of the controls." }), "\n", _jsx(_components.p, { children: _jsx(_components.a, { href: "https://rajgoel.github.io/reveal.js-demos/customcontrols-demo.html", target: "_blank", rel: "noopener noreferrer", children: "Check out the live demo" }) }), "\n", _jsxs(_components.h2, { id: "installation", children: [_jsx(_components.a, { className: "heading-link", href: "#installation", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Installation"] }), "\n", _jsxs(_components.p, { children: ["Copy the files ", _jsx(_components.code, { className: "language-auto", children: "plugin.js" }), " and ", _jsx(_components.code, { className: "language-auto", children: "style.css" }), " into the plugin folder of your reveal.js presentation, i.e. ", _jsx(_components.code, { className: "language-auto", children: "plugin/customcontrols" }), " and load the plugin as shown below."] }), "\n", _jsx(_components.pre, { className: "language-html", children: _jsxs(_components.code, { className: "language-html code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "link"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "rel" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "stylesheet", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "href" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "plugin/customcontrols/style.css", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "script"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "src" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "plugin/customcontrols/plugin.js", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token script" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "script"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token script", children: _jsx(_components.span, { className: "token language-javascript", children: "\n" }) })] }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token maybe-class-name", children: "Reveal" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "initialize" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token comment", children: "// ..." }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "plugins" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "RevealCustomControls" }), " ", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token comment", children: "// ..." }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token script", children: _jsx(_components.span, { className: "token language-javascript" }) }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: "Note, without configuration you need to add" }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsx(_components.code, { className: "language-javascript code-highlight", children: _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token operator", children: "<" }), "link rel", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"stylesheet\"" }), " href", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }) }) }), "\n", _jsxs(_components.p, { children: ["between ", _jsx(_components.code, { className: "language-auto", children: "" }), " and ", _jsx(_components.code, { className: "language-auto", children: "" }), " of your HTML file because the defaults use ", _jsx(_components.a, { href: "http://fontawesome.io/", target: "_blank", rel: "noopener noreferrer", children: "Font Awesome" }), "."] }), "\n", _jsxs(_components.h2, { id: "configuration", children: [_jsx(_components.a, { className: "heading-link", href: "#configuration", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Configuration"] }), "\n", _jsx(_components.p, { children: "The plugin can be configured by adding custom controls and changing the layout of the slide number, e.g., by:" }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token maybe-class-name", children: "Reveal" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "initialize" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["\t", _jsx(_components.span, { className: "token comment", children: "// ..." }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "customcontrols" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["\t\t", _jsx(_components.span, { className: "token literal-property property", children: "controls" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["\t\t\t ", _jsx(_components.span, { className: "token literal-property property", children: "id" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'toggle-overview'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["\t\t\t ", _jsx(_components.span, { className: "token literal-property property", children: "title" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'Toggle overview (O)'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["\t\t\t ", _jsx(_components.span, { className: "token literal-property property", children: "icon" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "''" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["\t\t\t ", _jsx(_components.span, { className: "token literal-property property", children: "action" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'Reveal.toggleOverview();'" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["\t\t\t", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["\t\t\t", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "icon" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "''" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["\t\t\t ", _jsx(_components.span, { className: "token literal-property property", children: "title" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'Toggle chalkboard (B)'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["\t\t\t ", _jsx(_components.span, { className: "token literal-property property", children: "action" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'RevealChalkboard.toggleChalkboard();'" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["\t\t\t", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["\t\t\t", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "icon" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "''" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["\t\t\t ", _jsx(_components.span, { className: "token literal-property property", children: "title" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'Toggle notes canvas (C)'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["\t\t\t ", _jsx(_components.span, { className: "token literal-property property", children: "action" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'RevealChalkboard.toggleNotesCanvas();'" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["\t\t\t", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["\t\t", _jsx(_components.span, { className: "token punctuation", children: "]" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["\t", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["\t", _jsx(_components.span, { className: "token comment", children: "// ..." }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: ["The ", _jsx(_components.code, { className: "language-auto", children: "id" }), " and ", _jsx(_components.code, { className: "language-auto", children: "title" }), " are optional. The configuration should be self explaining and any number of controls can be added. The style file can be altered to control the layout and responsiveness of the custom controls."] }), "\n", _jsxs(_components.h2, { id: "license", children: [_jsx(_components.a, { className: "heading-link", href: "#license", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "License"] }), "\n", _jsx(_components.p, { children: "MIT licensed" }), "\n", _jsx(_components.p, { children: "Copyright (C) 2020 Asvin Goel" })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };