How does ProductDiv work?

Start using ProductDiv by clicking the purple "PD" button in the bottom left hand of your browser. This opens ProductDiv by wrapping the current page in an iframe element so it can render the editor. Now you should see ProductDiv on the left hand side of the screen ready for use! If you see elements being highlighted while you mouse over them don't panic! We'll get to that in just a moment...

Using templates

Now that you've opened ProductDiv, there should be a green box above this paragraph. Try dragging the "Jumbotron" template into it to see how page editing works! Many of the templates tagged with "Layout" contain these drop containers and are used as scaffolding for your application!

Configuration

Templates are defined in the templates section of your configuration for you to create, modify, and extend to your liking. Some templates even include containers to place other elements in them. Many of the "Layout" components make use of this feature to make empty cards, containers, rows, etc. for you to drag elements in as you see fit. These become the building blocks of your application. To make your own container, in any template add:

<div class="productdiv-drop-container"></div>

Try adding your own styles if you want to modify the preview!

Editing Elements

Editor Actions

Much of the functionality of the Element Editor is in the actions. Under the HTML editor, you will see the available actions.

• Select Parent
  • This selects the immediate parent for this element and is useful for quickly navigating to elements that may be hard to click exactly. If you need to get to a hard to select parent element, just click its nearest child and "Select Parent" until you're on the node you want to select.
• Duplicate
  • Duplicates the currently selected element
• Delete
  • Deletes the currently selected element
• Move
  • Allows you to drag the element around like the Template Selector to move the element to a desired drop position.
• Copy HTML
  • Copies the HTML of the selected element to your clipboard
• Copy as template
  • Copies the element in a JSON format to eeasily include in your configuration as a new template

Bottom Navigation

At the bottom of the ProductDiv editor, there's a small menu for toggling ProductDiv off.

On the right-hand side of the menu you'll find actions. From here you can copy the entire page's HTML, you can open documentation, and you can toggle the Tree View. This will open a seperate menu on the right hand side of the screen to help you navigate the nested structure of the DOM. Clicking an element in the TreeView will open it in the Element Editor.

Making ProductDiv your own

ProductDiv is a foundation for your project that grows with you. It is configurable so you can add new templates and utility classes as needed! The configuration schema is here. The most basic configuration would look like:

const configuration = {
    treeViewIgnoreQuerySelectors: [
        "script",
        "style",
        "link",
        '[data-productdiv="true"]',
        "svg",
    ],
    utilityClasses: [
        {
            name: "Margin Start",
            type: "selectMany",
            classes: [
                "ms-(0|1|2|3|4|5|auto)",
                `ms-(sm|md|lg|xl|xxl)-(0|1|2|3|4|5|auto)`,
            ],
            tags: ["Spacing", "Margin"],
            selectors: [".test"],
            documentationLink:
                "https://getbootstrap.com/docs/5.0/utilities/spacing/#margin-and-padding",
        }
    ],
    templates: [
        {
            name: "Section Container",
            htmlTemplate: `
                    <section>
                        <div class="container">
                          <div class="productdiv-drop-container"></div>
                        </div>
                    </section>
                    `,
            tags: ["Layout"],
            previewWidth: string; // optional
        }
    ],
}

Above is a fully working configuration for ProductDiv. It's all templates and utility classes! Let's take a more in-depth look at the structure. Firstly treeViewIgnoreQuerySelectors will mostly be the same anywhere you use ProductDiv, but it can be used to exclude selectors of elements you don't want visible in the tree view (it can get very large with things like svgs). Under Utility classes is where things get interesting.

Editor Configuration

ProductDiv can take a second argument for Editor Configuration. The options are:

ProductDiv(Configuration, {
  htmlFormatter?(s: string): string; // When copy html functions are called, this can be used for post-processing
  preventPageLeave?: boolean; // Default: true, When this is enabled, prevents page from leaving once ProductDiv has been opened
  preventHistoryLeave?: boolean; // Default: true, When this is enabled, prevents page from leaving from history push events (client side apps)
})

Now it's time to start building!