pip-webui/pip-webui-controls/cordova/www/popover_sample/popover.js

HTML5 UI for LOB applications

/* eslint-disable max-len */
/* eslint-disable no-console */

(function (angular, $) {
    'use strict';

    var thisModule = angular.module('appBasicControls.Popover', []);

    thisModule.config(function (pipTranslateProvider) {
        pipTranslateProvider.translations('en', {
            SHOW_POPOVER: 'Function to show popover ',
            TITLE_POPOVER: 'Credibly create magnetic experiences through sustainable schemas',
            TEXT_POPOVER: 'Credibly create magnetic experiences through sustainable schemas' +
            'Synergistically enable B2B methods of empowerment vis-a-vis just in time meta-services. it cutting-edge.',
            'CLICK_HELP': 'Click help button'

        });
        pipTranslateProvider.translations('ru', {
            SHOW_POPOVER: 'Функция для отображения popover',
            TITLE_POPOVER: 'Заголовок для popovera с двумя строками возможно',
            TEXT_POPOVER: 'Правдоподобно итерацию бесшовных электронных услуг без масштаба предприятия ниши markets.' +
            'Synergistically позволяют методы B2B расширения возможностей визави как раз вовремя, мета-услуг. это ультрасовременные.',
            'CLICK_HELP': 'Нажмите кнопку помощи'
        });
    });

    thisModule.controller('PopoverController',
        function ($scope, $rootScope, $pipPopover, pipTranslate, pipAppBar) {
            pipAppBar.hideShadow();
            pipAppBar.showMenuNavIcon();
            pipAppBar.showLanguage();
            pipAppBar.showTitleText('CONTROLS');
            
            $scope.title = pipTranslate.translate('TITLE_POPOVER');
            $scope.content = pipTranslate.translate('TEXT_POPOVER');

            $scope.showTip = function () {
                $pipPopover.show({
                    class: 'pip-tip',
                    locals: {
                        title: $scope.title,
                        content: $scope.content
                    },
                    cancelCallback: function () {
                        console.log('backdrop clicked');
                    },
                    controller: function ($scope, $timeout) {
                        $scope.title = $scope.locals.title;
                        $scope.content = $scope.locals.content;
                        $scope.image = 'http://www.izuminki.com/images/kolibri-vo-vsej-krase/11.jpg';

                        $scope.onNextClick = function () {
                            console.log('on next click');
                            $pipPopover.hide();
                        };

                        $timeout(function () {
                            $('.pip-popover').find('.pip-pic').css('background-image', 'url(' + $scope.image + ')');
                        }, 200);
                    },
                    template: '<div class="pip-title m24 bm16 text-subhead2">{{ title }}</div>' +
                        '<div class="pip-content pip-popover-content p24 tp0 bp0 bm64">' +
                        '<div class="pip-pic bm16"></div>{{ content }}</div>' +
                        '<div class="pip-footer p24 tp8 bp8 rp16 position-bottom" layout="row" layout-align="start center">' +
                        '<div class="flex"></div><md-button ng-click="onNextClick()">NEXT</md-button></div>'
                });
            };

            $scope.showQuote = function () {
                $pipPopover.show({
                    class: 'pip-quote',
                    locals: {
                        content: $scope.content
                    },
                    cancelCallback: function () {
                        console.log('backdrop clicked');
                    },
                    controller: function ($scope) {
                        $scope.content = $scope.locals.content;
                        $scope.author = 'Text generator';

                        $scope.onNextClick = function () {
                            console.log('on next click');
                            $pipPopover.resize();
                            // $pipPopover.hide();
                        };
                    },
                    template: '<div class="pip-content pip-popover-content text-subhead2 p24 bp0 bm64">' +
                        '{{ content }}</div>' +
                        '<div class="pip-footer p24 tp8 bp8 rp16 position-bottom" layout="row" layout-align="start center">' +
                        '<div class="text-body1">{{ author }}</div><div class="flex"></div><md-button ng-click="onNextClick()">NEXT</md-button></div>'
                });
            };

            $scope.showHelp = function ($event, content) {
                $pipPopover.show({
                    responsive: false,
                    element: $event.currentTarget,
                    class: 'pip-help',
                    locals: {
                        content: content || $scope.content
                    },
                    cancelCallback: function () {
                        console.log('backdrop clicked');
                    },
                    controller: function ($scope) {
                        $scope.content = $scope.locals.content;

                        $scope.onNextClick = function () {
                            console.log('on next click');
                            $pipPopover.hide();
                        };
                    },
                    template: '<div class="pip-title h24"></div><div class="pip-content pip-popover-content lp24 rp24">' +
                        '{{ content }}</div><div class="h24 pip-footer"></div>'
                });
            };
        }
    );

})(window.angular, window.jQuery);