1

Тема: Простий плагін смайлів[WP & JS]

Доброго дня. Є плагін смайлів. Kama WP Smiles. http://www.choicelady.ru В полі вводу коментара кнопка при наведенні на яку виводиться дів з смайлами. Так от як зробити так, щоб цей дів вискакував і ховавсь не принаведенні а при натиску на кнопку смайла а зникав коли був вставлений смайл?
Ось код файлів плагіна(звісно не всіх):

Прихований текст
<?php
/*
Plugin Name: Kama WP Smiles
Version: 1.8.0
Description: Заменяет стандартные смайлики WP. Легко можно установить свои смайлы, также в настройках можно выбрать предпочитаемые смайлики.
Plugin URI: http://wp-kama.ru/?p=185
Author: Kama
Author URI: http://wp-kama.ru/
*/

$data = get_file_data( __FILE__, array('ver'=>'Version', 'lang_dir'=>'Domain Path') );

define('KWS_VER', $data['ver'] );
//define('DEM_LANG_DIRNAME', $data['lang_dir'] );


define('KWS_PLUGIN_DIR', plugin_dir_path(__FILE__) );
define('KWS_PLUGIN_URL', plugin_dir_url(__FILE__) );

require_once KWS_PLUGIN_DIR .'class.Kama_Wp_Smiles.php';


## DELETE стандартные фильты
remove_action('init', 'smilies_init', 5);
remove_filter('the_content', 'convert_smilies', 5);
remove_filter('the_excerpt', 'convert_smilies', 5);
remove_filter('comment_text', 'convert_smilies', 5);


register_activation_hook( __FILE__, function(){ Kama_Wp_Smiles::instance()->activation(); } );
register_uninstall_hook(  __FILE__, array( 'Kama_Wp_Smiles', 'uninstall') );


## init
Kama_Wp_Smiles::instance();


function kama_sm_get_smiles_code( $textarea_id ){
    $KWS = Kama_Wp_Smiles::instance();    
    
    return $KWS->get_all_smile_html( $textarea_id ) . $KWS->insert_smile_js();
}


function ksw_version_update(){
    global $wpdb;
    
    $kws_ver = get_option('wp_sm_version');
    
    if( $kws_ver == KWS_VER ) return;
    
    $KWS = Kama_Wp_Smiles::instance();
    
    // 1.8.0
    if( version_compare( $kws_ver, '1.8.0', '<') ){
        // Обновим все смайлики
        foreach( $KWS::get_dir_smile_names() as $val ){
            $val = $wpdb->escape( addslashes($val) );
            if( $val ){
                $old_sm_code = "*$val*";
                $new_sm_code = $KWS::$sm_start . $val . $KWS::$sm_end;
                $wpdb->query("UPDATE $wpdb->posts SET post_content = REPLACE(post_content, '$old_sm_code', '$new_sm_code') WHERE post_type NOT IN ('attachment','revision')" );
                $wpdb->query("UPDATE $wpdb->comments SET comment_content = REPLACE(comment_content, '$old_sm_code', '$new_sm_code')" );
            }
        }
    }
    
    update_option('wp_sm_version', KWS_VER );
}
я так зрозумів зміни потрібно прописувати тут :)
<?php


class Kama_Wp_Smiles{
    const OPT_NAME = 'wp_sm_opt';
    
    public $opt;
    
    private $sm_img; // шаблон замены
    
    public static $sm_start = '(:';
    public static $sm_end   = ':)';
    
    static $inst;
    
    static function instance(){
        is_null( self::$inst ) && self::$inst = new self;
        return self::$inst;
    }
    
    private function __construct(){        
        $this->opt = get_option( self::OPT_NAME );
            
        $this->sm_img = '<img class="kws-smiley" src="'. KWS_PLUGIN_URL .'smiles/%s.gif" alt="%s" />';
        
        // инициализация
        add_action( 'wp_head', array( &$this, 'styles') );
        
        if( ! $this->opt['not_insert'] )
            add_action( 'wp_footer', array( & $this, 'footer_scripts') );

        add_filter('comment_text', array( & $this, 'convert_smilies'), 5 );
        add_filter('the_content', array( & $this, 'convert_smilies'), 5 );
        add_filter('the_excerpt', array( & $this, 'convert_smilies'), 5 );
        
        if( is_admin() && ! defined('DOING_AJAX') )
            $this->admin_init();
    }

    ## Функция замены кодов на смайлы
    function convert_smilies( $text ){
        $pattern = array();
        
        //$pattern[] = '\(\:('. implode('|', $this->opt['exist']) .')\:\)';
        // общий паттерн смайликов для замены (:good:)
        $pattern[] = preg_quote(self::$sm_start) .'([a-zA-Z0-9_\-]{1,20})'. preg_quote(self::$sm_end);
    
        // спец смайлики ":)"
        foreach( $this->opt['hard_sm'] as $sm_code => $sm_name ){
            $pat = preg_quote( $sm_code );

            // если код смайлика начинается с ";" добавим возможность использвать спецсимволы вроде &quot;)
            if( $pat{0} == ';' )
                $pat = '(?<!&.{2}|&.{3}|&.{4}|&.{5}|&.{6})' . $pat; // &#34; &#165; &#8254; &quot; // {2,6} Lookbehinds need to be zero-width, thus quantifiers are not allowed
            
            $pattern[] = $pat;
        }
                
        //$combine_pattern = implode('|', $pattern ); // объединим все патерны - так работае в 50 раз медленнее, лучше по отдельности обрабатывать    
                
        $skip_tags = array_merge( array('style','script','textarea'), $this->opt['spec_tags'] );        
        $skip_tags_patt = array();
        
        foreach( $skip_tags as $tag )
            $skip_tags_patt[] = "(<$tag.*?$tag>)"; // (<code.*?code>)|(<pre.*?pre>)        
        
        $skip_tags_patt = implode('|', $skip_tags_patt );
        
        // разберем текст
        $text_parts = preg_split("/$skip_tags_patt/si", $text, -1, PREG_SPLIT_DELIM_CAPTURE|PREG_SPLIT_NO_EMPTY );
        
        $new_text = '';

        $skip_tags_patt2 = '^<(?:'. implode('|', $skip_tags ) .')'; // ^<(?:code|pre|blockquote)
        foreach( $text_parts as $txpart ){
            // Только разрешенные части
            if( ! preg_match("/$skip_tags_patt2/i", $txpart ) ){
                // заменяем по отдельности, так в 50 раз быстрее
                foreach( $pattern as $patt )
                    $txpart = preg_replace_callback("/$patt/", array( & $this, '__smiles_replace_cb'), $txpart );                
            }
            
            $new_text .= $txpart;
        }

        return $new_text;
    }
    
    ## Коллбэк функция для замены
    function __smiles_replace_cb( $match ){
        if( $ok = @ $this->opt['hard_sm'][ $match[0] ] )
            return sprintf( $this->sm_img, $ok, $ok );  
        
        if( in_array( $match[1], $this->opt['exist']) )
            return sprintf( $this->sm_img, $match[1], $match[1] );
        
        return $match[0]; // " {smile $match[0] not defined} ";
    }

    function footer_scripts(){
        if( ! is_singular() || $GLOBALS['post']->comment_status != 'open' )
            return; 

        $all_smile = addslashes( $this->get_all_smile_html( $this->opt['textarea_id'] ) );
        
        ?>
        <!-- Kama WP Smiles -->
        <?php echo $this->insert_smile_js(); ?>
        <script type="text/javascript">            
            var tx = document.getElementById( '<?php echo $this->opt['textarea_id'] ?>' );
            if( tx ){
                var
                txNext = tx.nextSibling,
                txPar  = tx.parentNode,
                txWrapper = document.createElement('DIV');
                
                txWrapper.innerHTML = '<?php echo $all_smile ?>';
                txWrapper.setAttribute('class', 'kws-wrapper');
                txWrapper.appendChild(tx);
                txWrapper = txPar.insertBefore(txWrapper, txNext);            
            }
        </script>
        <!-- End Kama WP Smiles -->
        <?php
        
        return;
    }
    
    function get_all_smile_html( $textarea_id = '' ){
        $all_smiles = $this->all_smiles( $textarea_id );
        
        // прячем src чтобы не было загрузки картинок при загрузке страницы, только при наведении
        $all_smiles = str_replace( 'style', 'bg', $all_smiles );
        
        $out = '<div id="sm_list" class="sm_list" style="width:30px; height:30px; background:url('. KWS_PLUGIN_URL .'smiles/smile.gif) center center no-repeat" 
            onmouseover="
            var el=this.childNodes[0];
            if( el.style.display == \'block\' )
                return;

            el.style.display=\'block\';
            
            for( var i=0; i < el.childNodes.length; i++ ){
                var l = el.childNodes[i];
                var bg = l.getAttribute(\'bg\');
                if( bg )
                    l.setAttribute( \'style\', bg );
            }
            " 
            onmouseout="this.childNodes[0].style.display = \'none\'">
            <div id="sm_container" class="sm_container">'. $all_smiles .'</div>
        </div>';
        
        // нужно в одну строку, используется в js 
        $out = str_replace( array("\n","\t","\r"), '', $out );

        return $out;
    }
        
    function all_smiles( $textarea_id = false ){
        $gather_sm = array(); //собираем все в 1 массив
        
        // переварачиваем массив и избавляемся от дублей
        $hard_sm = array_flip( $this->opt['hard_sm'] );

        foreach( $this->opt['used_sm'] as $val ){
            $gather_sm[ $val ] = @ $hard_sm[ $val ];
            
            if( empty($gather_sm[$val]) )
                $gather_sm[ $val ] = self::$sm_start . $val . self::$sm_end;
            
        }
        
        //преобразуем в картинки
        $out = '';
        foreach( $gather_sm as $name => $text ){
            $params = "'$text', " . ( $textarea_id ? "'$textarea_id'" : "'{$this->opt['textarea_id']}'");
            $out .= '<div class="smiles_button" onclick="ksm_insert('. $params .');" style="background-image:url('. KWS_PLUGIN_URL .'smiles/'. $name .'.gif);" title="'. $text .'"></div>';
        }
            
        return $out;
    }

    ## wp_head
    function styles(){
        if( ! is_singular() || $GLOBALS['post']->comment_status != 'open' )
            return; 
        
        echo '<style>'. $this->main_css() . @ $this->opt['additional_css'] .'</style>';
    }
    
    function main_css(){
        ob_start();
        ?>
<style>
/* kama wp smiles */
.kws-wrapper{ position: relative; z-index:99; }
.sm_list{ z-index:9999; position:absolute; bottom:.3em; left:.3em; }
.sm_container{ display:none; position:absolute; top:0px; left:0px; width:410px; box-sizing: border-box; z-index:1001; background:#fff; padding:5px; border-radius:2px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
.sm_container:after{ content:''; display:table; clear:both; }
.sm_container .smiles_button{ cursor:pointer; width:50px; height: 35px; display: inline-block; float: left; background-position:center center; background-repeat:no-repeat; }
.sm_container .smiles_button:hover{ background-color: rgba(255, 223, 0,.1); }
.kws-smiley{ display: inline !important; border: none !important; box-shadow: none !important; margin: 0 .07em !important; vertical-align:-0.2em !important; background: none !important; padding: 0;
}
</style>
        <?php
        
        return str_replace( array('<style>','</style>'), '', ob_get_clean() );
    }
    
    function insert_smile_js(){
        ob_start();
        ?>
        <script type="text/javascript">
        function ksm_insert( aTag, txtr_id ){
            var tx = document.getElementById( txtr_id );                
            tx.focus();
            aTag = ' ' + aTag + ' ';
            if( typeof tx.selectionStart != 'undefined'){
                var start = tx.selectionStart;
                var end = tx.selectionEnd;        
                
                var insText = tx.value.substring(start, end);
                tx.value = tx.value.substr(0, start) +  aTag  + tx.value.substr(end);
                
                var pos = start + aTag.length;
                tx.selectionStart = pos;
                tx.selectionEnd = pos;
            }
            else if(typeof document.selection != 'undefined') {
                var range = document.selection.createRange();
                range.text = aTag;
            }
            
            document.getElementById('sm_container').style.display = 'none';
            
            if( typeof tinyMCE != 'undefined' )
                tinyMCE.execCommand("mceInsertContent", false, aTag );
        }
        </script>
        <?php
        return str_replace( array("\n","\t","\r"), '', ob_get_clean() );
    }
    
    ## читаем файлы с каталога. вернет массив
    static function get_dir_smile_names(){
        $out = array();
        foreach( glob( KWS_PLUGIN_DIR . 'smiles/*.gif' ) as $fpath ){
            $fname = basename( $fpath );
            $out[] = preg_replace('@\..*?$@', '', $fname ); // удяляем расширение
        }

        return $out;
    }

    
    
    ## Админ часть ---------------------------------------------------------------------------
    function admin_init(){    
        add_action( 'admin_menu',  array( & $this, 'admin_page') );
        
        // добавляем смайлии к формам
        add_action( 'the_editor', array( & $this, 'admin_insert') );
        add_action( 'admin_print_footer_scripts', array( & $this, 'admin_js'), 999 );
        
        add_action( 'admin_head', array( & $this, 'admin_styles') );
    }
    
    function admin_styles(){ echo '<style>'. $this->main_css() .'</style>'; }
    
    function admin_page(){
        $hookname = add_options_page('Настройки Kama WP Smiles', 'Kama WP Smiles', 'manage_options', __FILE__,  array( & $this, 'admin_options_page') );
        
        add_action("load-$hookname", array( &$this, 'opt_page_load') );
    }
    
    function admin_options_page(){
        if( ! current_user_can('manage_options') ) return;
        
        include KWS_PLUGIN_DIR .'admin.php';
    }    
    
    function opt_page_load(){
        wp_enqueue_style('ks_admin_page', KWS_PLUGIN_URL .'admin-page.css' );
        
        ksw_version_update();
        
        if( isset($_POST['kama_sm_reset']) ) $this->set_def_options(); // сброс
        
        if( isset( $_POST['kama_sm_submit'] ) ) $this->update_options_handler(); //обновим опции
    }
        
    function set_def_options(){
        $this->opt = self::def_options();
        
        update_option( self::OPT_NAME, $this->opt );
            
        return true;
    }
    
    static function def_options(){
        return array(
            'textarea_id'    => 'comment',
            'spec_tags'      => array('pre','code'),
            'not_insert'     => 0,
            'additional_css' => '',
            
            // разделил для того, чтобы упростить поиск вхождений
            'used_sm'        => array('smile', 'sad', 'laugh', 'rofl', 'blum', 'kiss', 'yes', 'no', 'good', 'bad', 'unknw', 'sorry', 'pardon', 'wacko', 'acute', 'boast', 'boredom', 'dash', 'search', 'crazy', 'yess', 'cool'),
            
            // (исключения) имеют спец обозначения
            'hard_sm'        => array( '=)' => 'smile', ':)' => 'smile', ':-)' => 'smile', '=(' => 'sad', ':(' => 'sad', ':-(' => 'sad', '=D' => 'laugh', ':D' => 'laugh', ':-D' => 'laugh', ),
            // все имеющиеся
            'exist'          => self::get_dir_smile_names(),
        );
    }
    
    function update_options_handler(){
        $used_sm = $used_sm2 = array();

        $used_sm = explode(",", trim( $_POST['used_sm']) );

        foreach( $used_sm as $val ){
            $val = trim( $val);
            if( $val ) $used_sm2[] = $val;
        }

        $spec_tags = $_POST['spec_tags'] ? explode(',', str_replace(' ', '', trim( $_POST['spec_tags'] ) ) ) : array();

        $hard_sm = trim( $_POST['hard_sm'] );
        $hard_sm = explode("\n", $hard_sm);
        foreach( $hard_sm as $val ){
            if( empty( $val) )
                continue;

            $temp = explode(' >>> ', trim( $val ) );
            $hard_sm['temp'][ trim( $temp[0] ) ] = trim( $temp[1] );
        }
        $hard_sm = $hard_sm['temp'];

        $this->opt['textarea_id']    = $_POST['textarea_id'];
        $this->opt['additional_css'] = stripslashes( $_POST['additional_css'] );
        $this->opt['spec_tags']      = $spec_tags;
        $this->opt['not_insert']     = isset( $_POST['not_insert'] ) ? 1 : 0;
        $this->opt['hard_sm']        = $hard_sm;
        $this->opt['used_sm']        = $used_sm2;
        $this->opt['exist']          = self::get_dir_smile_names();

        update_option( self::OPT_NAME, $this->opt );

        delete_option('use_smilies'); // удаляем стандартную опцию отображения смайликов    
    }
    
    
    ## добавляем ко всем textarea созданым через the_editor
    function admin_insert( $html ){
        preg_match('~<textarea[^>]+id=[\'"]([^\'"]+)~i', $html, $match );
        $tx_id = $match[1];

        $html = str_replace('textarea>', 'textarea>'. $this->get_all_smile_html( $tx_id ), $html );

        return $html;
    }
    
    function admin_js(){
        echo $this->insert_smile_js();
        ?>
        <script type="text/javascript">
        //* Передвигаем блоки смайликов для визуального редактора и для HTML редактора
        jQuery(document).ready(function( $){
            // Передвигаем смайлы в HTML редактор
            // форм может быть несколько поэтому перебираем массив
            $('.sm_list').each(function(){
                var $quicktags = $(this).siblings('.quicktags-toolbar');
                if( $quicktags[0] ){
                    $quicktags.append( $(this) );
                    $(this).css({ position:'absolute', display:'inline-block', padding:'4px 0 0 25px', left:'auto', top:'auto', right:'auto', bottom:'auto', height:'23px' });
                }            
            });
            
            var $mce_editor = $('#insert-media-button');
            if( $mce_editor[0] ){
                $mce_editor.after( $($('.sm_list')[0]).css({ position:'relative', padding:'0', margin:'2px 0px 0px 30px', left:'none', top:'none', right:'none', bottom:'none' }) );
            }
            
        });
        //*/
        </script>
        <?php
    }
    
    ## Выберите смайлики:
    function get_dir_smiles_img(){
        $hard_sm = array_flip( $this->opt['hard_sm'] );
        $gather_sm = array();

        foreach( self::get_dir_smile_names() as $smile ){
            $sm_name = $sm_code = $smile;
            if( @ $hard_sm[ $smile ] ){
                $sm_code = $smile;
                $sm_name = $hard_sm[ $smile ];
            }
                
            echo '<b id="'. $sm_code .'" title="'. $sm_name .'" class="'. ( in_array( $sm_code, (array) @ $this->opt['used_sm'] ) ? 'checked':'' ) .'" >'. sprintf( $this->sm_img, $sm_code, $sm_name ) .'</b>';
        }
    }
    
    
    function activation(){
        delete_option('use_smilies');
        
        if( ! get_option( self::OPT_NAME ) )
            $this->set_def_options();
        
        ksw_version_update();
    }
    
    function uninstall(){
        global $wpdb;
        
        if ( __FILE__ != WP_UNINSTALL_PLUGIN ) return;
            
        // проверка пройдена успешно. Удаляем опции и остальное.
        delete_option( self::OPT_NAME );
        
        // Удаляем 
        foreach( self::get_dir_smile_names() as $val ){
            $val = addslashes( $val);
            if( $val ){
                $smile_code = self::$sm_start . $wpdb->escape($val) . self::$sm_end;
                $wpdb->query( "UPDATE $wpdb->posts SET post_content = REPLACE(post_content, '$smile_code', '') WHERE post_type NOT IN ('attachment','revision')" );
                $wpdb->query( "UPDATE $wpdb->comments SET comment_content = REPLACE(comment_content, '$smile_code', '')" );
            }
        }
    }        
}

Допоможіть, будь ласка.

Re: Простий плагін смайлів[WP & JS]

Спробуйте замінити слова  onmouseover та onmouseout у 136 та 150 строці на onclick

Подякували: A.N.Onim1

3

Re: Простий плагін смайлів[WP & JS]

Сергей Попов написав:

Спробуйте замінити слова  onmouseover та onmouseout у 136 та 150 строці на onclick

Дякую. Тепер коли наводиш звичайно нічого не відбувається, коли натискаєш виводиться блок зі смайлами, але от звкрити той блок неможливо - ні вибором смайлу ні натиском знову но кнопку відкриття смайлів.

4 Востаннє редагувалося A.N.Onim (21.02.2016 21:14:15)

Re: Простий плагін смайлів[WP & JS]

Доброго дня - тема схожа тому не створюю нову.
Є інструкція - http://webliberty.ru/smayliki-na-bloge-wordpress/ - ставити смайли вручну на WP. Смайли перезалив - але от коли вставляю той код то просто створюється дів - а він порожній. Почав дебажити виявляється зміна $wpsmiliestrans - порожня. Що не так? Ось шмат коду зі змінами:

<script>
function addsmile($smile){
    document.getElementById('comment').value=document.getElementById('comment').value+' '+$smile+' ';
}
</script>
    <?php 
global $wpsmiliestrans;
$dm_showsmiles = '';
$dm_smiled = array();
foreach ($wpsmiliestrans as $tag) {
    $dm_showsmiles .= '<hr/>';
}

$comments_args = array(
    
        'comment_notes_before' => 
            '<p class="comment-notes">' . __( 'Your email address will not be published.', 'baskerville' ) . '</p>',
    
        'comment_field' => 
            '<p class="comment-form-comment">' . '<div style="width:100%; margin-left:0px; margin-right:0px;">'.$dm_showsmiles.'</div>' . '<textarea id="comment" name="comment" cols="45" rows="6" required>' . '</textarea></p>',
        
        'fields' => apply_filters( 'comment_form_default_fields', array(
        
            'author' =>
                '<p class="comment-form-author">' .
і так далі

код трохи з "дебагу" -  :D  :D  :D  - але це суть не міняє

Дякую.