Angular Seo Newsletter / Улучшение / Плагины Bootstrap

Версия: v1.0.1

Каталог: Плагины Bootstrap

Категория: Улучшение

Bootstrap: 3, 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Английский

Вес файла: 98.3 Kb

Уникальный ID: 2219

Посмотрели: 1874 раз

Скачать бесплатно

Помощь: установка & настройка

Скачали бесплатно: 36 раз

Прокомментировали: 0 раз

Рейтинг: 5.0 / 5 - 3 голосов

Тип лицензии: CC BY 4.0

Авторство: https://github.com/hugsbrugs/angular-seo-newsletter

Информация: Пользователям

Информация: Правообладателям

Теги: angularjs, Plugin, Newsletter, Angular, Bootstrap

Поделился: BootstrapТема

Добавлено: 2017-06-20 в 13:29

Метка: 1585199924

⇄ ⇅

<!DOCTYPE html>
<html ng-app="myAppDev" ng-strict-di>
<head>
 
 <meta charset="UTF-8" />
 <title>AngularJS SEO Newsmetter | BootstrapTema</title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
 
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
 
 <link href="https://bootstraptema.ru/plugins/2017/asn/angular-seo-newsletter.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-cookies.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-resource.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-sanitize.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-animate.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-mocks.js"></script>
 
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate/2.10.0/angular-translate.min.js"></script>
 
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate/2.10.0/angular-translate-storage-cookie/angular-translate-storage-cookie.min.js"></script>
 
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate/2.10.0/angular-translate-loader-partial/angular-translate-loader-partial.min.js"></script>
 
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate/2.10.0/angular-translate-handler-log/angular-translate-handler-log.min.js"></script>
 
</head>
<body>

<div class="container">
 <div class="row">
 <h1 class="text-center">BootstrapTema Plugin</h1>
 <p class=text-center><i class="fa fa-4x fa-newspaper-o"></i></p>
 <h2 class="text-center">Angular SEO Newsletter</h2>
 </div>
</div>

<div class="container" ng-controller="MyController">
<div class="row">
 
 <hugsbrugs-seo-newsletter ng-model="seo" showmodalext="show_modal_ext"></hugsbrugs-seo-newsletter>
 
 <div class="col-xs-12 col-sm-8 col-sm-offset-2" style="margin-bottom:50px;font-size:1.5em;" translate>HEADER_TEXT</div>

<div class="col-xs-12 col-sm-6">
 <span translate>YOUR_CONFIGURATION</span>:
 <pre>{{seo|json}}</pre>
 </div>
 <div class="col-xs-12 col-sm-6">
 <span translate>CURRENT_COOKIES</span>:
 <pre>{{cookies|json}}</pre>
 <button type="button" ng-click="delete_cookies()" class="btn btn-danger" translate>DELETE_COOKIES</button>
 <hr>
 <span translate>CURRENT_LANGUAGE</span>:
 <pre>{{current_language|json}}</pre>
 <button type="button" ng-click="change_language('en')" class="btn btn-info" translate>ENGLISH</button>
 <button type="button" ng-click="change_language('fr')" class="btn btn-info" translate>FRENCH</button>
 </div>

</div>
</div>

<script src="https://bootstraptema.ru/plugins/2017/asn/angular-seo-newsletter.min.js"></script>

$translateProvider.translations('en', {
 "CUSTOM_DEFAULT_HEADER_TEXT" : "I'm a fantastic title",
 "CUSTOM_DEFAULT_CALL_ACTION_TEXT" : "I'm a call to action",
 "CUSTOM_DEFAULT_SUB_TEXT" : "This is a website test, your email won't be added to any mailing list !<br>Just look at source code if you don't believe me ;)",
 "CUSTOM_DEFAULT_EMAIL_PLACEHOLDER" : "I want your mail",
 "CUSTOM_DEFAULT_SUCCESS_TEXT" : "Thank you sweety",
 "CUSTOM_DEFAULT_ERROR_TEXT" : "Unknown error, if you have moment please report this error through our <a ng-href='https://hugo.maugey.fr/fr/contact'>contact form</a>. Sorry for that."
 });

$translateProvider.translations('fr', {
 "CUSTOM_DEFAULT_HEADER_TEXT" : "Je suis un titre exceptionnel !",
 "CUSTOM_DEFAULT_CALL_ACTION_TEXT" : "Je suis un call to action de la mort qui tue",
 "CUSTOM_DEFAULT_SUB_TEXT" : "Ceci est un site de test, votre email ne sra ajouté à aucune mailing liste.<br>Regardez le code source si vous ne me croyez pas ;)",
 "CUSTOM_DEFAULT_EMAIL_PLACEHOLDER" : "Je veux votre email :-)",
 "CUSTOM_DEFAULT_SUCCESS_TEXT" : "Merci bien, à très bientôt !",
 "CUSTOM_DEFAULT_ERROR_TEXT" : "Erreur inconnue, si vous avez un moment, merci de nous prévenir à travers le <a ng-href='https://hugo.maugey.fr/fr/contact'>formulaire de contact</a>.<br> Désolé pour le désagrément."
 });
 $translateProvider.translations('en', {
 "BUILD_BY" : "Build by",
 "HEADER_TEXT" : "To trigger newsletter modal, just move your mouse to top of page or <button type=\"button\" class=\"btn btn-success\" ng-click=\"show_modal_ext.trigger_modal()\"><i class=\"fa fa-newspaper-o\"></i> click me</button>. If modal does not show any more, delete cookies.",
 "YOUR_CONFIGURATION" : "Your configuration",
 "CURRENT_COOKIES" : "Current cookies",
 "DELETE_COOKIES" : "<i class=\"fa fa-trash\"></i> Delete cookies",
 "CURRENT_LANGUAGE" : "Current language",
 "ENGLISH" : "English",
 "FRENCH" : "French"
 });

$translateProvider.translations('fr', {
 "BUILD_BY" : "Créer par",
 "HEADER_TEXT" : "Pour afficher le popup de newsletter, déplacer votre souris vers le haut de la page ou <button type=\"button\" class=\"btn btn-success\" ng-click=\"show_modal_ext.trigger_modal()\"><i class=\"fa fa-newspaper-o\"></i> cliquez ici</button>. Si le popup ne s'affiche plus, supprimez les cookies.",
 "YOUR_CONFIGURATION" : "Votre configuration",
 "CURRENT_COOKIES" : "Vos cookies",
 "DELETE_COOKIES" : "<i class=\"fa fa-trash\"></i> Supprimer cookies",
 "CURRENT_LANGUAGE" : "Langue sélectionnée",
 "ENGLISH" : "Anglais",
 "FRENCH" : "Français"
 });

}
 ])

/**
 * Define your custom controller
 */
 .controller('MyController', ['$rootScope', '$scope', '$cookies', '$interval', '$translate',
 function($scope, $rootScope, $cookies, $interval, $translate)
 {

/* DEFINE YOUR CUSTOM CONFIG */
 $scope.seo = {
 y_offset:5,
 // image set globally in config
 // image:'src/img/SEO-Beginners-Guide.jpg',

header_text:'CUSTOM_DEFAULT_HEADER_TEXT',
 call_action_text:'CUSTOM_DEFAULT_CALL_ACTION_TEXT',
 sub_text:'CUSTOM_DEFAULT_SUB_TEXT',
 email_placeholder:'CUSTOM_DEFAULT_EMAIL_PLACEHOLDER',
 success_text:'CUSTOM_DEFAULT_SUCCESS_TEXT',
 error_text:'CUSTOM_DEFAULT_ERROR_TEXT',

// download hugbrugs/php-seo-newsletter
 //api_endpoint:'/php/register_newsletter.php',
 // fake endpoint
 api_endpoint:'/fake_endpoint',

cookie_expire:'10 second',//debug mode
 // cookie_expire:'10 minute',//aggressive mode
 // cookie_expire:'1 day',//recommended mode
 // cookie_expire:'1 month',//cool mode
 };
 /* FOR EXAMPLE ONLY */

// Display internal sheet on page
 $scope.cookies = {
 'show_popup' : $cookies.get('show_popup'),
 'is_subscriber' : $cookies.get('is_subscriber'),
 };

$interval(function(){
 // refresh cookie value
 $scope.cookies = {
 'show_popup' : $cookies.get('show_popup'),
 'is_subscriber' : $cookies.get('is_subscriber'),
 }; 
 }, 500);

$scope.delete_cookies = function()
 {
 $cookies.remove('show_popup');
 $cookies.remove('is_subscriber');
 // refresh page
 location.reload();
 };

$scope.current_language = $translate.use();
 $scope.change_language = function(lang)
 {
 $translate.use(lang);
 $scope.current_language = $translate.use();
 };

$scope.trigger_modal = function()
 {
 $scope.show_modal();
 };

}]);
// Angular modules
angular.module('myApp.core', [
 'ngAnimate',
 'ngResource',
 'ngCookies',
 'ngSanitize',
 'pascalprecht.translate'
]);

// My modules
angular.module('myApp.perso', [
 'hugsbrugs.angular-seo-newsletter',
 'hugsbrugs.ExampleControllers'
]);

// Production mode App
var myApp = angular.module('myApp', [
 'myApp.core',
 'myApp.perso'
]);

// Develoment mode App
var myAppDev = angular.module('myAppDev', [
 'myApp', 
 'ngMockE2E'
]);

// use module provider for global configuration
// specific configuration will be done in controllers
myAppDev.config(['hugsbrugsSeoNewsletterConfigProvider', '$translateProvider', function(hugsbrugsSeoNewsletterConfigProvider, $translateProvider) 
 {
 $translateProvider
 .registerAvailableLanguageKeys(['en', 'fr'], {
 'en_US': 'en',
 'en_UK': 'en',
 'fr_FR': 'fr',
 'fr_CH': 'fr',
 '*': 'en'
 })
 .determinePreferredLanguage()
 .fallbackLanguage('en')
 //.useLocalStorage()
 .usePostCompiling(true)
 .useSanitizeValueStrategy('escaped');
 //.useSanitizeValueStrategy('sanitize');

// define global params
 hugsbrugsSeoNewsletterConfigProvider.config({
 image:'http://bootstraptema.ru/favicon.ico',
 cookie_expire:'1 day'
 });
 }
]);

// server side simulaton for test purpose
myAppDev.run(['$httpBackend', '$log', 
 function($httpBackend, $log)
 {
 var subscribers = [
 {email: 'example@website.com', date:''}, 
 {email: 'example@website.com', date:''}
 ];

// adds a new subscriber to the subscribers array
 $httpBackend.whenPOST('/fake_endpoint')
 .respond(function(method, url, data)
 {
 var data = angular.fromJson(data);
 //$log.log('data', data);
 var exist = false;
 angular.forEach(subscribers, function(subscriber){
 if(subscriber.email===data.email)
 exist = true;
 });
 if(exist)
 {
 return [404, {message:'EMAIL_ALREADY_SUBSCRIBER'}, {}];
 }
 else
 {
 var subscriber = {email: data.email, date:''};
 subscribers.push(subscriber);
 return [200, subscriber, {}];
 }
 });
 
 // Requests for templates are handled by the real server
 //$httpBackend.whenGET(/^\/templates\//).passThrough();
 $httpBackend.whenGET(/\.html$/).passThrough();
 }
]);
</script>
</body>
</html>

BootstrapTema

Angular Seo Newsletter

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0