Neues Initialrelease mit IonicMaterial

www/templates/hardware-connect/image-picker/html/image-picker.html

@@ -0,0 +1,61 @@
+<!--View Information-->
+<!--View name : Device Image Picker-->
+<!--Controller name : imagePickerCtrl-->
+<!--Controller path : www/templates/hardware-connect/image-picker/js/controllers.js-->
+<!--State name : app.imagePicker-->
+<!--URL : #app/imagePicker-->
+
+<ion-view view-title="">
+    <!--toolbar section-->
+    <md-toolbar class="bar-subheader md-tall md-primary toolbar-medium">
+        <div>
+            <h1>Image Picker</h1>
+
+            <h2>Device Image Gallery</h2>
+        </div>
+        <a class="md-button md-accent md-fab fab-toolbar-medium"
+           ng-click="showListBottomSheet($event)"
+           aria-label="showListBottomSheet">
+            <i class="fa fa-picture-o"></i>
+        </a>
+    </md-toolbar> <!--end toolbar section-->
+
+    <!--image picker section-->
+    <ion-content id="image-picker-content">
+        <!--list section-->
+        <md-list>
+            <md-card ng-repeat="image in imageList">
+                <img ng-src="{{image}}" class="md-card-image" alt="image{{$index+1}}">
+                <md-card-content>
+                    <h2 class="md-title">Image {{$index+1}}</h2>
+                </md-card-content>
+            </md-card>
+        </md-list>  <!--end list section-->
+    </ion-content><!--end image picker section-->
+
+    <!--angular template section-->
+    <script type="text/ng-template" id="image-picker-actions-template">
+        <md-bottom-sheet class="md-list md-has-header">
+            <h1 class="md-bottom-sheet-header">Image Picker Actions</h1>
+            <!--list section-->
+            <md-list>
+                <md-list-item>
+                    <a class="md-default-theme md-bottom-sheet-list-item"
+                       ng-click="selectImage(1)">
+                        <i class="ion-image"></i>
+                        <span>Single Select</span>
+                    </a>
+                </md-list-item>
+
+                <md-list-item>
+                    <a class="md-default-theme md-bottom-sheet-list-item"
+                       ng-click="selectImage(9999)">
+                        <i class="ion-images"></i>
+                        <span>Multiple Select</span>
+                    </a>
+                </md-list-item>
+            </md-list><!--end list section-->
+        </md-bottom-sheet>
+    </script><!--end angular template section-->
+
+</ion-view>

www/templates/hardware-connect/image-picker/js/controllers.js

@@ -0,0 +1,61 @@
+// For using imagePicker you have to install $cordovaImagePicker by running the following 
+// command in your cmd.exe for windows or terminal for mac:
+// $ cd your_project_path
+// $ ionic plugin remove com.synconset.imagepicker
+// $ ionic plugin add https://github.com/wymsee/cordova-imagePicker.git
+// 
+// Learn more about $cordovaImagePicker :
+// http://ngcordova.com/docs/plugins/imagePicker/
+//
+// Controller of image picker page.
+appControllers.controller('imagePickerCtrl', function ($scope, $mdBottomSheet, $cordovaImagePicker) {
+
+    // initialForm is the first activity in the controller. 
+    // It will initial all variable data and let the function works when page load.
+    $scope.initialForm = function () {
+        // $scope.imageList is for store image data.
+        $scope.imageList = [];
+    };// End initialForm.
+
+    // selectImage is for select image from mobile gallery
+    // Parameter :  
+    // limit = limit number that can select images.
+    $scope.selectImage = function (limit) {
+        //hide BottomSheet.
+        $mdBottomSheet.hide();
+        // Set options for select image from mobile gallery.
+        var options = {
+            maximumImagesCount: limit,
+            width: 300,
+            height: 300,
+            quality: 100
+        }; // End Set options.
+
+        // select image by calling $cordovaImagePicker.getPictures(options)
+        // Parameter :  
+        // options = options of select image.
+        $cordovaImagePicker.getPictures(options)
+
+            .then(function (results) {
+                // store image data to imageList.
+                $scope.imageList = [];
+                for (var i = 0; i < results.length; i++) {
+                    $scope.imageList.push(results[i]);
+                }
+            }, function (error) {
+                console.log(error);
+            });
+    };// End selectImage.
+
+    // showListBottomSheet for show BottomSheet.
+    $scope.showListBottomSheet = function ($event) {
+        $mdBottomSheet.show({
+            templateUrl: 'image-picker-actions-template',
+            targetEvent: $event,
+            scope: $scope.$new(false),
+        });
+    }; // End showListBottomSheet.
+
+    $scope.initialForm();
+
+});// End of image picker Controller.