[UPDATE] Popup alternative + popup class

aless673 · Jul 13, 2017 · 09b3eae · 09b3eae
1 parent 7dbaf3d
commit 09b3eae
Showing 1 changed file with 35 additions and 5 deletions.
diff --git a/src/SelectBox.js b/src/SelectBox.js
@@ -1,7 +1,7 @@
 (function(){
 
     var _template = [
-        "<div class='selectBox {{ngSelectBoxClass}}' ng-click='showSelectModal()'>",
+        "<div class='selectBox {{ngSelectBoxClass}}' ng-click='show()'>",
         "<span class='selected {{ngPlaceholderClass}}'>{{label}}</span>",
         "<span class='selectArrow'>&#9660</span>",
         "<input type='hidden' ng-model='ngSelectedValue' name='{{ngHtmlName}}' dynamic-name ng-required='{{ngIsRequired}}'/>",
@@ -20,6 +20,8 @@
                 ngItemName: "@",
                 ngItemId: "@",
                 ngData: "@",
+                ngPopup: "@",
+                ngPopupClass: "@",
                 ngHtmlName: "@",
                 ngIsRequired: "@",
                 ngPlaceholder: "@",
@@ -28,28 +30,44 @@
                 ngPlaceholderClass: "@",
                 ngSelectBoxClass: "@"
             },
-            controller: ['$scope', '$element', '$ionicModal', '$parse', function ($scope, $element, $ionicModal, $parse) {
+            controller: ['$scope', '$element', '$ionicModal', '$ionicPopup', '$parse', function ($scope, $element, $ionicModal, $ionicPopup, $parse) {
 
                 $scope.ngPlaceholder = ($scope.ngPlaceholder) ? $scope.ngPlaceholder : '';
-                $scope.ngIsRequired = ($scope.ngIsRequired) ? $scope.ngIsRequired : false;
+                $scope.ngIsRequired = ($scope.ngIsRequired) ? JSON.parse($scope.ngIsRequired || false) : false;
+                $scope.ngPopup = ($scope.ngPopup) ? JSON.parse($scope.ngPopup || false) : false;
+                $scope.ngPopupClass = ($scope.ngPopupClass) ? $scope.ngPopupClass : '';
                 $scope.label = $scope.ngPlaceholder;
                 $scope.ngPlaceholderClass = ($scope.ngPlaceholderClass) ? $scope.ngPlaceholderClass : '';
                 $scope.ngSelectBoxClass = ($scope.ngSelectBoxClass) ? $scope.ngSelectBoxClass : '';
 
-                $scope.showSelectModal = function () {
+                $scope.show = function () {
                     var val = $parse($scope.ngData);
                     $scope.ngDataObjects = val($scope.$parent);
                     $scope.ngHeaderClass = ($scope.ngHeaderClass) ? $scope.ngHeaderClass : "";
+                    if(JSON.parse($scope.ngPopup || false)) {
+                        $scope.showPopup();
+                    } else {
+                        $scope.showSelectModal();
+                    }
+                }
+                $scope.showSelectModal = function () {
                     $scope.renderModal();
                     $scope.modal.show().then(function(modal) {
                         $scope.modal.el.style.zIndex = 99;
                     });
                 };
+                $scope.showPopup = function () {
+                    $scope.renderPopup();
+                };
 
                 $scope.closeSelectModal = function () {
                     if($scope.modal)
                         $scope.modal.hide();
                 };
+                $scope.closePopup = function () {
+                    if($scope.popup)
+                        $scope.popup.close();
+                };
 
                 $scope.$on('$destroy', function (id) {
                     if($scope.modal)
@@ -94,10 +112,22 @@
                     });
                 };
 
+                $scope.renderPopup = function () {
+                    console.log($scope.ngPopupClass);
+                    $scope.popup = $ionicPopup.alert({
+                        title: $scope.ngTitle,
+                        scope: $scope,
+                        template: '<ion-list class="ionic-select-enable">'
+                        + '<ion-item class="ionic-select-enable item-text-wrap" ng-click="clickItem(item);' + '" ng-repeat="item in ngDataObjects" ng-bind-html="item[\'' + $scope.ngItemName + '\']"></ion-item>'
+                        + '</ion-list>',
+                        cssClass: '' + $scope.ngPopupClass
+                    });
+                };
+
                 $scope.clickItem = function (item) {
                     $scope.ngSelectedValue = item[$scope.ngItemId];
                     $scope.label = item[$scope.ngItemName];
-                    $scope.closeSelectModal();
+                    $scope.ngPopup ? $scope.closePopup() : $scope.closeSelectModal();
                     $scope.ngSelectChanged({selectedValue: $scope.ngSelectedValue});
                 };