maestro-native/template/default/template.js

Avoka Native Component Build Tools

// This template component has a little bit of almost everything in it.
//
// It isn't intended to do anything practical, other than demonstrating how to implement a handful of features
//   including script dependencies, animation, charts, validation, rule helpers, different property types, event handlers 
//   and being able to call a dynamic data service before window close
//
// Delete the pieces that are not relevant for your own project.

// if you don't have a JQuery plugin, remove ./jquery.@@component_filename@@.js from the dependency array below
// if you need more than one, add extra filenames to the dependency array

define(["app", "./jquery.@@component_filename@@.js", "./Chart.bundle.js"], function (app) {
	app.ng.controller("av@@component_angularcode@@", ["$scope", "Form", "$element", "$timeout", "DynamicData", "$filter", function ($scope, Form, $element, $timeout, dynamicData, $filter) {
		Form.getItem($scope, $element).then(function (item) {

			var ctx = document.getElementById(item.id+'.chart').getContext('2d');
			var myChart = new Chart(ctx, {
				type: 'bar',
				data: {
					labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
					datasets: [{
						label: '# of Votes',
						data: [12, 19, 3, 5, 2, 3],
						backgroundColor: [
							'rgba(255, 99, 132, 0.2)',
							'rgba(54, 162, 235, 0.2)',
							'rgba(255, 206, 86, 0.2)',
							'rgba(75, 192, 192, 0.2)',
							'rgba(153, 102, 255, 0.2)',
							'rgba(255, 159, 64, 0.2)'
						],
						borderColor: [
							'rgba(255,99,132,1)',
							'rgba(54, 162, 235, 1)',
							'rgba(255, 206, 86, 1)',
							'rgba(75, 192, 192, 1)',
							'rgba(153, 102, 255, 1)',
							'rgba(255, 159, 64, 1)'
						],
						borderWidth: 1
					}]
				},
				options: {
					scales: {
						yAxes: [{
							ticks: {
								beginAtZero: true
							}
						}]
					}
				}
			});

			// add a custom hasValue function to ensure a value is entered in the text input
			item.$hasValue = function (data, value) {
				return value && value.length > 0;
			}

			// add a custom validation function, allow empty string or palindromes
			item.$validation = function (data, value) {
				var array = value ? value.split('') : [];
				while (array.length > 1) {
					if (array.shift() != array.pop()) {
						return "Not a palindrome!";
					}
				}
				return true;
			}

			// this is a generic click handler applied to several elements in the html
			$scope.onElementClick = function (event) {
				console.log('Clicked element: ' + event.target[{ 'LI': 'textContent', 'I': 'className', 'IMG': 'src' }[event.target.tagName] || 'outerHTML']);
			};

			// this is a specific click handler added to the repeat button
			$scope.handleClick = function (event) {
				animateItems($scope.ids);
			};

			// this is a convenience function added to the item to format values using the Angular currency filter
			item.currency = function (value, decimals) {
				return $filter('currency')(value, undefined, decimals);
			};

			// this is a convenience function added to the item to format values using the Angular number filter
			item.number = function (value, decimals) {
				return $filter('number')(value, decimals);
			};

			// establish the animation start and end values in objects
			var startValue = {}, endValue = {};
			startValue[item.properties.animationProperty] = item.properties.startValue;
			endValue[item.properties.animationProperty] = item.properties.endValue;

			// setup the animation options object
			var options = {
				duration: item.properties.animationDuration,
				start: function (promise) {
					Form.fireRule("animationStart", item, $scope.data, promise);
				},
				complete: function () {
					Form.fireRule("animationComplete", item, $scope.data);
				}
			}

			// this function will apply the animation forwards and optionally backwards
			function animateItems(ids) {
				if (item.properties.operatingMode === 'twoway') {
					$('.id-' + ids.join(',.id-'))
						.animate(endValue, options)
						.animate(startValue, options);
				}
				else {
					$('.id-' + ids.join(',.id-'))
						.animate(endValue, options);
				}
			}

			// add some global event watchers
			$(window).on('hashchange', function (e) {
				var h = e;
			});
			$(window).on('beforeunload', function (e) {
				// This function will call a dynamic data service before the window is closed
				var params = {
					sfmServiceName: "All Subs",
					sfmOperationName: "dynamicData",
					sfmFormCode: dynamicData.config.formCode,
					sfmRequestKey: dynamicData.config.requestKey
				}

				// The ajax call is made synchronously, otherwise the window will be closed before callbacks complete
				$.ajax({
					async: false,
					type: "POST",
					url: dynamicData.config.url,
					data: params,
					contentType: "application/x-www-form-urlencoded",
					dataType: "json",
					timeout: 60000,
					success: function (response) {
						var r = response;
					},
					error: function (jq, status, message) {
						var e = message;
					}
				});
			});

			// using $timeout gives the form a chance to build completely before applying animation
			// it isn't always necessary, but this demonstrates how it is used
			$timeout(function () {
				$scope.ids = item.properties.targets.map(function (r) {
					return Form.getUniqueId(r.ref.split(".").pop(), $scope.data);
				});

				// apply the animation that has been configured
				animateItems($scope.ids);
			});
		});
	}]);
});