Neues Initialrelease mit IonicMaterial
This commit is contained in:
Carsten Hilmer
@@ -0,0 +1,75 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Contract Us-->
|
||||
<!--Controller name : contractUsCtrl-->
|
||||
<!--Controller path : www/templates/share-application-content/email-message/js/controllers.js-->
|
||||
<!--State name : app.contractUs-->
|
||||
<!--URL : #app/contractUs-->
|
||||
|
||||
<ion-view view-title="">
|
||||
<!--toolbar section-->
|
||||
<md-toolbar class="md-tall md-primary toolbar-with-image">
|
||||
<div>
|
||||
<h1>Contract Us</h1>
|
||||
|
||||
<h2>We love Material Design</h2>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
<!--end toolbar section-->
|
||||
|
||||
<!--button section-->
|
||||
<a class="md-button md-accent md-fab fab-toolbar-medium"
|
||||
ng-click="callTo(contractInfo.telephone)"
|
||||
aria-label="Add">
|
||||
<i class="ion-android-call"></i>
|
||||
</a><!--end button section-->
|
||||
|
||||
<!--contract us section-->
|
||||
<ion-content id="contract-us-content">
|
||||
<!--header section-->
|
||||
<div class="row header">
|
||||
<div class="col">
|
||||
Contact Our Team:
|
||||
</div>
|
||||
|
||||
</div> <!--end header section-->
|
||||
|
||||
<!--content section-->
|
||||
<div class="row content">
|
||||
<div class="col-75">
|
||||
{{contractInfo.email}}
|
||||
</div>
|
||||
<div class="col-25">
|
||||
<i class="ion-android-mail" ng-click="sentEmail(contractInfo.email)"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row content">
|
||||
<div class="col-75">
|
||||
{{contractInfo.telephone}}
|
||||
</div>
|
||||
<div class="col-25">
|
||||
<i class="ion-android-textsms" ng-click="sentSms(contractInfo.telephone)"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row header">
|
||||
<div class="col">
|
||||
Address:
|
||||
</div>
|
||||
</div>
|
||||
<div class="row content">
|
||||
<div class="col-90">
|
||||
99 Sukhumvit Road
|
||||
<br/>
|
||||
Bangkok Thailand
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row content">
|
||||
<div class="col-90">
|
||||
Please contract us if you have any questions.
|
||||
</div>
|
||||
</div>
|
||||
<!--end content section-->
|
||||
</ion-content><!--end contract us section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,72 @@
|
||||
// For sent email you have to install $cordovaSocialSharing by running the following
|
||||
// command in your cmd.exe for windows or terminal for mac:
|
||||
// $ cd your_project_path
|
||||
// $ ionic plugin remove nl.x-services.plugins.socialsharing
|
||||
// $ ionic plugin add https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin.git
|
||||
//
|
||||
// Learn more about $cordovaSocialSharing :
|
||||
// http://ngcordova.com/docs/plugins/socialSharing/
|
||||
//
|
||||
// For sent message you have to install $cordovaSMS by running the following
|
||||
// command in your cmd.exe for windows or terminal for mac:
|
||||
// $ cd your_project_path
|
||||
// $ ionic plugin remove com.cordova.plugins.sms
|
||||
// $ ionic plugin add https://github.com/cordova-sms/cordova-sms-plugin.git
|
||||
//
|
||||
// Learn more about $cordovaSMS :
|
||||
// http://ngcordova.com/docs/plugins/sms/
|
||||
//
|
||||
//
|
||||
// For using mobile calling you must go to yourProjectPath/config.xml
|
||||
// and put this following code in the access area.
|
||||
// <access origin="tel:*" launch-external="yes"/>
|
||||
//
|
||||
// Controller of contract us page.
|
||||
appControllers.controller('contractUsCtrl', function ($scope, $cordovaSocialSharing, $cordovaSms) {
|
||||
|
||||
// This function 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.contractInfo is store contract us data
|
||||
$scope.contractInfo = {
|
||||
telephone: "099-999-9999",
|
||||
email: "ionicmaterialdesign@gmail.com"
|
||||
};
|
||||
};// End initialForm.
|
||||
|
||||
// sentSms is for send message by calling $cordovaSms
|
||||
// Parameter :
|
||||
// phoneNumber = number of sending message
|
||||
$scope.sentSms = function (phoneNumber) {
|
||||
//config options to sent message
|
||||
var options = {
|
||||
replaceLineBreaks: false, // true to replace \n by a new line, false by default.
|
||||
android: {
|
||||
intent: 'INTENT' // send SMS with the native android SMS messaging.
|
||||
//intent: '' // send SMS without open any other app.
|
||||
}
|
||||
};
|
||||
// calling $cordovaSms to sent message
|
||||
$cordovaSms.send(phoneNumber, " ", options);
|
||||
} // End sentSms.
|
||||
|
||||
// sentEmail is for send email by calling $cordovaSocialSharing.
|
||||
// Parameter :
|
||||
// email = email of receiver
|
||||
$scope.sentEmail = function (email) {
|
||||
$cordovaSocialSharing.shareViaEmail("", "", email, "", "", "");
|
||||
// format of sent email by using $cordovaSocialSharing is :
|
||||
//$cordovaSocialSharing.shareViaEmail(message, subject, toArr, ccArr, bccArr,file)
|
||||
// toArr, ccArr and bccArr must be an array, file can be either null, string or array.
|
||||
} // End sentEmail.
|
||||
|
||||
// callTo is for using mobile calling.
|
||||
// Parameter :
|
||||
// number = number that going to call.
|
||||
$scope.callTo = function (number) {
|
||||
window.open("tel:" + number);
|
||||
}// End callTo.
|
||||
|
||||
$scope.initialForm();
|
||||
|
||||
});// End of contract us controller.
|
||||
@@ -0,0 +1,131 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Product Checkout-->
|
||||
<!--Controller name : productCheckoutCtrl-->
|
||||
<!--Controller path : www/templates/share-application-content/social-share/js/controllers.js-->
|
||||
<!--State name : app.productCheckout-->
|
||||
<!--URL : #app/productCheckout-->
|
||||
|
||||
<ion-view view-title="Basket">
|
||||
<!--left button on navigation bar-->
|
||||
<ion-nav-buttons side="left">
|
||||
<a ng-click="$ionicGoBack()" class="button back-button buttons button-clear header-item nav-back-btn">
|
||||
<i class="ion-android-arrow-back"></i>
|
||||
</a>
|
||||
</ion-nav-buttons><!--end left button on navigation bar-->
|
||||
|
||||
<!--product checkout section-->
|
||||
<!--product checkout header section-->
|
||||
<ion-header-bar class="bar-subheader" id="product-checkout-sub-header">
|
||||
<ion-scroll direction="x" id="product-checkout-product-list">
|
||||
|
||||
<div class="pin">
|
||||
<img ng-src="{{'img/shirt_01.png'}}"/>
|
||||
|
||||
<h1>Plain Shirt</h1>
|
||||
|
||||
<p>
|
||||
A shite with pain design.
|
||||
</p>
|
||||
|
||||
<div class="pin-footer">
|
||||
<span class="pin-footer text-left font-sale">$900</span>
|
||||
<span class="pin-footer text-left font-hot-sale">$90</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pin">
|
||||
<img ng-src="{{'img/shirt_02.png'}}"/>
|
||||
|
||||
<h1>Spring Shirt</h1>
|
||||
|
||||
<p>
|
||||
Made by high quality silk.
|
||||
</p>
|
||||
|
||||
<div class="pin-footer">
|
||||
<span class="pin-footer text-left font-sale">$100</span>
|
||||
<span class="pin-footer text-left font-hot-sale">$10</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pin">
|
||||
<img ng-src="{{'img/shirt_06.png'}}"/>
|
||||
|
||||
<h1>Green Shirt</h1>
|
||||
|
||||
<p>
|
||||
A shite with pain design.
|
||||
</p>
|
||||
|
||||
<div class="pin-footer">
|
||||
<span class="pin-footer text-left font-sale">$190</span>
|
||||
<span class="pin-footer text-left font-hot-sale">$19</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pin">
|
||||
<img ng-src="{{'img/shirt_05.png'}}"/>
|
||||
|
||||
<h1>Plain Shirt</h1>
|
||||
|
||||
<p>
|
||||
A shite with pain design.
|
||||
</p>
|
||||
|
||||
<div class="pin-footer">
|
||||
<span class="pin-footer text-left font-sale">$999</span>
|
||||
<span class="pin-footer text-left font-hot-sale">$99</span>
|
||||
</div>
|
||||
</div>
|
||||
</ion-scroll>
|
||||
</ion-header-bar> <!--end product checkout header section-->
|
||||
<!--product checkout content section-->
|
||||
<ion-content id="product-checkout-content">
|
||||
<div class="row">
|
||||
<div class="col total-summary">
|
||||
TOTAL <span class="font-hot-sale">$218</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row credit-card">
|
||||
<div class="col-25 credit-card-icon">
|
||||
<i class="fa fa-credit-card"></i>
|
||||
</div>
|
||||
<div class="col-67 credit-card-number">
|
||||
<span class="card-number"> XXXX XXXX XXXX 9999</span>
|
||||
</div>
|
||||
<div class="col-20">
|
||||
<md-menu md-position-mode="target-right target" class="md-list-item-md-menu-right">
|
||||
|
||||
<md-icon md-menu-origin ng-click="$mdOpenMenu()" md-svg-icon="more"></md-icon>
|
||||
|
||||
<md-menu-content width="3">
|
||||
<md-menu-item>
|
||||
<a class="md-button md-default-theme"
|
||||
ng-click="doSomeThing()">
|
||||
<span class="menu-item-button"> <i class="fa fa-credit-card"></i> : XXXX XXXX XXXX 8888</span>
|
||||
</a>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<a class="md-button md-default-theme" ng-click="doSomeThing()">
|
||||
<span class="menu-item-button"> <i class="fa fa-credit-card"></i> : XXXX XXXX XXXX 7777</span>
|
||||
</a>
|
||||
</md-menu-item>
|
||||
</md-menu-content>
|
||||
</md-menu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row shipping-address">
|
||||
<div class="col-50 address-icon">
|
||||
Shipping Address :
|
||||
</div>
|
||||
<div class="col-50 selected-address">99/999 Ionic Building...</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col complete-order">
|
||||
<a ng-click="showConfirmDialog($event)"
|
||||
class="md-raised social-button md-button md-default-theme material-background">
|
||||
Complete Order
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</ion-content><!--end product checkout content section-->
|
||||
<!--end product checkout section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,176 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Product Detail-->
|
||||
<!--Controller name : productDetailCtrl-->
|
||||
<!--Controller path : www/templates/share-application-content/social-share/js/controllers.js-->
|
||||
<!--State name : app.productDetail-->
|
||||
<!--URL : #app/productDetail-->
|
||||
|
||||
<ion-view view-title="{{product.title}}">
|
||||
<!--left button on navigation bar-->
|
||||
<ion-nav-buttons side="left">
|
||||
<a ng-click="$ionicGoBack()" class="button back-button buttons button-clear header-item nav-back-btn">
|
||||
<i class="ion-android-arrow-back"></i>
|
||||
</a>
|
||||
</ion-nav-buttons> <!--end left button on navigation bar-->
|
||||
|
||||
<!--product detail section-->
|
||||
<ion-content id="product-detail-content" class="fade-in">
|
||||
<md-content>
|
||||
<!--product tabs section-->
|
||||
<md-tabs md-border-bottom md-selected="0" id="product-detail-tabs" class="no-border">
|
||||
<!--product tab detail section-->
|
||||
<md-tab label="Detail">
|
||||
<md-content id="product-detail-tab-detail">
|
||||
<div class="toolbar-image-cover product" style="background-image: url('{{product.img}}');">
|
||||
</div>
|
||||
<a class="md-button md-accent md-fab fab-toolbar-medium"
|
||||
ng-click="sharedProduct($event,product)"
|
||||
aria-label="showListBottomSheet">
|
||||
<i class="ion-android-share-alt"></i>
|
||||
</a>
|
||||
|
||||
<div class="detail-form">
|
||||
<div class="header">
|
||||
<h1>{{product.title}}</h1>
|
||||
|
||||
<p>{{product.fullDetail}}</p>
|
||||
</div>
|
||||
<!--product tab detail price section-->
|
||||
<div class="product-detail-price">
|
||||
<div class="left">
|
||||
$<span class="font-sale">{{product.price | number : 2}}</span>
|
||||
<br/><span
|
||||
class="font-hot-sale"> ${{product.promotionPrice | number : 2}} </span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<a class="md-raised md-warn md-button md-default-theme" ng-click="addToCart()">
|
||||
ADD TO CART
|
||||
</a>
|
||||
</div>
|
||||
</div><!--end product tab detail price section-->
|
||||
|
||||
<!--product tab detail review section-->
|
||||
<div class="product-detail-review">
|
||||
<p>Best Seller :
|
||||
<span>
|
||||
<i class="fa fa-star"></i>
|
||||
<i class="fa fa-star"></i>
|
||||
<i class="fa fa-star"></i>
|
||||
<i class="fa fa-star"></i>
|
||||
<i class="fa fa-star"></i>
|
||||
</span>
|
||||
</p>
|
||||
</div><!--end product tab detail review section-->
|
||||
|
||||
<!--product tab detail shipping section-->
|
||||
<div class="product-detail-shipping row">
|
||||
<div class="col-67">
|
||||
<p>Item : MT098541A</p>
|
||||
|
||||
<p>Coupon : PR34221</p>
|
||||
|
||||
<p>Shipping : Free</p>
|
||||
|
||||
<p>Money Back : 30 Day</p>
|
||||
|
||||
</div>
|
||||
<div class="col-33">
|
||||
<p>In Stock</p>
|
||||
|
||||
<p><i class="fa fa-cube"></i></p>
|
||||
</div>
|
||||
</div><!--end product tab detail shipping section-->
|
||||
<!--product tab detail note section-->
|
||||
<div class="product-detail-note">
|
||||
|
||||
<p>Sharing this get discount on top 20%</p>
|
||||
</div> <!--end product tab detail note section-->
|
||||
</div>
|
||||
</md-content>
|
||||
</md-tab><!--end product tab detail section-->
|
||||
|
||||
<!--product tab product section-->
|
||||
<md-tab label="Product">
|
||||
<md-content class="md-padding">
|
||||
<div id="product-detail-tab-product">
|
||||
<div>
|
||||
<h1>{{product.title}}</h1>
|
||||
|
||||
<p>{{product.fullDetail}}</p>
|
||||
</div>
|
||||
<!--pin section-->
|
||||
<div class="pin">
|
||||
<img ng-src="{{product.img}}"/>
|
||||
|
||||
<p>
|
||||
{{product.detail}}
|
||||
</p>
|
||||
|
||||
<div class="pin-footer">
|
||||
$<span class="pin-footer text-left font-sale">{{product.price}}</span>
|
||||
<span class="pin-footer text-left font-hot-sale">${{product.promotionPrice}}</span>
|
||||
</div>
|
||||
<a class="md-raised md-warn md-button md-default-theme"
|
||||
ng-click="addToCart()">
|
||||
ADD TO CART
|
||||
</a>
|
||||
</div> <!--end pin section-->
|
||||
|
||||
</div>
|
||||
</md-content>
|
||||
</md-tab> <!--product tab product section-->
|
||||
</md-tabs><!--end product tabs section-->
|
||||
</md-content>
|
||||
</ion-content>
|
||||
<!--end product detail section-->
|
||||
|
||||
<!--loading progress-->
|
||||
<div id="product-detail-loading-progress" class="loading-progress fade-in">
|
||||
<ion-spinner ng-if="!isAndroid" class="progress-circular"></ion-spinner>
|
||||
<md-progress-circular ng-if="isAndroid" md-mode="indeterminate"></md-progress-circular>
|
||||
</div> <!--end loading progress-->
|
||||
|
||||
<!--canvas for save image to local devise-->
|
||||
<canvas id="imgCanvas" class="display-none"></canvas>
|
||||
|
||||
<!--angular template section-->
|
||||
<script type="text/ng-template" id="bottom-sheet-shared.html">
|
||||
<md-bottom-sheet class="md-grid">
|
||||
<!--list section-->
|
||||
<md-list id="bottom-sheet-grid-md-list">
|
||||
<md-list-item>
|
||||
<a class="md-grid-item-content" ng-click="sharedFacebook()">
|
||||
<md-icon md-svg-src="facebook"></md-icon>
|
||||
<div class="md-grid-text"> Facebook</div>
|
||||
</a>
|
||||
</md-list-item>
|
||||
<md-list-item>
|
||||
<a class="md-grid-item-content" ng-click="sharedTwitter()">
|
||||
<md-icon md-svg-src="twitter"></md-icon>
|
||||
<div class="md-grid-text"> Twitter</div>
|
||||
</a>
|
||||
</md-list-item>
|
||||
<md-list-item>
|
||||
<a class="md-grid-item-content" ng-click="sharedMail()">
|
||||
<md-icon md-svg-src="mail"></md-icon>
|
||||
<div class="md-grid-text"> Mail</div>
|
||||
</a>
|
||||
</md-list-item>
|
||||
<md-list-item>
|
||||
<a class="md-grid-item-content" ng-click="saveImage()">
|
||||
<i class="ion-android-image"></i>
|
||||
|
||||
<div class="md-grid-text"> Save Image</div>
|
||||
</a>
|
||||
</md-list-item>
|
||||
<md-list-item>
|
||||
<a class="md-grid-item-content" ng-click="sharedMore()">
|
||||
<md-icon md-svg-src="share-arrow"></md-icon>
|
||||
<div class="md-grid-text"> More</div>
|
||||
</a>
|
||||
</md-list-item>
|
||||
</md-list> <!--end list section-->
|
||||
</md-bottom-sheet>
|
||||
</script>
|
||||
<!--end angular template section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,86 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Product List-->
|
||||
<!--Controller name : productListCtrl-->
|
||||
<!--Controller path : www/templates/share-application-content/social-share/js/controllers.js-->
|
||||
<!--State name : app.productList-->
|
||||
<!--URL : #app/productList-->
|
||||
|
||||
<ion-view view-title="Material Shop">
|
||||
<!--product list section-->
|
||||
<ion-content id="product-list-content" class="fade-in">
|
||||
|
||||
<!--toolbar section-->
|
||||
<md-toolbar class="bar-subheader md-tall md-primary toolbar-medium toolbar-in-content">
|
||||
<div>
|
||||
<h1>SALE 90% OFF</h1>
|
||||
|
||||
<h2>Order Now !!</h2>
|
||||
|
||||
<h2>
|
||||
<i class="fa fa-diamond"></i>
|
||||
</h2>
|
||||
</div>
|
||||
</md-toolbar><!--end toolbar section-->
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<!--pin section-->
|
||||
<div class="pin" ng-if="$even" ng-repeat="product in productList"
|
||||
ng-click="navigateTo('app.productDetail',product)">
|
||||
<img ng-src="{{product.img}}"/>
|
||||
|
||||
<h1>{{product.title}}</h1>
|
||||
|
||||
<p>
|
||||
{{product.detail}}
|
||||
</p>
|
||||
|
||||
<div class="pin-footer">
|
||||
$<span class="pin-footer text-left font-sale">{{product.price}}</span>
|
||||
<span class="pin-footer text-left font-hot-sale">${{product.promotionPrice}}</span>
|
||||
<span class="pin-footer text-right">+Add</span>
|
||||
</div>
|
||||
</div> <!--end pin section-->
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<!--pin section-->
|
||||
<div class="pin" ng-if="$odd" ng-repeat="product in productList"
|
||||
ng-click="navigateTo('app.productDetail',product)">
|
||||
<img ng-src="{{product.img}}"/>
|
||||
|
||||
<h1>{{product.title}}</h1>
|
||||
|
||||
<p>
|
||||
{{product.detail}}
|
||||
</p>
|
||||
|
||||
<div class="pin-footer">
|
||||
$<span class="pin-footer text-left font-sale">{{product.price}}</span>
|
||||
<span class="pin-footer text-left font-hot-sale">${{product.promotionPrice}}</span>
|
||||
<span class="pin-footer text-right">+Add</span>
|
||||
</div>
|
||||
</div> <!--end pin section-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ion-infinite-scroll on-infinite="loadMore()" distance="1%">
|
||||
</ion-infinite-scroll>
|
||||
</ion-content><!--end product list section-->
|
||||
|
||||
<!--button section-->
|
||||
<div class="footer-fab-bar">
|
||||
<a class="md-button md-accent md-fab fab-footer" ng-click="navigateTo('app.productCheckout')" aria-label="Add">
|
||||
<i class="fa fa-shopping-cart"></i>
|
||||
</a>
|
||||
</div>
|
||||
<!--end button section-->
|
||||
|
||||
<!--loading progress-->
|
||||
<div id="product-list-loading-progress" class="loading-progress fade-in">
|
||||
<ion-spinner ng-if="!isAndroid" class="progress-circular"></ion-spinner>
|
||||
<md-progress-circular ng-if="isAndroid" md-mode="indeterminate"></md-progress-circular>
|
||||
</div><!--end loading progress-->
|
||||
|
||||
|
||||
</ion-view>
|
||||
@@ -0,0 +1,286 @@
|
||||
// For using social share you have to install $cordovaSocialSharing by running the following
|
||||
// command in your cmd.exe for windows or terminal for mac:
|
||||
// $ cd your_project_path
|
||||
// $ ionic plugin remove nl.x-services.plugins.socialsharing
|
||||
// $ ionic plugin add https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin.git
|
||||
//
|
||||
// Learn more about $cordovaSocialSharing :
|
||||
// http://ngcordova.com/docs/plugins/socialSharing/
|
||||
//
|
||||
// For using save image you have to install Canvas2ImagePlugin by running the following
|
||||
// command in your cmd.exe for windows or terminal for mac:
|
||||
// $ cd your_project_path
|
||||
// $ ionic plugin remove org.devgeeks.Canvas2ImagePlugin
|
||||
// $ ionic plugin add https://github.com/devgeeks/Canvas2ImagePlugin.git
|
||||
//
|
||||
// Learn more about Canvas2ImagePlugin :
|
||||
// https://github.com/devgeeks/Canvas2ImagePlugin
|
||||
//
|
||||
// Controller of product list Page.
|
||||
appControllers.controller('productListCtrl', function ($scope, $timeout, $state, $http) {
|
||||
|
||||
// This function 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.productList is the variable that store user product data.
|
||||
$scope.productList = [];
|
||||
|
||||
// Loading progress.
|
||||
$timeout(function () {
|
||||
if ($scope.isAndroid) {
|
||||
jQuery('#product-list-loading-progress').show();
|
||||
}
|
||||
else {
|
||||
jQuery('#product-list-loading-progress').fadeIn(700);
|
||||
}
|
||||
}, 400);
|
||||
$timeout(function () {
|
||||
jQuery('#product-list-loading-progress').hide();
|
||||
jQuery('#product-list-content').fadeIn();
|
||||
}, 4000);// End loading progress.
|
||||
};// End initialForm.
|
||||
|
||||
// navigateTo is for navigate to other page.
|
||||
// by using targetPage to be the destination page
|
||||
// and send object to the destination page.
|
||||
// Parameter :
|
||||
// targetPage = destination page.
|
||||
// objectData = object data that sent to destination page.
|
||||
$scope.navigateTo = function (targetPage, objectData) {
|
||||
$state.go(targetPage, {
|
||||
product: objectData
|
||||
});
|
||||
};// End navigateTo.
|
||||
|
||||
// loadMore is for loadMore product list.
|
||||
$scope.loadMore = function () {
|
||||
$timeout(function () {
|
||||
//get product list from json at paht: www/app-data/product-list.json
|
||||
$http.get('app-data/product-list.json')
|
||||
.success(function (productList) {
|
||||
// Success retrieve data.
|
||||
// Store user data to $scope.productList.
|
||||
for (var product = 0; product < productList.length; product++) {
|
||||
$scope.productList.push(productList[product]);
|
||||
}
|
||||
// To stop loading progress.
|
||||
$scope.$broadcast('scroll.infiniteScrollComplete');
|
||||
});
|
||||
}, 2000);
|
||||
};// End loadMore.
|
||||
|
||||
$scope.initialForm();
|
||||
|
||||
});// End of product list controller.
|
||||
|
||||
// Controller of product Detail Page.
|
||||
appControllers.controller('productDetailCtrl', function ($scope, $mdToast, $mdBottomSheet, $timeout, $stateParams) {
|
||||
|
||||
// This function 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.product is product detail
|
||||
// $stateParams.product is the object that pass from product list page.
|
||||
$scope.product = $stateParams.product;
|
||||
// Loading progress.
|
||||
$timeout(function () {
|
||||
if ($scope.isAndroid) {
|
||||
jQuery('#product-detail-loading-progress').show();
|
||||
}
|
||||
else {
|
||||
jQuery('#product-detail-loading-progress').fadeIn(700);
|
||||
}
|
||||
}, 400);
|
||||
$timeout(function () {
|
||||
jQuery('#product-detail-loading-progress').hide();
|
||||
jQuery('#product-detail-content').fadeIn();
|
||||
}, 3000);// End loading progress.
|
||||
};// End initialForm.
|
||||
|
||||
// addToCart for show Item Added ! toast.
|
||||
$scope.addToCart = function () {
|
||||
$mdToast.show({
|
||||
controller: 'toastController',
|
||||
templateUrl: 'toast.html',
|
||||
hideDelay: 800,
|
||||
position: 'top',
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: "Item Added !"
|
||||
}
|
||||
}
|
||||
});
|
||||
}; // End addToCart.
|
||||
|
||||
// sharedProduct fro show shared social bottom sheet by calling sharedSocialBottomSheetCtrl controller.
|
||||
$scope.sharedProduct = function ($event, product) {
|
||||
$mdBottomSheet.show({
|
||||
templateUrl: 'bottom-sheet-shared.html',
|
||||
controller: 'sharedSocialBottomSheetCtrl',
|
||||
targetEvent: $event,
|
||||
locals: {
|
||||
product: product
|
||||
}
|
||||
});
|
||||
};// End sharedProduct.
|
||||
|
||||
$scope.initialForm();
|
||||
});// End of product list controller.
|
||||
|
||||
// Controller of share social bottom sheet.
|
||||
appControllers.controller('sharedSocialBottomSheetCtrl', function ($scope, $mdBottomSheet, $timeout, product, $mdToast, $cordovaSocialSharing) {
|
||||
|
||||
// This function 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.setCanvasImage for set canvas image to save to your mobile gallery.
|
||||
$scope.setCanvasImage(product.img);
|
||||
//$scope.isSaving is image saving status.
|
||||
$scope.isSaving = false;
|
||||
};// End initialForm.
|
||||
|
||||
//setCanvasImage for set canvas image to save to your mobile gallery.
|
||||
$scope.setCanvasImage = function (imgPath) {
|
||||
// create canvas image.
|
||||
var canvas = document.getElementById('imgCanvas');
|
||||
var context = canvas.getContext('2d');
|
||||
var imageObj = new Image();
|
||||
|
||||
imageObj.onload = function () {
|
||||
canvas.height = this.height;
|
||||
canvas.width = this.width;
|
||||
context.drawImage(imageObj, 0, 0);
|
||||
};
|
||||
//image path.
|
||||
imageObj.src = imgPath;
|
||||
|
||||
return canvas.toDataURL();
|
||||
};// End setCanvasImage.
|
||||
|
||||
// getCanvasImageUrl for get canvas image path.
|
||||
$scope.getCanvasImageUrl = function () {
|
||||
var canvas = document.getElementById('imgCanvas');
|
||||
return canvas.toDataURL();
|
||||
};// End getCanvasImageUrl.
|
||||
|
||||
// sharedFacebook for share product picture to facebook by calling $cordovaSocialSharing.
|
||||
$scope.sharedFacebook = function () {
|
||||
$cordovaSocialSharing.shareViaFacebook(" ", $scope.getCanvasImageUrl());
|
||||
$mdBottomSheet.hide();
|
||||
}// End sharedFacebook.
|
||||
|
||||
// sharedTwitter for share product picture to twitter by calling $cordovaSocialSharing.
|
||||
$scope.sharedTwitter = function () {
|
||||
$cordovaSocialSharing.shareViaTwitter(" ", $scope.getCanvasImageUrl());
|
||||
$mdBottomSheet.hide();
|
||||
}// End sharedTwitter.
|
||||
|
||||
// sharedMail for share product picture to email by calling $cordovaSocialSharing.
|
||||
$scope.sharedMail = function () {
|
||||
$cordovaSocialSharing.shareViaEmail(" ", "Shopping with ionic meterial", "ionicmaterialdesign@gmail.com", "cc@IonicMeterial.com", "bcc@IonicMeterial.com", $scope.getCanvasImageUrl());
|
||||
$mdBottomSheet.hide();
|
||||
}// End sharedMail.
|
||||
|
||||
// saveImage for save product picture to mobile gallery.
|
||||
$scope.saveImage = function () {
|
||||
|
||||
if ($scope.isSaving == false) {
|
||||
try {
|
||||
// calling canvas2ImagePlugin to save image to gallery.
|
||||
window.canvas2ImagePlugin.saveImageDataToLibrary(
|
||||
function (msg) {
|
||||
|
||||
},
|
||||
function (err) {
|
||||
throw err;
|
||||
},
|
||||
document.getElementById('imgCanvas'));
|
||||
$scope.isSaving = true;
|
||||
|
||||
// show Image Saved ! toast when save image success.
|
||||
$mdToast.show({
|
||||
controller: 'toastController',
|
||||
templateUrl: 'toast.html',
|
||||
hideDelay: 800,
|
||||
position: 'top',
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: "Image Saved !"
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
catch (e) {
|
||||
console.log(e);
|
||||
// show Save Failed : Please try again! toast when save image is error.
|
||||
$mdToast.show({
|
||||
controller: 'toastController',
|
||||
templateUrl: 'toast.html',
|
||||
hideDelay: 800,
|
||||
position: 'top',
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: "Save Failed : Please try again!"
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
// Hide bottom sheet.
|
||||
$timeout(function () {
|
||||
$mdBottomSheet.hide();
|
||||
}, 1800);
|
||||
}// End saveImage.
|
||||
|
||||
// sharedMore for hide bottom sheet.
|
||||
$scope.sharedMore = function () {
|
||||
|
||||
$mdBottomSheet.hide();
|
||||
}// End sharedMore.
|
||||
|
||||
$scope.initialForm();
|
||||
});// End of share social bottom sheet controller.
|
||||
|
||||
// Controller of product check out page.
|
||||
appControllers.controller('productCheckoutCtrl', function ($scope, $mdToast, $mdDialog) {
|
||||
//You can do some thing hear when tap on a credit card button.
|
||||
$scope.doSomeThing = function () {
|
||||
|
||||
}// End doSomeThing.
|
||||
|
||||
// showConfirmDialog for show alert box.
|
||||
$scope.showConfirmDialog = function ($event) {
|
||||
//mdDialog.show use for show alert box for Confirm to complete order.
|
||||
$mdDialog.show({
|
||||
controller: 'DialogController',
|
||||
templateUrl: 'confirm-dialog.html',
|
||||
targetEvent: $event,
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: "Complete Order",
|
||||
content: "Confirm to complete Order.",
|
||||
ok: "Confirm",
|
||||
cancel: "Close"
|
||||
}
|
||||
}
|
||||
}).then(function () {
|
||||
// For confirm button to complete order.
|
||||
|
||||
//Showing Order Completed. Thank You ! toast.
|
||||
$mdToast.show({
|
||||
controller: 'toastController',
|
||||
templateUrl: 'toast.html',
|
||||
hideDelay: 1200,
|
||||
position: 'top',
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: "Order Completed. Thank You !"
|
||||
}
|
||||
}
|
||||
});
|
||||
}, function () {
|
||||
// For cancel button to complete order.
|
||||
});
|
||||
}// End showConfirmDialog.
|
||||
});// End of product check out controller.
|
||||
Reference in New Issue
Block a user