PassKit/pk-pass-display

#PassKit Pass Display

##Usage

Include in your index file:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="node_modules/pk-pass-display/dist/pk-pass-display.min.css">
</head>
<body>
    <div data-ng-app="myApp" data-ng-controller="passCtrl">
        <pk-apple-pass pass-id="{{passId}}"></pk-apple-pass>
    </div>
    <script src="node_modules/angular/angular.min.js"></script>
    <script src="node_modules/moment/min/moment-with-locales.min.js"></script>
    <script src="node_modules/pk-pass-display/dist/pk-pass-display.min.js"></script>
    <script>
        (function (angular) {
            angular.module("myApp", ["pk-pass-display"])
            .config(["$locationProvider", function($locationProvider) {
                $locationProvider.html5Mode({enabled:true,requireBase:false});
            }])
            .controller("passCtrl", ["$scope", "$location", passController]);

            function passController($scope, $location) {
                $scope.passId = $location.search().pid;
            }
        })(window.angular);
    </script>
</body>
</html>

Use as component (see index.html for example):

<pk-apple-pass pass-id="passId"></pk-apple-pass>

Optional attributes are:

language="en" // can be any language code available on your pass
bg-color="blue" // can be any css color
on-error="errorHandler(err)" // function to handle error callback
on-loaded="loadedHandler(pass)" // function to handle loaded callback

###Note on the callback functions:

For angular components, the variable name in the view must match the name in the component. So pass and err must keep that name within the view. on-loaded passes back the pass object when loading is complete, on-error passes back an error string if there was an error loading the pass.

Example error handling:

<pk-apple-pass pass-id="{{passId}}" on-error="errorHandler(err)"></pk-apple-pass>
.
.
.
function passController($scope, $location) {
    $scope.passId = $location.search().pid;
    $scope.errorHandler = function(errorMessage) {
        alert(errorMessage);
    }
}

##Development

(Requires Node.js https://nodejs.org).
Make sure npm is up to date (comes with Node.js).
Run npm i

###Modifying

To have dist update while you modify the files:
Run gulp watch /dist will be updated whenever you save changes.

###Deploying

Modify files as required.
Run gulp "/dist" will now contain updated files and package version can be updated.

PassKit / pk-pass-display

About

Languages