angular-ui / Ui Mention
Licence: mit
Facebook-like @mentions for text inputs built around composability
Stars: ✭ 115
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Ui Mention
Facebook Export
Tools to help administer your Facebook groups
Stars: ✭ 96 (-16.52%)
Mutual labels: facebook
Socialcounters
jQuery/PHP - Collection of Social Media APIs that display number of your social media fans. Facebook Likes, Twitter Followers, Instagram Followers, YouTube Subscribers, etc..
Stars: ✭ 104 (-9.57%)
Mutual labels: facebook
Tkkeyboardcontrol
TKKeyboardControl adds keyboard awareness and scrolling dismissal (like iMessages app) to any view with only 1 line of code for Swift.
Stars: ✭ 110 (-4.35%)
Mutual labels: facebook
Facebookautolikeprofessional
Auto Like reactions and unlike Facebook Status, Comments, Photos, group posts, page posts, change facebook theme and skin colors, auto tag members in group post.. Auto Comment and Auto Reply to all Comments... Facebook Auto Like Unlimited 2019 is 100% safe to use...
Stars: ✭ 101 (-12.17%)
Mutual labels: facebook
Sharedchamber
Android Secure SharedPreferences Using Facebook Conceal Encryption
Stars: ✭ 96 (-16.52%)
Mutual labels: facebook
Deepface
Keras implementation of the renowned publication "DeepFace: Closing the Gap to Human-Level Performance in Face Verification" by Taigman et al. Pre-trained weights on VGGFace2 dataset.
Stars: ✭ 113 (-1.74%)
Mutual labels: facebook
Socialcount
Unmaintained (see the README): Simple barebones project to show share counts from various social networks.
Stars: ✭ 1,382 (+1101.74%)
Mutual labels: facebook
Awesome Pytorch List Cnversion
Awesome-pytorch-list 翻译工作进行中......
Stars: ✭ 1,361 (+1083.48%)
Mutual labels: facebook
Learning Social Media Analytics With R
This repository contains code and bonus content which will be added from time to time for the book "Learning Social Media Analytics with R" by Packt
Stars: ✭ 102 (-11.3%)
Mutual labels: facebook
Spring Webmvc Pac4j
Security library for Spring Web MVC: OAuth, CAS, SAML, OpenID Connect, LDAP, JWT...
Stars: ✭ 110 (-4.35%)
Mutual labels: facebook
Fbwlan
A simple, easy social wlan hotspot. Exchange internet access for Facebook check-ins
Stars: ✭ 96 (-16.52%)
Mutual labels: facebook
Pakcrack
All in 1 Pakisthani Facebook Cloner [ 7/8/9/10/11 DIGIT ]
Stars: ✭ 105 (-8.7%)
Mutual labels: facebook
Flutter auth buttons
Flutter buttons for social platforms
Stars: ✭ 114 (-0.87%)
Mutual labels: facebook
Flutter Reaction Button
Flutter reaction button plugin it is fully customizable widget such as Facebook reaction button
Stars: ✭ 111 (-3.48%)
Mutual labels: facebook
Afgcrack
All in 1 Afganisthani Facebook Cloner [ 7/8/9/10/11 DIGIT ]
Stars: ✭ 105 (-8.7%)
Mutual labels: facebook
ui-mention
Facebook-like @mentions for text inputs built around composability
Installation Methods
npm
$ npm install angular-ui-mention
bower
$ bower install angular-ui-mention
Usage
For now, you should create a child-directive to customize (API probably going to change)
.directive('myMention', function($http){
return {
require: 'uiMention',
link: function($scope, $element, $attrs, uiMention) {
/**
* Converts a choice object to a human-readable string
*
* @param {mixed|object} choice The choice to be rendered
* @return {string} Human-readable string version of choice
*/
uiMention.label = function(choice) {
return choice.first_name + " " + choice.last_name;
};
/**
* Retrieves choices
*
* @param {regex.exec()} match The trigger-text regex match object
* @return {array[choice]|Promise} The list of possible choices
*/
uiMention.findChoices = function(match, mentions) {
return $http.get(...).then(...);
};
}
};
});
You have to build the HTML yourself:
<div class="ui-mention-container">
<textarea ng-model="data" ui-mention my-mention></textarea>
<div class="ui-mention-highlight"></div>
<ul class="dropdown" ng-if="$mention.choices.length">
<li ng-repeat="choice in $mention.choices"
ng-class="{active:$mention.activeChoice==choice}"
ng-click="$mention.select(choice)">
{{::choice.first_name}} {{::choice.last_name}}
</li>
</ul>
</div>
And the CSS:
.ui-mention-container {
position: relative;
[ui-mention] {
min-height: 100px;
background: none;
position: relative;
z-index: 2;
box-sizing: content-box; // Prevent scrollbar for autogrow
}
.ui-mention-highlight {
white-space: pre-wrap;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: white;
color: rgba(0,0,0,0);
z-index: 1;
span {
border-radius: 2px;
background-color: lightblue;
border: 1px solid blue;
padding: 0 2px;
margin: -1px -3px;
}
}
.dropdown {
position: absolute;
top: 100%;
left: 0;
}
}
Amazing Features!
All these features come at the amazingly low price of DO IT YOURSELF and $0.00. YMMV.
User your own patterns:
mention.delimiter = '/* delimiter */';
mention.searchPattern = new RegExp("/* pattern */");
mention.decodePattern = new RegExp("/* pattern */");
Find things!:
mention.findChoices = function(match) {
// Matches items from search query
return [/* choices */].filter(function(choice) {
return ~this.label(choice).indexOf(match[1]);
});
}
Type too freakin' fast? Throttle that sucker:
mention.findChoices = _.throttle(function(match) {
return [/* choices */];
}, 300);
Minimum characters to trigger:
mention.findChoices = function(match) {
if (match[1].length > 2)
return [/* choices */];
};
Hate redundancy? De-dupe that shiznizzle:
mention.findChoices = function(match, mentions) {
return [ /* choices */ ].filter(function(choice) {
return !mentions.some(function(mention) {
return mention.id === choice.id;
});
});
};
Use the awesome power of the internet:
mention.findChoices = function(match) {
return $http.get('/users', { params: { q: match[1] } })
.then(function(response) {
return response.data;
});
}
Your servers are slow? Mama please.
mention.findChoices = function(match) {
mention.loading = true;
return $http.get(...)
.finally(function(response) {
mention.loading = false;
});
}
Dropdown that list like it's hot:
<ul ng-if="$mention.choices.length" class="dropdown">
<li ng-repeat="choice in choice" ng-click="$mention.select(choice)">
{{::choice.name}}
</li>
</ul>
SPINNIES!
<ul ng-if="$mention.choices.length" class="dropdown">
<li ng-show="$mention.loading">Hacking the gibson...</li>
<li ng-repeat=...>...</li>
</ul>
Contribute
npm install
npm install -g gulp bower
bower install
gulp [watch]
- Compiling the example code:
gulp example [watch]
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].