mirror of
https://github.com/a2nt/silverstripe-webpack.git
synced 2024-10-22 17:05:31 +02:00
Bootstrap navigation + carousel slider
This commit is contained in:
Tony Air
parent
37801ba685
commit
81f89ca8ea
@ -57,4 +57,4 @@
|
||||
},
|
||||
"prefer-stable": true,
|
||||
"minimum-stability": "dev"
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
|
||||
use SilverStripe\Forms\HTMLEditor\HtmlEditorConfig;
|
||||
use SilverStripe\Core\Manifest\ModuleResourceLoader;
|
||||
use SilverStripe\ORM\Search\FulltextSearchable;
|
||||
|
||||
HtmlEditorConfig::get('cms')->enablePlugins([
|
||||
'template',
|
||||
@ -13,3 +14,7 @@ HtmlEditorConfig::get('cms')->enablePlugins([
|
||||
'lists',
|
||||
'charcount' => ModuleResourceLoader::resourceURL('drmartingonzo/ss-tinymce-charcount:client/dist/js/bundle.js'),
|
||||
]);
|
||||
|
||||
FulltextSearchable::enable();
|
||||
|
||||
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
SilverStripe\SiteConfig\SiteConfig:
|
||||
extensions:
|
||||
- Site\Extensions\SiteConfigExtension
|
||||
- Site\Extensions\SiteConfigExtension
|
||||
|
||||
51
site/client/src/js/_components/_slider.js
Normal file
51
site/client/src/js/_components/_slider.js
Normal file
@ -0,0 +1,51 @@
|
||||
/**
|
||||
* Just an example component
|
||||
*/
|
||||
import $ from 'jquery';
|
||||
|
||||
const SliderUI = (($) => {
|
||||
class SliderUI {
|
||||
static init() {
|
||||
this.each(function ($this) {
|
||||
const $items = $this.find('.carousel-item'),
|
||||
id = $this.attr('id'),
|
||||
count = $items.length;
|
||||
|
||||
if(!count){
|
||||
return;
|
||||
}
|
||||
|
||||
if($this.data('indicators')) {
|
||||
let $controls = $('<ol class="carousel-indicators"></ol>');
|
||||
$controls.append('<li data-target="#' + id + '" data-slide-to="0" class="active"></li>');
|
||||
for (let i = 1; i < count; i++) {
|
||||
$controls.append('<li data-target="#' + id + '" data-slide-to="' + i + '"></li>');
|
||||
}
|
||||
$this.prepend($controls);
|
||||
}
|
||||
|
||||
if($this.data('arrows')){
|
||||
$this.prepend('<i class="carousel-control-prev" data-target="#' + id + '" role="button" data-slide="prev"><i class="fas fa-chevron-left" aria-hidden="true"></i><i class="sr-only">Previous</i></i>');
|
||||
$this.prepend('<i class="carousel-control-next" data-target="#' + id + '" role="button" data-slide="next"><i class="fas fa-chevron-right" aria-hidden="true"></i><i class="sr-only">Next</i></i>');
|
||||
}
|
||||
|
||||
$this.carousel();
|
||||
});
|
||||
}
|
||||
|
||||
static dispose() {
|
||||
self.each(function ($this) {
|
||||
$this.carousel('dispose');
|
||||
});
|
||||
}
|
||||
|
||||
static each(callback) {
|
||||
$('.carousel').each(function () {
|
||||
callback($(this));
|
||||
});
|
||||
}
|
||||
}
|
||||
return SliderUI;
|
||||
})($);
|
||||
|
||||
export default SliderUI;
|
||||
@ -3,6 +3,7 @@ import $ from 'jquery';
|
||||
import Events from './_events';
|
||||
// import an example component
|
||||
import Spinner from './_components/_spinner';
|
||||
import Slider from './_components/_slider';
|
||||
|
||||
const MainUI = (($) => {
|
||||
// Constants
|
||||
@ -17,6 +18,8 @@ const MainUI = (($) => {
|
||||
Spinner.hide(() => {
|
||||
$('body').addClass('loaded');
|
||||
});
|
||||
|
||||
Slider.init();
|
||||
}
|
||||
|
||||
static destroy() {
|
||||
|
||||
19
site/client/src/scss/_components/_slider.scss
Normal file
19
site/client/src/scss/_components/_slider.scss
Normal file
@ -0,0 +1,19 @@
|
||||
.carousel-control-prev,
|
||||
.carousel-control-next {
|
||||
z-index: 2;
|
||||
font-size: 3rem;
|
||||
text-shadow: 1px 1px #000;
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-indicators li {
|
||||
box-shadow: 1px 1px #000;
|
||||
}
|
||||
|
||||
.carousel-title,
|
||||
.carousel-content {
|
||||
text-shadow: 1px 1px #000;
|
||||
}
|
||||
@ -1,3 +1,5 @@
|
||||
/**
|
||||
* Your custom style
|
||||
*/
|
||||
|
||||
@import "_components/slider";
|
||||
1
site/client/src/scss/types/typography.scss
Normal file
1
site/client/src/scss/types/typography.scss
Normal file
@ -0,0 +1 @@
|
||||
@import "../_variables";
|
||||
@ -42,6 +42,7 @@ class DeferedRequirements implements TemplateGlobalProvider
|
||||
DeferedRequirements::loadJS('//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js');
|
||||
|
||||
// App libs
|
||||
DeferedRequirements::loadCSS('//use.fontawesome.com/releases/v5.0.13/css/all.css');
|
||||
DeferedRequirements::loadCSS('app.css');
|
||||
DeferedRequirements::loadJS('app.js');
|
||||
|
||||
|
||||
28
site/templates/Includes/FlexSlider.ss
Normal file
28
site/templates/Includes/FlexSlider.ss
Normal file
@ -0,0 +1,28 @@
|
||||
<% if $SlideShow %>
|
||||
<%-- Use: data-ride="carousel" to autoinitialize bootstrap carousel --%>
|
||||
<div id="Carousel{$ID}" class="carousel slide" data-indicators="true" data-arrows="true">
|
||||
<div class="carousel-inner">
|
||||
<% loop $SlideShow %>
|
||||
<div class="carousel-item<% if $First %> active<% end_if %>">
|
||||
<% if $PageLink %><a href="$PageLink.Link" title="$PageLink.MenuTitle.XML"><% end_if %>
|
||||
<% if $Image %>
|
||||
<img class="d-block w-100" src="$Image.Fill(1200,600).URL" alt="<% if $Headline %>$Headline<% end_if %>">
|
||||
<% end_if %>
|
||||
<% if $PageLink %></a><% end_if %>
|
||||
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<% if $Headline %><h2 class="carousel-title">$Headline</h2><% end_if %>
|
||||
<% if $Description %><p class="carousel-content">$Description</p><% end_if %>
|
||||
<% if $PageLinkID %>
|
||||
<p>
|
||||
<a href="$PageLink.Link" title="$PageLink.MenuTitle.XML" class="btn btn-default">
|
||||
<%t Dynamic\FlexSlider\ORM\FlexSlider.LEARN_MORE "Learn more" %>
|
||||
</a>
|
||||
</p>
|
||||
<% end_if %>
|
||||
</div>
|
||||
</div>
|
||||
<% end_loop %>
|
||||
</div>
|
||||
</div>
|
||||
<% end_if %>
|
||||
30
site/templates/Includes/NavItem.ss
Normal file
30
site/templates/Includes/NavItem.ss
Normal file
@ -0,0 +1,30 @@
|
||||
<% if $Children %>
|
||||
<li class="nav-item dropdown $ExtraClass <% if $isCurrent || $isSection %> active<% end_if %>">
|
||||
<a
|
||||
class="nav-link dropdown-toggle"
|
||||
id="NavItem{$ID}"
|
||||
role="button"
|
||||
data-toggle="dropdown"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false"
|
||||
href="{$Link}"
|
||||
title="$Title.XML"
|
||||
>
|
||||
$MenuTitle.XML
|
||||
<% if $isCurrent || $isSection %><i class="sr-only">(current)</i><% end_if %>
|
||||
</a>
|
||||
|
||||
<ul class="dropdown-menu" aria-labelledby="NavItem{$ID}">
|
||||
<% loop $Children %>
|
||||
<% include NavItem ExtraClass="dropdown-item" %>
|
||||
<% end_loop %>
|
||||
</ul>
|
||||
</li>
|
||||
<% else %>
|
||||
<li class="nav-item $ExtraClass <% if $isCurrent || $isSection %> active<% end_if %>">
|
||||
<a class="nav-link" href="{$Link}" title="$Title.XML">
|
||||
$MenuTitle.XML
|
||||
<% if $isCurrent || $isSection %><i class="sr-only">(current)</i><% end_if %>
|
||||
</a>
|
||||
</li>
|
||||
<% end_if %>
|
||||
21
site/templates/Includes/Navigation.ss
Normal file
21
site/templates/Includes/Navigation.ss
Normal file
@ -0,0 +1,21 @@
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-toggle="collapse"
|
||||
data-target="#navbarSupportedContent"
|
||||
aria-controls="navbarSupportedContent"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<i class="navbar-toggler-icon"></i>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<% loop $Navigation %>
|
||||
<% include NavItem %>
|
||||
<% end_loop %>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
@ -13,10 +13,30 @@
|
||||
<noscript><div class="main-bn"><%t Page.JAVASCRIPTREQUIRED 'Please, enable javascript.' %></div></noscript>
|
||||
|
||||
<%-- Loading Spinner --%>
|
||||
<div id="PageLoading"><div class="loading-spinner"><div class="bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div><br/><%t Page.LOADINGTEXT 'LOADING ..' %></div></div>
|
||||
<div id="PageLoading"><div class="loading-spinner"><div class="bubblingG"><i id="bubblingG_1"></i><i id="bubblingG_2"></i><i id="bubblingG_3"></i></div><br/><%t Page.LOADINGTEXT 'LOADING ..' %></div></div>
|
||||
|
||||
<header>
|
||||
|
||||
<header class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<a href="/"><img src="/resources/site/client/dist/img/logo.png" alt="{$SiteConfig.Title}" /></a>
|
||||
</div>
|
||||
<div class="col-sm-6 text-right">
|
||||
<% with $SiteConfig %>
|
||||
<% if $PhoneNumber %>
|
||||
<div class="phone-number">
|
||||
<b>Call us today:</b>
|
||||
$PhoneNumber
|
||||
</div>
|
||||
<% end_if %>
|
||||
<% end_with %>
|
||||
<% if $SearchForm %>
|
||||
<div id="SearchFormContainer">$SearchForm</div>
|
||||
<% end_if %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<% include Navigation Navigation=$SiteConfig.Navigation %>
|
||||
|
||||
</header>
|
||||
|
||||
<main data-ajax-region="LayoutAjax">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user