Packages
phoenix_live_view
1.2.8
1.2.8
1.2.7
1.2.6
1.2.5
1.2.4
1.2.3
1.2.2
1.2.1
1.2.0
1.2.0-rc.3
1.2.0-rc.2
1.2.0-rc.1
1.2.0-rc.0
1.1.32
1.1.31
1.1.30
1.1.29
1.1.28
1.1.27
1.1.26
1.1.25
1.1.24
1.1.23
1.1.22
1.1.21
1.1.20
1.1.19
1.1.18
1.1.17
1.1.16
1.1.15
1.1.14
1.1.13
1.1.12
1.1.11
1.1.10
1.1.9
1.1.8
1.1.7
1.1.6
retired
1.1.5
1.1.4
1.1.3
1.1.2
1.1.1
1.1.0
1.1.0-rc.4
1.1.0-rc.3
1.1.0-rc.2
1.1.0-rc.1
1.1.0-rc.0
1.0.18
1.0.17
1.0.16
1.0.15
1.0.14
1.0.13
1.0.12
1.0.11
1.0.10
1.0.9
1.0.8
retired
1.0.7
1.0.6
retired
1.0.5
1.0.4
1.0.3
1.0.2
1.0.1
1.0.0
1.0.0-rc.9
1.0.0-rc.8
1.0.0-rc.7
1.0.0-rc.6
1.0.0-rc.5
1.0.0-rc.4
1.0.0-rc.3
1.0.0-rc.2
1.0.0-rc.1
1.0.0-rc.0
0.20.17
0.20.16
0.20.15
0.20.14
0.20.13
0.20.12
0.20.11
0.20.10
0.20.9
0.20.8
0.20.7
0.20.6
0.20.5
0.20.4
0.20.3
0.20.2
0.20.1
0.20.0
0.19.5
0.19.4
0.19.3
0.19.2
0.19.1
0.19.0
0.18.18
0.18.17
0.18.16
0.18.15
0.18.14
0.18.13
0.18.12
0.18.11
0.18.10
0.18.9
0.18.8
0.18.7
0.18.6
0.18.5
0.18.4
0.18.3
0.18.2
0.18.1
0.18.0
0.17.14
0.17.13
0.17.12
0.17.11
0.17.10
0.17.9
0.17.8
0.17.7
0.17.6
0.17.5
0.17.4
0.17.3
0.17.2
0.17.1
0.17.0
0.16.4
0.16.3
0.16.2
0.16.1
0.16.0
0.15.7
0.15.6
0.15.5
0.15.4
0.15.3
0.15.2
0.15.1
0.15.0
0.14.8
0.14.7
0.14.6
0.14.5
0.14.4
0.14.3
0.14.2
0.14.1
0.14.0
0.13.3
0.13.2
0.13.1
0.13.0
0.12.1
0.12.0
0.11.1
0.11.0
0.10.0
0.9.0
0.8.1
0.8.0
0.7.1
0.7.0
0.6.0
0.6.0-dev
0.5.2
0.5.1
0.5.0
0.4.1
0.4.0
0.3.1
0.3.0
0.2.1
0.2.0
0.1.1
0.1.0
Rich, real-time user experiences with server-rendered HTML
Current section
Files
Jump to
Current section
Files
assets/js/phoenix_live_view/utils.ts
import { PHX_VIEW_SELECTOR } from "./constants";
import EntryUploader from "./entry_uploader";
import { logError, type LogError } from "./diagnostics";
// Live navigation can only stay within the current origin, as it joins the
// target over the existing socket. A full URL to a different origin (or a
// non-http(s) scheme, which resolves to an opaque "null" origin) is a
// programming error, so we fail loudly instead of attempting a broken join.
export const ensureSameOrigin = (
href: string,
kind: "patch" | "navigate",
): void => {
let url: URL;
try {
url = new URL(href, window.location.href);
} catch {
throw new Error(
`expected ${kind} destination to be a valid URL, got: ${href}`,
);
}
if (url.origin !== window.location.origin) {
throw new Error(
`cannot ${kind} to "${href}" because its origin does not match the ` +
`current origin "${window.location.origin}". Use window.location directly for cross-origin navigation.`,
);
}
};
export const isCid = (cid): cid is number | string => {
const type = typeof cid;
return type === "number" || (type === "string" && /^(0|[1-9]\d*)$/.test(cid));
};
export function detectDuplicateIds(reportError: LogError = logError) {
const ids = new Map<string, Element>();
const elems = document.querySelectorAll("*[id]");
for (let i = 0, len = elems.length; i < len; i++) {
const id = elems[i].id;
const existing = ids.get(id);
if (existing) {
reportError(
"dom.duplicate-id",
`Multiple IDs detected: ${id}. Ensure unique element ids.`,
{ id, elements: [existing, elems[i]] },
{ attribution: "app" },
);
} else {
ids.set(id, elems[i]);
}
}
}
export function detectInvalidStreamInserts(
inserts,
reportError: LogError = logError,
) {
const invalidContainers = new Set<Element>();
Object.keys(inserts).forEach((id) => {
const streamEl = document.getElementById(id);
if (
streamEl &&
streamEl.parentElement &&
streamEl.parentElement.getAttribute("phx-update") !== "stream"
) {
invalidContainers.add(streamEl.parentElement);
}
});
invalidContainers.forEach((container) => {
const id = container.id;
reportError(
"dom.invalid-stream-container",
`The stream container with id "${id}" is missing the phx-update="stream" attribute. Ensure it is set for streams to work properly.`,
{ id, container },
{ attribution: "app" },
);
});
}
export const debug = (view, kind, msg, obj) => {
if (view.liveSocket.isDebugEnabled()) {
console.log(`${view.id} ${kind}: ${msg} - `, obj);
}
};
// wraps value in closure or returns closure
export const closure = (val?) =>
typeof val === "function"
? val
: function () {
return val;
};
export const clone = (obj) => {
return JSON.parse(JSON.stringify(obj));
};
export const closestPhxBinding = (
startEl: Element,
binding: string,
borderEl?: Element,
) => {
let el: Element | null = startEl;
do {
if (el.matches(`[${binding}]`) && !("disabled" in el && el.disabled)) {
return el;
}
el = el.parentElement;
} while (
el !== null &&
el.nodeType === 1 &&
!((borderEl && borderEl.isSameNode(el)) || el.matches(PHX_VIEW_SELECTOR))
);
return null;
};
export const isObject = (obj) => {
return obj !== null && typeof obj === "object" && !(obj instanceof Array);
};
export const isEqualObj = (obj1, obj2) =>
JSON.stringify(obj1) === JSON.stringify(obj2);
export const isEmpty = (obj) => {
for (const x in obj) {
return false;
}
return true;
};
export const maybe = (el, callback) => el && callback(el);
export const channelUploader = function (entries, onError, resp, liveSocket) {
entries.forEach((entry) => {
const entryUploader = new EntryUploader(entry, resp.config, liveSocket);
entryUploader.upload();
});
};
export const eventContainsFiles = (e) => {
if (e.dataTransfer.types) {
for (let i = 0; i < e.dataTransfer.types.length; i++) {
if (e.dataTransfer.types[i] === "Files") {
return true;
}
}
}
return false;
};