@hortonstudio/main 1.2.5 → 1.2.6

package/attributes-master/packages/socialshare/src/actions/collect.ts

@@ -0,0 +1,93 @@
+import { getAttribute, queryElement } from '../utils/selectors';
+import type {
+  FacebookSocialShare,
+  PinterestSocialShare,
+  SocialShare,
+  SocialShareTypes,
+  XSocialShare,
+} from './../utils/types';
+
+export function collectFacebookData(
+  trigger: HTMLElement,
+  instance: string | null,
+  scope: HTMLElement | undefined
+): FacebookSocialShare {
+  const socialData = collectSocialData(trigger, 'facebook', instance, scope);
+
+  const hashtagsElement = queryElement('facebook-hashtags', { instance, scope });
+  const hashtagsText = hashtagsElement ? hashtagsElement.textContent : null;
+
+  return {
+    ...socialData,
+    type: 'facebook',
+    hashtags: hashtagsText,
+  };
+}
+
+export function collectXData(
+  trigger: HTMLElement,
+  instance: string | null,
+  scope: HTMLElement | undefined
+): XSocialShare {
+  const socialData = collectSocialData(trigger, 'x', instance, scope);
+
+  const hashtagsElement = queryElement('x-hashtags', { instance, scope });
+  const hashtagsText =
+    hashtagsElement && hashtagsElement.textContent ? hashtagsElement.textContent.replace(/[^a-zA-Z0-9_,]/g, '') : null;
+
+  const usernameElement = queryElement('x-username', { instance, scope });
+  const userNameText = usernameElement ? usernameElement.textContent : null;
+
+  return {
+    ...socialData,
+    type: 'x',
+    hashtags: hashtagsText,
+    username: userNameText,
+  };
+}
+
+export function collectPinterestData(
+  trigger: HTMLElement,
+  instance: string | null,
+  scope: HTMLElement | undefined
+): PinterestSocialShare {
+  const socialData = collectSocialData(trigger, 'pinterest', instance, scope);
+
+  const imageElement = queryElement<HTMLImageElement>('pinterest-image', { instance, scope });
+  const imageSrc = imageElement && imageElement.src ? imageElement.src : null;
+
+  const descriptionElement = queryElement('pinterest-description', { instance, scope });
+
+  const descriptionText = descriptionElement ? descriptionElement.textContent : null;
+
+  return {
+    ...socialData,
+    type: 'pinterest',
+    image: imageSrc,
+    description: descriptionText,
+  };
+}
+
+export function collectSocialData(
+  socialShareButton: HTMLElement,
+  elementKey: SocialShareTypes,
+  instance: string | null,
+  scope: HTMLElement | undefined
+): SocialShare {
+  const width = getAttribute(socialShareButton, 'width');
+  const height = getAttribute(socialShareButton, 'height');
+
+  const contentElement = queryElement('content', { instance, scope });
+  const contentText = contentElement ? contentElement.textContent : null;
+
+  const urlElement = queryElement('url', { instance, scope });
+  const contentUrl = urlElement && urlElement.textContent ? urlElement.textContent : window.location.href;
+
+  return {
+    content: contentText,
+    url: contentUrl,
+    width,
+    height,
+    type: elementKey,
+  };
+}

package/attributes-master/packages/socialshare/src/actions/share.ts

@@ -0,0 +1,91 @@
+import { SOCIAL_SHARE_PLATFORMS } from '../utils/constants';
+import type {
+  FacebookSocialShare,
+  PinterestSocialShare,
+  SocialShare,
+  SocialShareStoreData,
+  SocialShareTypes,
+  XSocialShare,
+} from './../utils/types';
+
+export function createFacebookShare({ type, url, hashtags, content, width, height }: FacebookSocialShare) {
+  return createSocialShare(type, { u: url, hashtag: hashtags, quote: content }, width, height);
+}
+
+export function createXShare({ type, content, username, hashtags, url, width, height }: XSocialShare) {
+  return createSocialShare(
+    type,
+    {
+      url,
+      hashtags,
+      text: content,
+      via: username,
+    },
+    width,
+    height
+  );
+}
+
+export function createPinterestShare({ type, url, image, description, width, height }: PinterestSocialShare) {
+  return createSocialShare(
+    type,
+    {
+      url,
+      description,
+      media: image,
+    },
+    width,
+    height
+  );
+}
+
+export function createLinkedinShare({ type, url, width, height }: SocialShare) {
+  return createSocialShare(type, { url: url }, width, height);
+}
+
+export function createRedditShare({ type, url, content, width, height }: SocialShare) {
+  return createSocialShare(
+    type,
+    {
+      url,
+      title: content,
+    },
+    width,
+    height
+  );
+}
+
+export function createTelegramShare({ type, content, url, width, height }: SocialShare) {
+  return createSocialShare(
+    type,
+    {
+      url,
+      text: content,
+    },
+    width,
+    height
+  );
+}
+
+function createSocialShare(
+  type: SocialShareTypes,
+  params: { [key: string]: string | null },
+  width: number,
+  height: number
+): SocialShareStoreData {
+  const urlSocialMedia = SOCIAL_SHARE_PLATFORMS[type];
+
+  const shareUrl = new URL(urlSocialMedia);
+  const shareParams = Object.entries(params);
+
+  for (const [key, value] of shareParams) {
+    if (value) shareUrl.searchParams.append(key, value);
+  }
+
+  return {
+    height,
+    width,
+    type,
+    shareUrl,
+  };
+}

package/attributes-master/packages/socialshare/src/actions/trigger.ts

@@ -0,0 +1,46 @@
+import { addListener, isElement } from '@finsweet/attributes-utils';
+
+import { SOCIAL_SHARE_PLATFORMS } from '../utils/constants';
+import { getElementSelector } from '../utils/selectors';
+import { stores } from '../utils/stores';
+import type { SocialShareStoreData, SocialShareTypes } from '../utils/types';
+
+/**
+ * Listens for trigger clicks on the document.
+ *
+ * @returns A callback to remove the event listener.
+ */
+export const listenTriggerClicks = () => {
+  const clickCleanup = addListener(document, 'click', (e) => {
+    const { target } = e;
+    if (!isElement(target)) return;
+
+    for (const key in SOCIAL_SHARE_PLATFORMS) {
+      const platform = key as SocialShareTypes;
+
+      const trigger = target.closest<HTMLElement>(getElementSelector(platform));
+      if (!trigger) continue;
+
+      const socialShareData = stores[platform].get(trigger);
+      if (socialShareData) triggerSocialShare(socialShareData);
+      break;
+    }
+  });
+
+  return clickCleanup;
+};
+
+/**
+ * Triggers a social share.
+ * @param storeData
+ */
+const triggerSocialShare = ({ width, height, shareUrl }: SocialShareStoreData) => {
+  const left = window.innerWidth / 2 - width / 2 + window.screenX;
+  const top = window.innerHeight / 2 - height / 2 + window.screenY;
+  const popParams = `scrollbars=no, width=${width}, height=${height}, top=${top}, left=${left}`;
+  const newWindow = window.open(shareUrl, '', popParams);
+
+  if (newWindow) {
+    newWindow.focus();
+  }
+};

package/attributes-master/packages/socialshare/src/factory.ts

@@ -0,0 +1,149 @@
+import { collectFacebookData, collectPinterestData, collectSocialData, collectXData } from './actions/collect';
+import {
+  createFacebookShare,
+  createLinkedinShare,
+  createPinterestShare,
+  createRedditShare,
+  createTelegramShare,
+  createXShare,
+} from './actions/share';
+import { SOCIAL_SHARE_PLATFORMS } from './utils/constants';
+import { getCMSItemWrapper } from './utils/dom';
+import { getAttribute, getInstance, queryAllElements } from './utils/selectors';
+import { stores } from './utils/stores';
+import type { SocialShareTypes } from './utils/types';
+
+/**
+ * Creates a social share instance for all matching elements under a scope.
+ * @param scope Optional. Defaults to the document.
+ */
+export const createSocialShareInstances = (scope?: HTMLElement) => {
+  for (const key in SOCIAL_SHARE_PLATFORMS) {
+    const platform = key as SocialShareTypes;
+
+    const elements = queryAllElements(platform, { scope });
+
+    // fix leaking elements of different attributes when using the same prefix
+    const abovePrefixBounds = `${key}[-0-9]*[a-zA-Z]+`;
+    const socialShareButtons = elements.filter((element) => {
+      // if attribute is out of bounds, return false.
+      return !getAttribute(element, 'element')?.toLocaleLowerCase().match(new RegExp(abovePrefixBounds));
+    });
+
+    const create = creators[platform];
+    socialShareButtons.forEach(create);
+  }
+};
+
+/**
+ * Holds an instance creator for each platform.
+ */
+const creators: Record<SocialShareTypes, (trigger: HTMLElement) => void> = {
+  /**
+   * Facebook creator.
+   * @param trigger
+   */
+  facebook(trigger) {
+    if (stores.facebook.has(trigger)) return;
+
+    const instance = getInstance(trigger);
+
+    const cmsListItem = getCMSItemWrapper(trigger);
+
+    const facebook = collectFacebookData(trigger, instance, cmsListItem);
+
+    const shareData = createFacebookShare(facebook);
+
+    stores.facebook.set(trigger, shareData);
+  },
+
+  /**
+   * X creator.
+   * @param trigger
+   */
+  x(trigger) {
+    if (stores.x.has(trigger)) return;
+
+    const instance = getInstance(trigger);
+
+    const cmsListItem = getCMSItemWrapper(trigger);
+
+    const x = collectXData(trigger, instance, cmsListItem);
+
+    const shareData = createXShare(x);
+
+    stores.x.set(trigger, shareData);
+  },
+
+  /**
+   * Pinterest creator.
+   * @param trigger
+   */
+  pinterest(trigger) {
+    if (stores.pinterest.has(trigger)) return;
+
+    const instance = getInstance(trigger);
+
+    const cmsListItem = getCMSItemWrapper(trigger);
+
+    const pinterest = collectPinterestData(trigger, instance, cmsListItem);
+
+    const shareData = createPinterestShare(pinterest);
+
+    stores.pinterest.set(trigger, shareData);
+  },
+
+  /**
+   * Telegram creator.
+   * @param trigger
+   */
+  telegram(trigger) {
+    if (stores.telegram.has(trigger)) return;
+
+    const instance = getInstance(trigger);
+
+    const cmsListItem = getCMSItemWrapper(trigger);
+
+    const telegram = collectSocialData(trigger, 'telegram', instance, cmsListItem);
+
+    const shareData = createTelegramShare(telegram);
+
+    stores.telegram.set(trigger, shareData);
+  },
+
+  /**
+   * Linkedin creator.
+   * @param trigger
+   */
+  linkedin(trigger) {
+    if (stores.linkedin.has(trigger)) return;
+
+    const instance = getInstance(trigger);
+
+    const cmsListItem = getCMSItemWrapper(trigger);
+
+    const linkedin = collectSocialData(trigger, 'linkedin', instance, cmsListItem);
+
+    const shareData = createLinkedinShare(linkedin);
+
+    stores.linkedin.set(trigger, shareData);
+  },
+
+  /**
+   * Reddit creator.
+   * @param trigger
+   */
+  reddit(trigger) {
+    if (stores.reddit.has(trigger)) return;
+
+    const instance = getInstance(trigger);
+
+    const cmsListItem = getCMSItemWrapper(trigger);
+
+    const reddit = collectSocialData(trigger, 'reddit', instance, cmsListItem);
+
+    const shareData = createRedditShare(reddit);
+
+    stores.reddit.set(trigger, shareData);
+  },
+};

package/attributes-master/packages/socialshare/src/index.ts

@@ -0,0 +1,3 @@
+export { version } from '../package.json';
+export { init } from './init';
+export { ELEMENTS, SETTINGS } from './utils/constants';

package/attributes-master/packages/socialshare/src/init.ts

@@ -0,0 +1,35 @@
+import type { List } from '@finsweet/attributes-list';
+import { type FinsweetAttributeInit, waitAttributeLoaded, waitWebflowReady } from '@finsweet/attributes-utils';
+
+import { listenTriggerClicks } from './actions/trigger';
+import { createSocialShareInstances } from './factory';
+import { stores } from './utils/stores';
+
+/**
+ * Inits the attribute.
+ */
+export const init: FinsweetAttributeInit = async () => {
+  await waitWebflowReady();
+
+  // Init global click listener
+  const removeClickListener = listenTriggerClicks();
+
+  // create button for static items
+  createSocialShareInstances();
+
+  // create button from dynamic list in memory
+  const listInstances: List[] = (await waitAttributeLoaded('list')) || [];
+
+  for (const { items } of listInstances) {
+    for (const { element } of items.value) {
+      createSocialShareInstances(element);
+    }
+  }
+
+  return {
+    result: stores,
+    destroy() {
+      removeClickListener();
+    },
+  };
+};

package/attributes-master/packages/socialshare/src/utils/constants.ts

@@ -0,0 +1,94 @@
+import { type AttributeElements, type AttributeSettings } from '@finsweet/attributes-utils';
+
+export const ELEMENTS = [
+  /**
+   * Defines a Facebook social button
+   */
+  'facebook',
+
+  /**
+   * Defines a X social button
+   */
+  'x',
+
+  /**
+   * Defines a Pinterest social button
+   */
+  'pinterest',
+
+  /**
+   * Defines a Linked In social button
+   */
+  'linkedin',
+
+  /**
+   * Defines a Telegram social button
+   */
+  'telegram',
+
+  /**
+   * Defines a Reddit social button
+   */
+  'reddit',
+
+  /**
+   * Defines the Content to be share into social media
+   */
+  'content',
+
+  /**
+   * Defines a custom URL to be share into social media
+   */
+  'url',
+
+  /**
+   * Defines Facebook hashtags
+   */
+  'facebook-hashtags',
+
+  /**
+   * Defines X hashtags
+   */
+  'x-hashtags',
+
+  /**
+   * Defines X username
+   */
+  'x-username',
+
+  /**
+   * Defines Pinterest image
+   */
+  'pinterest-image',
+
+  /**
+   * Defines Pinterest description
+   */
+  'pinterest-description',
+] as const satisfies AttributeElements;
+
+export const SETTINGS = {
+  /**
+   * Defines the width of popup window.
+   */
+  width: { key: 'width', defaultValue: '600', isNumeric: true },
+
+  /**
+   * Defines the height of popup window.
+   */
+  height: { key: 'height', defaultValue: '480', isNumeric: true },
+
+  /**
+   * Defines an element.
+   */
+  element: { key: 'element' },
+} as const satisfies AttributeSettings;
+
+export const SOCIAL_SHARE_PLATFORMS = {
+  facebook: 'https://www.facebook.com/sharer/sharer.php',
+  x: 'https://x.com/intent/post/',
+  pinterest: 'https://www.pinterest.com/pin/create/trigger/',
+  reddit: 'https://www.reddit.com/submit',
+  linkedin: 'https://www.linkedin.com/sharing/share-offsite',
+  telegram: 'https://t.me/share',
+} as const;

package/attributes-master/packages/socialshare/src/utils/dom.ts

@@ -0,0 +1,8 @@
+import { CMS_CSS_CLASSES, type CollectionItemElement } from '@finsweet/attributes-utils';
+
+/**
+ * @returns A parent CMS Item element, if existing.
+ * @param element
+ */
+export const getCMSItemWrapper = (element: HTMLElement) =>
+  element.closest<CollectionItemElement>(`.${CMS_CSS_CLASSES.item}`) || undefined;

package/attributes-master/packages/socialshare/src/utils/selectors.ts

@@ -0,0 +1,6 @@
+import { generateSelectors, SOCIAL_SHARE_ATTRIBUTE } from '@finsweet/attributes-utils';
+
+import { ELEMENTS, SETTINGS } from './constants';
+
+export const { queryElement, getAttribute, getSettingSelector, getElementSelector, queryAllElements, getInstance } =
+  generateSelectors(SOCIAL_SHARE_ATTRIBUTE, ELEMENTS, SETTINGS);

package/attributes-master/packages/socialshare/src/utils/stores.ts

@@ -0,0 +1,10 @@
+import type { SocialShareStore, SocialShareTypes } from './types';
+
+export const stores: Record<SocialShareTypes, SocialShareStore> = {
+  facebook: new Map(),
+  x: new Map(),
+  pinterest: new Map(),
+  telegram: new Map(),
+  linkedin: new Map(),
+  reddit: new Map(),
+};

package/attributes-master/packages/socialshare/src/utils/types.ts

@@ -0,0 +1,34 @@
+import type { SOCIAL_SHARE_PLATFORMS } from './constants';
+
+export type SocialShareTypes = keyof typeof SOCIAL_SHARE_PLATFORMS;
+
+export interface SocialShare {
+  width: number;
+  height: number;
+  type: SocialShareTypes;
+  content: string | null;
+  url: string | null;
+}
+
+export interface FacebookSocialShare extends SocialShare {
+  hashtags: string | null;
+  type: 'facebook';
+}
+
+export interface XSocialShare extends SocialShare {
+  hashtags: string | null;
+  username: string | null;
+  type: 'x';
+}
+
+export interface PinterestSocialShare extends SocialShare {
+  image: string | null;
+  description: string | null;
+  type: 'pinterest';
+}
+
+export type SocialShareStoreData = Pick<SocialShare, 'height' | 'width' | 'type'> & {
+  shareUrl: URL;
+};
+
+export type SocialShareStore = Map<HTMLElement, SocialShareStoreData>;

package/attributes-master/packages/socialshare/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}

package/attributes-master/packages/starrating/CHANGELOG.md

@@ -0,0 +1,70 @@
+# @finsweet/attributes-starrating
+
+## 1.0.9
+
+### Patch Changes
+
+- Updated dependencies [2af0bad]
+  - @finsweet/attributes-utils@0.1.0
+
+## 1.0.8
+
+### Patch Changes
+
+- Updated dependencies [378d74d]
+  - @finsweet/attributes-utils@0.0.6
+
+## 1.0.7
+
+### Patch Changes
+
+- Updated dependencies [01973d8]
+  - @finsweet/attributes-utils@0.0.5
+
+## 1.0.6
+
+### Patch Changes
+
+- Updated dependencies [deef758]
+  - @finsweet/attributes-utils@0.0.4
+
+## 1.0.5
+
+### Patch Changes
+
+- Updated dependencies [d21cbca]
+  - @finsweet/attributes-utils@0.0.3
+
+## 1.0.4
+
+### Patch Changes
+
+- c7b544d: chore: updated dependencies
+- Updated dependencies [c7b544d]
+  - @finsweet/attributes-utils@0.0.2
+
+## 1.0.3
+
+### Patch Changes
+
+- b56e5e5: rename fsAttribute in places of usage to finsweetAttribute
+- Updated dependencies [b56e5e5]
+  - @finsweet/attributes-utils@0.0.1
+
+## 1.0.2
+
+### Patch Changes
+
+- 1126763c: Fixed star selection not working correctly on iOS devices
+
+## 1.0.1
+
+### Patch Changes
+
+- 5144fe6b: Changed default `is-active` class name to `is-active-starrating`.
+
+## 1.0.0
+
+### Major Changes
+
+- 3111ec89: Created `fs-starrating` Attribute.

package/attributes-master/packages/starrating/README.md

@@ -0,0 +1,25 @@
+# `starrating` Attribute
+
+Star rating radio button component inside any Webflow form.
+
+## Getting Started
+
+Please follow the documentation at [finsweet.com/attributes](https://www.finsweet.com/attributes) to learn how to use Attributes in your Webflow projects.
+
+## Accessing the API
+
+To learn how to access the API, please check the general [API Reference](../attributes/README.md#api-reference) documentation:
+
+```javascript
+window.FinsweetAttributes ||= [];
+window.FinsweetAttributes.push([
+  'starrating',
+  () => {
+    // Your code goes here.
+  },
+]);
+```
+
+## License
+
+[Apache 2.0](../../LICENSE.md)

package/attributes-master/packages/starrating/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@finsweet/attributes-starrating",
+  "version": "1.0.9",
+  "description": "Star rating radio button component inside any Webflow form.",
+  "private": true,
+  "type": "module",
+  "types": "src/index.ts",
+  "scripts": {
+    "lint": "eslint ./src && prettier --check ./src",
+    "lint:fix": "eslint ./src --fix && prettier --write ./src",
+    "check": "tsc --noEmit"
+  },
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts"
+    }
+  },
+  "dependencies": {
+    "@finsweet/attributes-utils": "workspace:*"
+  }
+}