Apply emojionearea to reply forms

master
Chimo 6 years ago
parent 7a48e7bf2a
commit 967c80e73d
  1. 1
      EmojisPlugin.php
  2. 44
      css/emojis.css
  3. 65
      js/gs-emojis.js

@ -14,6 +14,7 @@ class EmojisPlugin extends Plugin {
function onEndShowStyles($action) {
$action->cssLink($this->path('node_modules/emojionearea/dist/emojionearea.min.css'));
$action->cssLink($this->path('css/emojis.css'));
}
/**

@ -0,0 +1,44 @@
/* Use the same width as the GS textarea */
.emojionearea.notice_data-text {
width: 483px;
}
.threaded-replies .form_notice .emojionearea {
width: 395px;
}
.emojionearea .emojionearea-picker {
z-index: 100;
}
#input_form_status > form {
display: none;
}
#content .emojionearea-picker .emojionearea-category h1 {
font-size: 13px;
letter-spacing: normal;
}
/**
* Detect when "compose notice" textareas are inserted
* so we can enhance them with the emoji picker.
*/
@keyframes nodeInserted {
from {
opacity: 0.99;
}
to {
opacity: 1;
}
}
.notice_data-text {
animation-duration: 0.001s;
animation-name: nodeInserted;
}
.emojionearea.notice_data-text {
animation-name: none;
}

@ -1,8 +1,67 @@
(function () {
"use strict";
$( ".notice_data-text" ).emojioneArea({
pickerPosition: "left"
});
/**
* We can't just enhance the main Notice Form with
* emojionearea since GNU social clones that element
* and uses it for replies. Cloning the enhanced form
* breaks the JS functionality.
*
* Instead, what we do is clone the main Notice Form, hide
* the original and display our clone in the next container.
* This way, GS can clone the original, unenhanced form
* all it wants.
*/
var $noticeFormContainer = $( "#input_form_status" );
if ( $noticeFormContainer.length > 0 ) {
$noticeFormContainer.children( "form" )
.clone()
.insertAfter( $noticeFormContainer )
.wrap( "<div class='input_form current' id='input_form_status_enhanced'>" )
.find( ".notice_data-text" )
.emojioneArea({
useInternalCDN: false,
sprites: true,
pickerPosition: "bottom"
});
}
/**
* Make the "status type" bar ("status, bookmark, event, etc.") work with our
* enhanced status form instead of the original one
*/
$( "#input_form_nav_status" )
.attr( "id", "input_form_nav_status_enhanced" )
.children( "a" )
.attr( "onclick", "return SN.U.switchInputFormTab('status_enhanced');" );
var insertListener;
// Detect DOM Insertions
// From: http://www.backalleycoder.com/2012/04/25/i-want-a-damnodeinserted/
insertListener = function( e ) {
if ( e.animationName === "nodeInserted" ) {
$( e.target ).emojioneArea({
useInternalCDN: false,
sprites: true,
pickerPosition: "bottom"
});
}
};
document.addEventListener("animationstart", insertListener, false);
document.addEventListener("MSAnimationStart", insertListener, false);
document.addEventListener("webkitAnimationStart", insertListener, false);
/**
* Clear input box when submitting
*
* FIXME: We should only clear after the notice has been
* successfully posted.
*/
$( document ).on( "submit", ".form_notice", function() {
$( this ).find( ".notice_data-text" )[ 0 ].emojioneArea.setText( "" );
} );
}());