%PDF-
%PDF-
Mini Shell
Mini Shell
/* global jQuery, botVars */
const DEBUG = false;
// User info retrieved from chats is store in this object
const context = {};
// Cache conversation position
let conversationPos;
// Cache conversation status
let conversationStarted = false;
/*
---------------
Utility Functions
---------------
*/
/**
* Cast string
*
* @param value
* @return string
*/
function _phpCastString( value ) {
const type = typeof value;
switch ( type ) {
case 'boolean':
return value ? '1' : '';
case 'string':
return value;
case 'number':
if ( isNaN( value ) ) {
return 'NAN';
}
if ( ! isFinite( value ) ) {
return ( value < 0 ? '-' : '' ) + 'INF';
}
return value + '';
case 'undefined':
return '';
case 'object':
if ( Array.isArray( value ) ) {
return 'Array';
}
if ( value !== null ) {
return 'Object';
}
return '';
case 'function':
// fall through
default:
throw new Error( 'Unsupported value type' );
}
}
/**
* Strip tags from a string
*
* big thanks to http://locutus.io/php/strings/strip_tags/
*
* @param string input
* @param string allowed
* @param input
* @param allowed
* @return string
*/
function stripTags( input, allowed ) {
// making sure the allowed arg is a string containing only tags in lowercase (<a><b><c>)
allowed = ( ( ( allowed || '' ) + '' ).toLowerCase().match( /<[a-z][a-z0-9]*>/g ) || [] ).join( '' );
const tags = /<\/?([a-z0-9]*)\b[^>]*>?/gi;
const commentsAndPhpTags = /<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi;
let after = _phpCastString( input );
// removes tha '<' char at the end of the string to replicate PHP's behaviour
after = ( after.substring( after.length - 1 ) === '<' ) ? after.substring( 0, after.length - 1 ) : after;
// recursively remove tags to ensure that the returned string doesn't contain forbidden tags after previous passes (e.g. '<<bait/>switch/>')
while ( true ) {
const before = after;
after = before.replace( commentsAndPhpTags, '' ).replace( tags, function( $0, $1 ) {
return allowed.indexOf( '<' + $1.toLowerCase() + '>' ) > -1 ? $0 : '';
} );
// return once no more tags are removed
if ( before === after ) {
return after;
}
}
}
function renderStatement( statement ) {
// Strip html tags from statement
statement = stripTags( statement );
jQuery( '.chat-container' ).append( '<div class="chat-message-wrapper"><p class="chat-message">' + statement + '</p></div>' );
}
function showTyping() {
jQuery( '.chat-container' ).append( '<div class="typing-wrapper"><p class="chat-message typing"><span class="dot"></span><span class="dot"></span><span class="dot"></span></p></div>' );
}
function hideTyping() {
jQuery( '.typing-wrapper' ).remove();
}
const chatWrapper = jQuery( '.bot-chat-wrapper' );
function scrollToBottom() {
chatWrapper.animate( {
scrollTop: 600,
}, 'slow' );
}
/**
* Input checking
*
* @param msg
*/
function inputError( msg ) {
jQuery( '.bot-error p' ).text( msg );
jQuery( '.bot-error' )
.animate( { bottom: '20px' }, 500 )
.delay( 3000 )
.animate( { bottom: '-70px' }, 500 );
}
function checkInput( option ) {
let input = jQuery( '.bot-container input[type=text]' ).val();
// Strip html tags from input
input = stripTags( input );
if ( input.length > 2 ) {
showResponse( option );
} else {
inputError( botVars.validationName );
}
return false;
}
function checkEmail( option ) {
const input = jQuery( '.bot-container input[type=email]' ).val();
const regex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
const result = regex.test( String( input.toLowerCase() ) );
if ( input.length > 7 && result === true ) {
// Add new entry to our db
const botSubscribeForm = jQuery( '.bot_subscribe_form' ).serialize();
const subscribeBotData = 'action=wpmm_add_subscriber&' + botSubscribeForm;
jQuery.post( wpmmVars.ajaxURL, subscribeBotData, function( response ) {
if ( ! response.success ) {
alert( response.data );
return false;
}
}, 'json' );
showResponse( option );
} else {
inputError( botVars.validationEmail );
}
return false;
}
function clearChat() {
jQuery( '.chat-container' ).empty();
}
function clearFooter() {
jQuery( '.choices' ).empty();
jQuery( '.input' ).empty();
}
/*
------------------------
Setup Conversation Data
------------------------
*/
function startConversation( conv, pos ) {
/* We need this to maintain backward compatibility because we moved startConversation() from /views/maintenance.php to bot.js */
if ( conversationStarted ) {
return false;
}
conversationStarted = true;
clearFooter();
clearChat();
// Set conversation position
// 'conversation' is in the global scope
conversationPos = conv;
// Load conversation data
jQuery.getScript( botVars.uploadsBaseUrl + 'data.js', function( data ) {
// Show first bot statement
showStatement( pos );
} );
}
/*
-------------------
Show Bot Statement
-------------------
*/
function showStatement( pos ) {
// Where are we in conversationData?
const node = conversationData[ conversationPos ][ pos ];
// If there is a side effect execute that within the context
if ( 'sideeffect' in node && jQuery.type( node.sideeffect === 'function' ) ) {
node.sideeffect( context );
}
// Wrap the statements in an array (if they're not already)
let statements;
if ( jQuery.type( node.statement ) === 'array' ) {
statements = node.statement;
} else if ( jQuery.type( node.statement ) === 'string' ) {
statements = [ node.statement ];
} else if ( jQuery.type( node.statement ) === 'function' ) {
statements = node.statement( context );
}
if ( pos === 1.5 || pos === 1.6 ) {
jQuery( '.avatar-notice' ).remove();
}
/*
------------------------
Render Bot Statement(s)
------------------------
Run this function over each statement
*/
async.eachSeries( statements, function( item, callback ) {
// Emulate typing then scroll to bottom
showTyping();
scrollToBottom();
let delay = 900;
if ( DEBUG || ! jQuery( '.bot-chat-wrapper' )[ 0 ] ) {
delay = 0;
}
setTimeout( function() {
hideTyping();
renderStatement( item );
scrollToBottom();
callback();
}, delay );
},
/*
----------------------
Render User Option(s)
----------------------
This is the final callback of the series
*/
function( err ) {
/*
----------------------------
If User Option is Button(s)
----------------------------
*/
if ( 'options' in node ) {
jQuery( '.input' ).hide();
jQuery( '.choices' ).show();
// Get the options' data
const options = node.options;
// If there are options render them
// Otherwise this is the end
if ( options.length > 0 ) {
// Pause 750ms, then render options
setTimeout( function() {
for ( let i = 0; i < options.length; i++ ) {
const option = options[ i ];
var extraClass;
var clickFunction;
// Check option for a consequence
if ( option.consequence === null ) {
// The consequence is null meaning this is a branch we won't be exploring
// The button is given class 'disabled' and does nothing on click
clickFunction = null;
extraClass = 'disabled';
} else {
// Else, click function (showResponse) is binded to it
clickFunction = function( option ) {
showResponse( option );
}.bind( null, option );
extraClass = '';
}
// Render button
const button = jQuery( '<p/>', {
text: option.choice,
class: 'chat-message user',
click: clickFunction,
} ).appendTo( '.choices' );
}
}, 750 );
}
/*
------------------------
If User Option is Input
------------------------
*/
} else if ( 'input' in node ) {
jQuery( '.input' ).show();
jQuery( '.choices' ).hide();
var option = node.input;
/*
Render Input
---------------
*/
// Create a form to hold our input and submit button
var form = jQuery( '<form/>', {
submit: checkInput.bind( null, option ),
} );
// Create a user bubble, append to form
var inputBubble = jQuery( '<p/>', {
class: 'chat-message user',
} ).appendTo( form );
// Create an input, append to user bubble
var input = jQuery( '<input/>', {
type: 'text',
placeholder: botVars.typeName,
name: option.name,
autocomplete: 'off',
required: true,
} ).appendTo( inputBubble );
// Create an input button, append to user bubble
var button = jQuery( '<a/>', {
text: botVars.send,
click: checkInput.bind( null, option ),
} ).appendTo( inputBubble );
// Append form to div.input
form.appendTo( '.input' );
// Focus on the input we just put into the DOM
async.nextTick( function() {
input.focus();
} );
/*
------------------------
If User Option is Email
------------------------
*/
} else if ( 'email' in node ) {
jQuery( '.input' ).show();
jQuery( '.choices' ).hide();
var option = node.email;
/*
Render Input
---------------
*/
// Create a form to hold our input and submit button
var form = jQuery( '<form/>', {
class: 'bot_subscribe_form',
submit: checkEmail.bind( null, option ),
} );
// Create a user bubble, append to form
var inputBubble = jQuery( '<p/>', {
class: 'chat-message user',
} ).appendTo( form );
// Create hidden input, append to user bubble
var input = jQuery( '<input/>', {
type: 'hidden',
name: '_wpnonce',
value: botVars.wpnonce,
} ).appendTo( inputBubble );
// Create email input, append to user bubble
var input = jQuery( '<input/>', {
type: 'email',
placeholder: botVars.typeEmail,
name: option.email,
autocomplete: 'off',
} ).appendTo( inputBubble );
// Create an input button, append to user bubble
var button = jQuery( '<a/>', {
text: botVars.send,
// "class": "user-email-trigger",
click: checkEmail.bind( null, option ),
} ).appendTo( inputBubble );
// Append form to div.input
form.appendTo( '.input' );
// Focus on the input we just put into the DOM
async.nextTick( function() {
input.focus();
} );
}
scrollToBottom();
} );
}
/*
---------------------
Render User Response
---------------------
*/
function showResponse( option ) {
// If there was an input element, put that into the global context
let feedback = '';
if ( 'name' in option ) {
context[ option.name ] = jQuery( '.bot-container input[type=text]' ).val();
feedback = context[ option.name ];
} else if ( 'email' in option ) {
context[ option.email ] = jQuery( '.bot-container input[type=email]' ).val();
feedback = context[ option.email ];
} else {
feedback = option.choice;
}
clearFooter();
// Strip html tags from feedback
feedback = stripTags( feedback );
// Show what the user chose
jQuery( '.chat-container' ).append( '<p class="chat-message user">' + feedback + '</p>' );
if ( 'consequence' in option ) {
showStatement( option.consequence );
} else {
// xxx
}
}
/*
-------------------
Initialize Conversation
-------------------
*/
let isOpen = false;
jQuery( '.bot-avatar' ).on( 'click', function() {
const chatWrap = jQuery( '.bot-chat-wrapper' )[ 0 ];
if ( ! isOpen ) {
isOpen = true;
startConversation( 'homepage', 1 );
}
if ( chatWrap.style.display !== 'none' ) {
jQuery( '.avatar-notice' ).show();
jQuery( '.bot-chat-wrapper' ).hide();
} else {
jQuery( '.bot-chat-wrapper' ).show();
jQuery( '.avatar-notice' ).hide();
}
} );
Zerion Mini Shell 1.0