Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add set layout option feature #181

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

add set layout option feature #181

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
08191f9
add set layout options feature
igorveremsky Oct 30, 2018
864db42
add layout option assets depends feature
igorveremsky Oct 30, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 22 additions & 26 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,39 +181,35 @@ Here is the list of available skins:
"skin-green-light"
```

#### Disabling skin file loading, when using bundled assets
### Layout

Yii::$container->set(
AdminLteAsset::className(),
[
'skin' => false,
]
);
By default the extension uses default layout for AdminLTE. You can change it in config file.

If you want to use native DOM of headers AdminLTE

```html
<h1>
About <small>static page</small>
</h1>
```php
'components' => [
'assetManager' => [
'bundles' => [
'dmstr\web\AdminLteAsset' => [
'layout' => dmstr\helpers\AdminLteHelper::LAYOUT_OPTION_FIXED,
],
],
],
],
```

then you can follow the code:

```php
/* @var $this yii\web\View */
**Note:** Best way to set layout option is to use options constants from `AdminLteHelper`.

$this->params['breadcrumbs'][] = 'About';
And then just add class specific for layout to body. You can use `AdminLteHelper::layoutHtmlClass()` if you want to get always correct html class and don't want to alter every view file when you change layout option.
```html
<body class="<?= \dmstr\helpers\AdminLteHelper::layoutHtmlClass() ?>">
```

$this->beginBlock('content-header'); ?>
About <small>static page</small>
<?php $this->endBlock(); ?>
#### Template Examples

<div class="site-about">
<p> This is the About page. You may modify the following file to customize its content: </p>
<code><?= __FILE__ ?></code>
</div>
```
* [Fixed](https://adminlte.io/themes/AdminLTE/pages/layout/fixed.html)
* [Collapsed Sidebar](https://adminlte.io/themes/AdminLTE/pages/layout/collapsed-sidebar.html)
* [Boxed Layout](https://adminlte.io/themes/AdminLTE/pages/layout/boxed.html)
* [Top Navigation](https://adminlte.io/themes/AdminLTE/pages/layout/top-nav.html)

### Left sidebar menu - Widget Menu

Expand Down
36 changes: 35 additions & 1 deletion helpers/AdminLteHelper.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,12 @@

class AdminLteHelper
{
/**
const LAYOUT_OPTION_FIXED = 'fixed';
const LAYOUT_OPTION_COLLAPSED_SIDEBAR = 'sidebar-collapse';
const LAYOUT_OPTION_BOXED_LAYOUT = 'boxed';
const LAYOUT_OPTION_TOP_NAVIGATION = 'top-nav';

/**
* It allows you to get the name of the css class.
* You can add the appropriate class to the body tag for dynamic change the template's appearance.
* Note: Use this fucntion only if you override the skin through configuration.
Expand All @@ -20,4 +25,33 @@ public static function skinClass()

return $bundle->skin;
}

/**
* It allows you to get the name of the layout wrapper html class.
* You can add the appropriate class to the body tag for dynamic change the template's appearance.
*
* @return string
*/
public static function layoutHtmlClass()
{
/** @var \dmstr\web\AdminLteAsset $bundle */
$bundle = Yii::$app->assetManager->getBundle('dmstr\web\AdminLteAsset');

return ($layout = $bundle->layout) ? self::getLayoutHtmlClassOptions()[$layout] : '';
}

/**
* Get layout wrapper html classes options
*
* @return array
*/
public static function getLayoutHtmlClassOptions()
{
return [
self::LAYOUT_OPTION_FIXED => 'fixed',
self::LAYOUT_OPTION_COLLAPSED_SIDEBAR => 'sidebar-collapse',
self::LAYOUT_OPTION_BOXED_LAYOUT => 'layout-boxed',
self::LAYOUT_OPTION_TOP_NAVIGATION => 'layout-top-nav',
];
}
}
50 changes: 50 additions & 0 deletions web/AdminLteAsset.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
<?php
namespace dmstr\web;

use dmstr\helpers\AdminLteHelper;
use yii\base\Exception;
use yii\base\InvalidConfigException;
use yii\web\AssetBundle as BaseAdminLteAsset;

/**
Expand Down Expand Up @@ -29,6 +31,18 @@ class AdminLteAsset extends BaseAdminLteAsset
*/
public $skin = '_all-skins';

/**
* @var string|bool Set layout options, eg. `'fixed'` or set `false` to default
* @see https://adminlte.io/themes/AdminLTE/documentation/index.html#layout
*
* Examples:
* @see Fixed - https://adminlte.io/themes/AdminLTE/pages/layout/fixed.html
* @see Collapsed Sidebar - https://adminlte.io/themes/AdminLTE/pages/layout/collapsed-sidebar.html
* @see Boxed Layout - https://adminlte.io/themes/AdminLTE/pages/layout/boxed.html
* @see Top Navigation - https://adminlte.io/themes/AdminLTE/pages/layout/top-nav.html
*/
public $layout = false;

/**
* @inheritdoc
*/
Expand All @@ -43,6 +57,42 @@ public function init()
$this->css[] = sprintf('css/skins/%s.min.css', $this->skin);
}

// Append layout options
if ($layout = $this->layout) {
if (!array_key_exists($layout, AdminLteHelper::getLayoutHtmlClassOptions())) {
throw new InvalidConfigException('Invalid layout specified');
}

$layoutExtraAssetsOptions = self::getLayoutExtraAssetsOptions();
if (array_key_exists($layout, $layoutExtraAssetsOptions)) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This section could be problematic when bundling assets, since some stuff is loaded dynamically.

Might be an option to register the additional asset files manually via the ExtraAsset... - although this is not a perfect solution.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But this stuff (extra assets) is needed by default for specific layout. Maybe, to do it more flexible we can create AdminLteBowerAsset that adds possibility for developers to connect scripts, styles from bower_components directory at almasaeed2010/adminlte package.

But somehow logic that for specific layout options asset connect extra scripts, styles must be present.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

its related to #180

Copy link
Author

@igorveremsky igorveremsky Nov 1, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think also solution can be write a notes to docs that some layouts by default adds extra js, css from bower_components

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But instead of setting a property, how about simply registering AdminLteFixedLayoutAsset instead of AdminLteAsset?

if (isset($layoutExtraAssetsOptions[$layout]['js'])) {
$this->js = array_merge($this->js, $layoutExtraAssetsOptions[$layout]['js']);
}
if (isset($layoutExtraAssetsOptions[$layout]['css'])) {
$this->css = array_merge($this->css, $layoutExtraAssetsOptions[$layout]['css']);
}
if (isset($layoutExtraAssetsOptions[$layout]['depends'])) {
$this->depends = array_merge($this->depends, $layoutExtraAssetsOptions[$layout]['depends']);
}
}
}

parent::init();
}

/**
* Get extra scripts and styles options needed to specific layout
*
* @return array
*/
public static function getLayoutExtraAssetsOptions()
{
return [
AdminLteHelper::LAYOUT_OPTION_FIXED => [
'depends' => [
AdminLteFixedLayoutAsset::class
]
],
];
}
}
17 changes: 17 additions & 0 deletions web/AdminLteFixedLayoutAsset.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<?php
namespace dmstr\web;

use yii\web\AssetBundle as BaseAdminLteAsset;

/**
* AdminLteFixedLayout AssetBundle
* @since 0.1
*/
class AdminLteFixedLayoutAsset extends BaseAdminLteAsset
{
public $sourcePath = '@vendor/almasaeed2010/adminlte/bower_components/jquery-slimscroll';
public $css = [];
public $js = [
'jquery.slimscroll.min.js',
];
}