• This repository has been archived on 19/Jun/2020
  • Stars
    star
    122
  • Rank 292,031 (Top 6 %)
  • Language
    CSS
  • License
    MIT License
  • Created over 9 years ago
  • Updated over 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

An AngularJS filter/directive for embedding emojis, media, maps, tweets, code and services

GitHub version NPM version Bower version Dependency Status devDependency Status

Chat Issues License: MIT

ngEmbed

An AngularJS filter/directive for converting text into emoticons, embedding videos (youtube/vimeo/mp4,ogg), audio, pdf, highlighting code syntax and embedding almost every service in an ordinary text string .

The demo examples are given here

PS : The jquery version of this module is embed-js.

Contents

Features

  • Converts emoticon text codes into emoticons πŸ˜„ , ❀️
  • Finds links in text input and turns them into html links.
  • Youtube and Vimeo video embedding with video details fetched from the api.
  • HTML5 player supported media embedding (mp3,mp4,ogg)
  • PDF viewing with preview and then the actual pdf in a frame.
  • Inline Code Syntax highlighting (uses highlight.js)
  • Twitter tweet embedding supported
  • CodePen, jsBin, jsFiddle, Ideone, plunker and Github gist embed supported
  • Soundcloud and Spotify support
  • Twitch TV, dotSub, Dailymotion, TED, LiveLeak and UStream support.

Dependencies

Installation

Install through bower

bower install --save ng-embed

Install through npm

npm install --save ng-embed

CDN

Getting Started

Load [ng-embed.min.css] stylesheet file

 <link rel="stylesheet" href="path/to/ng-embed.min.css"/>

Then load [angular.min.js] and [angular-sanitize.min.js] dependencies before loading [ng-embed.min.js]

<script src="path/to/angular.min.js"></script>
<script src="path/to/angular-sanitize.min.js"></script>

<!--==== Optional =====-->
<script src="path/to/highlight.min.js"></script>
<script src="https://platform.twitter.com/widgets.js"></script>
<!--===================-->

<script src="path/to/ng-embed.min.js"></script>

Load 'ngEmbed' as a dependency

angular.module('yourAppname', ['ngEmbed'])

Filter Use

You can use the filter for basic use. Its features are limited to converting text into emojis, font smileys and HTML Links.

<div ng-bind-html="variable | embed"></div>

or with custom options

<div ng-bind-html="variable | embed:customOptions"></div>

<div ng-bind-html="variable | embed:{sanitizeHtml:false,linkTarget:'_blank'}"></div>

Options

Defaults:

var embed = {
	fontSmiley  :true,    // toggle converting ascii smileys into font smileys
	sanitizeHtml: true,   // toggle converting html code into text
	emoji       :true,    // toggle converting emojis short names into images
	link        :true,    // toggle converting urls into anchor tags
    linkTarget  :'_self'  //_blank|_self|_parent|_top|framename|cordova
 }

Directive Usage

The directive supports many features in additions to the features supported by the filter and is fully customizable.

Directive

<ng-embed 
 embed-data="text"
 embed-template-url="template.html"
 embed-options="options"
 ></ng-embed>
Attribute Description
embed-data The scope variable that contains the text string to be processed
embed-options The scope variable that contains the options object (mandatory)
embed-template-url User defined template for the processed text

Options

angular.module('yourAppName',['ngEmbed'])

.controller('yourControllerName',['$scope',function($scope){

// Default options
	$scope.options = {
	  watchEmbedData   : false,     // watch embed data and render on change 
	  
	  sanitizeHtml     : true,      // convert html to text
	  
	  fontSmiley       : true,      // convert ascii smileys into font smileys
	  emoji            : true,      // convert emojis short names into images
	  
	  link             : true,      // convert links into anchor tags
	  linkTarget       : '_self',   //_blank|_self|_parent|_top|framename
	  
	  pdf              : {
		embed: true                 // show pdf viewer.
	  },
	  
	  image            : {
		embed: false                // toggle embedding image after link, supports gif|jpg|jpeg|tiff|png|svg|webp.
	  },
	  
	  audio            : {
		embed: true                 // toggle embedding audio player, supports wav|mp3|ogg
	  },
	  
	  basicVideo       : false,     // embed video player, supports ogv|webm|mp4
	  gdevAuth         :'xxxxxxxx', // Google developer auth key for YouTube data api
	  video            : {
		  embed           : false,    // embed YouTube/Vimeo videos
		  width           : null,     // width of embedded player
		  height          : null,     // height of embedded player
		  ytTheme         : 'dark',   // YouTube player theme (light/dark)
		  details         : false,    // display video details (like title, description etc.)
		  thumbnailQuality: 'medium', // quality of the thumbnail low|medium|high
		  autoPlay        : true     // autoplay embedded videos
	  },
	  twitchtvEmbed    : true,
	  dailymotionEmbed : true,
	  tedEmbed         : true,
	  dotsubEmbed      : true,
	  liveleakEmbed    : true,
	  ustreamEmbed    : true,
	  
	  soundCloudEmbed  : true,
	  soundCloudOptions: {
		  height      : 160,
		  themeColor: 'f50000',
		  autoPlay    : false,
		  hideRelated : false,
		  showComments: true,
		  showUser    : true,
		  showReposts : false,
		  visual      : false,         // Show/hide the big preview image
		  download    : false          // Show/Hide download buttons
	  },
	  spotifyEmbed     : true,
	  
	  tweetEmbed       : true,        // toggle embedding tweets
	  tweetOptions     : {
			// The maximum width of a rendered Tweet in whole pixels. Must be between 220 and 550 inclusive.
			maxWidth  : 550,
			// Toggle expanding links in Tweets to photo, video, or link previews.
			hideMedia : false,
			// When set to true or 1 a collapsed version of the previous Tweet in a conversation thread
			// will not be displayed when the requested Tweet is in reply to another Tweet.
			hideThread: false,
			// Specifies whether the embedded Tweet should be floated left, right, or center in
			// the page relative to the parent element.Valid values are left, right, center, and none.
			// Defaults to none, meaning no alignment styles are specified for the Tweet.
			align     : 'none',
			// Request returned HTML and a rendered Tweet in the specified.
			// Supported Languages listed here (https://dev.twitter.com/web/overview/languages)
			lang      : 'en'
		},
	  
	  code             : {
		highlight  : true,        // highlight code written in 100+ languages supported by highlight
								  // requires highlight.js (https://highlightjs.org/) as dependency.
		lineNumbers: false        // display line numbers
	  },
	  codepenEmbed     : true,
	  codepenHeight    : 300,
	  jsfiddleEmbed    : true,
	  jsfiddleHeight   : 300,
	  jsbinEmbed       : true,
	  jsbinHeight      : 300,
	  plunkerEmbed     : true,
	  githubgistEmbed  : true,
	  ideoneEmbed      : true,
	  ideoneHeight     : 300
	};
	
  }]);

Default Template

<!--====== Main text with emoticons and link ============-->

<div ng-bind-html="neText"></div>

<!--==========Video Embedding code (Youtube and vimeo)============-->

<div class="ne-video" ng-if="video.host" class="fade">
<div class="ne-video-preview" ng-hide="nePlayVideo">
  <div class="ne-video-thumb" ng-click="nePlayVideo=!nePlayVideo">
    <img ng-src="{{video.thumbnail}}" alt=""/>
    <i class="fa fa-play-circle-o"></i>
  </div>
<div class="ne-video-detail">
<div class="ne-video-title">
  <a ng-href="{{video.url}}">{{video.title}}</a>
</div>
<div class="ne-video-desc">
  {{video.description}}
</div>
<div class="ne-video-stats">
  <span><i class="fa fa-eye"></i> {{video.views}}</span>
  <span><i class="fa fa-heart"></i> {{video.likes}}</span>
</div>
</div>
</div>
<div class="ne-video-player" ng-if="nePlayVideo">
  <iframe ng-src="{{video.embedSrc}}" frameBorder="0" width="{{video.width}}" height="{{video.height}}" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>

<!--=====video player for mp4 and other html5 player supported videos==-->

<div class="ne-video" ng-if="video.basic">
<div class="ne-video-player">
  <div class="player">
    <video ng-src="{{video.basic}}" controls></video>
  </div>
</div>
</div>

<!--====== image preview code (gif|jpg|jpeg|tiff|png|svg|webp) =======-->

<div ng-init="neImageLong=false" ng-class="{false:'ne-image', true:'ne-image ne-image-long'}[neImageLong]"
ng-if="image.url">
<div class="ne-image-wrapper">
  <img ng-src="{{image.url}}" ng-click="neImageLong=!neImageLong" alt=""/>
</div>
</div>
<div class="ne-pdf" ng-if="pdf.url">
<div class="ne-pdf-preview" ng-hide="neShowPdf">
  <div class="ne-pdf-icon">
    <i class="fa fa-file-pdf-o"></i>
  </div>
  <div class="ne-pdf-detail" >
  <div class="ne-pdf-title">
    <a href="">{{pdf.url}}</a>
  </div>
  <div class="ne-pdf-view">
    <button><i class="fa fa-download"></i> <a ng-href="{{pdf.url}}" target="_blank">Download</a></button>
    <button ng-click="neShowPdf=!neShowPdf"><i class="fa fa-eye"></i> View PDF</button>
  </div>
</div>
</div>

<!--====== pdf viewer =========-->

<div class="ne-pdf-viewer" ng-if="neShowPdf" ng-show="neShowPdf">
  <iframe ng-src="{{pdf.url}}" frameBorder="0"></iframe>
</div>
</div>

<!--===== audio player ===========-->

<div class="ne-audio" ng-if="audio.url">
<audio ng-src="{{audio.url}}" controls></audio>
</div>

<div ng-if="tweets" ng-repeat="tweet in tweets">
<div ng-bind-html="tweet"></div>
</div>
<div ng-if="videoServices" class="ne-video" ng-repeat="v in videoServices">
<div class="ne-video-player">
  <div class="player">
    <div ng-bind-html="v"></div>
  </div>
</div>
</div>
<div ng-if="audioServices" class="ne-audio" ng-repeat="a in audioServices">
<div ng-bind-html="a"></div>
</div>
<div ng-if="codeServices" class="ne-embed" ng-repeat="c in codeServices">
<div ng-bind-html="c"></div>
</div>
<div ng-if="gist" class="ne-gist" ng-repeat="g in gist">
<ne-gist id="{{g}}"></ne-gist>
</div>

Change the styling of the default template by styling the classes or provide a custom template. The default template is provided as an example.

There are certain variables that are available for the template. Its structure is given below.

Template Variables

These variable can be used while you are creating your custom template.

var video={
    host            :String,   // youtube/vimeo
    title           :String,   // Title of the video
    thumbnail       :String,   // Url of the video thumbnail
    description     :String,   // Description of the video truncating after 250 characters replacing linebreak (especially for vimeo)
    rawDescription  :String,   // Description of the video as sent by the server
    views           :Number,   // Number of video views
    likes           :Number,   // No. of likes
    uploader        :String    // username of video uploader
    uploaderPage    :String    // url of uploader's page
    uploadDate      :Date,     // Date of video upload
    url             :String,   // video url
    embedSrc        :String,   // video embed url
    width           :Number,
    height          :Number    // dimensions of the embedded video
}

var image 	={url:String}

var audio 	={url:String}

var pdf		={url:String}

var codeServices    :Array        // array of embed code of links of jsbin, jsfiddle, ideone and codepen

var audioServices   :Array        //array of embed code of spotify and soundcloud

var videoServices   :Array        // Array of embed code of dailymotion, ted, liveleak, dotsub and twitch tv

var gist            :Array        // Array of all gist ids.

Examples

The examples are given here

Releases

Older releases are listed in RELEASES.md

Contributing

  • If you are interested in contributing to this project, you are most welcome.
  • Start by filing an issue concerning whatever you’d like to see changed.
  • In case of larger changes, get the issue allotted
  • In case of bugfixes or very minor additions, feel free to file a pull request on the master # branch.
  • Please run the default grunt-task before filing any pull requests.

License

ngEmbed Β© 2014-2017+ Ritesh Kumar.
Released under the [MIT] License.
Authored and maintained by Ritesh Kumar with help from contributors.

More Repositories

1

transform

A polyglot web converter.
TypeScript
7,988
star
2

embed-js

🌻 A lightweight plugin to embed emojis, media, maps, tweets, code and more. ✨
JavaScript
1,267
star
3

moose

🦌 An application to stream, cast and download torrents.
TypeScript
834
star
4

starring

⭐️ Automatically star the npm-packages that you are using on GitHub.
JavaScript
153
star
5

raaga

🎹 An online app to play and learn music on a keyboard.
TypeScript
133
star
6

rollup-plugin-filesize

A rollup plugin to show file size of the bundle in the cli
JavaScript
126
star
7

reference

An online tool to help you sketch human figures by creating different postures
JavaScript
81
star
8

react-typescript-component-starter-kit

πŸŽ‰ A started kit to write your React Components using Typescript, emotion, storybook, jest, docz and enzyme
TypeScript
77
star
9

react-fuzzy-search

πŸ“œ A fuzzy search component written in React
JavaScript
76
star
10

socialShare.js

A jquery plugin to provide more control on social sharing buttons. [DEPRECATED]
JavaScript
72
star
11

ngEmoticons

An AngularJS directive for converting text emojis into image-based emoticons, also supporting automatic multimedia link embedding
CSS
63
star
12

photomosaic.js

A pure JavaScript plugin to create a mosaic of an image.
JavaScript
61
star
13

emoji-assistant

πŸ˜ƒ A chrome extension to autosuggest emojis while writing on the web.
JavaScript
45
star
14

react-filters

✨ A collection of customizable filters like radio, slider, autocomplete, range etc. written in React ✨
JavaScript
35
star
15

text-dimensions

Performant Calculation of the width and height of a text string using canvas.
TypeScript
23
star
16

accountant

Invoice Generator, Tax Estimator and more for freelancers without the clutter.
TypeScript
13
star
17

react-component-boilerplate

A boilerplate to create React components using react-transform-hmr, Babel 6, SASS and React-storybook
JavaScript
12
star
18

javascript-plugin-boilerplate

A boilerplate to write plugins in pure JavaScript using ES2015. Includes mocha, chai, prettier, husky, Rollup and Eslint
JavaScript
9
star
19

react-slider

🎚 A slider component made in React
JavaScript
8
star
20

thesaurus

Find similar words even from the other languages.
JavaScript
7
star
21

ritz078.github.io

My personal website
JavaScript
6
star
22

matlab-mean-demo

A demo web-app using Matlab and MEAN stack
MATLAB
3
star
23

slide.js

A lightweight jQuery plugin to slide HTML elements of variable size and with Lazyload support
JavaScript
3
star
24

midi-instruments

A list of all the instruments according to midi spec.
TypeScript
3
star
25

arduinode

A project using arduino and node to transfer data on the browser and then control the arduino.
JavaScript
2
star
26

react-native-component-boilerplate

A boilerplate to create React Native components
JavaScript
2
star
27

nodebot-sample

A simple NodeBot sample
JavaScript
1
star
28

connect-e-dil

An Angular app to send roses (yellow or red) to anyone with a public shoutbox.
CSS
1
star