# SmartPanels EXTENSION Panels can be used in almost any situation, helping wrap everything in a slick & lightweight container

Important information

Turn your ordinary panels to SmartPanel. Smartpanels lets you add buttons dynamically to panel header using data attributes. All panels are Sortable across all bootstrap col-spans and uses `localStorage` to store position, color, collapse state and various other panel settings. Use built in hooks to detect state change of panels and execute your script.

This plugin is exclusive and is built in house to compliment SmartAdmin WebApp. The current version of this plugin does not allow to generate dynamic widgets.

#### Options See all available options

Clear settings key Clear position key Clear all storage keys

## Disable Features

This panel features are disabled by adding data attributes to `.panel`. To disable all, we add the following: `data-panel-sortable`, `data-panel-collapsed`, `data-panel-fullscreen`, `data-panel-close`, `data-panel-locked`, `data-panel-refresh`, `data-panel-reset`, `data-panel-color`

## Refresh Panel

Refresh panels allows you to hook your own script to refresh ajax calls. You can also set the refresh timer by using the attribute `data-refresh-timer="1000"`. You can disable refresh button by adding the attribute `data-panel-refresh`

## Color Change

Change panel header colors using the built in color changer. The feature can be turned off by using the data attribute `data-panel-color`. You can also add your own colors to the pallet setting the `panelColors` option

## Reset Settings

You can reset any changes you make to a panel using the reset button. It will reset panel styles, collapse state, and any panel colors. You can disable the reset button by adding the data-attribute `data-panel-reset`

## Panel toolbar

You can place any visual elements to the content area, and have multiple `.panel-content`. Check out the general panels page for more examples of what you can add to panel headers and panel footer
This is a textarea - below me is panel footer and above is the a utility made toolbar!
Auto save

## Collapsable Panel

This panel is collapsable, and it is using the bootstrap's collapse function. You can disable the collapse button by using `data-panel-collapsed`

## Collapsed State

This panel was collapse on page load. To collapse a panel on page load, simply add the class `.collapse` to your `.panel-container`

## Fullscreen Panel

This panel was collapse on page load. To collapse a panel on page load, simply add the class `.collapse` to your `.panel-container`

Usefull when viewing images, gallery, tables with large data and maps. There are much useful applications to this method. When a panel is on fullscreen, printing a page will only print the fullscreen panel content.

## Close Panels

By deleting a panel you will remove the panel from the page and will need to connect the backend with the onevent handler to delete it from database. You can disable the delete button by adding the attribute `data-panel-close`

## Locked Panels

Locked panels cannot be dragged, but you can change all other settings. All locked panels will display a red lock icon on the panel header, indicating that it is locked. You can disable the lock button by adding the attribute `data-panel-locked`

## Sortable Disabled

Similar to panel lock, the panel sortable uses data attribute to lock the position of the panel to the grid. This is hardcoded and users do not have control over unlocking it. To enable this feature, add the data attribute `data-panel-sortable`

## Custom Button

Add custom buttons globally via the panel configuration options. You can add your own custom labels and functions. You can disable the custom button also through the use of attribute `data-panel-custombutton`

#### Documentation SmartPanel information and how to use them

##### Usage Data Atributes

HTML5 data attributes | Example value(s) | Desctription
--- | --- | ---
data-panel-collapsed | false or blank | Prevent a panel from having a toggle button (can only be used with the value 'false').
data-panel-fullscreen | false or blank | Prevent a panel from having a fullscreen button (can only be used with the value 'false').
data-panel-close | false or blank | Prevent a panel from having a delete button (can only be used with the value 'false').
data-panel-locked | false or blank | Prevent a panel from having a lock button (can only be used with the value 'false').
data-panel-refresh | false or blank | Prevent a panel from having a refresh button (can only be used with the value 'false').
data-refresh-timer | int | Set timer for refresh panel. See `data-panel-refresh`
data-panel-reset | false or blank | Prevent a panel from having a reset button (can only be used with the value 'false').
data-panel-color | false or blank | Prevent a panel from having color selection option (can only be used with the value 'false').
data-panel-custombutton | false or blank | Prevent a panel from having a custom button (can only be used with the value 'false').
data-panel-sortable | false or blank | Restrict a panel's sorting feature (can only be used with the value 'false').
These HTML5 attributes are used as individual panel options. Main options can be changed in the panel plugin it self. Notice: data attributes can only have 1 boolan value or none!

##### SmartPanel's HTML structure (this will change when the widget is intialized)

    <div id="panel-id" class="panel">
      <div class="panel-hdr">
        <h2>
          Panel Title
        </h2>
      </div>
      <div class="panel-container show">
        <div class="panel-content">
          Content
        </div>
      </div>
    </div>

##### Initialization Options

    $('#js-page-content-demopanels').smartPanel({
        localStorage: true,
        onChange: function () {},
        onSave: function () {},
        opacity: 1,
        deleteSettingsKey: '#deletesettingskey-options',
        settingsKeyLabel: 'Reset settings?',
        deletePositionKey: '#deletepositionkey-options',
        positionKeyLabel: 'Reset position?',
        sortable: true,
        buttonOrder: '%collapse% %fullscreen% %close%',
        buttonOrderDropdown: '%refresh% %locked% %color% %custom% %reset%',
        customButton: true,
        customButtonLabel: "Custom Button",
        onCustom: function () {},
        closeButton: true,
        onClosepanel: function() {
          if (myapp_config.debugState)
            console.log($(this).closest(".panel").attr('id') + " onClosepanel")
        },
        fullscreenButton: true,
        onFullscreen: function() {
          if (myapp_config.debugState)
            console.log($(this).closest(".panel").attr('id') + " onFullscreen")
        },
        collapseButton: true,
        onCollapse: function() {
          if (myapp_config.debugState)
            console.log($(this).closest(".panel").attr('id') + " onCollapse")
        },
        lockedButton: true,
        lockedButtonLabel: "Lock Position",
        onLocked: function() {
          if (myapp_config.debugState)
            console.log($(this).closest(".panel").attr('id') + " onLocked")
        },
        refreshButton: true,
        refreshButtonLabel: "Refresh Content",
        onRefresh: function() {
          if (myapp_config.debugState)
            console.log($(this).closest(".panel").attr('id') + " onRefresh")
        },
        colorButton: true,
        colorButtonLabel: "Panel Style",
        onColor: function() {
          if (myapp_config.debugState)
            console.log($(this).closest(".panel").attr('id') + " onColor")
        },
        panelColors: ['bg-primary-700 bg-success-gradient',
                'bg-primary-500 bg-info-gradient',
                'bg-primary-600 bg-primary-gradient',
                'bg-info-600 bg-primray-gradient',
                'bg-info-600 bg-info-gradient',
                'bg-info-700 bg-success-gradient',
                'bg-success-900 bg-info-gradient',
                'bg-success-700 bg-primary-gradient',
                'bg-success-600 bg-success-gradient',
                'bg-danger-900 bg-info-gradient',
                'bg-fusion-400 bg-fusion-gradient',
                'bg-faded'],
        resetButton: true,
        resetButtonLabel: "Reset Panel",
        onReset: function() {
          if (myapp_config.debugState)
            console.log( $(this).closest(".panel").attr('id') + " onReset callback" )
        }
    });

- Home
- Inbox
- Add More

Tracey Chang
IT Director

- Tracey Chang Online
- Oliver Kopyuv Online
- Dr. John Cook PhD Away
- Ali Amdaney Online
- Sarah McBrook Online
- oliver.kopyuv@gotbootstrap.com Offline
- oliver.kopyuv@gotbootstrap.com Busy
- oliver.kopyuv@gotbootstrap.com Offline
- +714651347790 Missed Call

Jun 19

Hey Tracey, did you get my files?

3:00 pm

Hi

Sorry going through a busy time in office. Yes I analyzed the solution.

It will require some resource, which I could not manage.

3:24 pm

Okay

Sending you some dough today, you can allocate the resources to this project.

3:26 pm

Perfect. Thanks a lot!

I will have them ready by tonight.

Cheers

Jun 20
Send

#### Layout Settings User Interface Settings

##### App Layout

Fixed Header header is in a fixed at all times
Fixed Navigation left panel is fixed
Minify Navigation Skew nav to maximize space
Hide Navigation roll mouse on edge to reveal
Top Navigation Relocate left pane to top
Fixed Footer page footer is fixed
Boxed Layout Encapsulates to a container

Fixed Background

##### Mobile Menu

Push Content Content pushed on menu reveal
No Overlay Removes mesh on menu reveal
Off-Canvas (beta) Content overlaps menu

##### Accessibility

Bigger Content Font content fonts are bigger for readability
High Contrast Text (WCAG 2 AA) 4.5:1 text contrast ratio
Daltonism (beta) color vision deficiency
Preloader Inside preloader will be inside content
SmartPanel Icons (not Panels) smartpanel buttons will appear as icons

##### Global Modifications

Clean Page Background adds more whitespace
Hide Navigation Icons invisible navigation icons
Disable CSS Animation Disables CSS based animations
Hide Info Card Hides info card from left panel
Lean Subheader distinguished page header
Hierarchical Navigation Clear breakdown of nav links
Dark Navigation Navigation background is darkend

##### Global Font Size

SM MD LG XL
Change root font size to effect rem values (resets on page refresh)

##### Theme colors more info

##### Theme Modes (beta) why beta?

###### Internet Explorer Issue

This particular component may not work as expected in Internet Explorer. Please use with caution.
Default
Light
Dark

Reset Settings
Factory Reset