Added : Jquery files and items ajax
This commit is contained in:
Arslan Hassan
parent
322a62b875
commit
fe9a28797f
6 changed files with 918 additions and 0 deletions
76
upload/ajax/items.php
Normal file
76
upload/ajax/items.php
Normal file
|
|
@ -0,0 +1,76 @@
|
||||||
|
<?php
|
||||||
|
|
||||||
|
include("../includes/config.inc.php");
|
||||||
|
|
||||||
|
$mode = $_REQUEST['mode'];
|
||||||
|
|
||||||
|
header("Content-type: application/json");
|
||||||
|
|
||||||
|
switch ($mode) {
|
||||||
|
|
||||||
|
case "friend":
|
||||||
|
case "friends":
|
||||||
|
{
|
||||||
|
$friends = $userquery->get_contacts(userid());
|
||||||
|
$new_friends = array();
|
||||||
|
if($friends)
|
||||||
|
{
|
||||||
|
foreach($friends as $friend)
|
||||||
|
{
|
||||||
|
$new_friends[] = array(
|
||||||
|
'value' => $friend['contact_userid'],
|
||||||
|
'name' => name($friend),
|
||||||
|
'image' => $userquery->avatar($friend,'small'),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
echo json_encode($new_friends);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case "groups":
|
||||||
|
case "group":
|
||||||
|
{
|
||||||
|
$groups = $cbgroup->user_joined_groups(userid());
|
||||||
|
|
||||||
|
$new_groups = array();
|
||||||
|
if($groups)
|
||||||
|
{
|
||||||
|
foreach($groups as $group)
|
||||||
|
{
|
||||||
|
$new_groups[] = array(
|
||||||
|
'value' => $group['group_id'],
|
||||||
|
'name' => $group['group_name'],
|
||||||
|
'image' => $cbgroup->get_group_thumb($group,'small')
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
echo json_encode($new_groups);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case "mentions":
|
||||||
|
{
|
||||||
|
$friends = $userquery->get_contacts(userid());
|
||||||
|
$new_friends = array();
|
||||||
|
if($friends)
|
||||||
|
{
|
||||||
|
foreach($friends as $friend)
|
||||||
|
{
|
||||||
|
$new_friends[] = array(
|
||||||
|
'id' => $friend['contact_userid'],
|
||||||
|
'name' => name($friend),
|
||||||
|
'avatar' => $userquery->avatar($friend,'small'),
|
||||||
|
'type' => 'user'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
echo json_encode($new_friends);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
|
||||||
|
default:
|
||||||
|
exit(json_encode(array('err' => array(lang('Invalid request')))));
|
||||||
|
}
|
||||||
|
?>
|
||||||
120
upload/styles/cbv3/js/css/jquery.mentionsInput.css
Normal file
120
upload/styles/cbv3/js/css/jquery.mentionsInput.css
Normal file
|
|
@ -0,0 +1,120 @@
|
||||||
|
|
||||||
|
.mentions-input-box {
|
||||||
|
position: relative;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mentions-input-box textarea {
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
height: 18px;
|
||||||
|
|
||||||
|
|
||||||
|
overflow: hidden;
|
||||||
|
background: transparent;
|
||||||
|
position: relative;
|
||||||
|
outline: 0;
|
||||||
|
resize: none;
|
||||||
|
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mentions-input-box .mentions-autocomplete-list {
|
||||||
|
display: none;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #b2b2b2;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 10000;
|
||||||
|
margin-top: -2px;
|
||||||
|
|
||||||
|
border-radius:5px;
|
||||||
|
border-top-right-radius:0;
|
||||||
|
border-top-left-radius:0;
|
||||||
|
|
||||||
|
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.148438);
|
||||||
|
-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.148438);
|
||||||
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.148438);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mentions-input-box .mentions-autocomplete-list ul {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mentions-input-box .mentions-autocomplete-list li {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 0 5px;
|
||||||
|
margin: 0;
|
||||||
|
width: auto;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
height: 26px;
|
||||||
|
line-height: 26px;
|
||||||
|
overflow: hidden;
|
||||||
|
cursor: pointer;
|
||||||
|
list-style: none;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mentions-input-box .mentions-autocomplete-list li:last-child {
|
||||||
|
border-radius:5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mentions-input-box .mentions-autocomplete-list li > img,
|
||||||
|
.mentions-input-box .mentions-autocomplete-list li > div.icon {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
float: left;
|
||||||
|
margin-top:5px;
|
||||||
|
margin-right: 5px;
|
||||||
|
-moz-background-origin:3px;
|
||||||
|
|
||||||
|
border-radius:3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mentions-input-box .mentions-autocomplete-list li em {
|
||||||
|
font-weight: bold;
|
||||||
|
font-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mentions-input-box .mentions-autocomplete-list li:hover,
|
||||||
|
.mentions-input-box .mentions-autocomplete-list li.active {
|
||||||
|
background-color: #f2f2f2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mentions-input-box .mentions-autocomplete-list li b {
|
||||||
|
background: #ffff99;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mentions-input-box .mentions {
|
||||||
|
position: absolute;
|
||||||
|
left: 6px;
|
||||||
|
right: 0;
|
||||||
|
top: 9px;
|
||||||
|
bottom: 0;
|
||||||
|
padding: 0px;
|
||||||
|
color: #fff;
|
||||||
|
overflow: hidden;
|
||||||
|
font-size:14px;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
word-wrap: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mentions-input-box .mentions > div {
|
||||||
|
color: #fff;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mentions-input-box .mentions > div > strong {
|
||||||
|
font-weight:normal;
|
||||||
|
background: #d8dfea;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mentions-input-box .mentions > div > strong > span {
|
||||||
|
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
|
||||||
|
}
|
||||||
162
upload/styles/cbv3/js/jquery.elastic.js
Normal file
162
upload/styles/cbv3/js/jquery.elastic.js
Normal file
|
|
@ -0,0 +1,162 @@
|
||||||
|
/**
|
||||||
|
* @name Elastic
|
||||||
|
* @descripton Elastic is jQuery plugin that grow and shrink your textareas automatically
|
||||||
|
* @version 1.6.11
|
||||||
|
* @requires jQuery 1.2.6+
|
||||||
|
*
|
||||||
|
* @author Jan Jarfalk
|
||||||
|
* @author-email jan.jarfalk@unwrongest.com
|
||||||
|
* @author-website http://www.unwrongest.com
|
||||||
|
*
|
||||||
|
* @licence MIT License - http://www.opensource.org/licenses/mit-license.php
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function($){
|
||||||
|
jQuery.fn.extend({
|
||||||
|
elastic: function() {
|
||||||
|
|
||||||
|
// We will create a div clone of the textarea
|
||||||
|
// by copying these attributes from the textarea to the div.
|
||||||
|
var mimics = [
|
||||||
|
'paddingTop',
|
||||||
|
'paddingRight',
|
||||||
|
'paddingBottom',
|
||||||
|
'paddingLeft',
|
||||||
|
'fontSize',
|
||||||
|
'lineHeight',
|
||||||
|
'fontFamily',
|
||||||
|
'width',
|
||||||
|
'fontWeight',
|
||||||
|
'border-top-width',
|
||||||
|
'border-right-width',
|
||||||
|
'border-bottom-width',
|
||||||
|
'border-left-width',
|
||||||
|
'borderTopStyle',
|
||||||
|
'borderTopColor',
|
||||||
|
'borderRightStyle',
|
||||||
|
'borderRightColor',
|
||||||
|
'borderBottomStyle',
|
||||||
|
'borderBottomColor',
|
||||||
|
'borderLeftStyle',
|
||||||
|
'borderLeftColor'
|
||||||
|
];
|
||||||
|
|
||||||
|
return this.each( function() {
|
||||||
|
|
||||||
|
// Elastic only works on textareas
|
||||||
|
if ( this.type !== 'textarea' ) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
var $textarea = jQuery(this),
|
||||||
|
$twin = jQuery('<div />').css({
|
||||||
|
'position' : 'absolute',
|
||||||
|
'display' : 'none',
|
||||||
|
'word-wrap' : 'break-word',
|
||||||
|
'white-space' :'pre-wrap'
|
||||||
|
}),
|
||||||
|
lineHeight = parseInt($textarea.css('line-height'),10) || parseInt($textarea.css('font-size'),'10'),
|
||||||
|
minheight = parseInt($textarea.css('height'),10) || lineHeight*3,
|
||||||
|
maxheight = parseInt($textarea.css('max-height'),10) || Number.MAX_VALUE,
|
||||||
|
goalheight = 0;
|
||||||
|
|
||||||
|
// Opera returns max-height of -1 if not set
|
||||||
|
if (maxheight < 0) { maxheight = Number.MAX_VALUE; }
|
||||||
|
|
||||||
|
// Append the twin to the DOM
|
||||||
|
// We are going to meassure the height of this, not the textarea.
|
||||||
|
$twin.appendTo($textarea.parent());
|
||||||
|
|
||||||
|
// Copy the essential styles (mimics) from the textarea to the twin
|
||||||
|
var i = mimics.length;
|
||||||
|
while(i--){
|
||||||
|
$twin.css(mimics[i].toString(),$textarea.css(mimics[i].toString()));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Updates the width of the twin. (solution for textareas with widths in percent)
|
||||||
|
function setTwinWidth(){
|
||||||
|
var curatedWidth = Math.floor(parseInt($textarea.width(),10));
|
||||||
|
if($twin.width() !== curatedWidth){
|
||||||
|
$twin.css({'width': curatedWidth + 'px'});
|
||||||
|
|
||||||
|
// Update height of textarea
|
||||||
|
update(true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sets a given height and overflow state on the textarea
|
||||||
|
function setHeightAndOverflow(height, overflow){
|
||||||
|
|
||||||
|
var curratedHeight = Math.floor(parseInt(height,10));
|
||||||
|
if($textarea.height() !== curratedHeight){
|
||||||
|
$textarea.css({'height': curratedHeight + 'px','overflow':overflow});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// This function will update the height of the textarea if necessary
|
||||||
|
function update(forced) {
|
||||||
|
|
||||||
|
// Get curated content from the textarea.
|
||||||
|
var textareaContent = $textarea.val().replace(/&/g,'&').replace(/ {2}/g, ' ').replace(/<|>/g, '>').replace(/\n/g, '<br />');
|
||||||
|
|
||||||
|
// Compare curated content with curated twin.
|
||||||
|
var twinContent = $twin.html().replace(/<br>/ig,'<br />');
|
||||||
|
|
||||||
|
if(forced || textareaContent+' ' !== twinContent){
|
||||||
|
|
||||||
|
// Add an extra white space so new rows are added when you are at the end of a row.
|
||||||
|
$twin.html(textareaContent+' ');
|
||||||
|
|
||||||
|
// Change textarea height if twin plus the height of one line differs more than 3 pixel from textarea height
|
||||||
|
if(Math.abs($twin.height() + lineHeight - $textarea.height()) > 3){
|
||||||
|
|
||||||
|
var goalheight = $twin.height()+lineHeight;
|
||||||
|
if(goalheight >= maxheight) {
|
||||||
|
setHeightAndOverflow(maxheight,'auto');
|
||||||
|
} else if(goalheight <= minheight) {
|
||||||
|
setHeightAndOverflow(minheight,'hidden');
|
||||||
|
} else {
|
||||||
|
setHeightAndOverflow(goalheight,'hidden');
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hide scrollbars
|
||||||
|
$textarea.css({'overflow':'hidden'});
|
||||||
|
|
||||||
|
// Update textarea size on keyup, change, cut and paste
|
||||||
|
$textarea.bind('keyup change cut paste', function(){
|
||||||
|
update();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Update width of twin if browser or textarea is resized (solution for textareas with widths in percent)
|
||||||
|
$(window).bind('resize', setTwinWidth);
|
||||||
|
$textarea.bind('resize', setTwinWidth);
|
||||||
|
$textarea.bind('update', update);
|
||||||
|
|
||||||
|
// Compact textarea on blur
|
||||||
|
$textarea.bind('blur',function(){
|
||||||
|
if($twin.height() < maxheight){
|
||||||
|
if($twin.height() > minheight) {
|
||||||
|
$textarea.height($twin.height());
|
||||||
|
} else {
|
||||||
|
$textarea.height(minheight);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// And this line is to catch the browser paste event
|
||||||
|
$textarea.bind('input paste',function(e){ setTimeout( update, 250); });
|
||||||
|
|
||||||
|
// Run update once when elastic is initialized
|
||||||
|
update();
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})(jQuery);
|
||||||
132
upload/styles/cbv3/js/jquery.events.input.js
Normal file
132
upload/styles/cbv3/js/jquery.events.input.js
Normal file
|
|
@ -0,0 +1,132 @@
|
||||||
|
/*
|
||||||
|
jQuery `input` special event v1.0
|
||||||
|
|
||||||
|
http://whattheheadsaid.com/projects/input-special-event
|
||||||
|
|
||||||
|
(c) 2010-2011 Andy Earnshaw
|
||||||
|
MIT license
|
||||||
|
www.opensource.org/licenses/mit-license.php
|
||||||
|
|
||||||
|
Modified by Kenneth Auchenberg
|
||||||
|
* Disabled usage of onPropertyChange event in IE, since its a bit delayed, if you type really fast.
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function($) {
|
||||||
|
// Handler for propertychange events only
|
||||||
|
function propHandler() {
|
||||||
|
var $this = $(this);
|
||||||
|
if (window.event.propertyName == "value" && !$this.data("triggering.inputEvent")) {
|
||||||
|
$this.data("triggering.inputEvent", true).trigger("input");
|
||||||
|
window.setTimeout(function () {
|
||||||
|
$this.data("triggering.inputEvent", false);
|
||||||
|
}, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$.event.special.input = {
|
||||||
|
setup: function(data, namespaces) {
|
||||||
|
var timer,
|
||||||
|
// Get a reference to the element
|
||||||
|
elem = this,
|
||||||
|
// Store the current state of the element
|
||||||
|
state = elem.value,
|
||||||
|
// Create a dummy element that we can use for testing event support
|
||||||
|
tester = document.createElement(this.tagName),
|
||||||
|
// Check for native oninput
|
||||||
|
oninput = "oninput" in tester || checkEvent(tester),
|
||||||
|
// Check for onpropertychange
|
||||||
|
onprop = "onpropertychange" in tester,
|
||||||
|
// Generate a random namespace for event bindings
|
||||||
|
ns = "inputEventNS" + ~~(Math.random() * 10000000),
|
||||||
|
// Last resort event names
|
||||||
|
evts = ["focus", "blur", "paste", "cut", "keydown", "drop", ""].join("." + ns + " ");
|
||||||
|
|
||||||
|
function checkState() {
|
||||||
|
var $this = $(elem);
|
||||||
|
if (elem.value != state && !$this.data("triggering.inputEvent")) {
|
||||||
|
state = elem.value;
|
||||||
|
|
||||||
|
$this.data("triggering.inputEvent", true).trigger("input");
|
||||||
|
window.setTimeout(function () {
|
||||||
|
$this.data("triggering.inputEvent", false);
|
||||||
|
}, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set up a function to handle the different events that may fire
|
||||||
|
function handler(e) {
|
||||||
|
// When focusing, set a timer that polls for changes to the value
|
||||||
|
if (e.type == "focus") {
|
||||||
|
checkState();
|
||||||
|
clearInterval(timer);
|
||||||
|
timer = window.setInterval(checkState, 250);
|
||||||
|
} else if (e.type == "blur") {
|
||||||
|
// When blurring, cancel the aforeset timer
|
||||||
|
window.clearInterval(timer);
|
||||||
|
} else {
|
||||||
|
// For all other events, queue a timer to check state ASAP
|
||||||
|
window.setTimeout(checkState, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Bind to native event if available
|
||||||
|
if (oninput) {
|
||||||
|
return false;
|
||||||
|
// } else if (onprop) {
|
||||||
|
// // Else fall back to propertychange if available
|
||||||
|
// $(this).find("input, textarea").andSelf().filter("input, textarea").bind("propertychange." + ns, propHandler);
|
||||||
|
} else {
|
||||||
|
// Else clutch at straws!
|
||||||
|
$(this).find("input, textarea").andSelf().filter("input, textarea").bind(evts, handler);
|
||||||
|
}
|
||||||
|
$(this).data("inputEventHandlerNS", ns);
|
||||||
|
},
|
||||||
|
teardown: function () {
|
||||||
|
var elem = $(this);
|
||||||
|
elem.find("input, textarea").unbind(elem.data("inputEventHandlerNS"));
|
||||||
|
elem.data("inputEventHandlerNS", "");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Setup our jQuery shorthand method
|
||||||
|
$.fn.input = function (handler) {
|
||||||
|
return handler ? this.bind("input", handler) : this.trigger("input");
|
||||||
|
};
|
||||||
|
|
||||||
|
/*
|
||||||
|
The following function tests the element for oninput support in Firefox. Many thanks to
|
||||||
|
http://blog.danielfriesen.name/2010/02/16/html5-browser-maze-oninput-support/
|
||||||
|
*/
|
||||||
|
function checkEvent(el) {
|
||||||
|
// First check, for if Firefox fixes its issue with el.oninput = function
|
||||||
|
el.setAttribute("oninput", "return");
|
||||||
|
if (typeof el.oninput == "function") {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
// Second check, because Firefox doesn't map oninput attribute to oninput property
|
||||||
|
try {
|
||||||
|
|
||||||
|
// "* Note * : Disabled focus and dispatch of keypress event due to conflict with DOMready, which resulted in scrolling down to the bottom of the page, possibly because layout wasn't finished rendering.
|
||||||
|
var e = document.createEvent("KeyboardEvent"),
|
||||||
|
ok = false,
|
||||||
|
tester = function(e) {
|
||||||
|
ok = true;
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
};
|
||||||
|
|
||||||
|
// e.initKeyEvent("keypress", true, true, window, false, false, false, false, 0, "e".charCodeAt(0));
|
||||||
|
|
||||||
|
document.body.appendChild(el);
|
||||||
|
el.addEventListener("input", tester, false);
|
||||||
|
// el.focus();
|
||||||
|
// el.dispatchEvent(e);
|
||||||
|
el.removeEventListener("input", tester, false);
|
||||||
|
document.body.removeChild(el);
|
||||||
|
return ok;
|
||||||
|
|
||||||
|
} catch(error) {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})(jQuery);
|
||||||
423
upload/styles/cbv3/js/jquery.mentionsInput.js
Normal file
423
upload/styles/cbv3/js/jquery.mentionsInput.js
Normal file
|
|
@ -0,0 +1,423 @@
|
||||||
|
/*
|
||||||
|
* Mentions Input
|
||||||
|
* Version 1.0.2
|
||||||
|
* Written by: Kenneth Auchenberg (Podio)
|
||||||
|
*
|
||||||
|
* Using underscore.js
|
||||||
|
*
|
||||||
|
* License: MIT License - http://www.opensource.org/licenses/mit-license.php
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function ($, _, undefined) {
|
||||||
|
|
||||||
|
// Settings
|
||||||
|
var KEY = { BACKSPACE : 8, TAB : 9, RETURN : 13, ESC : 27, LEFT : 37, UP : 38, RIGHT : 39, DOWN : 40, COMMA : 188, SPACE : 32, HOME : 36, END : 35 }; // Keys "enum"
|
||||||
|
var defaultSettings = {
|
||||||
|
triggerChar : '@',
|
||||||
|
onDataRequest : $.noop,
|
||||||
|
minChars : 2,
|
||||||
|
showAvatars : true,
|
||||||
|
elastic : true,
|
||||||
|
classes : {
|
||||||
|
autoCompleteItemActive : "active"
|
||||||
|
},
|
||||||
|
templates : {
|
||||||
|
wrapper : _.template('<div class="mentions-input-box"></div>'),
|
||||||
|
autocompleteList : _.template('<div class="mentions-autocomplete-list"></div>'),
|
||||||
|
autocompleteListItem : _.template('<li data-ref-id="<%= id %>" data-ref-type="<%= type %>" data-display="<%= display %>"><%= content %></li>'),
|
||||||
|
autocompleteListItemAvatar : _.template('<img src="<%= avatar %>" />'),
|
||||||
|
autocompleteListItemIcon : _.template('<div class="icon <%= icon %>"></div>'),
|
||||||
|
mentionsOverlay : _.template('<div class="mentions"><div></div></div>'),
|
||||||
|
mentionItemSyntax : _.template('@[<%= value %>:<%= type %>:<%= id %>]'),
|
||||||
|
mentionItemHighlight : _.template('<strong><span><%= value %></span></strong>')
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var utils = {
|
||||||
|
htmlEncode : function (str) {
|
||||||
|
return _.escape(str);
|
||||||
|
},
|
||||||
|
highlightTerm : function (value, term) {
|
||||||
|
if (!term && !term.length) {
|
||||||
|
return value;
|
||||||
|
}
|
||||||
|
return value.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + term + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<b>$1</b>");
|
||||||
|
},
|
||||||
|
setCaratPosition : function (domNode, caretPos) {
|
||||||
|
if (domNode.createTextRange) {
|
||||||
|
var range = domNode.createTextRange();
|
||||||
|
range.move('character', caretPos);
|
||||||
|
range.select();
|
||||||
|
} else {
|
||||||
|
if (domNode.selectionStart) {
|
||||||
|
domNode.focus();
|
||||||
|
domNode.setSelectionRange(caretPos, caretPos);
|
||||||
|
} else {
|
||||||
|
domNode.focus();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
rtrim: function(string) {
|
||||||
|
return string.replace(/\s+$/,"");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var MentionsInput = function (settings) {
|
||||||
|
|
||||||
|
var domInput, elmInputBox, elmInputWrapper, elmAutocompleteList, elmWrapperBox, elmMentionsOverlay, elmActiveAutoCompleteItem;
|
||||||
|
var mentionsCollection = [];
|
||||||
|
var autocompleteItemCollection = {};
|
||||||
|
var inputBuffer = [];
|
||||||
|
var currentDataQuery;
|
||||||
|
|
||||||
|
settings = $.extend(true, {}, defaultSettings, settings );
|
||||||
|
|
||||||
|
function initTextarea() {
|
||||||
|
elmInputBox = $(domInput);
|
||||||
|
|
||||||
|
if (elmInputBox.attr('data-mentions-input') == 'true') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
elmInputWrapper = elmInputBox.parent();
|
||||||
|
elmWrapperBox = $(settings.templates.wrapper());
|
||||||
|
elmInputBox.wrapAll(elmWrapperBox);
|
||||||
|
elmWrapperBox = elmInputWrapper.find('> div');
|
||||||
|
|
||||||
|
elmInputBox.attr('data-mentions-input', 'true');
|
||||||
|
elmInputBox.bind('keydown', onInputBoxKeyDown);
|
||||||
|
elmInputBox.bind('keypress', onInputBoxKeyPress);
|
||||||
|
elmInputBox.bind('input', onInputBoxInput);
|
||||||
|
elmInputBox.bind('click', onInputBoxClick);
|
||||||
|
elmInputBox.bind('blur', onInputBoxBlur);
|
||||||
|
|
||||||
|
// Elastic textareas, internal setting for the Dispora guys
|
||||||
|
if( settings.elastic ) {
|
||||||
|
elmInputBox.elastic();
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function initAutocomplete() {
|
||||||
|
elmAutocompleteList = $(settings.templates.autocompleteList());
|
||||||
|
elmAutocompleteList.appendTo(elmWrapperBox);
|
||||||
|
elmAutocompleteList.delegate('li', 'mousedown', onAutoCompleteItemClick);
|
||||||
|
}
|
||||||
|
|
||||||
|
function initMentionsOverlay() {
|
||||||
|
elmMentionsOverlay = $(settings.templates.mentionsOverlay());
|
||||||
|
elmMentionsOverlay.prependTo(elmWrapperBox);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateValues() {
|
||||||
|
var syntaxMessage = getInputBoxValue();
|
||||||
|
|
||||||
|
_.each(mentionsCollection, function (mention) {
|
||||||
|
var textSyntax = settings.templates.mentionItemSyntax(mention);
|
||||||
|
syntaxMessage = syntaxMessage.replace(mention.value, textSyntax);
|
||||||
|
});
|
||||||
|
|
||||||
|
var mentionText = utils.htmlEncode(syntaxMessage);
|
||||||
|
|
||||||
|
_.each(mentionsCollection, function (mention) {
|
||||||
|
var formattedMention = _.extend({}, mention, {value: utils.htmlEncode(mention.value)});
|
||||||
|
var textSyntax = settings.templates.mentionItemSyntax(formattedMention);
|
||||||
|
var textHighlight = settings.templates.mentionItemHighlight(formattedMention);
|
||||||
|
|
||||||
|
mentionText = mentionText.replace(textSyntax, textHighlight);
|
||||||
|
});
|
||||||
|
|
||||||
|
mentionText = mentionText.replace(/\n/g, '<br />');
|
||||||
|
mentionText = mentionText.replace(/ {2}/g, ' ');
|
||||||
|
|
||||||
|
elmInputBox.data('messageText', syntaxMessage);
|
||||||
|
elmMentionsOverlay.find('div').html(mentionText);
|
||||||
|
}
|
||||||
|
|
||||||
|
function resetBuffer() {
|
||||||
|
inputBuffer = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateMentionsCollection() {
|
||||||
|
var inputText = getInputBoxValue();
|
||||||
|
|
||||||
|
mentionsCollection = _.reject(mentionsCollection, function (mention, index) {
|
||||||
|
return !mention.value || inputText.indexOf(mention.value) == -1;
|
||||||
|
});
|
||||||
|
mentionsCollection = _.compact(mentionsCollection);
|
||||||
|
}
|
||||||
|
|
||||||
|
function addMention(mention) {
|
||||||
|
|
||||||
|
var currentMessage = getInputBoxValue();
|
||||||
|
|
||||||
|
// Using a regex to figure out positions
|
||||||
|
var regex = new RegExp("\\" + settings.triggerChar + currentDataQuery, "gi");
|
||||||
|
regex.exec(currentMessage);
|
||||||
|
|
||||||
|
var startCaretPosition = regex.lastIndex - currentDataQuery.length - 1;
|
||||||
|
var currentCaretPosition = regex.lastIndex;
|
||||||
|
|
||||||
|
var start = currentMessage.substr(0, startCaretPosition);
|
||||||
|
var end = currentMessage.substr(currentCaretPosition, currentMessage.length);
|
||||||
|
var startEndIndex = (start + mention.value).length + 1;
|
||||||
|
|
||||||
|
mentionsCollection.push(mention);
|
||||||
|
|
||||||
|
// Cleaning before inserting the value, otherwise auto-complete would be triggered with "old" inputbuffer
|
||||||
|
resetBuffer();
|
||||||
|
currentDataQuery = '';
|
||||||
|
hideAutoComplete();
|
||||||
|
|
||||||
|
// Mentions & syntax message
|
||||||
|
var updatedMessageText = start + mention.value + ' ' + end;
|
||||||
|
elmInputBox.val(updatedMessageText);
|
||||||
|
updateValues();
|
||||||
|
|
||||||
|
// Set correct focus and selection
|
||||||
|
elmInputBox.focus();
|
||||||
|
utils.setCaratPosition(elmInputBox[0], startEndIndex);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getInputBoxValue() {
|
||||||
|
return $.trim(elmInputBox.val());
|
||||||
|
}
|
||||||
|
|
||||||
|
function onAutoCompleteItemClick(e) {
|
||||||
|
var elmTarget = $(this);
|
||||||
|
var mention = autocompleteItemCollection[elmTarget.attr('data-uid')];
|
||||||
|
|
||||||
|
addMention(mention);
|
||||||
|
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function onInputBoxClick(e) {
|
||||||
|
resetBuffer();
|
||||||
|
}
|
||||||
|
|
||||||
|
function onInputBoxBlur(e) {
|
||||||
|
hideAutoComplete();
|
||||||
|
}
|
||||||
|
|
||||||
|
function onInputBoxInput(e) {
|
||||||
|
updateValues();
|
||||||
|
updateMentionsCollection();
|
||||||
|
hideAutoComplete();
|
||||||
|
|
||||||
|
var triggerCharIndex = _.lastIndexOf(inputBuffer, settings.triggerChar);
|
||||||
|
if (triggerCharIndex > -1) {
|
||||||
|
currentDataQuery = inputBuffer.slice(triggerCharIndex + 1).join('');
|
||||||
|
currentDataQuery = utils.rtrim(currentDataQuery);
|
||||||
|
|
||||||
|
_.defer(_.bind(doSearch, this, currentDataQuery));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onInputBoxKeyPress(e) {
|
||||||
|
if(e.keyCode !== KEY.BACKSPACE) {
|
||||||
|
var typedValue = String.fromCharCode(e.which || e.keyCode);
|
||||||
|
inputBuffer.push(typedValue);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onInputBoxKeyDown(e) {
|
||||||
|
|
||||||
|
// This also matches HOME/END on OSX which is CMD+LEFT, CMD+RIGHT
|
||||||
|
if (e.keyCode == KEY.LEFT || e.keyCode == KEY.RIGHT || e.keyCode == KEY.HOME || e.keyCode == KEY.END) {
|
||||||
|
// Defer execution to ensure carat pos has changed after HOME/END keys
|
||||||
|
_.defer(resetBuffer);
|
||||||
|
|
||||||
|
// IE9 doesn't fire the oninput event when backspace or delete is pressed. This causes the highlighting
|
||||||
|
// to stay on the screen whenever backspace is pressed after a highlighed word. This is simply a hack
|
||||||
|
// to force updateValues() to fire when backspace/delete is pressed in IE9.
|
||||||
|
if (navigator.userAgent.indexOf("MSIE 9") > -1) {
|
||||||
|
_.defer(updateValues);
|
||||||
|
}
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (e.keyCode == KEY.BACKSPACE) {
|
||||||
|
inputBuffer = inputBuffer.slice(0, -1 + inputBuffer.length); // Can't use splice, not available in IE
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!elmAutocompleteList.is(':visible')) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
switch (e.keyCode) {
|
||||||
|
case KEY.UP:
|
||||||
|
case KEY.DOWN:
|
||||||
|
var elmCurrentAutoCompleteItem = null;
|
||||||
|
if (e.keyCode == KEY.DOWN) {
|
||||||
|
if (elmActiveAutoCompleteItem && elmActiveAutoCompleteItem.length) {
|
||||||
|
elmCurrentAutoCompleteItem = elmActiveAutoCompleteItem.next();
|
||||||
|
} else {
|
||||||
|
elmCurrentAutoCompleteItem = elmAutocompleteList.find('li').first();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
elmCurrentAutoCompleteItem = $(elmActiveAutoCompleteItem).prev();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (elmCurrentAutoCompleteItem.length) {
|
||||||
|
selectAutoCompleteItem(elmCurrentAutoCompleteItem);
|
||||||
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
|
||||||
|
case KEY.RETURN:
|
||||||
|
case KEY.TAB:
|
||||||
|
if (elmActiveAutoCompleteItem && elmActiveAutoCompleteItem.length) {
|
||||||
|
elmActiveAutoCompleteItem.trigger('mousedown');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideAutoComplete() {
|
||||||
|
elmActiveAutoCompleteItem = null;
|
||||||
|
elmAutocompleteList.empty().hide();
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectAutoCompleteItem(elmItem) {
|
||||||
|
elmItem.addClass(settings.classes.autoCompleteItemActive);
|
||||||
|
elmItem.siblings().removeClass(settings.classes.autoCompleteItemActive);
|
||||||
|
|
||||||
|
elmActiveAutoCompleteItem = elmItem;
|
||||||
|
}
|
||||||
|
|
||||||
|
function populateDropdown(query, results) {
|
||||||
|
elmAutocompleteList.show();
|
||||||
|
|
||||||
|
// Filter items that has already been mentioned
|
||||||
|
var mentionValues = _.pluck(mentionsCollection, 'value');
|
||||||
|
results = _.reject(results, function (item) {
|
||||||
|
return _.include(mentionValues, item.name);
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!results.length) {
|
||||||
|
hideAutoComplete();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
elmAutocompleteList.empty();
|
||||||
|
var elmDropDownList = $("<ul>").appendTo(elmAutocompleteList).hide();
|
||||||
|
|
||||||
|
_.each(results, function (item, index) {
|
||||||
|
var itemUid = _.uniqueId('mention_');
|
||||||
|
|
||||||
|
autocompleteItemCollection[itemUid] = _.extend({}, item, {value: item.name});
|
||||||
|
|
||||||
|
var elmListItem = $(settings.templates.autocompleteListItem({
|
||||||
|
'id' : utils.htmlEncode(item.id),
|
||||||
|
'display' : utils.htmlEncode(item.name),
|
||||||
|
'type' : utils.htmlEncode(item.type),
|
||||||
|
'content' : utils.highlightTerm(utils.htmlEncode((item.name)), query)
|
||||||
|
})).attr('data-uid', itemUid);
|
||||||
|
|
||||||
|
if (index === 0) {
|
||||||
|
selectAutoCompleteItem(elmListItem);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (settings.showAvatars) {
|
||||||
|
var elmIcon;
|
||||||
|
|
||||||
|
if (item.avatar) {
|
||||||
|
elmIcon = $(settings.templates.autocompleteListItemAvatar({ avatar : item.avatar }));
|
||||||
|
} else {
|
||||||
|
elmIcon = $(settings.templates.autocompleteListItemIcon({ icon : item.icon }));
|
||||||
|
}
|
||||||
|
elmIcon.prependTo(elmListItem);
|
||||||
|
}
|
||||||
|
elmListItem = elmListItem.appendTo(elmDropDownList);
|
||||||
|
});
|
||||||
|
|
||||||
|
elmAutocompleteList.show();
|
||||||
|
elmDropDownList.show();
|
||||||
|
}
|
||||||
|
|
||||||
|
function doSearch(query) {
|
||||||
|
if (query && query.length && query.length >= settings.minChars) {
|
||||||
|
settings.onDataRequest.call(this, 'search', query, function (responseData) {
|
||||||
|
populateDropdown(query, responseData);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function resetInput() {
|
||||||
|
elmInputBox.val('');
|
||||||
|
mentionsCollection = [];
|
||||||
|
updateValues();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Public methods
|
||||||
|
return {
|
||||||
|
init : function (domTarget) {
|
||||||
|
|
||||||
|
domInput = domTarget;
|
||||||
|
|
||||||
|
initTextarea();
|
||||||
|
initAutocomplete();
|
||||||
|
initMentionsOverlay();
|
||||||
|
resetInput();
|
||||||
|
|
||||||
|
if( settings.prefillMention ) {
|
||||||
|
addMention( settings.prefillMention );
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
val : function (callback) {
|
||||||
|
if (!_.isFunction(callback)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var value = mentionsCollection.length ? elmInputBox.data('messageText') : getInputBoxValue();
|
||||||
|
callback.call(this, value);
|
||||||
|
},
|
||||||
|
|
||||||
|
reset : function () {
|
||||||
|
resetInput();
|
||||||
|
},
|
||||||
|
|
||||||
|
getMentions : function (callback) {
|
||||||
|
if (!_.isFunction(callback)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
callback.call(this, mentionsCollection);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
$.fn.mentionsInput = function (method, settings) {
|
||||||
|
|
||||||
|
var outerArguments = arguments;
|
||||||
|
|
||||||
|
if (typeof method === 'object' || !method) {
|
||||||
|
settings = method;
|
||||||
|
}
|
||||||
|
|
||||||
|
return this.each(function () {
|
||||||
|
var instance = $.data(this, 'mentionsInput') || $.data(this, 'mentionsInput', new MentionsInput(settings));
|
||||||
|
|
||||||
|
if (_.isFunction(instance[method])) {
|
||||||
|
return instance[method].apply(this, Array.prototype.slice.call(outerArguments, 1));
|
||||||
|
|
||||||
|
} else if (typeof method === 'object' || !method) {
|
||||||
|
return instance.init.call(this, this);
|
||||||
|
|
||||||
|
} else {
|
||||||
|
$.error('Method ' + method + ' does not exist');
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
})(jQuery, _);
|
||||||
5
upload/styles/cbv3/js/underscore.js
Normal file
5
upload/styles/cbv3/js/underscore.js
Normal file
File diff suppressed because one or more lines are too long
Loading…
Add table
Reference in a new issue