feat: VivesPOS landing on Winter CMS 1.2 — theme + plugin + Dockerfile
Some checks are pending
Module sub-split / Sub-split (push) Waiting to run
Some checks are pending
Module sub-split / Sub-split (push) Waiting to run
- Base: wintercms/winter branch 1.2 (full framework) - Theme vivespos: Canvas 7 + Bootstrap 5 CDN, custom CSS - Layout: deferred GTM/GA4 tracking, JSON-LD SoftwareApplication - Partials: hero (offline-first), features, modes (offline/nube toggle), screenshots, pricing (3 planes), comparison, FAQ, CTA - Plugin VivesPOS.Site with ContactForm - Dockerfile: PHP 8.2 Apache, port 80, healthcheck - Added winter/wn-pages, blog, sitemap, seo plugins - Active theme set to vivespos
This commit is contained in:
152
modules/system/assets/ui/docs/popup.md
Normal file
152
modules/system/assets/ui/docs/popup.md
Normal file
@@ -0,0 +1,152 @@
|
||||
# Popups
|
||||
|
||||
Displays a modal popup, based on the Bootstrap modal implementation.
|
||||
|
||||
- [Examples](#examples)
|
||||
- [Inline popups](#inline-popups)
|
||||
- [Remote popups](#remote-popups)
|
||||
- [API documentation](#api-docs)
|
||||
|
||||
<a name="examples"></a>
|
||||
## Examples
|
||||
|
||||
<a data-toggle="modal" href="#contentBasic" class="btn btn-primary btn-lg">Launch basic content</a>
|
||||
|
||||
<div class="control-popup modal fade" id="contentBasic" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<p>This is a very basic example of a popup...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a data-toggle="modal" href="#content-confirmation" class="btn btn-primary btn-lg">Launch Confirmation dialog</a>
|
||||
|
||||
<div class="control-popup modal fade" id="content-confirmation" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<h4 class="modal-title">Are you sure you wanna do that?</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>This is your last chance. After this, there is no turning back.</p>
|
||||
<p>You take the blue pill - the story ends, you wake up in your bed and believe whatever you want to believe. You take the red pill - you stay in Wonderland, and I show you how deep the rabbit hole goes.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Blue Pill</button>
|
||||
<button type="button" class="btn btn-primary" data-dismiss="modal">Red Pill</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a name="inline-popups"></a>
|
||||
## Inline popups
|
||||
|
||||
An inline popup places the popup content inside the current page, hidden from the view. For example, this container will not be visible on the page.
|
||||
|
||||
```html
|
||||
<div class="control-popup modal fade" id="contentBasic">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<button type="button" class="close" data-dismiss="modal">×</button>
|
||||
<p>This is a very basic example of a popup...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Use the `data-toggle="modal"` HTML attribute to launch this container as a popup.
|
||||
|
||||
```html
|
||||
<a data-toggle="modal" href="#contentBasic" class="btn btn-primary btn-lg">
|
||||
Launch basic content
|
||||
</a>
|
||||
```
|
||||
|
||||
<a name="remote-popups"></a>
|
||||
## Remote popups
|
||||
|
||||
Content for the popup can be loaded remotely using an AJAX request. Use the `data-handler` attribute to populate a popup with the contents of an AJAX handler.
|
||||
|
||||
```html
|
||||
<a
|
||||
data-control="popup"
|
||||
data-handler="onLoadContent"
|
||||
href="javascript:;"
|
||||
class="btn btn-primary btn-lg">
|
||||
Launch Ajax Form
|
||||
</a>
|
||||
```
|
||||
|
||||
Using the `data-ajax` attribute you can refer to an external file or URL directly.
|
||||
|
||||
```html
|
||||
<a
|
||||
data-control="popup"
|
||||
data-ajax="popup-content.htm"
|
||||
href="javascript:;"
|
||||
class="btn btn-primary btn-lg">
|
||||
Launch Ajax Form
|
||||
</a>
|
||||
```
|
||||
|
||||
The partial for your rendered popup should follow this structure:
|
||||
|
||||
```html
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="popup">×</button>
|
||||
<h4 class="modal-title">
|
||||
<!-- Modal header title goes here -->
|
||||
Send email
|
||||
</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<!-- Any popup content goes here -->
|
||||
<?= $this->customFormWidget->render() ?>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<!-- Popup action buttons go here -->
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-primary wn-icon-send"
|
||||
data-load-indicator="Sending">
|
||||
Send
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-default"
|
||||
data-dismiss="popup">
|
||||
<?= e(trans('backend::lang.relation.close')) ?>
|
||||
</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
<a name="api-docs"></a>
|
||||
## API documentation
|
||||
|
||||
### Options:
|
||||
- `content` - content HTML string or callback
|
||||
|
||||
### Data attributes
|
||||
- `data-control="popup"` - enables the ajax popup plugin
|
||||
- `data-ajax="popup-content.htm"` - ajax content to load
|
||||
- `data-handler="onLoadContent"` - Winter ajax request name
|
||||
- `data-keyboard="false"` - Allow popup to be closed with the keyboard
|
||||
- `data-extra-data="file_id: 1"` - Winter ajax request data
|
||||
- `data-size="large"` - Popup size, available sizes: `giant`, `huge`, `large`, `small`, `tiny`, `adaptive` (will scale to fit the window)
|
||||
- `data-adaptive-height="false"` - Allow the popup to fill the height of the screen
|
||||
|
||||
### JavaScript API
|
||||
|
||||
```js
|
||||
$('a#someLink').popup({ ajax: 'popup-content.htm' })
|
||||
$('a#someLink').popup({ handler: 'onLoadSomePopup' })
|
||||
$('a#someLink').popup({ handler: 'onLoadSomePopup', extraData: { id: 3 } })
|
||||
```
|
||||
Reference in New Issue
Block a user