itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-10-02 15:25:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into dev

Browse Source
This commit is contained in:
carson 2021-07-12 13:38:37 -06:00
commit 05a0608f52
10 changed files with 91 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
jsconfig.json Normal file
View File

@ -0,0 +1,14 @@
{
"compilerOptions": {
"target": "es5",
"noEmit": true,
"checkJs": true,
"jsx": "react",
"strict": false,
"lib": [ "dom" ]
},
"include": [
"./src/htmx.js"
],
"verbose": true
}

14
package-lock.json generated
View File

@ -1,6 +1,6 @@
{
"name": "htmx.org",
"version": "1.4.0",
"version": "1.4.1",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@ -5363,9 +5363,9 @@
}
},
"postcss": {
"version": "7.0.35",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
"integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
"version": "7.0.36",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
"integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
"dev": true,
"requires": {
"chalk": "^2.4.2",
@ -7239,6 +7239,12 @@
"integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==",
"dev": true
},
"typescript": {
"version": "4.3.5",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.3.5.tgz",
"integrity": "sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA==",
"dev": true
},
"ua-parser-js": {
"version": "0.7.28",
"resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.28.tgz",

7
package.json
View File

@ -19,9 +19,11 @@
"dist/*.js.gz"
],
"main": "dist/htmx.min.js",
"types": "src/htmx.d.ts",
"unpkg": "dist/htmx.min.js",
"scripts": {
"test": "mocha-chrome test/index.html",
"test-types": "tsc --project ./jsconfig.json",
"dist": "cp -r src/* dist/ && npm run-script uglify && gzip -k -f dist/htmx.min.js > dist/htmx.min.js.gz && exit",
"www": "node scripts/www.js",
"uglify": "uglifyjs -m eval -o dist/htmx.min.js dist/htmx.js"
@ -38,8 +40,9 @@
"fs-extra": "^9.1.0",
"mocha": "^7.2.0",
"mocha-chrome": "^2.2.0",
"sass": "^1.34.0",
"sinon": "^9.2.4",
"uglify-js": "^3.13.7",
"sass": "^1.34.0"
"typescript": "^4.3.5",
"uglify-js": "^3.13.7"
}
}

26
src/htmx.d.ts vendored Normal file
View File

@ -0,0 +1,26 @@
export interface HtmxApi {
config?: HtmxConfig
logger?: (a: HTMLElement, b: Event, c: any) => void | null
}
export interface HtmxConfig {
historyEnabled?: boolean;
historyCacheSize?: number;
refreshOnHistoryMiss?: boolean;
defaultSwapStyle?: 'innerHTML' | string;
defaultSwapDelay?: number;
defaultSettleDelay?: number;
includeIndicatorStyles?: boolean;
indicatorClass?: 'htmx-indicator' | string;
requestClass?: 'htmx-request' | string;
settlingClass?: 'htmx-settling' | string;
swappingClass?: 'htmx-swapping' | string;
allowEval?: boolean;
attributesToSettle?: ["class", "style", "width", "height"] | string[];
withCredentials?: boolean;
wsReconnectDelay?: 'full-jitter' | string;
disableSelector?: "[hx-disable], [data-hx-disable]" | string;
useTemplateFragments?: boolean;
}
export declare var htmx: HtmxApi

12
src/htmx.js
View File

@ -1,7 +1,9 @@
//AMD insanity
(function (root, factory) {
//@ts-ignore
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
//@ts-ignore
define([], factory);
} else {
// Browser globals
@ -153,9 +155,11 @@ return (function () {
var responseNode = responseDoc.body;
while (depth > 0) {
depth--;
// @ts-ignore
responseNode = responseNode.firstChild;
}
if (responseNode == null) {
// @ts-ignore
responseNode = getDocument().createDocumentFragment();
}
return responseNode;
@ -1221,6 +1225,7 @@ return (function () {
function getWebSocketReconnectDelay(retryCount) {
var delay = htmx.config.wsReconnectDelay;
if (typeof delay === 'function') {
// @ts-ignore
return delay(retryCount);
}
if (delay === 'full-jitter') {
@ -1638,9 +1643,11 @@ return (function () {
if (this.status >= 200 && this.status < 400) {
triggerEvent(getDocument().body, "htmx:historyCacheMissLoad", details);
var fragment = makeFragment(this.response);
// @ts-ignore
fragment = fragment.querySelector('[hx-history-elt],[data-hx-history-elt]') || fragment;
var historyElement = getHistoryElement();
var settleInfo = makeSettleInfo(historyElement);
// @ts-ignore
swapInnerHTML(historyElement, fragment, settleInfo)
settleImmediately(settleInfo.tasks);
currentPathForHistory = path;
@ -2465,7 +2472,9 @@ return (function () {
try {
selectionInfo = {
elt: activeElt,
// @ts-ignore
start: activeElt ? activeElt.selectionStart : null,
// @ts-ignore
end: activeElt ? activeElt.selectionEnd : null
};
} catch (e) {
@ -2480,7 +2489,9 @@ return (function () {
selectionInfo.elt.id) {
var newActiveElt = document.getElementById(selectionInfo.elt.id);
if (newActiveElt) {
// @ts-ignore
if (selectionInfo.start && newActiveElt.setSelectionRange) {
// @ts-ignore
newActiveElt.setSelectionRange(selectionInfo.start, selectionInfo.end);
}
newActiveElt.focus();
@ -2632,6 +2643,7 @@ return (function () {
function getMetaConfig() {
var element = getDocument().querySelector('meta[name="htmx-config"]');
if (element) {
// @ts-ignore
return parseJSON(element.content);
} else {
return null;

2
www/_includes/layout.njk
View File

@ -28,7 +28,7 @@
<div class="menu">
<div class="logo-wrapper">
<span hx-get="/" hx-target="body" hx-push-url="true" class="logo light">&lt;<a>/</a>&gt; htm<a>x</a></span>
<svg onclick="document.getElementById('nav').classList.toggle('show')" class="hamburger" viewBox="0 0 100 80" width="25" height="25" style="margin-bottom:-5px">
<svg _="on click toggle .show on #nav" class="hamburger" viewBox="0 0 100 80" width="25" height="25" style="margin-bottom:-5px">
<rect width="100" height="20" style="fill:rgb(52, 101, 164)" rx="10"></rect>
<rect y="30" width="100" height="20" style="fill:rgb(52, 101, 164)" rx="10"></rect>
<rect y="60" width="100" height="20" style="fill:rgb(52, 101, 164)" rx="10"></rect>

4
www/attributes/hx-trigger.md
View File

@ -135,6 +135,10 @@ Multiple triggers can be provided, seprarated by commas. Each trigger gets its
```
This example will load `/news` immediate on the page load, and then again with a delay of one second after each click.
### Via Javascript
The AJAX request can be triggered via Javascript [`htmx.trigger()`](/api#trigger), too.
### Notes
* `hx-trigger` is not inherited

28
www/css/site.scss
View File

@ -101,11 +101,11 @@ p {
pre[class*="language-"] {
font-size: 16px;
margin-top: 24px !important;
margin-bottom: 24px !important;
margin-bottom: 24px !important;
}
@media(min-width:45rem) {
pre[class*="language-"] {
pre[class*="language-"] {
margin-left: 48px !important;
margin-right: 48px !important;
}
@ -143,6 +143,7 @@ a {
list-style: none;
padding-left: 12px;
}
margin-bottom: 1em;
}
.hamburger {
@ -329,25 +330,25 @@ h1,h2,h3,h4{
.nav ul{
padding-left: 0;
li ul {
padding-left:12px;
padding-left:12px;
}
}
@media(min-width:45em) {
// Menu
// Menu
.menu,
.navigation > div{
display:flex;
align-items:center;
}
}
.navigation{
flex:1;
display:flex;
justify-content: space-between;
padding-left: calc(1em + 1.5vw);
}
}
.navigation-items > *:not(:last-child){
margin-right: calc(.5em + .7vw);
}
@ -357,9 +358,9 @@ h1,h2,h3,h4{
a{
margin:0 calc(.5em + .7vw);
}
}
// Content
.content .col:not(.nav) {
padding-left: calc(1em + 1.5vw);
@ -367,18 +368,23 @@ h1,h2,h3,h4{
.content .nav > p,
.content .nav #contents{
position: sticky;
}
.content .nav #contents{
top: 3.5em;
}
.content .nav #contents > ul {
max-height: calc(100vh - 5rem);
overflow-y: scroll;
}
.content .nav > p
{
position: sticky;
top: 2vh;
}
}
@media(max-width:45rem) {

2
www/extensions/preload.md
View File

@ -65,7 +65,7 @@ The default behavior for this extension is to begin loading a resource when the
To preload links more aggressively, you can trigger the preload to happen when the user's mouse hovers over the link instead. To prevent many resources from being loaded when the user scrolls or moves the mouse across a large list of objects, a 100ms delay is built in to this action. If the user's mouse leaves the element *before* this timeout expires, then the resource is not preloaded.
Typical users hover over links for several hundred milliseconds before they click, which gives your server even more time to respond to the request than the `mousedown` option above. [Test your own hover timing here.](http://instantclick.io/click-test). However, be careful when using this option because it can increase server load by requesting resources uncnecessarily.
Typical users hover over links for several hundred milliseconds before they click, which gives your server even more time to respond to the request than the `mousedown` option above. [Test your own hover timing here.](http://instantclick.io/click-test). However, be careful when using this option because it can increase server load by requesting resources unnecessarily.
```html
<a href="/server/1" preload="mouseover">This will be preloaded when the user's mouse remains over it for more than 100ms.</a>

1
www/server-examples.md
View File

@ -37,6 +37,7 @@ These examples may make it a bit easier to get started using htmx with your plat
### Django
- <https://github.com/adamchainz/django-htmx>
- <https://github.com/idlesign/django-siteajax>
### FastAPI