LittleBigHope WebFlow custom scripts

Integration

This scripts are to be used in a WebFlow environment, on a MemberStack enabled site.

Development usage

If you load the scripts directly for source, like the test pages do, you need to import common.js before the actual script.

If memberstack is not available ($memberstackDom is undefined) the script uses localStorage instead. This is be printed as warning to the console.

Production usage

Use the minifed scripts generated by the GitHub minify script action. This contains the minified version of list.js and receipe.js.

The minified versions allready contain common.js, so you don't need to import this if using that versions.

Receipe page

• Include receipe.js in the receipe page as custom footer
• Ensure a h1 tag ID hTitle for the receipe title
• Ensure a tag ID rtIngredients containing a ul ID ul for the ingredients
• Ensure a select tag ID selPersons containing the number of persons for the calculator
• Ensure a button tag ID btnAddList for adding to shopping list
• The script parses the ingredients for the list. It handles ½ and ¼ characters

Example:

<h1>Geschmorter Wirsing</h1>
<div id="rtIngredients">
    <ul id="ul">
        <li>120g Zucker</li>
        <li>½ Wirsing</li>
    </ul>
</div>
<select>
    <option value="2">2 Personen</option>
    <option value="3">3 Personen</option>
    <option value="4">4 Personen</option>
</select>
<button id="btnAddList">Zur Einkaufsliste</button>
<script src="./receipe.js"></script>

List page

• Include list.js in the shopping list page as custom footer
• Ensure a ul tag ID ulItems for the shopping list items, the script will add the items dynamically
• Ensure a button tag ID btnClear for clearing the shopping list

Example:

<ul id="ulItems"></ul>
<button id="btnClear">Clear list</button>
<script src="./list.js"></script>

Checking items from list

To allow the user to check items, an eventhandler is assigned which toggle the li elements for the checked class.

In the example we just use text-decoration: line-through;.

Button styles

To allow the user to visualize / style the progress, the script will assign the following css classes to the buttons with API calls (btnAddList / btnClear):

• btn-saving
• btn-saved

While saving the script will also apply the disabled attribute to avoid double clicking.