Skip to content

Commit

Permalink
Implemented #1129 - Implemented suggestions for Jumbotron
Browse files Browse the repository at this point in the history
  • Loading branch information
@torinfo
torinfo committed Jun 29, 2022
1 parent e3a36e1 commit 66f5ecc
Show file tree
Hide file tree
Showing 8 changed files with 139 additions and 16 deletions.
2 changes: 2 additions & 0 deletions languages/engine_en-GB.xml
View file
Expand Up @@ -241,6 +241,8 @@
<search title="Search" searchBtn="Search" goBtn="Go" newBtn="New Search" resultTitle="Results" matchTitle1="Matches" matchTitle2="Best matches" matchTitle3="Partial matches" showMatch="Show partial matches" noMatch1="No pages or sections match your selection." noMatch2="No pages or sections completely match your criteria. Partial matches are listed below." />
<print printBtn="Print page"/>

<fullScreenBannerInfo label="Scroll down for more information..."/>

<scormTrackingAlert warning="Please note: SCORM mode is '{0}'. This means that your progress, interactions and results from this viewing will not be tracked or saved. For tracking you should start a new attempt."/>

</language>
2 changes: 2 additions & 0 deletions languages/engine_nl-BE.xml
View file
Expand Up @@ -219,6 +219,8 @@
<search title="Zoek" searchBtn="Zoek" goBtn="Zoek" newBtn="Nieuwe Zoekopdracht" resultTitle="Resultaten" matchTitle1="Gevonden" matchTitle2="Beste resultaten" matchTitle3="Gedeeltelijk gevoden" showMatch="Laat gedeeltelijke resultaten zien" noMatch1="Geen enkele pagina of sectie voldoet aan de zoekopdracht" noMatch2="Geen enkele pagina of sectie voldoet volledig aan uw zoekopdracht. Gedeeltelijke resultaten staan hieronder." />
<print printBtn="Print pagina"/>

<fullScreenBannerInfo label="Scroll naar beneden voor meer informatie..."/>

<scormTrackingAlert warning="Let op: de SCORM mode is '{0}'. Dat betekent dat je voortgang, interacties en resulaten van deze sessie niet getracked of opgeslagen worden. Start een nieuwe poging om tracking mogelijk te maken."/>

</language>
2 changes: 2 additions & 0 deletions languages/engine_nl-NL.xml
View file
Expand Up @@ -219,6 +219,8 @@
<search title="Zoek" searchBtn="Zoek" goBtn="Zoek" newBtn="Nieuwe Zoekopdracht" resultTitle="Resultaten" matchTitle1="Gevonden" matchTitle2="Beste resultaten" matchTitle3="Gedeeltelijk gevoden" showMatch="Laat gedeeltelijke resultaten zien" noMatch1="Geen enkele pagina of sectie voldoet aan de zoekopdracht" noMatch2="Geen enkele pagina of sectie voldoet volledig aan uw zoekopdracht. Gedeeltelijke resultaten staan hieronder." />
<print printBtn="Print pagina"/>

<fullScreenBannerInfo label="Scroll naar beneden voor meer informatie..."/>

<scormTrackingAlert warning="Let op: de SCORM mode is '{0}'. Dat betekent dat je voortgang, interacties en resulaten van deze sessie niet getracked of opgeslagen worden. Start een nieuwe poging om tracking mogelijk te maken."/>

</language>
54 changes: 53 additions & 1 deletion modules/site/parent_templates/site/common/css/custom.css
View file
Expand Up @@ -708,4 +708,56 @@ and (max-width :600px) {
a[href]:after {
content: none !important;
}
}
}

/* --SCROLL DOWN PROMPT STYLE AND ANIMATION-------------------------------------- */
/*navigation promt arrow and text*/
@keyframes x_bounce {
0%,
20%,
50%,
80%,
100% {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-moz-transform: translateY(-15px);
-ms-transform: translateY(-15px);
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
#x_clickableWrapper {
position: fixed;
width: 100vw;
left: calc(-50vw + 50%);
bottom: 0;
padding-bottom: 16px;
text-align: center;
color: #eaeaea;
cursor: pointer;
z-index: 1;
}
.x_arrow {
margin-bottom: 10px;
}
.x_arrow i {
text-shadow: 4px 6px 12px rgba(0, 0, 0, .7);
}
.x_promptText {
font: 400 15px 'Roboto Condensed', sans-serif;
}
.x_bounce {
-moz-animation: x_bounce 2s infinite;
-webkit-animation: x_bounce 2s infinite;
animation: x_bounce 2s infinite;
}
80 changes: 68 additions & 12 deletions modules/site/parent_templates/site/common/js/application.js
View file
Expand Up @@ -36,6 +36,8 @@ var defaultHeaderCss;
var urlParams = {};
var categories;
var validPages = [];
var collapseBanner = false;
var collapseHeight = 200;

function init(){
loadContent();
Expand Down Expand Up @@ -1341,7 +1343,7 @@ function x_navigateToPage(force, pageInfo) { // pageInfo = {type, ID}
if (tempPageIndex != undefined) {
parseContent({ type: "index", id: tempPageIndex });
}
this.CheckBanner(tempPageIndex)
this.x_CheckBanner(tempPageIndex)

// Then try to look them up by ID
} else {
Expand Down Expand Up @@ -1397,25 +1399,79 @@ function x_navigateToPage(force, pageInfo) { // pageInfo = {type, ID}
if (found == false) {
console.log("Page/section with ID *" + pageInfo.ID + "* not found");
}
this.CheckBanner(i)
this.x_CheckBanner(i)
}
}

function CheckBanner(index){
function x_CheckBanner(index){
debugger
var banner = $(data).find('page').eq(index).attr('headerBanner');
if(banner == "Jumbotron"){
$(".jumbotron").addClass("scale");
const banner = $(data).find('page').eq(index).attr('headerBanner');
if(banner == "fullscreen"){
$(".jumbotron").addClass("x_scale");
var viewHeight = $(this).height();
$(".scale").height(viewHeight);
}else{
$(".jumbotron").removeClass("scale");
$(".x_scale").height(viewHeight);
// check collapse
const collapse = $(data).find('page').eq(index).attr('bannerCollapse');
if (collapse != undefined && collapse=="true")
{
collapseBanner = true;
let height=200;
if ($(data).find('page').eq(index).attr('bannerHeight') !== undefined)
{
height = $(data).find('page').eq(index).attr('bannerHeight');
}
collapseHeight = height;
}
else
{
collapseBanner = false;
}
// check info
const checkinfo = $(data).find('page').eq(index).attr('bannerFullScrolldownInfo');
if (checkinfo != undefined && checkinfo=="true")
{
// Add fullscreen info in clickableWrapper
// Get text from languageData
const label = (languageData.find("fullScreenBannerInfo")[0] != undefined && languageData.find("fullScreenBannerInfo")[0].getAttribute('label') != null ? languageData.find("fullScreenBannerInfo")[0].getAttribute('label') : 'Scroll down for more information...');
setTimeout(function () {
if ($(".arrow").length) {
return false;
}
$("<div id='x_clickableWrapper'><div class='x_arrow x_bounce'><i class='fa fa-chevron-down fa-2x' aria-hidden='true'></i></div><div class='x_promptText'>" + label + "</div></div>").appendTo(".jumbotron .container").hide().fadeIn(1000);
}, 800);
}

}else if (banner == "fixedheight") {
let height=200;
if ($(data).find('page').eq(index).attr('bannerHeight') !== undefined)
{
height = $(data).find('page').eq(index).attr('bannerHeight');
}
collapseHeight = height;
$(".jumbotron").removeClass("x_scale");
$(".jumbotron").css({
"height":"200px"
})
"height":height + "px"
});
}
}

//this is the main scroll function
$(window).scroll(function () {
if ($(document).scrollTop() > 20) {
if (collapseBanner) {
$(".x_scale").addClass("x_shrink");
$(".x_scale").css("height", collapseHeight + "px");
$("#x_clickableWrapper").remove();
}
} else {
if (collapseBanner) {
$(".x_scale").removeClass("x_shrink");
$(".x_scale").css("height", Math.max(document.documentElement.clientHeight, window.innerHeight || 0));
}
}
});


// function loads a new page
function parseContent(pageRef, sectionNum, contentNum, addHistory) {
// pageRefType determines how pageID should be dealt with
Expand Down Expand Up @@ -1513,7 +1569,7 @@ function parseContent(pageRef, sectionNum, contentNum, addHistory) {

// store current page
currentPage = pageIndex;
this.CheckBanner(currentPage)
this.x_CheckBanner(currentPage)

//set the main page title and subtitle
$('#pageTitle').html(page.attr('name'));
Expand Down
5 changes: 4 additions & 1 deletion modules/site/parent_templates/site/wizards/en-GB/data.xwd
View file
Expand Up @@ -144,7 +144,10 @@
<headerRepeat type="ComboBox" data="repeat,repeat-x,repeat-y,no-repeat" options="Horizontal and Vertical Repeat,Horizontal Repeat,Vertical Repeat,No Repeat" optional="true" label="Image Repeat" defaultValue="repeat" width="175"/>
<headerColour type="ColourPicker" optional="true" label="Background Colour"/>
<headerTextColour type="ColourPicker" optional="true" label="Text Colour"/>
<headerBanner type="ComboBox" data="Jumbotron,Smaller banner" options="Jumbotron,Smaller banner" optional="true" label="Banner" defaultValue="Smaller banner" width="175"/>
<headerBanner type="ComboBox" label="Banner" conditionTrigger="true" data="fullscreen,fixedheight" options="Full screen,Fixed height" optional="true" defaultValue="fixedheight" width="175" tooltip="Choose whether the banner needs to be full screen or fixed height when opening page"/>
<bannerHeight type="NumericStepper" label="Banner height" min="50" max="500" step="25" width="100" optional="true" defaultValue="200" tooltip="The height of the fixed height banner or the collapsed full height banner"/>
<bannerCollapse type="CheckBox" condition="headerBanner=='fullscreen'" label="Collapse banner" optional="true" defaultValue="true" tooltip="Whether to collapse the full screen banner when scrolling down"/>
<bannerFullScrolldownInfo type="CheckBox" condition="headerBanner=='fullscreen'" label="Enable scroll down info" optional="true" defaultValue="true" tooltip="Show an arrow and a help text to scroll down when the banner is full screen"/>
</headerGroup><pageLink label="Page Link" type="TextInput" wysiwyg="true" defaultValue="" optional="true" tooltip="The link text for the page menu (by default this will be the page title)" common="true"/><hideShow type="group" label="Hide/Show Page" optional="true" tooltip="Hide the page completely or hide/show the page between specified dates" info="Hide this page from view at all times or use the 'From' &amp; 'Until' fields to specify when it should be available" common="true">
<hidePage label="Hide Page" type="CheckBox" defaultValue="false" optional="true"/>
<hideOnDate label="From" type="DateField" defaultValue="" optional="true" allowBlank="true" preventPrev="true" tooltip="Use the calendar to select a date (format YYYY-MM-DD)"/>
Expand Down
5 changes: 4 additions & 1 deletion src/site/wizards/en-GB/basicPages.xwd
View file
Expand Up @@ -8,7 +8,10 @@
<headerRepeat type="ComboBox" data="repeat,repeat-x,repeat-y,no-repeat" options="Horizontal and Vertical Repeat,Horizontal Repeat,Vertical Repeat,No Repeat" optional="true" label="Image Repeat" defaultValue="repeat" width="175"/>
<headerColour type="ColourPicker" optional="true" label="Background Colour"/>
<headerTextColour type="ColourPicker" optional="true" label="Text Colour"/>
<headerBanner type="ComboBox" data="Jumbotron,Smaller banner" options="Jumbotron,Smaller banner" optional="true" label="Banner" defaultValue="Smaller banner" width="175"/>
<headerBanner type="ComboBox" label="Banner" conditionTrigger="true" data="fullscreen,fixedheight" options="Full screen,Fixed height" optional="true" defaultValue="fixedheight" width="175" tooltip="Choose whether the banner needs to be full screen or fixed height when opening page"/>
<bannerHeight type="NumericStepper" label="Banner height" min="50" max="500" step="25" width="100" optional="true" defaultValue="200" tooltip="The height of the fixed height banner or the collapsed full height banner"/>
<bannerCollapse type="CheckBox" condition="headerBanner=='fullscreen'" label="Collapse banner" optional="true" defaultValue="true" tooltip="Whether to collapse the full screen banner when scrolling down" />
<bannerFullScrolldownInfo type="CheckBox" condition="headerBanner=='fullscreen'" label="Enable scroll down info" optional="true" defaultValue="true" tooltip="Show an arrow and a help text to scroll down when the banner is full screen" />
</headerGroup>

<pageLink label="Page Link" type="TextInput" wysiwyg="true" defaultValue="" optional="true" tooltip="The link text for the page menu (by default this will be the page title)"/>
Expand Down
5 changes: 4 additions & 1 deletion src/site/wizards/en-GB/template.xwd
View file
Expand Up @@ -144,7 +144,10 @@
<headerRepeat type="ComboBox" data="repeat,repeat-x,repeat-y,no-repeat" options="Horizontal and Vertical Repeat,Horizontal Repeat,Vertical Repeat,No Repeat" optional="true" label="Image Repeat" defaultValue="repeat" width="175"/>
<headerColour type="ColourPicker" optional="true" label="Background Colour"/>
<headerTextColour type="ColourPicker" optional="true" label="Text Colour"/>
<headerBanner type="ComboBox" data="Jumbotron,Smaller banner" options="Jumbotron,Smaller banner" optional="true" label="Banner" defaultValue="Smaller banner" width="175"/>
<headerBanner type="ComboBox" label="Banner" conditionTrigger="true" data="fullscreen,fixedheight" options="Full screen,Fixed height" optional="true" defaultValue="fixedheight" width="175" tooltip="Choose whether the banner needs to be full screen or fixed height when opening page"/>
<bannerHeight type="NumericStepper" label="Banner height" min="50" max="500" step="25" width="100" optional="true" defaultValue="200" tooltip="The height of the fixed height banner or the collapsed full height banner"/>
<bannerCollapse type="CheckBox" condition="headerBanner=='fullscreen'" label="Collapse banner" optional="true" defaultValue="true" tooltip="Whether to collapse the full screen banner when scrolling down"/>
<bannerFullScrolldownInfo type="CheckBox" condition="headerBanner=='fullscreen'" label="Enable scroll down info" optional="true" defaultValue="true" tooltip="Show an arrow and a help text to scroll down when the banner is full screen"/>
</headerGroup><pageLink label="Page Link" type="TextInput" wysiwyg="true" defaultValue="" optional="true" tooltip="The link text for the page menu (by default this will be the page title)" common="true"/><hideShow type="group" label="Hide/Show Page" optional="true" tooltip="Hide the page completely or hide/show the page between specified dates" info="Hide this page from view at all times or use the 'From' &amp; 'Until' fields to specify when it should be available" common="true">
<hidePage label="Hide Page" type="CheckBox" defaultValue="false" optional="true"/>
<hideOnDate label="From" type="DateField" defaultValue="" optional="true" allowBlank="true" preventPrev="true" tooltip="Use the calendar to select a date (format YYYY-MM-DD)"/>
Expand Down

0 comments on commit 66f5ecc

Please sign in to comment.