Author Topic: Display element depending on screen size  (Read 623 times)

Offline mabj

  • Newbie
  • *
  • Posts: 8
Display element depending on screen size
« on: February 11, 2019, 03:26:52 AM »
I'm asking here because I have not been able to find the answer anywhere. I am using Roundcube to build a web mail application.

My problem is that I would like to change the condition depending on the screen/viewport width. Basically depending on if the user is using mobile, tablet or desktop. What I want to do is show a div if the user is on mobile or tablet, but not on desktop, or the other way around.

I was thinking of just adding media queries to the CSS but I'm not sure it will work like I want to. It is very important that the desktop content is not loaded in any way in the mobile view and the other way around. It has to do with advertising, revenue and SEO.

So I was thinking something along the lines of this:

Code: [Select]
<roundcube:container name="container-desktop" id="container-desktop" condition="!myCondition" />
<roundcube:container name="container-mobile" id="container-mobile" condition="myCondition" />

where
Code: [Select]
myCondition is based on viewport width.

I have not been able to find this in any way. Is there someone who knows hos this can be achieved?

Offline JohnDoh

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 2,260
Re: Display element depending on screen size
« Reply #1 on: February 12, 2019, 02:33:09 AM »
You cannot use client side info (e.g. screen res) when building template objects on the server side so something like this:
Code: [Select]
<roundcube:container name="container-mobile" id="container-mobile" condition="myCondition" />As you said you can use CSS to style elements in different ways depending on screensize but to not actually load the content I think you use JS to dynamically load the content on page load (e.g. ajax). So you would have a standard element on your page like:
Code: [Select]
<roundcube:container name="container-advertising" id="container-advertising" />Then on page load execute some JS which would check screensize or what ever conditions you have and then load the relevent content into that div.
Roundcube Plugins: Contextmenu, SpamAssassin Prefs, and more…

Offline mabj

  • Newbie
  • *
  • Posts: 8
Re: Display element depending on screen size
« Reply #2 on: February 13, 2019, 05:16:15 AM »
I am trying a new approach to this, making a plugin for it. I have followed what I could find on https://github.com/roundcube/roundcubemail/wiki/Plugin-API but I have gotten stuck again. The plugin is called "ads_display" and this is what I have so far.

skins/larry/templates/login.html
Code: [Select]
<div id="login-form">
<div class="box-inner" role="main">
<roundcube:object name="logo" src="/images/roundcube_logo.png" id="logo" />

<roundcube:form name="form" method="post" />
<roundcube:object name="loginform" form="form" size="40" submit=true />
</form>

<roundcube:container name="login_ad" id="login_ad" />
</div>

<div class="box-bottom" role="complementary">
<roundcube:object name="message" id="message" />
<noscript>
<p class="noscriptwarning"><roundcube:label name="noscriptwarning" /></p>
</noscript>
</div>

plugins/ads_display/ads_display.php
Code: [Select]
class ads_display extends rcube_plugin
{
    function init()
    {
        $this->include_script('ads_display.js');
    }
}

plugins/ads_display/ads_display.js
Code: [Select]
if (window.rcmail) {
  rcmail.addEventListener('init', function(evt) {
    let clientWidth = window.innerWidth;
    let scriptSrc = '';

    if (clientWidth < 768) {
        scriptSrc = 'https://ad.provider.com/ad?a=account&p=login&e=mobile';
    } else {
        scriptSrc = 'https://ad.provider.com/ad?a=account&p=login&e=desktop';
    }

    let scriptTag = $('<script>').attr({'type': 'test/javascript', 'src': scriptSrc});
    console.log(scriptTag);
    rcmail.add_element(scriptTag, 'login_ad');
  });
}

I can see the "console.log" in the dev console, but the new <script> element is not written to the DOM, I cannot see it at all in the inspector. What might I be doing wrong?

Offline JohnDoh

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 2,260
Re: Display element depending on screen size
« Reply #3 on: February 15, 2019, 02:31:53 AM »
Code: [Select]
<roundcube:container name="login_ad" id="login_ad" />is meaningless as you have not defined a handler for the `login_ad` template object.
Code: [Select]
$rcmail = rcmail::get_instance();
$rcmail->output->add_handler('login_ad', array($this, 'my_function'));
and then define my_function in your plugin class and in that function you say what to do with the template object `login_ad`
or, since its so simple and you are editing the skin files (really you should use something like the render_page hook to inject this code rather than editing the core skin files) you could just put this in the skin file:
Code: [Select]
<div id="login_ad"></div>
Roundcube Plugins: Contextmenu, SpamAssassin Prefs, and more…