close

Plugin Directory

Changeset 2411735


Ignore:
Timestamp:
11/03/2020 10:09:26 AM (6 years ago)
Author:
quicoto
Message:

4.0.2

Location:
thumbs-rating/trunk
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • thumbs-rating/trunk/css/style.css

    r753358 r2411735  
    33/*-----------------------------------------------------------------------------------*/
    44
    5 .thumbs-rating-container{
    6    
    7     padding:1em 0;
     5.thumbs-rating-container {
     6    padding: 1em 0;
    87    display: block;
    98}
    109
    11 .thumbs-rating-container span{
    12    
     10.thumbs-rating-container button {
    1311    cursor: pointer;
    1412}
    1513
    16 .thumbs-rating-container span:before{
    17    
    18     content: attr(data-text);
    19 }
    20 
    21 .thumbs-rating-container span:hover{
    22    
     14.thumbs-rating-container button:hover {
    2315    color: #dddddd;
    2416}
    2517
    26 .thumbs-rating-container .thumbs-rating-up, .thumbs-rating-container .thumbs-rating-down{
    27    
     18.thumbs-rating-container .thumbs-rating-up,
     19.thumbs-rating-container .thumbs-rating-down {
    2820    padding: 0.5em;
    2921    color: white;
    30 } 
     22}
    3123
    32 .thumbs-rating-container .thumbs-rating-up{
    33        
     24.thumbs-rating-container .thumbs-rating-up {
    3425    background: #a4c346;
    3526}
    3627
    37 .thumbs-rating-container .thumbs-rating-down{
    38    
     28.thumbs-rating-container .thumbs-rating-down {
    3929    background: #c84848;
    4030}
    4131
    42 .thumbs-rating-container .thumbs-rating-already-voted{
    43    
     32.thumbs-rating-container .thumbs-rating-already-voted {
     33    display: none;
     34    font-size: 0.9em;
    4435    padding-top: 1em;
    45     font-size: 0.9em;
    46     display: none;
    47    
    48     -webkit-transition: (all 0.3s);
    49     transition: (all 0.3s);
    5036}
    5137
    52 .thumbs-rating-container .thumbs-rating-already-voted:before{
    53    
    54     content: attr(data-text);
     38.thumbs-rating-container .thumbs-rating-already-voted.thumbs-rating-show {
     39    display: block;
    5540}
  • thumbs-rating/trunk/js/general.js

    r925527 r2411735  
    1 function thumbs_rating_vote(ID, type)
    2 {
    3     // For the LocalStorage
    4    
    5     var itemName = "thumbsrating" + ID;
    6    
    7     var container = '#thumbs-rating-' + ID;
    8    
     1/**
     2 * @param  {number} ID
     3 * @param  {number} type
     4 * @param  {HTMLElement} $element
     5 */
     6function thumbs_rating_vote(ID, type) {
     7    const itemName = `thumbsrating${ID}`; // For the LocalStorage
     8    const IDS = {
     9        container: `thumbs-rating-${ID}`
     10    };
     11    const CLASSES = {
     12        alreadyVoted: `thumbs-rating-already-voted`,
     13        container: `thumbs-rating-container`,
     14        down: `thumbs-rating-down`,
     15        up: `thumbs-rating-up`,
     16        show: `thumbs-rating-show`,
     17        voted: `thumbs-rating-voted`
     18    };
     19    const $container = document.getElementById(IDS.container);
     20
    921    // Check if the LocalStorage value exist. If do nothing.
    10    
    11     if (!localStorage.getItem(itemName)){
    12    
    13         // Set HTML5 LocalStorage so the user can not vote again unless he clears it.
    14                                                
    15         localStorage.setItem(itemName, true);
     22    if (!localStorage.getItem(itemName)) {
     23        // Set the localStorage type as well
     24        const typeItemName = `${itemName}-${type}`;
    1625
    17         // Set the localStorage type as well
    18            
    19         var typeItemName = "thumbsrating" + ID + "-" + type;
     26        // Set HTML5 LocalStorage so the user can not vote again unless the user clears it.
     27        localStorage.setItem(itemName, true);
    2028        localStorage.setItem(typeItemName, true);
    21    
     29
    2230        // Data for the Ajax Request
    23        
    24         var data = {
    25             action: 'thumbs_rating_add_vote',
    26             postid: ID,
    27             type: type,
    28             nonce: thumbs_rating_ajax.nonce
    29         };
    30            
    31         jQuery.post(thumbs_rating_ajax.ajax_url, data, function(response) {         
    32            
    33             var object = jQuery(container);
    34            
    35             jQuery(container).html('');
    36            
    37             jQuery(container).append(response);
    38            
    39             // Remove the class and ID so we don't have 2 DIVs with the same ID
    40            
    41             jQuery(object).removeClass('thumbs-rating-container');
    42             jQuery(object).attr('id', '');
    43            
    44             // Add the class to the clicked element
    45            
    46             var new_container = '#thumbs-rating-' + ID;
    47            
    48             // Check the type
    49            
    50             if( type == 1){ thumbs_rating_class = ".thumbs-rating-up"; }
    51             else{ thumbs_rating_class = ".thumbs-rating-down";  }
    52            
    53             jQuery(new_container +  thumbs_rating_class ).addClass('thumbs-rating-voted');
    54    
    55         });
    56     }else{
     31        const data = new FormData();
    5732
    58         // Display message if we detect LocalStorage
    59        
    60         jQuery('#thumbs-rating-' + ID + ' .thumbs-rating-already-voted').fadeIn().css('display', 'block');
     33    data.append( 'action', 'thumbs_rating_add_vote' );
     34    data.append( 'nonce', thumbs_rating_ajax.nonce );
     35    data.append( 'postid', ID );
     36    data.append( 'type', type );
     37
     38    fetch(thumbs_rating_ajax.ajax_url, {
     39                method: "POST",
     40                credentials: 'same-origin',
     41                body: data
     42            })
     43            .then((response) => response.text())
     44            .then((data) => {
     45                if (data && $container) {
     46                    $container.innerHTML = data;
     47                }
     48            })
     49            .catch((error) => {
     50                console.log('[Thumbs Rating Plugin - error]');
     51                console.error(error);
     52            });
     53
     54    } else {
     55        if ($container) {
     56            const $alreadyVoted = $container.querySelector(`.${CLASSES.alreadyVoted}`);
     57
     58            // Display message if we detect LocalStorage
     59            if ($alreadyVoted) {
     60                $alreadyVoted.classList.add(CLASSES.show);
     61            }
     62        }
    6163    }
    6264}
  • thumbs-rating/trunk/readme.txt

    r2204786 r2411735  
    22Contributors: quicoto
    33Tags: ratings, thumbs, votes, AJAX, rating, thumb, vote, page, post
    4 Requires at least: 5.0
    5 Tested up to: 5.3
    6 Stable tag: 3.4.2
     4Requires at least: 5.2
     5Tested up to: 5.6
     6Stable tag: 4.0.2
    77License: GPLv2 or later
    88License URI: http://www.gnu.org/licenses/gpl-2.0.html
    99
    10 Thumbs Rating does what you'd expect. It allows you to add a thumbs up/down to your content (posts, pages, custom post types...).
     10Thumbs Rating does what you'd expect. It allows you to add a thumbs up/down to your content (posts, pages, and custom post types).
    1111
    1212== Description ==
     
    1414I needed a simple and light plugin to add Thumbs Rating, I couldn't find any so I built my own.
    1515
    16 This plugin allows you to add a thumb up/down rating to your content. You can set it up to show anywhere you want, check out the Installation instructions.
     16This plugin allows you to add a thumb up/down rating to your content (posts, pages, and custom post types). You can set it up to show anywhere you want, check out the Installation instructions.
    1717
    1818The output is very basic, no images, no fonts, no fancy CSS. Customize the ouput overriding the CSS classes in your __style.css__ file.
     
    2626*   Show the most voted (positive/negative) items using shortcodes.
    2727*   Show the buttons using shortcodes.
     28*   No jQuery dependency.
     29
     30= Internet Explorer 11 support =
     31
     32If you want the plugin to work with IE11 users, you need jQuery. For that use the 3.4.2 version of the plugin.
     33
     34From 4.0.0 onwards the plugin has no dependencies and uses vanilla JavaScript (ES6 syntax). Which will cause it not to work for IE11 users.
    2835
    2936= Languages =
     
    5663Feel free to post a request but let's keep it simple and light.
    5764
    58 = Ping me / Blame me =
     65= Ping me =
    5966
    6067Are you using the plugin? Do you like it? Do you hate it? Let me know!
    6168
    6269* Twitter: [@ricard_dev](http://twitter.com/ricard_dev)
    63 * Blog: [Rick's code](http://php.quicoto.com/)
     70* Blog: [Ricard Torres Code](https://ricard.dev/)
    6471
    6572== Installation ==
     
    109116(Both functions accept the post ID as a parameter in case you need it)
    110117
     118= Can I use the plugin to vote media images? =
     119
     120No, the plugin only works in posts and custom post types.
     121
    111122= Shortcode =
    112123
     
    130141= The shortcode in Widgets or Comments doesn't work =
    131142
    132 You might need to allow shortcodes in that sections, [here's how](http://php.quicoto.com/how-to-allow-shortcodes-to-wordpress-comments/).
     143You might need to allow shortcodes in that sections, [here's how](https://ricard.dev/how-to-allow-shortcodes-to-wordpress-comments/).
    133144
    134145== Screenshots ==
     
    138149
    139150== Changelog ==
     151
     152= 4.0.2 =
     153* Breaking changes! Upgrade with caution.
     154* Drop Internet Explorer 11 support.
     155* Remove jQuery as a dependency.
     156* Uses the ES6 JavaScript syntax.
     157* Changed markup to use HTML button's instead of span.
     158* Print the text on the button element instead of relying in CSS.
    140159
    141160= 3.4.2 =
  • thumbs-rating/trunk/thumbs-rating.php

    r2028174 r2411735  
    55Description: Add thumbs up/down rating to your content.
    66Author: Ricard Torres
    7 Version: 3.4.2
    8 Author URI: http://php.quicoto.com/
     7Version: 4.0.2
     8Author URI: https://ricard.dev/
    99Text Domain: thumbs-rating
    1010Domain Path: /languages
     
    4747    function thumbs_rating_scripts()
    4848    {
    49         wp_enqueue_script('thumbs_rating_scripts', thumbs_rating_url . '/js/general.js', array('jquery'), '4.0.1');
     49        wp_enqueue_script('thumbs_rating_scripts', thumbs_rating_url . '/js/general.js', array(), '4.0.2');
    5050        wp_localize_script( 'thumbs_rating_scripts', 'thumbs_rating_ajax', array( 'ajax_url' => admin_url( 'admin-ajax.php' ), 'nonce' => wp_create_nonce( 'thumbs-rating-nonce' ) ) );
    5151    }
     
    6464    {
    6565
    66         wp_register_style( "thumbs_rating_styles",  thumbs_rating_url . '/css/style.css' , "", "1.0.0");
     66        wp_register_style( "thumbs_rating_styles",  thumbs_rating_url . '/css/style.css' , "", "4.0.2");
    6767        wp_enqueue_style( 'thumbs_rating_styles' );
    6868    }
     
    7777if  ( ! function_exists( 'thumbs_rating_getlink' ) ):
    7878
    79     function thumbs_rating_getlink($post_ID = '', $type_of_vote = '')
     79    function thumbs_rating_getlink($post_ID = '', $type_of_vote = '', $wrapper = true)
    8080    {
    8181
     
    9292        $thumbs_rating_down_count = get_post_meta($post_ID, '_thumbs_rating_down', true) != '' ? get_post_meta($post_ID, '_thumbs_rating_down', true) : '0';
    9393
    94         $link_up = '<span class="thumbs-rating-up'. ( (isset($thumbs_rating_up_count) && intval($thumbs_rating_up_count) > 0 ) ? ' thumbs-rating-voted' : '' ) .'" onclick="thumbs_rating_vote(' . $post_ID . ', 1);" data-text="' . __('Vote Up','thumbs-rating') . ' +">' . $thumbs_rating_up_count . '</span>';
    95         $link_down = '<span class="thumbs-rating-down'. ( (isset($thumbs_rating_down_count) && intval($thumbs_rating_down_count) > 0 ) ? ' thumbs-rating-voted' : '' ) .'" onclick="thumbs_rating_vote(' . $post_ID . ', 2);" data-text="' . __('Vote Down','thumbs-rating') . ' -">' . $thumbs_rating_down_count . '</span>';
    96 
    97         $thumbs_rating_link = '<div  class="thumbs-rating-container" id="thumbs-rating-'.$post_ID.'" data-content-id="'.$post_ID.'">';
     94        $link_up = '<button class="thumbs-rating-up'. ( (isset($thumbs_rating_up_count) && intval($thumbs_rating_up_count) > 0 ) ? ' thumbs-rating-voted' : '' ) .'" onclick="thumbs_rating_vote(' . $post_ID . ', 1);">' . __('Vote Up','thumbs-rating') . ' +' . $thumbs_rating_up_count . '</button>';
     95        $link_down = '<button class="thumbs-rating-down'. ( (isset($thumbs_rating_down_count) && intval($thumbs_rating_down_count) > 0 ) ? ' thumbs-rating-voted' : '' ) .'" onclick="thumbs_rating_vote(' . $post_ID . ', 2);">' . __('Vote Down','thumbs-rating') . ' -' . $thumbs_rating_down_count . '</button>';
     96
     97        $thumbs_rating_link = '';
     98
     99        if ($wrapper == true) {
     100            $thumbs_rating_link .= '<div  class="thumbs-rating-container" id="thumbs-rating-'.$post_ID.'" data-content-id="'.$post_ID.'">';
     101        }
     102
    98103        $thumbs_rating_link .= $link_up;
    99104        $thumbs_rating_link .= ' ';
    100105        $thumbs_rating_link .= $link_down;
    101         $thumbs_rating_link .= '<span class="thumbs-rating-already-voted" data-text="' . __('You already voted!', 'thumbs-rating') . '"></span>';
    102         $thumbs_rating_link .= '</div>';
     106        $thumbs_rating_link .= '<span class="thumbs-rating-already-voted">' . __('You already voted!', 'thumbs-rating') . '</span>';
     107
     108        if ($wrapper == true) {
     109            $thumbs_rating_link .= '</div>';
     110        }
    103111
    104112        return $thumbs_rating_link;
     
    148156        update_post_meta($post_ID, $meta_name, $thumbs_rating_count);
    149157
    150         $results = thumbs_rating_getlink($post_ID, $type_of_vote);
     158        $results = thumbs_rating_getlink($post_ID, $type_of_vote, false);
    151159
    152160        die($results);
Note: See TracChangeset for help on using the changeset viewer.