Skip to content

Latest commit

 

History

History
1232 lines (666 loc) · 44.7 KB

README.md

File metadata and controls

1232 lines (666 loc) · 44.7 KB
Raw

Tom's Web Consulting Squarespace Library

This is a monorepo of code for adding various effects to Squarespace v7.1 and v7.0 sites.

Make a Donation

Please consider making a donation.

Your donations help me to continue to help you realize your website goals! The donation amounts are suggested amounts. Any donation amount is greatly appreciated!

Did my code help you build a site for your client and make you some dough? How about a slice of the bread for Tom?

Need Help Installing or Customizing the Code?

I'm available for consulting.

Layout Overview

twcsl contains 336 effects. Each effect has it's own version number, code, read me, and etc. Each effect is independant. In other words all the effects are not necessarily designed to work together.

  • v7.0 and v7.1 effects

  • v7.0 only effects

    • effects for all v7.0 templates

    • template specific effects

  • v7.1 only effects

  • twcsl

Effects

The rest of this document covers twcsl.js.

twcsl.js

twcsl.js is a Javascript library of common properties and methods useful for building effects in Squarespace sites.

Version 0.3.3

Install Options

  • There are two options for installing twcsl on your site depending on if your site is on a paid plan or in a trial period. Use only one of the install options. Be sure to save the changes you make when given the opportunity.

    • Paid Plan Install Steps

      • Step 1

        In your web browser visit the following URL.

        https://d1j8mu9lowy9zf.cloudfront.net/twcsl/0.3.3/twcsl-min.js

        The twcsl-min.js file will be downloaded to your computer.

      • Step 2

        In Pages > Not Linked add a Link page and link to the twcsl-min.js file.

      • Step 3

        Add the following to Website > Pages > Website Tools > Code Injection > HEADER.

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="/s/twcsl-min.js"></script>

      • The paid plan install steps are finished.

    • Trial Period Install Steps

      • Step 1

        Add the following to Website > Pages > Website Tools > Code Injection > HEADER.

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

      • Step 2

        In your web browser visit the following URL.

        https://d1j8mu9lowy9zf.cloudfront.net/twcsl/0.3.3/twcsl.min.html

        The twcsl.min.html file will display in your browser.

      • Step 3

        Copy the entire contents of the page and add it to Website > Pages > Website Tools > Code Injection > HEADER after the previously installed code. jQuery must be before the twcsl code.

      • The trial period install steps are finished.

      • Once your site is out of the trial period you may want to switch over to the paid plan install. Just reverse the trial period install steps and then follow the paid plan install steps.

Example

You want to build an effect that does something when you are on a store category product list page. You can use twcsl to test if you are on such a page with the following.

if ( twcsl.page.store.list.hasCategory ) console.log ( 'has category' );

Methods

  • getFormFieldLabel

    • getFormFieldLabel ( field )

      • Field is a jQuery object.
      • Returns form field label as entered in SS form editor interface.

  • getFormNth

    • getFormNth ( [nth form on page] )

      • Default is the first form on the page.
      • Returns jQuery object or undefined for no form.

  • getPageSectionNth

    • getPageSectionNth ( [nth section on page] )

      • Default is the first section on the page.
      • Returns jQuery object or undefined for no page section.

  • getUrlParser

    • getUrlParser ( url )

      • Returns an anchor element.

  • isElementInPage

    • isElementInPage ( element )

      • Element is a jQuery object.
      • Returns boolean.

  • isElementInViewport

    • isElementInViewport ( element )

      • Element is a jQuery object.
      • Returns boolean.

  • scrollEffect

    • scrollEffect ( callback [, easingFunction, invertScale ] )

      • Calculates the scroll postion as a ratio that is passed to your callback.

        easingFunction ( string ), default is linear

        invertScale ( boolean ), default is false

  • go

    • go ( callback )

      An initialize method if you want to write code using twcsl that works on both v7.1 and v7.0.

      • callback is a function name

  • urlToCssClassName

    • urlToCssClassName ( url )

      • Url is a string.
      • Returns a string. If the first character of the url is a number, dash, or or underscore character x- is added to the beginning of the class name.

Properties and their Methods

  • navigator ( object )

    • hasTouchScreen ( boolean )

  • page ( object )

    • album ( object )

      • is ( boolean )

      • urlSlug ( string )

    • blog ( object )

      • is ( boolean )

      • list ( object )

        • category ( string )

        • categoryUrlSlug ( string )

        • hasCategory ( boolean )

        • hasTag ( boolean )

        • is ( boolean )

        • tag ( string )

        • tagUrlSlug ( string )

      • post ( object )

        • categories ( array )

        • categoryUrlSlugs ( array )

        • is ( boolean )

        • tags ( array )

        • tagUrlSlugs ( array )

      • urlSlug ( string )

    • cart ( object )

      • is ( boolean )

    • cover ( object )

      • is ( boolean )

      • urlSlug ( string )

    • events ( object )

      • event ( object )

        • categories ( array )

        • categoryUrlSlugs ( array )

        • is ( boolean )

        • tags ( array )

        • tagUrlSlugs ( array )

      • is ( boolean )

      • list ( object )

        • category ( string )

        • categoryUrlSlug ( string )

        • hasCategory ( boolean )

        • hasTag ( boolean )

        • is ( boolean )

        • tag ( string )

        • tagUrlSlug ( string )

      • urlSlug ( string )

    • gallery ( object )

      • is ( boolean )

      • urlSlug ( string )

    • index ( object )

      • is ( boolean )

      • urlSlug ( string )

    • portfolio ( object )

      • is ( boolean )

      • list ( object )

        • is ( boolean )

      • subPage ( object )

        • is ( boolean )

      • urlSlug ( string )

    • search ( object )

      • is ( boolean )

    • store ( object )

      • detail ( object )

        • classCategories ( array, v7.0 only )

        • classTags ( array )

        • get ( object, get methods )

          • stockQuantity ( method )

            • stockQuantity ( )

              • Returns number.

        • is ( boolean )

      • is ( boolean )

      • list ( object )

        • categories ( string, v7.1 only )

        • category ( string )

        • categoryUrlSlug ( string )

        • hasCategory ( boolean )

        • hasTag ( boolean )

        • is ( boolean )

        • tag ( string )

        • tagUrlSlug ( string )

      • urlSlug ( string )

    • videos ( object )

      • is ( boolean )

      • urlSlug ( string )

  • ss ( object )

    • is70 ( boolean )

    • is71 ( boolean )

    • version ( string )

  • version ( string, twcsl version )

Changes

  • 2023-12-07

    • fix for twcsl.scrollEffect ratio calculation
    • bumped version to 0.3.3

  • 2023-03-05

    • fix for twcsl.page.blog.hasCategory not recognizing category url slugs in the ?category=myCategory format on v7.1 sites
    • bumped version to 0.3.2

  • 2023-03-04

    • fix for blog tag not returning tag
    • bumped version to 0.3.1

  • 2023-02-18

    • added twcsl.page.store.list.categories for v7.1 hierarchical categories
    • add urlToCssClassName method
    • add isElementInPage method
    • fix for twcsl.page.store.list.categoryUrlSlug for v7.1 not returning hierarchical slugs
    • bumped version to 0.3.0

  • 2022-05-03

    • fix for value not defined in _getPageFilterSlug private method
    • bumped version to 0.2.2

  • 2022-04-15

    • restore getUrlParser method
    • added twcsl.page.store.detail.get.stockQuantity method
    • bumped version to 0.2.1

  • 2022-03-25

    • cart and search pages are under the page object instead of being top level is flags
    • added page types album, cover, gallery, index, portfolio, and videos
    • massive restructuring, the overall functionality of v0.1d19 is preserved
    • bumped version to 0.2d0

  • 2022-01-28

    • fix for initialization code break for v7.1
    • bumped version to 0.1d19

  • 2022-01-21

    • make ajax compatible for v7.0
    • bumped version to 0.1d18

  • 2022-01-10

    • reworked categoryUrlSlug, categoryUrlSlugs, tagUrlSlug, and tagUrlSlugs code to return a slug more like what is seen in the SS user interface. format is /aSlugHere and category=aSlugHere depending on filtered list access method
    • fix hasCategory and hasTag not working when page is homepage ( / )
    • fixes for SS Dec. 20th 2021 structure/CSS changes
    • bumped version to 0.1d17

  • 2021-12-07

    • added isElementInViewport method
    • bumped version to 0.1d16

  • 2021-09-03

    • fixed bad blogPage isList check
    • fixes for blogPage for various v7.0 templates
    • bumped version to 0.1d15

  • 2021-08-31

    • added blogPage.isList
    • added effects outline
    • changed eventPage.isDetail to eventsPage.isEvent
    • changed eventPage to eventsPage
    • checked Five and Montauk family template support
    • bumped version to 0.1d14

  • 2021-08-06

    • changed blogPage.isDetail to isPost
    • bumped version to 0.1d13

  • 2021-07-28

    • fix for getFormFieldLabel not being exposed
    • bumped version to 0.1d12

  • 2021-07-25

    • fix for firstPageSection, changed to method getFirstPageSection
    • bumped version to 0.1d11

  • 2021-07-25

    • fix for getUrlParser not defined
    • bumped version to 0.1d10

  • 2021-07-24

    • added getUrlParser method
    • added getFormFieldLabel method
    • checked Avenue template support
    • consolidated nearly identical code into _getClassEventlistFilterText function
    • bumped version to 0.1d9

  • 2021-06-27

    • added firstPageSection
    • added storePage.classCategories
    • added blogPage
    • bumped version to 0.1d8

  • 2021-06-07

    • fix for _urlSlug undefined error on non-collection pages
    • added isCart and isSearch properties
    • bumped version to 0.1d7

  • 2021-06-04

    • reworked what was being labeled as category and tag, in many cases what was being return was not what the user enters in SS but classes or url search parameters as generated by SS
    • fix for is70 check
    • bumped version to 0.1d6

  • 2021-06-02

    • fix storePage.category being erroneously populated
    • bumped version to 0.1d5

  • 2021-06-01

    • added eventPage property
    • bumped version to 0.1d4

  • 2021-05-31

    • fix for library not initializing
    • bumped version to 0.1d3

  • 2021-05-29

    • added tags property for storePage
    • bumped version to 0.1d2

  • 2021-05-26

    • added version property for twcsl
    • filled out the documentation a bit
    • added getFormNth method
    • changed order of parameters for scrollEffect method
    • bumped version to 0.1d1

  • 2021-05-22

    • initial version