Тема: Простий плагін смайлів[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 );
// если код смайлика начинается с ";" добавим возможность использвать спецсимволы вроде ")
if( $pat{0} == ';' )
$pat = '(?<!&.{2}|&.{3}|&.{4}|&.{5}|&.{6})' . $pat; // " ¥ ‾ " // {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', '')" );
}
}
}
}
Допоможіть, будь ласка.