diff --git a/www/i18n/locale-en-GB.json b/www/i18n/locale-en-GB.json
index 22efdb4f8fcb4a4243a969238d350836ea79433a..491051434793bf0d5348614a1923862e0662bacb 100644
--- a/www/i18n/locale-en-GB.json
+++ b/www/i18n/locale-en-GB.json
@@ -810,7 +810,7 @@
"DEMO_RESULT": "Result returned by call:",
"DEMO_SUCCEED": "<i class=\"icon ion-checkmark\"></i> Success!",
"DEMO_CANCELLED": "<i class=\"icon ion-close\"></i> Canceled by user",
- "INTEGRATE_DIVIDER": "To integrate",
+ "INTEGRATE_DIVIDER": "Website integration",
"INTEGRATE_CODE": "HTML Code:",
"INTEGRATE_RESULT": "Result preview:",
"INTEGRATE_PARAMETERS": "Parameters",
@@ -834,8 +834,10 @@
"EXAMPLE_BUTTON_DEFAULT_TEXT": "Pay in {{currency|currencySymbol}}",
"EXAMPLE_BUTTON_DEFAULT_STYLE": "Custom style",
"EXAMPLE_BUTTON_TEXT_HELP": "Button text",
- "EXAMPLE_BUTTON_TEXT_COLOR": "Color",
- "EXAMPLE_BUTTON_TEXT_COLOR_HELP": "eg: #fbc14c, yellow, lightgrey, rgb(180,180,180)",
+ "EXAMPLE_BUTTON_BG_COLOR": "Background color",
+ "EXAMPLE_BUTTON_BG_COLOR_HELP": "eg: #fbc14c, yellow, lightgrey, rgb(180,180,180)",
+ "EXAMPLE_BUTTON_FONT_COLOR": "Font color",
+ "EXAMPLE_BUTTON_FONT_COLOR_HELP": "eg: black, orange, rgb(180,180,180)",
"EXAMPLE_BUTTON_TEXT_ICON": "Icon",
"EXAMPLE_BUTTON_TEXT_WIDTH": "Width",
"EXAMPLE_BUTTON_TEXT_WIDTH_HELP": "eg: 200px, 50%",
diff --git a/www/i18n/locale-en.json b/www/i18n/locale-en.json
index e7dbf7ea694f7abfdbdb264941b1c7d58ac75f6a..f45b1b89eb675fe824353ed81c14039d532b02c3 100644
--- a/www/i18n/locale-en.json
+++ b/www/i18n/locale-en.json
@@ -810,7 +810,7 @@
"DEMO_RESULT": "Result returned by call:",
"DEMO_SUCCEED": "<i class=\"icon ion-checkmark\"></i> Success!",
"DEMO_CANCELLED": "<i class=\"icon ion-close\"></i> Canceled by user",
- "INTEGRATE_DIVIDER": "To integrate",
+ "INTEGRATE_DIVIDER": "Website integration",
"INTEGRATE_CODE": "HTML Code:",
"INTEGRATE_RESULT": "Result preview:",
"INTEGRATE_PARAMETERS": "Parameters",
@@ -834,8 +834,10 @@
"EXAMPLE_BUTTON_DEFAULT_TEXT": "Pay in {{currency|currencySymbol}}",
"EXAMPLE_BUTTON_DEFAULT_STYLE": "Custom style",
"EXAMPLE_BUTTON_TEXT_HELP": "Button text",
- "EXAMPLE_BUTTON_TEXT_COLOR": "Color",
- "EXAMPLE_BUTTON_TEXT_COLOR_HELP": "eg: #fbc14c, yellow, lightgrey, rgb(180,180,180)",
+ "EXAMPLE_BUTTON_BG_COLOR": "Background color",
+ "EXAMPLE_BUTTON_BG_COLOR_HELP": "eg: #fbc14c, yellow, lightgrey, rgb(180,180,180)",
+ "EXAMPLE_BUTTON_FONT_COLOR": "Font color",
+ "EXAMPLE_BUTTON_FONT_COLOR_HELP": "eg: black, orange, rgb(180,180,180)",
"EXAMPLE_BUTTON_TEXT_ICON": "Icon",
"EXAMPLE_BUTTON_TEXT_WIDTH": "Width",
"EXAMPLE_BUTTON_TEXT_WIDTH_HELP": "eg: 200px, 50%",
diff --git a/www/i18n/locale-fr-FR.json b/www/i18n/locale-fr-FR.json
index c7eae8a52289b540c058c519dd6180499d667e54..f5e24e372330515edc20203bfc511053f22b6fdf 100644
--- a/www/i18n/locale-fr-FR.json
+++ b/www/i18n/locale-fr-FR.json
@@ -834,8 +834,10 @@
"EXAMPLE_BUTTON_DEFAULT_TEXT": "Payer en {{currency|currencySymbol}}",
"EXAMPLE_BUTTON_DEFAULT_STYLE": "Style personnalisé",
"EXAMPLE_BUTTON_TEXT_HELP": "Texte du bouton",
- "EXAMPLE_BUTTON_TEXT_COLOR": "Couleur",
- "EXAMPLE_BUTTON_TEXT_COLOR_HELP": "Exemple: #fbc14c, yellow, lightgrey, rgb(180,180,180)",
+ "EXAMPLE_BUTTON_BG_COLOR": "Couleur du fond",
+ "EXAMPLE_BUTTON_BG_COLOR_HELP": "Exemple: #fbc14c, black, lightgrey, rgb(180,180,180)",
+ "EXAMPLE_BUTTON_FONT_COLOR": "Couleur du texte",
+ "EXAMPLE_BUTTON_FONT_COLOR_HELP": "Exemple: black, orange, rgb(180,180,180)",
"EXAMPLE_BUTTON_TEXT_ICON": "Icône",
"EXAMPLE_BUTTON_TEXT_WIDTH": "Largeur",
"EXAMPLE_BUTTON_TEXT_WIDTH_HELP": "Exemple: 200px, 50%",
diff --git a/www/js/api/app.js b/www/js/api/app.js
index 636578cd9c75772a6160c1df32d69622f2376423..43be6e05f6e7ac4131d37d22c8a9d989d109d41a 100644
--- a/www/js/api/app.js
+++ b/www/js/api/app.js
@@ -74,49 +74,48 @@ angular.module('cesium-api', ['ionic', 'ionic-material', 'ngMessages', 'pascalpr
'ngInject';
$scope.loading = true;
- $scope.buttonIcons = [
- {
- label: 'API.DOC.TRANSFER.EXAMPLE_BUTTON_ICON_DUNITER',
- filename: '../img/logo_duniter_32px.png'
- },
- {
- label: 'API.DOC.TRANSFER.EXAMPLE_BUTTON_ICON_CESIUM',
- filename: '../img/logo_32px.png'
- },
- {
- label: 'API.DOC.TRANSFER.EXAMPLE_BUTTON_ICON_G1_COLOR',
- filename: '../img/logo_g1_32px.png'
- },
- {
- label: 'API.DOC.TRANSFER.EXAMPLE_BUTTON_ICON_G1_BLACK',
- filename: '../img/logo_g1_32px_black.png'
- }
- ];
$scope.transferData = {
pubkey: 'G2CBgZBPLe6FSFUgpx2Jf1Aqsgta6iib3vmDRA1yLiqU',
amount: 100,
comment: 'REFERENCE',
name: 'www.domain.com',
redirect_url: 'http://www.domain.com/payment?ref={comment}&tx={tx}',
- cancel_url: 'http://www.domain.com/payment?ref={comment}&cancel',
- show: false, // hide integration parameters, by default
- buttonText: 'Ğ1 pubkey',
- buttonIcon: $scope.buttonIcons[0],
- buttonTextEnable: false,
- buttonColor: '#fbc14c',
- buttonWidth: undefined
+ cancel_url: 'http://www.domain.com/payment?ref={comment}&cancel'
};
-
-
- // Compute URL for transfer demo
- $scope.demoUrl = $rootScope.rootPath + $state.href('api.transfer', angular.merge({}, $scope.transferData, {
- demo: true,
- redirect_url: $rootScope.rootPath + '#/app/home?service=payment&result={tx}',
- cancel_url: $rootScope.rootPath + '#/app/home?service=payment&cancel'
- }));
- $scope.transferData.url = $rootScope.rootPath + $state.href('api.transfer', $scope.transferData);
+ $scope.transferButton = {
+ html: undefined,
+ showParameters: false, // hide integration parameters, by default
+ icons: [
+ {
+ label: 'API.DOC.TRANSFER.EXAMPLE_BUTTON_ICON_DUNITER',
+ filename: '../img/logo_duniter_32px.png'
+ },
+ {
+ label: 'API.DOC.TRANSFER.EXAMPLE_BUTTON_ICON_CESIUM',
+ filename: '../img/logo_32px.png'
+ },
+ {
+ label: 'API.DOC.TRANSFER.EXAMPLE_BUTTON_ICON_G1_COLOR',
+ filename: '../img/logo_g1_32px.png'
+ },
+ {
+ label: 'API.DOC.TRANSFER.EXAMPLE_BUTTON_ICON_G1_BLACK',
+ filename: '../img/logo_g1_32px_black.png'
+ }
+ ],
+ style: {
+ enable: false,
+ text: 'Ğ1 pubkey',
+ bgColor: '#fbc14c',
+ fontColor: 'black',
+ width: undefined
+ }
+ };
+ $scope.transferButton.style.icon = $scope.transferButton.icons[0];
$scope.enter = function(e, state) {
+ if (!$scope.loading) return; // already enter
+
$scope.result = {};
if (state.stateParams && state.stateParams.service) {
$scope.result.type = state.stateParams.service;
@@ -133,43 +132,63 @@ angular.module('cesium-api', ['ionic', 'ionic-material', 'ngMessages', 'pascalpr
return $translate('API.DOC.TRANSFER.EXAMPLE_BUTTON_DEFAULT_TEXT', {currency: currency.name});
})
.then(function(buttonText) {
- $scope.transferData.buttonText = buttonText;
+ $scope.transferButton.style.text = buttonText;
+ $scope.transferDemoUrl = $rootScope.rootPath + $state.href('api.transfer', angular.merge({}, $scope.transferData, {
+ demo: true,
+ redirect_url: $rootScope.rootPath + '#/app/home?service=payment&result={tx}',
+ cancel_url: $rootScope.rootPath + '#/app/home?service=payment&cancel'
+ }));
+
$scope.loading = false;
+
// compute HTML button
- $scope.onTransferDataChanged();
+ $scope.computeTransferButtonHtml();
});
};
$scope.$on('$ionicView.enter', $scope.enter);
// watch from update
- $scope.onTransferDataChanged = function() {
+ $scope.computeTransferButtonHtml = function() {
if ($scope.loading) return; // skip if loading
- // recompute URL
- var buttonUrl = $rootScope.rootPath + $state.href('api.transfer', $scope.transferData);
+ // Compute URL
+ var url = $rootScope.rootPath + $state.href('api.transfer', $scope.transferData);
- // Button with text
- if ($scope.transferData.buttonTextEnable) {
- $scope.buttonHtml = '<a href="'+buttonUrl+'">\n'+
- ' <div style="background-color: '+$scope.transferData.buttonColor+'; border-radius: 5px; min-height: 42px; text-align: center; padding: 5px; color: black;';
- if ($scope.transferData.buttonWidth) {
- $scope.buttonHtml += 'max-width: '+$scope.transferData.buttonWidth+';';
- }
- $scope.buttonHtml += '">\n'+
- ' <img style="vertical-align: middle;" src="'+$rootScope.rootPath + $scope.transferData.buttonIcon.filename+'">\n' +
- ' ' + $scope.transferData.buttonText + '\n' +
- ' </div>\n' +
+ var html;
+ // Compute HTML: simple button
+ if (!$scope.transferButton.style.enable){
+ html = '<a href="'+url+'">\n'+
+ ' <img src="'+$rootScope.rootPath + '../img/duniter_button.svg">\n'+
'</a>';
}
- // Simple button
+ // Compute HTML: advanced button
else {
- $scope.buttonHtml = '<a href="'+buttonUrl+'">\n'+
- ' <img src="'+$rootScope.rootPath + '../img/duniter_button.svg">\n'+
+ html = '<a href="'+url+'">\n'+
+ ' <div style="border-radius: 5px; min-height: 42px; text-align: center; padding: 5px; ';
+ if ($scope.transferButton.style.width) {
+ html += 'max-width: '+$scope.transferButton.style.width+'; ';
+ }
+ if ($scope.transferButton.style.bgColor) {
+ html += 'background-color: '+$scope.transferButton.style.bgColor+'; ';
+ }
+ if ($scope.transferButton.style.fontColor) {
+ html += 'color: '+$scope.transferButton.style.fontColor+'; ';
+ }
+ html += '">\n'+
+ ' <img style="vertical-align: middle;" src="'+$rootScope.rootPath + $scope.transferButton.style.icon.filename+'">\n' +
+ ' ' + $scope.transferButton.style.text + '\n' +
+ ' </div>\n' +
'</a>';
}
+
+ if ($scope.transferButton.html != html) {
+ $scope.transferButton.html = html;
+ $scope.$broadcast('$$rebind::transferButton'); // force rebind
+ }
};
- $scope.$watch('transferData', $scope.onTransferDataChanged, true);
+ $scope.$watch('transferData', $scope.computeTransferButtonHtml, true);
+ $scope.$watch('transferButton.style', $scope.computeTransferButtonHtml, true);
})
.controller('ApiTransferCtrl', function ($scope, $rootScope, $timeout, $controller, $state, $q, $translate, $filter,
diff --git a/www/templates/api/doc.html b/www/templates/api/doc.html
index 7baedc16faa77e0d9d00e33af83a06722447449d..27b548396d4b1d623e2d2f52fb3e7591425bda4b 100644
--- a/www/templates/api/doc.html
+++ b/www/templates/api/doc.html
@@ -62,7 +62,7 @@
</div>
<div class="item item-button-right item-text-wrap padding-bottom">
<p class="item-icon-right-padding" translate>API.DOC.DEMO_HELP</p>
- <a href="{{demoUrl}}" class="button button-raised button-positive icon ion-play"></a>
+ <a href="{{transferDemoUrl}}" class="button button-raised button-positive icon ion-play"></a>
</div>
<div class="item item-text-wrap" ng-if="result.type === 'payment' && !result.cancelled">
<h2 class="text-right balanced" translate>API.DOC.DEMO_SUCCEED</h2>
@@ -95,7 +95,7 @@
</p>
<div class="item item-input ">
<textarea class="gray" select-on-click rows="5"
- ng-model="buttonHtml"
+ ng-model="transferButton.html"
ng-model-options="{ debounce: 650 }"></textarea>
</div>
@@ -104,8 +104,8 @@
<i class="icon ion-eye"></i>
<span translate>API.DOC.INTEGRATE_RESULT</span>
</p>
- <div class="padding-left">
- <ng-bind-html ng-bind-html="buttonHtml|trustAsHtml"></ng-bind-html>
+ <div class="padding-left" bind-notifier="{ notifierKey:watchedExpression }">
+ <ng-bind-html ng-bind-html="transferButton.html|trustAsHtml"></ng-bind-html>
</div>
</div>
</div>
@@ -113,17 +113,17 @@
<div class="col col-20 hidden-xs hidden-sm"> </div>
- <!-- no text on button -->
+ <!-- HTML button parameters -->
<div class="col gray no-border">
<p class="padding-top">
- <a class="positive" ng-click="transferData.show=!transferData.show">
+ <a class="positive" ng-click="transferButton.showParameters=!transferButton.showParameters">
<i class="icon ion-wrench"></i>
<span translate>API.DOC.INTEGRATE_PARAMETERS</span>
- <i class="icon" ng-class="{'ion-arrow-down-b': !transferData.show, 'ion-arrow-up-b': transferData.show}"></i>
+ <i class="icon" ng-class="{'ion-arrow-down-b': !transferButton.showParameters, 'ion-arrow-up-b': transferButton.showParameters}"></i>
</a>
</p>
- <div ng-if="transferData.show" class="padding-left">
+ <div ng-if="transferButton.showParameters" class="padding-left">
<form id="transferForm" class="stable-bg padding">
<p class="padding-top">
@@ -189,25 +189,13 @@
</label>
<p class="padding-top">
- <a class="positive" ng-click="transferData.buttonTextEnable=!transferData.buttonTextEnable">
- <i class="icon" ng-class="{'ion-android-checkbox-outline': transferData.buttonTextEnable, 'ion-android-checkbox-outline-blank': !transferData.buttonTextEnable}"></i>
+ <a class="positive" ng-click="transferButton.style.enable=!transferButton.style.enable">
+ <i class="icon" ng-class="{'ion-android-checkbox-outline': transferButton.style.enable, 'ion-android-checkbox-outline-blank': !transferButton.style.enable}"></i>
<span translate>API.DOC.TRANSFER.EXAMPLE_BUTTON_DEFAULT_STYLE</span>
</a>
</p>
- <div ng-if="transferData.buttonTextEnable">
-
- <!-- button color -->
- <p class="padding-top">
- <i class="icon ion-paintbucket"></i>
- {{'API.DOC.TRANSFER.EXAMPLE_BUTTON_TEXT_COLOR' | translate}} :
- </p>
- <label class="item item-input">
- <input type="text"
- ng-model="transferData.buttonColor"
- ng-model-options="{ debounce: 650 }"
- placeholder="{{'API.DOC.TRANSFER.EXAMPLE_BUTTON_TEXT_COLOR_HELP'|translate}}">
- </label>
+ <div ng-if="transferButton.style.enable">
<!-- button icon -->
<p class="padding-top">
@@ -216,8 +204,8 @@
</p>
<label class="item item-input item-select">
<select class="stable-bg dark"
- ng-model="transferData.buttonIcon" style="width: 100%; max-width: 100%;"
- ng-options="l as (l.label | translate) for l in buttonIcons track by l.filename">
+ ng-model="transferButton.style.icon" style="width: 100%; max-width: 100%;"
+ ng-options="l as (l.label | translate) for l in transferButton.icons track by l.filename">
</select>
</label>
@@ -228,11 +216,36 @@
</p>
<label class="item item-input">
<input type="text"
- ng-model="transferData.buttonText"
+ ng-model="transferButton.style.text"
ng-model-options="{ debounce: 650 }"
placeholder="{{'API.DOC.TRANSFER.EXAMPLE_BUTTON_TEXT_HELP'|translate}}">
</label>
+
+ <!-- button bg color -->
+ <p class="padding-top">
+ <i class="icon ion-paintbucket"></i>
+ {{'API.DOC.TRANSFER.EXAMPLE_BUTTON_BG_COLOR' | translate}} :
+ </p>
+ <label class="item item-input">
+ <input type="text"
+ ng-model="transferButton.style.bgColor"
+ ng-model-options="{ debounce: 650 }"
+ placeholder="{{'API.DOC.TRANSFER.EXAMPLE_BUTTON_BG_COLOR_HELP'|translate}}">
+ </label>
+
+ <!-- button font color -->
+ <p class="padding-top">
+ <i class="icon ion-paintbrush"></i>
+ {{'API.DOC.TRANSFER.EXAMPLE_BUTTON_FONT_COLOR' | translate}} :
+ </p>
+ <label class="item item-input">
+ <input type="text"
+ ng-model="transferButton.style.fontColor"
+ ng-model-options="{ debounce: 650 }"
+ placeholder="{{'API.DOC.TRANSFER.EXAMPLE_BUTTON_FONT_COLOR_HELP'|translate}}">
+ </label>
+
<!-- button width -->
<p class="padding-top">
<i class="icon ion-ios-crop-strong"></i>
@@ -240,7 +253,7 @@
</p>
<label class="item item-input">
<input type="text"
- ng-model="transferData.buttonWidth"
+ ng-model="transferButton.style.width"
ng-model-options="{ debounce: 650 }"
placeholder="{{'API.DOC.TRANSFER.EXAMPLE_BUTTON_TEXT_WIDTH_HELP'|translate}}">
</label>