How to add exit button

lucus78

Hi,

Does anyone know how to add exit button to the top right corner of the box?

Hazulu

Hello! I am already looking into this as a feature for version 0.3, so stay tuned~ I haven't got to it yet as I've been working on another plugin approaching release.

jackmaessen

i was a little bit experimenting with the close button. So to display an close button on the right corner is not enough, the popup keeps coming back when you browse on the site. So i used a cookie for it that is stored when the close button is hit. This is what i edited in the last public function of class.guestmessage.plugin.php

 public function Base_AfterBody_Handler($Sender){
        $Session = Gdn::Session();
        // If the viewer is logged in, leave the function
        if ($Session->UserID > 0)  return;
        $message = (C('GuestMessage.Message'));

        echo '<div class="guestmessagepopup">';
        echo '<a href="#" class="close-guestmessagepopup" onclick="RemoveGuestMessagePopup()">X</a>'; // when hit the X, we store a cookie and immideately we hide the div 
        echo '<p>'.$message.'</p>';
        echo '</div></div>';
        //add the script to a variable
        $removeguestmessage = "<script>

                                function RemoveGuestMessagePopup(){
                                   days=30;
                                   myDate = new Date();
                                   myDate.setTime(myDate.getTime()+(days*24*60*60*1000));
                                   document.cookie = 'RemoveGuestMessagePopup=Remove; expires=' + myDate.toGMTString();
                                }

                                var cookie = document.cookie.split(';')
                                .map(function(x){ return x.trim().split('='); })
                                .filter(function(x){ return x[0]==='RemoveGuestMessagePopup'; })
                                .pop();

                                if(cookie && cookie[1]==='Remove') {
                                   $('.guestmessagepopup').hide();
                                }

                                $('.close-guestmessagepopup').on('click', function(){
                                   RemoveGuestMessagePopup();
                                   $(this).parent().remove();
                                   return false;
                                });

                              </script>";
        echo $removeguestmessage;   // finally, we echo the script                 

    }

In your style.css add these lines so the X appears on the right upper corner:

.close-guestmessagepopup {
    position: absolute;
    right: 0px;
    top: 0px;
    font-weight: bold;
}

TODO:

• looking for a way to load the script on a more proper way then adding it to a variable
• making a nice close button instead of an ordinary X

lucus78

Hi,

Can you please point me where this php code need to be inserted ?

jackmaessen

@lucus78
Open the file class.guestmessage.plugin.php
Search for the last public function
Replace the complete public function with the one above
As you can see, i started editing form line 7

you can test it here: http://develop2.webprofis.nl/

lucus78

Thanks for your reply, but unfortynately does not works for me.
Can you please send me this file?

Cheers

jackmaessen

here is the complete file class.guestmessage.plugin.php

R_J

@jackmaessen said:

echo '<div class="guestmessagepopup">';
echo '<a href="#" class="close-guestmessagepopup" onclick="RemoveGuestMessagePopup()">X</a>'; // when hit the X, we store a cookie and immideately we hide the div 
echo '<p>'.$message.'</p>';
echo '</div></div>';

If I see it right, you have 2 closing div tags but only one opening div tag.

You can put your js in a file /plugins/YourPlugin/js/guestmessage.js and add that line to your function $Sender->AddJsFile('guestmessage.js', 'plugins/YourPlugin'); to load the javascript file from an external script.

That is the markup that Vanilla uses for a close button: <a class="Close" href="#"><span>×</span></a> so you might want to put it like that in your code:

echo '<div class="guestmessagepopup">';
echo '<a href="#" class="Close close-guestmessagepopup" onclick="RemoveGuestMessagePopup()"><span>&#215;</span></a>'; // when hit the X, we store a cookie and immideately we hide the div 
echo '<div class="P">'.$message.'</div>';
echo '</div>';

jackmaessen

@R_J
Well noted! There is a closing tag too much.
About putting the js in an external file and loading it, i have a problem with it.

echo '<div class="guestmessagepopup">';
        echo '<a href="#" class="close-guestmessagepopup" onclick="RemoveGuestMessagePopup()">X</a>'; 
        echo '<p>'.$message.'</p>';
        echo '</div>';

        $Sender->AddJsFile('remove-guestmessage.js', 'plugins/GuestMessage'); // remove-guestmessage.js is in the folder js  in GuestMessage

The js is not parsed under the div!

R_J

AddJsFile should add the js together with the other scripts at the head of the page - and I can see it already there

hgtonight

@jackmaessen said:

But the js is not parsed under the div!

Why do you want the script inserted there?

You are calling the AddJsFile method which queues the script to be loaded in the header. You can hook your JS onto the document dom ready event so it won't get fired until the dom is ready. Or you can hook into the document's click event with a selector filter and not worry about the dom coming in and out of focus.

jQuery(document).ready(function($) {
 function RemoveGuestMessagePopup(){
  days=30;
  myDate = new Date();
  myDate.setTime(myDate.getTime()+(days*24*60*60*1000));
  document.cookie = 'RemoveGuestMessagePopup=Remove; expires=' + myDate.toGMTString();
 }

 var cookie = document.cookie.split(';')
 .map(function(x){ return x.trim().split('='); })
 .filter(function(x){ return x[0]==='RemoveGuestMessagePopup'; })
 .pop();

 if(cookie && cookie[1]==='Remove') {
  $('.guestmessagepopup').hide();
 }

 $(document).on('click', '.close-guestmessagepopup', function(){
  RemoveGuestMessagePopup();
  $(this).parent().remove();
  return false;
 });
});

This is a lot more flexible in terms of handling click events and doesn't rely on being inserted in a specific area of the DOM.

jackmaessen

@hgtonight: yes that was the problem; it did work when the script was below the div, but ofcourse, use the ready handler and it is not a problem anymore. Great solution!

R_J

While looking at it... you have
1) onclick="RemoveGuestMessagePopup()" in HTML and
2) $('.close-guestmessagepopup').on('click', function(){ in js

This is doubled and you should drop the html call. That way your script is completely separated from the view (great!) and it is not needed anyway. But as always when you load a script, you should enclose your code like that $( document ).ready(function() { your_code });

lucus78

OK guys to recup could you please provide a simple solution with steps how to implement all codes.
I confused right now @!#!@#
I will be much appreciate it.

Cheers

R_J

We are working on a perfect solution, so bear with us

jackmaessen

Well, i am just testing it and it seems not to work anymore. Looking what is wrong. I got this error:
ReferenceError: RemoveGuestMessagePopup is not defined

lucus78

OK, I won't be disturb you anymore
Thanks for your contribution to this thread

jackmaessen

I think i found the solution, at least: now it works. The js load should be in public function Base_Render_Before

 public function Base_Render_Before($Sender) {
        $Sender->AddCssFile('plugins/GuestMessage/style.css');
        $Sender->AddJsFile('remove-guestmessage.js', 'plugins/GuestMessage');

    }

hgtonight

@jackmaessen said:
Well, i am just testing it and it seems not to work anymore. Looking what is wrong. I got this error:
ReferenceError: RemoveGuestMessagePopup is not defined

That is probably the onclick attribute issue. Remove the onclick attribute from your markup.

jackmaessen

That's right @hgtonight
I tested it now and it seems to work fine.
The file class.guestmessage.plugin.php now looks like this:

// plugininfo skipped...
class GuestMessagePlugin extends Gdn_Plugin {

    public function Base_Render_Before($Sender) {
        $Sender->AddCssFile('plugins/GuestMessage/style.css');
        $Sender->AddJsFile('remove-guestmessage.js', 'plugins/GuestMessage'); //here we load the external javascript which is in plugins/GuestMessage/js folder

    }

    public function base_getAppSettingsMenuItems_handler ($sender) {
        $menu = &$sender->EventArguments['SideMenu'];
    }

    public function settingsController_guestMessage_create ($sender) {

        $sender->permission(array(
            'Garden.Settings.Manage',
            'GuestMessage.Settings.Manage'
        ));

        $sender->addSideMenu('dashboard/settings/plugins');
        $sender->setData('Title', t('Guest Message Settings'));
        $configurationModule = new ConfigurationModule($sender);

        $configurationModule->initialize(array(
            'GuestMessage.Message' => array(
                'Control' => 'TextBox',
                'LabelCode' => 'Edit the message you want your guests to see here!'
            )
        ));
        $configurationModule->renderAll();
    }

    public function Setup() {
        // Set up the plugin's default values
        SaveToConfig('GuestMessage.Message', "You can edit this guest message in the plugin settings! You can change the style of this message in the plugin folder's style.css, to customize it to your needs. You may also use <b>html</b> in your message!");
   }

    public function onDisable () {
        // Remove your settings after disabling the plugin
        removeFromConfig('GuestMessage');
    }

    public function Base_AfterBody_Handler($Sender){
        $Session = Gdn::Session();
        // If the viewer is logged in, leave the function
        if ($Session->UserID > 0)  return;
        $message = (C('GuestMessage.Message'));

        echo '<div class="guestmessagepopup">';
        echo '<a href="#" class="Close close-guestmessagepopup"><span>&#215;</span></a>'; // when hit the X, we store a cookie and immediately we hide the div 
        echo '<p>'.$message.'</p>';
        echo '</div>';

    }
} 

So, @lucus78 i put all the changes together in the updated plugin (see attachment)
Most easy is to overwrite the complete plugin with this one.

Note: many thanks for advice and support from @hgtonight and @R_J

lucus78

does not working for me should I add any other files such as .js ?