angular-read-more
Version:
Simple AngularJS Read More Directive
136 lines (120 loc) • 4.38 kB
HTML
<html lang="en">
<head>
<title>Angular-Read-More Directive</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link rel="stylesheet" href="https://material.angularjs.org/1.1.4/angular-material.css">
<link rel="stylesheet" href="https://material.angularjs.org/1.1.4/docs.css">
<style>
a {
cursor: pointer;
}
.more-show-hide {
-webkit-transition: all linear 0.2s;
transition: all linear 0.2s;
}
.more-show-hide.ng-hide {
opacity: 0;
}
.toggle-dots-grey {
color: darkgrey;
}
.toggle-dots-yellow {
color: yellow;
}
.toggle-link-yellow {
color: yellow;
}
.toggle-link-grey {
color: darkgrey;
}
</style>
</head>
<body layout="row">
<div ng-app="MyApp" ng-controller="ExampleController" layout="column" layout-padding ng-cloak>
<h1>Angular Read More Directive</h1>
<md-content md-theme="docs-dark" layout-padding>
<h2>Result</h2>
<div hm-read-more
hm-text="{{text}}"
hm-limit="{{limit}}"
hm-more-text="{{moreText}}"
hm-less-text="{{lessText}}"
hm-dots-class="{{dotsClass}}"
hm-link-class="{{linkClass}}"
>
</div>
</md-content>
<md-content layout-padding>
<h2>Options</h2>
<form name="userForm">
<div layout layout-sm="column">
<md-input-container flex>
<label>Text</label>
<textarea ng-model="text" columns="1" md-maxlength="700"></textarea>
</md-input-container>
</div>
<div layout layout-sm="column">
<md-input-container flex>
<label>Limit</label>
<input ng-model="limit" type="number"/>
</md-input-container>
<md-input-container flex>
<label>Less text</label>
<input ng-model="lessText" type="text"/>
</md-input-container>
<md-input-container flex>
<label>More text</label>
<input ng-model="moreText" type="text"/>
</md-input-container>
<md-input-container>
<label>Dots Class</label>
<md-select ng-model="dotsClass">
<md-option value="toggle-dots-grey" selected>Grey</md-option>
<md-option value="toggle-dots-yellow">Yellow</md-option>
</md-select>
</md-input-container>
<md-input-container>
<label>Link Class</label>
<md-select ng-model="linkClass">
<md-option value="toggle-link-grey">Grey</md-option>
<md-option value="toggle-link-yellow" selected>Yellow</md-option>
</md-select>
</md-input-container>
</div>
</form>
</md-content>
</div>
<script src="/bower_components/angular/angular.min.js"></script>
<script src="/bower_components/angular-animate/angular-animate.min.js"></script>
<script src="/bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-aria.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.js"></script>
<script src="/dist/readmore.min.js"></script>
<script>
var app = angular.module('MyApp', ['ngMaterial', 'hm.readmore']);
app.config(function ($mdThemingProvider) {
$mdThemingProvider
.theme('docs-dark', 'default')
.primaryPalette('grey')
.accentPalette('pink')
.warnPalette('red')
.dark();
})
app.controller('ExampleController', Example4Controller);
/** @ngInject */
function Example4Controller($scope) {
$scope.text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque gravida vel erat eu vestibulum. Maecenas malesuada, ante at venenatis porta, erat risus porta massa, ac vestibulum libero ex id mauris. Sed faucibus arcu eget lorem vestibulum congue. Phasellus at elit non dolor semper eleifend. Donec nec maximus purus. Donec pretium orci sed ullamcorper scelerisque. Nullam quis elit tristique, interdum eros quis, tincidunt tortor. Fusce odio enim, maximus in sollicitudin vitae, fermentum in elit. Aliquam pretium odio condimentum, fringilla risus in, mollis mi. Phasellus ullamcorper enim vehicula mi commodo laoreet.';
$scope.limit = 200;
$scope.lessText = "Read less";
$scope.moreText = "Read more";
$scope.dotsClass = "toggle-dots-grey";
$scope.linkClass = "toggle-link-yellow";
}
</script>
</body>
</html>