htmx-slide 0.0.0

package/CITATION.cff

@@ -0,0 +1,21 @@
+cff-version: 1.2.0
+message: Please use the following metadata when citing this project in your work.
+title: htmx Slide
+abstract: A htmx extension for slide show presentations using View Transitions.
+version: 0.0.0
+license: Hippocratic-2.1
+date-released: 2026-05-23
+authors:
+  - family-names: Kuhlmann
+    given-names: Brooke
+    affiliation: Alchemists
+    orcid: https://orcid.org/0000-0002-5810-6268
+keywords:
+ - htmx
+ - extension
+ - element
+ - slide
+ - presentation
+repository-code: https://github.com/bkuhlmann/htmx-select
+repository-artifact: https://rubygems.org/gems/htmx-select
+url: https://alchemists.io/projects/htmx-select

package/LICENSE.adoc

@@ -0,0 +1,134 @@
+= Hippocratic License
+
+Version: 2.1.0.
+
+Purpose. The purpose of this License is for the Licensor named above to
+permit the Licensee (as defined below) broad permission, if consistent
+with Human Rights Laws and Human Rights Principles (as each is defined
+below), to use and work with the Software (as defined below) within the
+full scope of Licensor’s copyright and patent rights, if any, in the
+Software, while ensuring attribution and protecting the Licensor from
+liability.
+
+Permission and Conditions. The Licensor grants permission by this
+license ("License"), free of charge, to the extent of Licensor’s
+rights under applicable copyright and patent law, to any person or
+entity (the "Licensee") obtaining a copy of this software and
+associated documentation files (the "Software"), to do everything with
+the Software that would otherwise infringe (i) the Licensor’s copyright
+in the Software or (ii) any patent claims to the Software that the
+Licensor can license or becomes able to license, subject to all of the
+following terms and conditions:
+
+* Acceptance. This License is automatically offered to every person and
+entity subject to its terms and conditions. Licensee accepts this
+License and agrees to its terms and conditions by taking any action with
+the Software that, absent this License, would infringe any intellectual
+property right held by Licensor.
+* Notice. Licensee must ensure that everyone who gets a copy of any part
+of this Software from Licensee, with or without changes, also receives
+the License and the above copyright notice (and if included by the
+Licensor, patent, trademark and attribution notice). Licensee must cause
+any modified versions of the Software to carry prominent notices stating
+that Licensee changed the Software. For clarity, although Licensee is
+free to create modifications of the Software and distribute only the
+modified portion created by Licensee with additional or different terms,
+the portion of the Software not modified must be distributed pursuant to
+this License. If anyone notifies Licensee in writing that Licensee has
+not complied with this Notice section, Licensee can keep this License by
+taking all practical steps to comply within 30 days after the notice. If
+Licensee does not do so, Licensee’s License (and all rights licensed
+hereunder) shall end immediately.
+* Compliance with Human Rights Principles and Human Rights Laws.
+[arabic]
+. Human Rights Principles.
+[loweralpha]
+.. Licensee is advised to consult the articles of the United Nations
+Universal Declaration of Human Rights and the United Nations Global
+Compact that define recognized principles of international human rights
+(the "Human Rights Principles"). Licensee shall use the Software in a
+manner consistent with Human Rights Principles.
+.. Unless the Licensor and Licensee agree otherwise, any dispute,
+controversy, or claim arising out of or relating to (i) Section 1(a)
+regarding Human Rights Principles, including the breach of Section 1(a),
+termination of this License for breach of the Human Rights Principles,
+or invalidity of Section 1(a) or (ii) a determination of whether any Law
+is consistent or in conflict with Human Rights Principles pursuant to
+Section 2, below, shall be settled by arbitration in accordance with the
+Hague Rules on Business and Human Rights Arbitration (the "Rules");
+provided, however, that Licensee may elect not to participate in such
+arbitration, in which event this License (and all rights licensed
+hereunder) shall end immediately. The number of arbitrators shall be one
+unless the Rules require otherwise.
++
+Unless both the Licensor and Licensee agree to the contrary: (1) All
+documents and information concerning the arbitration shall be public and
+may be disclosed by any party; (2) The repository referred to under
+Article 43 of the Rules shall make available to the public in a timely
+manner all documents concerning the arbitration which are communicated
+to it, including all submissions of the parties, all evidence admitted
+into the record of the proceedings, all transcripts or other recordings
+of hearings and all orders, decisions and awards of the arbitral
+tribunal, subject only to the arbitral tribunal’s powers to take such
+measures as may be necessary to safeguard the integrity of the arbitral
+process pursuant to Articles 18, 33, 41 and 42 of the Rules; and (3)
+Article 26(6) of the Rules shall not apply.
+. Human Rights Laws. The Software shall not be used by any person or
+entity for any systems, activities, or other uses that violate any Human
+Rights Laws. "Human Rights Laws" means any applicable laws,
+regulations, or rules (collectively, "Laws") that protect human,
+civil, labor, privacy, political, environmental, security, economic, due
+process, or similar rights; provided, however, that such Laws are
+consistent and not in conflict with Human Rights Principles (a dispute
+over the consistency or a conflict between Laws and Human Rights
+Principles shall be determined by arbitration as stated above). Where
+the Human Rights Laws of more than one jurisdiction are applicable or in
+conflict with respect to the use of the Software, the Human Rights Laws
+that are most protective of the individuals or groups harmed shall
+apply.
+. Indemnity. Licensee shall hold harmless and indemnify Licensor (and
+any other contributor) against all losses, damages, liabilities,
+deficiencies, claims, actions, judgments, settlements, interest, awards,
+penalties, fines, costs, or expenses of whatever kind, including
+Licensor’s reasonable attorneys’ fees, arising out of or relating to
+Licensee’s use of the Software in violation of Human Rights Laws or
+Human Rights Principles.
+* Failure to Comply. Any failure of Licensee to act according to the
+terms and conditions of this License is both a breach of the License and
+an infringement of the intellectual property rights of the Licensor
+(subject to exceptions under Laws, e.g., fair use). In the event of a
+breach or infringement, the terms and conditions of this License may be
+enforced by Licensor under the Laws of any jurisdiction to which
+Licensee is subject. Licensee also agrees that the Licensor may enforce
+the terms and conditions of this License against Licensee through
+specific performance (or similar remedy under Laws) to the extent
+permitted by Laws. For clarity, except in the event of a breach of this
+License, infringement, or as otherwise stated in this License, Licensor
+may not terminate this License with Licensee.
+* Enforceability and Interpretation. If any term or provision of this
+License is determined to be invalid, illegal, or unenforceable by a
+court of competent jurisdiction, then such invalidity, illegality, or
+unenforceability shall not affect any other term or provision of this
+License or invalidate or render unenforceable such term or provision in
+any other jurisdiction; provided, however, subject to a court
+modification pursuant to the immediately following sentence, if any term
+or provision of this License pertaining to Human Rights Laws or Human
+Rights Principles is deemed invalid, illegal, or unenforceable against
+Licensee by a court of competent jurisdiction, all rights in the
+Software granted to Licensee shall be deemed null and void as between
+Licensor and Licensee. Upon a determination that any term or provision
+is invalid, illegal, or unenforceable, to the extent permitted by Laws,
+the court may modify this License to affect the original purpose that
+the Software be used in compliance with Human Rights Principles and
+Human Rights Laws as closely as possible. The language in this License
+shall be interpreted as to its fair meaning and not strictly for or
+against any party.
+* Disclaimer. TO THE FULL EXTENT ALLOWED BY LAW, THIS SOFTWARE COMES
+"AS IS," WITHOUT ANY WARRANTY, EXPRESS OR IMPLIED, AND LICENSOR AND
+ANY OTHER CONTRIBUTOR SHALL NOT BE LIABLE TO ANYONE FOR ANY DAMAGES OR
+OTHER LIABILITY ARISING FROM, OUT OF, OR IN CONNECTION WITH THE SOFTWARE
+OR THIS LICENSE, UNDER ANY KIND OF LEGAL CLAIM.
+
+This Hippocratic License is an link:https://ethicalsource.dev[Ethical Source license] and is offered
+for use by licensors and licensees at their own risk, on an "AS IS" basis, and with no warranties
+express or implied, to the maximum extent permitted by Laws.

package/README.adoc

@@ -0,0 +1,255 @@
+:toc: macro
+:toclevels: 5
+:figure-caption!:
+
+:htmx_link: link:https://htmx.org[htmx]
+:fullscreen_api_link: link:https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API[Fullscreen API]
+:htmx_view_transitions_link: link:https://alchemists.io/articles/htmx_view_transitions[htmx View Transitions]
+
+= htmx Slide
+
+This library is a {htmx_link} link:https://htmx.org/extensions[extension] for rendering slides.
+
+toc::[]
+
+== Features
+
+* Allows you to render slides with silky smooth CSS View Transitions.
+* Provides keyboard shortcuts.
+* Provides next, previous, last, and first slide transitions.
+* Provides full screen toggling of your presentation.
+* Works with dynamic or statically generated web sites.
+
+== Screencasts
+
+video::https://alchemists.io/videos/projects/htmx-slide/demo.mp4[poster=https://alchemists.io/images/projects/htmx-slide/demo.webp,width=780,height=858,role=focal_point]
+
+== Requirements
+
+. {htmx_link}.
+. link:https://nodejs.org[Node] (optional, for development).
+. link:https://www.ruby-lang.org[Ruby] (optional, for development).
+
+== Setup
+
+The following _assumes_ you are already using {htmx_link} and have it configured in the same manner as documented in this setup section.
+
+To load CSS and JavaScript, add the following to your page:
+
+[source,html]
+----
+<link href="https://unpkg.com/htmx-slide@latest/build/style.css" rel="stylesheet">
+
+<script src="https://unpkg.com/htmx-slide@latest"
+        integrity="sha384-kW7IPCYLtM0LPnNd0hhzXbSjutJnlfSXEmvM8zbLx1maZly0KwK/+KGqqlX2ZC4X"
+        crossorigin="anonymous">
+</script>
+----
+
+To use via Import Maps, add the following to your layout:
+
+[source,html]
+----
+<link href="https://unpkg.com/htmx-slide@latest/build/style.css" rel="stylesheet">
+
+<script type="importmap">
+  {
+    "imports": {
+      "htmx-slide": "https://unpkg.com/htmx-slide@latest"
+    }
+  }
+</script>
+
+<script type="module">
+  import "htmx-slide";
+</script>
+----
+
+To install via link:https://www.npmjs.com[NPM], run:
+
+[source,bash]
+----
+npm install htmx-slide
+----
+
+Once the library is installed, you only need to import it:
+
+[source,js]
+----
+import "htmx-slide/build/style.css";
+import "htmx-slide";
+----
+
+== Usage
+
+To use, add a top-level element (`section` in this case) where you enable the `slide` extension. Once the extension has been able, you can then add your view port, progress bar, and actions.  Example:
+
+[source,html]
+----
+<section class="htmx-slide"
+         hx-select-oob="#slide, #progress, #actions"
+         hx-swap="transition:true"
+         hx-ext="slide">
+
+   <div class="container">
+     <div class="viewport">
+       <img id="slide" src="alien.svg" alt="One" class="slide" width="480" height="480">
+     </div>
+
+     <progress id="progress" class="progress" value="0" max="2"></progress>
+
+     <div id="actions" class="actions">
+       <a href="_three.html"
+          class="action"
+          data-direction="backward"
+          hx-get="_three.html"
+          hx-trigger="click, keyup[key=='ArrowLeft'] from:body"
+          hx-push_url="true">Previous</a>
+
+       <span class="status">1 of 3</span>
+
+       <a href="_two.html"
+          class="action"
+          data-direction="forward"
+          hx-get="_two.html"
+          hx-trigger="click, keyup[key=='ArrowRight'] from:body"
+          hx-push_url="true">Next</a>
+
+       <a href="_one.html"
+          class="action"
+          data-direction="backward"
+          hx-get="_one.html"
+          hx-trigger="click, keyup[key=='['] from:body"
+          hx-push_url="true">First</a>
+
+       <button data-fullscreen-trigger>[ ]</button>
+
+       <a href="_three.html"
+          class="action"
+          data-direction="forward"
+          hx-get="_three.html"
+          hx-trigger="click, keyup[key==']'] from:body"
+          hx-push_url="true">Last</a>
+   </div>
+</section>
+----
+
+The above is the minimum to load the extension, the initial slide, and link to further slides. Here's the breakdown:
+
+* `section` (required): The `section` element provides a semantic way to enable the extension and supply the minimum attributes. You're not limited to the `section` element as any valid HTML element would work for your top level element.
+** `class` (optional): Necessary to style the extension. If you don't want to use the default styles then you can remove along with the associated `style.css`. The `style.css` is compiled from the style sheets located in the `lib/stylesheets` of this project. If you need a detailed breakdown on how CSS View Transitions and key frames work, check out the {htmx_view_transitions_link} article to learn more.
+** `hx-select-oob` (optional): Allows you to define which elements should be selected as out of bounds updates when moving forward and backward through your slides since only the slide, progress, and action elements are the only elements that will change per each slide. The values _must_ be IDs, not classes.
+** `hx-swap` (required): Ensures htmx enables CSS View Transitions properly. If missing, no transitions will fire.
+** `hx-ext` (required): Ensures this extension is enabled.
+* `.container` (required): Ensures the view port, progress bar, and associated actions don't expand the width of your slides.
+* `.viewport` (required): Ensures contents of this element can be toggled via the {fullscreen_api_link}.
+* `#slide` (required): Ensures this can be updated (swapped) out of bounds.
+* `#progresss` (optional): Provides real-time progress. Delete and remove from `hx-select-oob` if not desired.
+* `#actions` (required): Ensure you can navigate to the next, previous, first, and last slide. You can add or remove actions as desired. The above shows what's possible. When using action links, use the following attributes:
+** `.action` (optional): Allows you to style the action if desired.
+** `data-direction` (required): Ensures this extension knows which direction transition the slide depending on direction. Valid values are: `forward` or `backward`.
+** `hx-get` (required): Gets the next slide.
+** `hx-trigger`(required): Triggers the action. Feel free to customize keyboard short behavior as desired.
+** `hx-push_url` (required): Ensures your browser history is always updated so the browser back and forward navigation always works.
+* `data-fullscreen-trigger` (optional): Triggers full screen mode. The value is meant to be empty. If a value is supplied, it'll be ignored. You can, optionally, add a `data-fullscreen-target` with any valid CSS selector in case you want to target a different element for full screen toggle. The default is: `.viewport`.
+
+In addition to the above, you can also add the following data attributes and enabling this extension. Example:
+
+[source,html]
+----
+<section hx-ext="slide"
+         data-slide=".slide"
+         data-classes-left="htmx-slide-left"
+         data-classes-right="htmx-slide-right"
+         data-fullscreen-key="f"
+         data-fullscreen-trigger="[data-fullscreen-trigger]">
+----
+
+The above shows the default settings which is why you don't need to supply these when enabling this extension. Should the above defaults not be desired, then you can customize as follows:
+
+* `data-slide`: Use any valid CSS selector to target a different slide element.
+* `data-classes-left`: The CSS class associated your CSS View Transition and animation for leftward movement.
+* `data-classes-right`: The CSS class associated your CSS View Transition and animation for rightward movement.
+* `data-fullscreen-key`: The fullscreen keyboard shortcut.
+* `data-fullscreen-trigger`: The element which triggers the full screen toggle (usually a button).
+
+When building your implementation, the above shows the initial page to render. All subsequent pages only need to be HTML fragments/partials which have the elements shown in the `.container` as those are the only elements that need to change upon each HTTP GET request.
+
+== Examples
+
+Should you need real-word examples of this extension in production use, check out the following:
+
+* link:https://alchemists.io/talks[Alchemists Talks]: A collection of talks (and associated slides) given at past presentations.
+* link:https://alchemists.io/projects/terminus[Terminus]: A Hanami + htmx application for ePaper devices. Each playlist uses this extension for viewing screens rendered on your ePaper devices.
+
+== Development
+
+To contribute, run:
+
+[source,bash]
+----
+git clone https://github.com/bkuhlmann/htmx-slide
+cd htmx-slide
+bin/setup
+----
+
+To build, run:
+
+[source,bash]
+----
+bin/build
+----
+
+To view interactive demonstration, run
+
+[source,bash]
+----
+# With default port.
+bin/demo
+
+# With custom port.
+bin/demo 9050
+----
+
+== Tests
+
+To test, run:
+
+[source,bash]
+----
+ bin/rake
+----
+
+== Deployment
+
+To deploy, follow these steps:
+
+. Ensure link:https://alchemists.io/projects/milestoner[Milestoner] is installed.
+. Ensure you are on the `main` branch.
+. Run the following:
+
+[source,bash]
+----
+bin/build
+npm publish
+milestoner --publish
+----
+
+== link:https://alchemists.io/policies/license[License]
+
+== link:https://alchemists.io/policies/security[Security]
+
+== link:https://alchemists.io/policies/code_of_conduct[Code of Conduct]
+
+== link:https://alchemists.io/policies/contributions[Contributions]
+
+== link:https://alchemists.io/policies/developer_certificate_of_origin[Developer Certificate of Origin]
+
+== link:https://alchemists.io/projects/htmx-slide/versions[Versions]
+
+== link:https://alchemists.io/community[Community]
+
+== Credits
+
+* Built with link:https://alchemists.io/projects/rubysmith[Rubysmith].
+* Engineered by link:https://alchemists.io/team/brooke_kuhlmann[Brooke Kuhlmann].

package/build/htmx-slide.esm.js

@@ -0,0 +1 @@
+import s from"htmx.org";(function(){const f="[hx-ext='slide']",a=i=>{const e=document.querySelector(i);e&&(document.fullscreenElement?document.exitFullscreen&&(document.exitPointerLock(),document.exitFullscreen()):e.requestFullscreen&&(e.requestPointerLock(),e.requestFullscreen()))};s.defineExtension("slide",{init:()=>{const i=r=>{const d=s.find(f);if(!d)return;const l=d.dataset,t=l.fullscreenTrigger||"[data-fullscreen-trigger]",c=s.find(t);if(!c)return;const o=c.dataset.fullscreenTarget||".viewport";if(r.type==="keydown"){const n=l.fullscreenKey||"f";r.key===n&&a(o)}else if(r.type==="click"){const n=r.target;(n.matches(t)||n.closest(t))&&a(o)}},e=document.body;e.addEventListener("click",i),e.addEventListener("keydown",i)},onEvent:(i,e)=>{const r=e.detail.elt;if(i==="htmx:beforeTransition"){const l=s.find(f).dataset,t=s.find(l.slide||".slide");if(!t)return;const c=l.classesLeft||"htmx-slide-left",o=l.classesRight||"htmx-slide-right",n=r.dataset.direction;s.removeClass(t,c),s.removeClass(t,o),n==="forward"?s.addClass(t,c):n==="backward"&&s.addClass(t,o)}}})})();

package/build/htmx-slide.js

@@ -0,0 +1 @@
+"use strict";(function(){const d="[hx-ext='slide']",f=n=>{const e=document.querySelector(n);e&&(document.fullscreenElement?document.exitFullscreen&&(document.exitPointerLock(),document.exitFullscreen()):e.requestFullscreen&&(e.requestPointerLock(),e.requestFullscreen()))};htmx.defineExtension("slide",{init:()=>{const n=i=>{const o=htmx.find(d);if(!o)return;const r=o.dataset,t=r.fullscreenTrigger||"[data-fullscreen-trigger]",l=htmx.find(t);if(!l)return;const c=l.dataset.fullscreenTarget||".viewport";if(i.type==="keydown"){const s=r.fullscreenKey||"f";i.key===s&&f(c)}else if(i.type==="click"){const s=i.target;(s.matches(t)||s.closest(t))&&f(c)}},e=document.body;e.addEventListener("click",n),e.addEventListener("keydown",n)},onEvent:(n,e)=>{const i=e.detail.elt;if(n==="htmx:beforeTransition"){const r=htmx.find(d).dataset,t=htmx.find(r.slide||".slide");if(!t)return;const l=r.classesLeft||"htmx-slide-left",c=r.classesRight||"htmx-slide-right",s=i.dataset.direction;htmx.removeClass(t,l),htmx.removeClass(t,c),s==="forward"?htmx.addClass(t,l):s==="backward"&&htmx.addClass(t,c)}}})})();

package/build/style.css

@@ -0,0 +1 @@
+@keyframes htmxSlideOutToLeft{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes htmxSlideInFromRight{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes htmxSlideOutToRight{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes htmxSlideInFromLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@media(prefers-reduced-motion:no-preference){::view-transition-group(htmx-slide-left),::view-transition-group(htmx-slide-right){animation-duration:.8s;border-radius:.5rem;overflow:hidden}::view-transition-new(htmx-slide-left){animation-name:htmxSlideInFromRight}::view-transition-old(htmx-slide-left){animation-name:htmxSlideOutToLeft}::view-transition-new(htmx-slide-right){animation-name:htmxSlideInFromLeft}::view-transition-old(htmx-slide-right){animation-name:htmxSlideOutToRight}}.htmx-slide{align-items:center;display:flex;flex-direction:column;justify-content:center;.container,.viewport{align-items:center;display:flex;flex-direction:column;justify-content:center}.viewport:fullscreen{.slide{border-radius:0;box-shadow:none}}.slide{border-radius:.5rem;box-shadow:.7px .7px .7px #00000006,1.7px 1.7px 1.7px #00000008,3.5px 3.5px 3.5px #0000000a,7.3px 7.3px 7.3px #0000000c,20px 20px 20px #00000012}.progress{width:100%}.status{text-align:center}.actions{display:grid;grid-template:1fr / 1fr 1fr 1fr;width:100%;margin-top:1rem;gap:.5rem;[data-fullscreen-trigger]{background:none;cursor:pointer;display:flex;justify-content:center}[data-direction=forward]{text-align:right}}}.htmx-slide-left{view-transition-name:htmx-slide-left}.htmx-slide-right{view-transition-name:htmx-slide-right}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "htmx-slide",
+  "version": "0.0.0",
+  "description": "A htmx extension for slide show presentations using View Transitions.",
+  "type": "module",
+  "main": "build/htmx-slide.esm.js",
+  "style": "build/style.css",
+  "files": [
+    "build",
+    "README.adoc",
+    "CITATION.cff",
+    "LICENSE.adoc"
+  ],
+  "unpkg": "build/htmx-slide.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bkuhlmann/htmx-slide.git"
+  },
+  "keywords": [
+    "htmx",
+    "extension",
+    "slide",
+    "presentation"
+  ],
+  "author": "Brooke Kuhlmann",
+  "license": "Hippocratic-2.1",
+  "bugs": {
+    "url": "https://github.com/bkuhlmann/htmx-slide/issues"
+  },
+  "funding": {
+    "url": "https://github.com/sponsors/bkuhlmann"
+  },
+  "homepage": "https://alchemists.io/projects/htmx-slide",
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "esbuild": "^0.27.2",
+    "eslint": "^10.4.0",
+    "globals": "^17.3.0"
+  }
+}