Skip to content

Commit

Permalink
Converted jQuery Mention Plugin in a Widget
Browse files Browse the repository at this point in the history
  • Loading branch information
andystrobel committed May 14, 2014
1 parent e5725d2 commit 6ee31c6
Show file tree
Hide file tree
Showing 11 changed files with 128 additions and 38 deletions.
18 changes: 13 additions & 5 deletions protected/modules_core/comment/widgets/views/comments.php
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,9 @@
?>


<div class="well well-small" style="<?php if (count($comments) == 0) { echo 'display: none;'; } ?>" id="comment_<?php echo $id; ?>">
<div class="well well-small" style="<?php if (count($comments) == 0) {
echo 'display: none;';
} ?>" id="comment_<?php echo $id; ?>">
<div class="comment" id="comments_area_<?php echo $id; ?>">
<?php if ($isLimited): ?>
<?php
Expand Down Expand Up @@ -44,6 +46,16 @@


<?php echo CHtml::textArea("message", Yii::t('CommentModule.base', ""), array('id' => 'newCommentForm_' . $id, 'rows' => '1', 'class' => 'form-control autosize commentForm', 'placeholder' => 'Write a new comment...')); ?>

<?php

/* Modify textarea for mention input */
$this->widget('application.widgets.MentionWidget', array(
'element' => '#newCommentForm_' . $id,
));

?>

<?php
echo HHtml::ajaxSubmitButton(Yii::t('base', 'Post'), CHtml::normalizeUrl(array('/comment/comment/post')), array(
'beforeSend' => "function() {
Expand All @@ -68,10 +80,6 @@

<script type="text/javascript">

$('#newCommentForm_<?php echo $id; ?>').mention({
searchUrl: '<?php echo Yii::app()->createAbsoluteUrl('user/search/json') ?>'
});

// Fire click event for comment button by typing enter
$('#newCommentForm_<?php echo $id; ?>').keydown(function (event) {

Expand Down
10 changes: 6 additions & 4 deletions protected/modules_core/wall/widgets/views/contentForm.php
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,12 @@
$user_url = '//user/search/json';
}

/* Modify textarea for mention input */
$this->widget('application.widgets.MentionWidget', array(
'element' => '#contentForm_message',
));

/* add UserPickerWidget to notify members */
$this->widget('application.modules_core.user.widgets.UserPickerWidget', array(
'inputId' => 'notifiyUserInput',
'userSearchUrl' => $this->createUrl($user_url, array('sguid' => $this->contentContainer->guid, 'keyword' => '-keywordPlaceholder-')),
Expand Down Expand Up @@ -152,10 +158,6 @@ class="icon-unlock"></i> <?php echo Yii::t('WallModule.base', 'Make public'); ?>

<script type="text/javascript">

$('#contentForm_message').mention({
searchUrl: '<?php echo Yii::app()->createAbsoluteUrl('user/search/json') ?>'
});

// Hide options by default
jQuery('.contentForm_options').hide();
$('#contentFormError').hide();
Expand Down
3 changes: 0 additions & 3 deletions protected/views/layouts/head.php
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
<link href="<?php echo Yii::app()->baseUrl; ?>/resources/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="<?php echo Yii::app()->baseUrl; ?>/css/bootstrap-wysihtml5.css" rel="stylesheet">
<link href="<?php echo Yii::app()->baseUrl; ?>/css/flatelements.css" rel="stylesheet">
<link href="<?php echo Yii::app()->baseUrl; ?>/css/mention.css" rel="stylesheet">
<!-- end: CSS -->


Expand Down Expand Up @@ -35,8 +34,6 @@
<script type="text/javascript" src="<?php echo Yii::app()->baseUrl; ?>/js/bootstrap3-wysihtml5.js"></script>
<script type="text/javascript" src="<?php echo Yii::app()->baseUrl; ?>/js/jquery.nicescroll.min.js"></script>
<script type="text/javascript" src="<?php echo Yii::app()->baseUrl; ?>/js/jquery.flatelements.js"></script>
<script type="text/javascript" src="<?php echo Yii::app()->baseUrl; ?>/js/jquery.textrange.js"></script>
<script type="text/javascript" src="<?php echo Yii::app()->baseUrl; ?>/js/jquery.mention.js"></script>

<!-- Global app functions -->
<script type="text/javascript" src="<?php echo Yii::app()->baseUrl; ?>/js/app.js"></script>
Expand Down
76 changes: 76 additions & 0 deletions protected/widgets/MentionWidget.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
<?php

/**
* HumHub
* Copyright © 2014 The HumHub Project
*
* The texts of the GNU Affero General Public License with an additional
* permission and of our proprietary license can be found at and
* in the LICENSE file you have received along with this program.
*
* According to our dual licensing model, this program can be used either
* under the terms of the GNU Affero General Public License, version 3,
* or under a proprietary license.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*/

/**
* MentionWidget add users to posts and comments
*
* @package humhub.widgets
* @since 0.5
* @author Andreas Strobel
*/
class MentionWidget extends HWidget
{

/**
* Id or class of input element which should replaced
*
* @var string
*/
public $element = "";

/**
* JSON Search URL - defaults: search/json
*
* The token -keywordPlaceholder- will replaced by the current search query.
*
* @var String Url with -keywordPlaceholder-
*/
public $userSearchUrl = "";


/**
* Inits the Mention Widget
*
*/
public function init()
{

// Default user search for all users
$this->userSearchUrl = Yii::app()->getController()->createUrl('//user/search/json', array('keyword' => '-keywordPlaceholder-'));

$assetPrefix = Yii::app()->assetManager->publish(dirname(__FILE__) . '/resources', true, 0, defined('YII_DEBUG'));
Yii::app()->clientScript->registerScriptFile($assetPrefix . '/jquery.textrange.js', CClientScript::POS_END);
Yii::app()->clientScript->registerScriptFile($assetPrefix . '/jquery.mention.js', CClientScript::POS_END);
Yii::app()->clientScript->registerCssFile($assetPrefix . '/mention.css');

}

/**
* Displays / Run the Widget
*/
public function run()
{
$this->render('mention', array(
'element' => $this->element,
'userSearchUrl' => $this->userSearchUrl,
));
}

}
Original file line number Diff line number Diff line change
Expand Up @@ -235,7 +235,7 @@ $.fn.mention = function (options) {
_obj.show();

// start ajax request
jQuery.getJSON(opts.searchUrl + '&keyword=' + $string + '&space_id=8', function (json) {
jQuery.getJSON(opts.searchUrl.replace('-keywordPlaceholder-', $string), function (json) {

// remove existings entries
_obj.find('li').remove();
Expand Down
File renamed without changes.
File renamed without changes.
9 changes: 9 additions & 0 deletions protected/widgets/views/mention.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<script type="text/javascript">

$(document).ready(function () {
$('<?php echo $element; ?>').mention({
searchUrl: '<?php echo $userSearchUrl; ?>'
});
});

</script>
42 changes: 21 additions & 21 deletions themes/HumHub/css/theme.css
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ h4 {
color: #bebebe;
}
#topbar-first {
background-color: #526e82;
background-color: #7191a8;
color: white;
}
#topbar-first a {
Expand All @@ -34,7 +34,7 @@ h4 {
border-top-color: #bebebe;
}
#topbar-first .btn-group > a {
background-color: #5c7b92;
background-color: #819db2;
}
#topbar-first .media-list a {
color: #555555;
Expand All @@ -58,7 +58,7 @@ h4 {
#topbar-first .dropdown.account.open > a,
#topbar-first .dropdown.account > a:hover,
#topbar-first .dropdown.account.open > a:hover {
background-color: #526e82;
background-color: #7191a8;
}
#topbar-second {
background-color: #ffffff;
Expand Down Expand Up @@ -261,20 +261,20 @@ h4 {
.nav-pills .dropdown-menu,
.nav-tabs .dropdown-menu,
.account .dropdown-menu {
background-color: #526e82;
background-color: #7191a8;
border: none;
}
.nav-pills .dropdown-menu li.divider,
.nav-tabs .dropdown-menu li.divider,
.account .dropdown-menu li.divider {
background-color: #486172;
background-color: #61859e;
border-bottom: none;
margin: 9px 1px !important;
}
.nav-pills .dropdown-menu li,
.nav-tabs .dropdown-menu li,
.account .dropdown-menu li {
border-left: 3px solid #526e82;
border-left: 3px solid #7191a8;
}
.nav-pills .dropdown-menu li a,
.nav-tabs .dropdown-menu li a,
Expand Down Expand Up @@ -305,7 +305,7 @@ h4 {
.account .dropdown-menu li.selected {
border-left: 3px solid #4cd9c0;
color: #ffffff !important;
background-color: #486172 !important;
background-color: #61859e !important;
}
.nav-tabs .dropdown-menu li a {
font-size: 12px;
Expand All @@ -320,7 +320,7 @@ h4 {
}
.nav-pills.preferences .dropdown.open .dropdown-toggle,
.nav-pills.preferences .dropdown.open .dropdown-toggle:hover {
background-color: #526e82;
background-color: #7191a8;
color: white;
}
.popover .popover-title {
Expand All @@ -332,7 +332,7 @@ h4 {
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
background-color: #526e82;
background-color: #7191a8;
}
.nav-tabs {
border-bottom-width: 2px;
Expand Down Expand Up @@ -413,18 +413,18 @@ h4 {
background: #e0e0e0;
}
.btn-primary {
background: #526e82;
background: #7191a8;
color: white !important;
}
.btn-primary:hover,
.btn-primary:focus {
background: #486172;
background: #61859e;
text-decoration: none;
}
.btn-primary:active,
.btn-primary.active {
outline: 0;
background: #486172;
background: #61859e;
}
.btn-info {
background: #4cd9c0;
Expand Down Expand Up @@ -679,35 +679,35 @@ a.list-group-item.active {
box-shadow: none;
}
.tooltip-inner {
background-color: #526e82;
background-color: #7191a8;
max-width: 400px;
text-align: left;
font-weight: 300;
padding: 2px 8px 4px 8px;
}
.tooltip.top .tooltip-arrow {
border-top-color: #526e82;
border-top-color: #7191a8;
}
.tooltip.top-left .tooltip-arrow {
border-top-color: #526e82;
border-top-color: #7191a8;
}
.tooltip.top-right .tooltip-arrow {
border-top-color: #526e82;
border-top-color: #7191a8;
}
.tooltip.right .tooltip-arrow {
border-right-color: #526e82;
border-right-color: #7191a8;
}
.tooltip.left .tooltip-arrow {
border-left-color: #526e82;
border-left-color: #7191a8;
}
.tooltip.bottom .tooltip-arrow {
border-bottom-color: #526e82;
border-bottom-color: #7191a8;
}
.tooltip.bottom-left .tooltip-arrow {
border-bottom-color: #526e82;
border-bottom-color: #7191a8;
}
.tooltip.bottom-right .tooltip-arrow {
border-bottom-color: #526e82;
border-bottom-color: #7191a8;
}
.tooltip.in {
opacity: 1;
Expand Down
3 changes: 2 additions & 1 deletion themes/HumHub/css/theme.less
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@
@colorWarning2: #e8e0c5;
@colorPrimary1: #99b5c9;
@colorPrimary2: #7191a8;
@colorPrimary3: #526e82;
@colorPrimary3: #7191a8;
//@colorPrimary3: #526e82;
@colorPrimary4: #3b5060;

// blue touch
Expand Down
3 changes: 0 additions & 3 deletions themes/HumHub/views/layouts/head.php
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
<link href="<?php echo Yii::app()->baseUrl; ?>/resources/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="<?php echo Yii::app()->baseUrl; ?>/css/bootstrap-wysihtml5.css" rel="stylesheet">
<link href="<?php echo Yii::app()->theme->baseUrl; ?>/css/flatelements.css" rel="stylesheet">
<link href="<?php echo Yii::app()->baseUrl; ?>/css/mention.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800' rel='stylesheet' type='text/css'>
<!-- end: CSS -->

Expand Down Expand Up @@ -36,8 +35,6 @@
<script type="text/javascript" src="<?php echo Yii::app()->baseUrl; ?>/js/bootstrap3-wysihtml5.js"></script>
<script type="text/javascript" src="<?php echo Yii::app()->baseUrl; ?>/js/jquery.nicescroll.min.js"></script>
<script type="text/javascript" src="<?php echo Yii::app()->baseUrl; ?>/js/jquery.flatelements.js"></script>
<script type="text/javascript" src="<?php echo Yii::app()->baseUrl; ?>/js/jquery.textrange.js"></script>
<script type="text/javascript" src="<?php echo Yii::app()->baseUrl; ?>/js/jquery.mention.js"></script>

<!-- Global app functions -->
<script type="text/javascript" src="<?php echo Yii::app()->baseUrl; ?>/js/app.js"></script>
Expand Down

0 comments on commit 6ee31c6

Please sign in to comment.