Add element in main structure

UBWolf · November 23, 2017, 12:31pm

Hello there,

I am trying to create a small, but not so easy feature in our child theme (OJS 3.1). I want to make the width of the sidebar variable with a slider (like https://jsfiddle.net/). I would need to add a div between the sidebar and the main content (which will act as a slider), but I don’t know which tpl (some index.tpl?) I need to change for that. Can anyone give me directions?

Thanks and kind regards
Daniela

UBWolf · November 28, 2017, 9:39am

Hi there,

so, after a bit trial and error I found a solution that I would like to share with you:

first of all copy the header.tpl from /lib/pkp/templates/frontend/components/ to /plugins/themes/YOURTHEME/templates/frontend/components/ and add a div (for examaple: <div id='content_slider'></div>) right before <div id="pkp_content_main" class="pkp_structure_main" role="main">
Then create a folder “js” (or another name you like) and create in this folder a javascript file (for example “main.js”)
Then add this line to your YOURTHEME.inc.php: $this->addScript('javascript', 'js/main.js');
open your main.js and add the following lines:

$( "#content_slider" ).draggable({
          containment: "parent",
          drag: function(){
            var position = $( "#content_slider" ).position();
            var parentWidth = $(".pkp_structure_content").width();
            var percentage = "%";
            var percentagePosition = (position.left / parentWidth) * 100;
            var negativePosition = parentWidth - position.left;
            var negativePercentagePosition = (negativePosition / parentWidth) * 100;
            $(".pkp_structure_sidebar").outerWidth( percentagePosition + percentage );
            $(".pkp_structure_main").outerWidth( (negativePercentagePosition) + percentage );
            }
});

Then create a folder styles and in this folder a file layout.less and add the following lines:

#content_slider {
z-index: 200;
width: 8px;
height: 100%;
padding: 5px 0;
margin-left:-4px;
cursor: col-resize;
position: absolute;
top: 0;
left: 220px;
&:after {
content:“”;
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 50%;
border-left: 1px solid #abb9c2;
transform: translate(-50%);
}
}

There are still some minor mistakes which are likely results of paddings and margins, but it works.

Kind regards
Daniela

kawahyu · November 29, 2017, 1:41pm

Would you mind to share the web which implement that as the example?

UBWolf · November 29, 2017, 2:33pm

Unfortunately I am working on a test system which cannot be accessed outside of our network. Furthermore we’ve decided it isn’t such a great feature, because our user might want more space for the maint content, but most likely not for the sidebar. So I’ve changed the feature to toggle the sidebar instead. If you’re interested in this, I could provide the code and a screenshot.

Kind regards
Daniela

kawahyu · November 29, 2017, 2:55pm

Thanks @UBWolf
I am interested

UBWolf · November 30, 2017, 8:44am

Hi @kawahyu,

ok, the first steps are the same like mentioned above: Copy the header.tpl, add a div (in my case “#content_slider”), create the javascript file and link to this file in your THEME.inc.php.
Then open your main.js and add the following lines:

$( “#content_slider” ).click(function(){
var sidebarWidth = $(“.pkp_structure_sidebar”).outerWidth();
$(“.pkp_structure_sidebar”).toggle(0, function() {
$(this).is(“:visible”) ?
(
$(“.pkp_structure_main”).css({ ‘width’: 'calc(100% - ’ + sidebarWidth + ‘px)’ }),
$(“#content_slider”).css({ ‘left’ : sidebarWidth + ‘px’ }),
$(“#content_slider”).removeClass( “content_toggle” )
) :
(
$(“.pkp_structure_main”).css({ ‘width’: ‘100%’ }),
$(“#content_slider”).css({ ‘left’ : ‘0px’ }),
$(“#content_slider”).addClass( “content_toggle” )
);
});
});

Then create a folder styles and in this folder a file layout.less and add the following lines:

#content_slider {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid #f3f3f3;
border-left: 20px solid transparent;
z-index: 200;
margin-left:-40px;
position: absolute;
top: 0;
left: 220px;
&.content_toggle {
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #e0eef4;
border-right: 20px solid transparent;
margin-left:0;
}
}

The div you’ve included in the header.tpl is the switch to toggle the sidebar. In my case I’ve formed it as a triangle, but it could be a circle or a picture or some icon.

Here are the (anonymized) screenshots.
Please note: Our child theme is based on the default theme, but I’ve made many, many changes, so it might be necessary to adapt the javascript and the less files in order to make it working with your own theme.

Kind regards
Daniela