AdminPanels - Plugin Info & Requirements

Plugin Name: AdminPanels
Author: ChadCollins.com
License: Paid - Themeforest.net/license
Website: https://wrapbootstrap.com/theme/absoluteadmin
Dependencies:
All resources have been included in theme core(utility.js)

Basic Panel Setup

Admin Panel
Body Content!
Copy 

<!-- Wrap content in admin-panel class -->
<div class="admin-panels">

    <!-- Create a new row for each panel -->
    <div class="row">

      <!-- mark column with required admin-grid class -->
      <div class="col-md-12 admin-grid">

        <!-- set a unique ID for every panel -->
        <div class="panel" id="p1">
            <div class="panel-heading">
                 <span class="panel-icon"><i class="fa fa-check"></i></span>
                 <span class="panel-title"> Admin Panel</span>
            </div>        
            <div class="panel-body" ></div>
        </div>

      </div>
    </div>
</div>
Copy 

// Init Admin Panels on widgets inside the ".admin-panels" container
$('.admin-panels').adminpanel({
    grid: '.admin-grid', // set column class
    onFinish: function() {
        // On Init complete fadeIn adminpanel content
        $('.admin-panels').addClass('animated fadeIn').removeClass('fade-onload');
    },
});

Options

Copy 

$('.admin-panels').adminpanel({
    grid: '.admin-grid',
    draggable: true,
    preserveGrid: true,
    mobile: true
});
Option Description
grid: This currently should always be set to .admin-grid. However, this will change in a future javascript rework
preserveGrid: Setting this option true will dynamically insert an invisible placeholder into empty rows so that they are always available for use. Otherwise empty rows will be ignored.
draggable: Setting this true will allow admin panels to be dragged and placed into new positions.
mobile: Setting this true will force admin panels to have a mobile friendly toolbar. This automatically occurs when an admin panels width does not allow for a toolbar in its header

Callbacks

Copy 

$('.admin-panels').adminpanel({
    onStart: function() {
        // Do something
    },
    onFinish: function() {
        // Do something
    },
    onDrop: function() {
        // Do something
    }
    onSave: function() {
        // Do something
    }
    onPanel: function() {
        // Do something
    },
});
Callback Description
onStart This event fires on plugin initilization but before admin panels have had their options calculated.
onFinish This event fires after admin panels have had their position and options calculated and applied.
onDrop This event fires when an admin panel has been dragged and dropped. If the panel is dropped into a new area an onSave callback will also fire.
onSave This event fires when an admin panel option or position has been changed.
onPanel This callback fires when a user has clicked the custom onPanel toolbar button.

Accessing Panel Data

Admin Panels stores all of its settings in a LocalStorage object which can be accessed using the unique keys below

Copy

// Panel LocalStorage Keys
var settingsKey = 'panel-settings_' + location.pathname;
var positionsKey = 'panel-positions_' + location.pathname;

// Pull panels LocalStorage data
var settingsGet = localStorage.getItem(settingsKey);
var positionsGet = localStorage.getItem(positionsKey);

// Parse LocalStorage data string
var parseSettings = JSON.parse(settingsGet);

// Data contains an array of objects with individual panel data such as
{"panel":{
    "id": "p2", // panel unique ID
    "title": "Charts", // panel title
    "collapsed": 0, // panel collapsed state
    "hidden": 0, // panel hidden(removed) state
    "color": "panel-alert"} // panel contextual color
}

Manipulating Panel Data

Combine with callback methods to update data you need sent to an app or database

Copy

// Init Admin Panels on widgets
$('.admin-panels').adminpanel({
    grid: '.admin-grid',
    onSave: function() { // onSave callback - we pull updated data

        // Panel LocalStorage Keys
        var settingsKey = 'panel-settings_' + location.pathname;
        var positionsKey = 'panel-positions_' + location.pathname;

        // Pull panels LocalStorage data
        var settingsGet = localStorage.getItem(settingsKey);
        var positionsGet = localStorage.getItem(positionsKey);

        // Parse LocalStorage data string
        var parseSettings = JSON.parse(settingsGet);

        // Do something with returned data
        // such as update a database or app
        console.log('Key contains: ', parseSettings);

    }
});

Clearing Local Storage

It is a good idea to clear your LocalStorage anytime you manually edit HTML that contains Admin Panels. This can help prevent and stop many errors you may encounter. A basic method used to clear a users local storage/AdminPanel data:

Copy

// Clear a browsers local storage
localStorage.clear();

// Refresh a browser window
location.reload();

// Example combining both methods - Attached to click event
$('#Example-button').on('click', function() {
    localStorage.clear();
    location.reload();
});

Panel Grid Templates:

We have provided several premade templates to aid you in the creation of AdminPanel grids. Links to these templates can be found below:

2 Column Grid 3 Column Grid Mixed 3 Column Grid Multi Row Grid 1 Multi Row Grid 2
Return to Top