https://github.com/apostrophecms-legacy/apostrophe-area-structure

A modal window that displays a visualization of your page's area structure
https://github.com/apostrophecms-legacy/apostrophe-area-structure

Last synced: 1 day ago
JSON representation

A modal window that displays a visualization of your page's area structure

• Host: GitHub
• URL: https://github.com/apostrophecms-legacy/apostrophe-area-structure
• Owner: apostrophecms-legacy
• License: mit
• Created: 2019-06-21T15:25:32.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2020-08-20T20:54:58.000Z (over 4 years ago)
• Last Synced: 2024-12-07T01:35:09.569Z (21 days ago)
• Language: JavaScript
• Size: 5.32 MB
• Stars: 1
• Watchers: 1
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# apostrophe-area-structure

### A tool for visualizing a page's area structure

![A demo of the apostrophe-area-structure module](demo/apostrophe-area-structure-demo.gif)

This module adds a `Page Area Structure` menu item to your Page Settings menu that unspools the current page's DOM for all areas and their widgets (and those widget's areas and _their_ widgets, etc) and nests them in a way that makes it simple to see their structure, without widget players/CSS obscuring them.

The menu displays the area's `name` (key the area is stored in on the document) as well as what the parent document's title/slug.

From this menu you can delete a widget (which will delete all of its child areas, etc., just as it would if you clicked the delete button for that widget on the page).

You can also edit a widget. This will close the Page Area Structure dialog box and scroll to the widget, before activating the appropriate editor dialog box or in the case of rich text, triggering a click to initiate the on-page editor.

## Installation

In your Apostrophe project:

- `npm i apostrophe-area-structure`

- In your `app.js`

```javascript

const apos = require('apostrophe')({

  shortName: 'my-project',

  modules: {

    // ... other configuration

    'apostrophe-area-structure': {}

  }

});

```