HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

How to add exit button

This discussion is related to the Guest Message addon.

Hi,

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

stefano9lliHazulu
«1

Comments

  • HazuluHazulu New
    edited March 2015

    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.

    lucus78
  • jackmaessenjackmaessen ✭✭✭
    edited March 2015

    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
    R_JHazulu
  • Hi,

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

  • jackmaessenjackmaessen ✭✭✭
    edited March 2015

    @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/

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

    Cheers

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

    lucus78
  • R_JR_J Ex-Fanboy Munich Moderator

    @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>';
    


    jackmaessenlucus78hgtonightHazulu
  • jackmaessenjackmaessen ✭✭✭
    edited March 2015

    @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_JR_J Ex-Fanboy Munich Moderator

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


  • hgtonighthgtonight ∞ · New Moderator

    @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.

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

    R_JHazulujackmaessen
  • @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_JR_J Ex-Fanboy Munich Moderator

    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 });


  • 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_JR_J Ex-Fanboy Munich Moderator

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


    lucus78
  • 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

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

  • jackmaessenjackmaessen ✭✭✭
    edited March 2015

    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');
    
        }
    
  • hgtonighthgtonight ∞ · New Moderator

    @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.

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • jackmaessenjackmaessen ✭✭✭
    edited March 2015

    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

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

Sign In or Register to comment.