miramira

app.js

/**
 * @name hodor
 *
 * Main module of the application.
 */

var app = angular.module('hodor', []).
	constant('config', {
		version: '0.0.1',

		app_domain: 'lan.hodor.v6.local',
		app_base_path: '/',

		static_domain: 'static.v6.local',
		static_base_path: '/apps/hodor/'
	}).
	run(['$rootScope', 'init', function($rootScope, init) {
		init.index();
	}]);

error_handler.js

/**
 * @name ErrorHandlerFactory
 */

app.
	factory('error_handler', function() {
		var error_handler = {};

		/*!
		 * Error handler. Analyzes the response code of ajax requests and trigger UI actions to show errors. If everything is ok, returns true.
		 *
		 * @author juanpablob
		 * @since 2014-10-17
		 * @return boolean
		 * @param object data
		 */
		error_handler.response = function(data) {
			if (data.code != 200) {
				alert(data.message);
				// some beautiful ui to show error

				return false;
			}

			return true;
		};

		return error_handler;
	});

helper.js

/**
 * @name HelpersFactory
 */

app.
	factory('helper', function(config) {
		var helper = {};

		/*!
		 * Ajax Url. Concat passed params (array) and convert it to a compatible string to pass as CakePHP URL parameters. I.e: /controller/action/param1/param2/param3
		 *
		 * @author juanpablob
		 * @since 2014-10-17
		 * @return string
		 * @param array params
		 */
		helper.ajax_url = function(params) {
			 return config.app_base_path + params.join('/');
		};

		return helper;
	});

init.js

/**
 * @name InitFactory
 */

app.
	factory('init', function() {
		var init = {};

		/*!
		 * Wide initialization of UI components behavior
		 *
		 * @author juanpablob
		 * @since 2014-10-17
		 * @return void
		 */
		init.index = function() {
			$(document).on('click', 'a[href="#"]', function(e) {
				e.preventDefault();
			});
		};

		return init;
	});

unit_sections.js

/**
 * @name UnitSectionsController
 */

app.
	controller('UnitSectionsController', ['$scope', '$element', '$http', 'config', 'helper', 'error_handler', function($scope, $element, $http, config, helper, error_handler) {
		var $self = this,
			$element = $($element);

			$self.id_campus = $($element).attr('data-id-campus'),
			$self.id_program = $($element).attr('data-id-program'),
			$self.id_course = $($element).attr('data-id-course'),

			$self.sections_container = '.sections-nav',
			$self.sections_item = 'li',
			$self.sections_add_item = '.sections-add a',
			$self.sections_delete_item = '.sections-delete',
			$self.sections_editable = '.sections-nav li span',

			$self.previous_name = null;

		/*!
		 * Calls methods through jQuery events
		 *
		 * @author juanpablob
		 * @since 2014-10-15
		 * @return void
		 */
		$scope.index = function() {
			/* Add section trigger */
			$(document).
				on('click', $self.sections_add_item, function() {
					var placeholder = $(this).attr('data-placeholder');

					$scope.add($self.id_campus, $self.id_program, $self.id_course, placeholder);
				});

			/* Delete section trigger */
			$(document).
				on('click', $self.sections_delete_item, function() {
					var id_unit_section = $(this).parent().attr('id').split('unit-section-').pop();

					$scope.delete(id_unit_section, this);
				});

			/* Edit section trigger */
			$(document).
				on('focus', $self.sections_editable, function() {
					$self.previous_name = $(this).text();

					$(this).
						on('keydown', null, 'return', function() {
							$(this).blur();
						});

					console.log('focus compareh');
				}).
				on('blur', $self.sections_editable, function() {
					var name = $(this).text(),
						id_unit_section = $(this).parent().attr('id').split('unit-section-').pop();

					/* Check if the entered name is the same or has less than 1 char, to avoid send ajax request */
					if (name == $self.previous_name || name.length < 1) {
						name = $self.previous_name;

						$(this).html(name);

						return false;
					}

					$scope.edit(name, id_unit_section, this);

					console.log('blur compareh');
				});
		};

		/*!
		 * Add section
		 *
		 * @author juanpablob
		 * @since 2014-10-15
		 * @return void
		 * @param int id_campus
		 * @param int id_program
		 * @param int id_course
		 * @param string placeholder
		 */
		$scope.add = function(id_campus, id_program, id_course, placeholder) {
			/*	Set the cake controller URL format, before send the request.
				Passed 0 as unit, which means create the section by default in every unit created in the future.
			*/
			var push_url = helper.ajax_url([
					'unit_sections',
					'add',
					$self.id_campus,
					$self.id_program,
					$self.id_course,
					0,
					encodeURI(placeholder)
				]),
				new_section_item = $self.clone(placeholder); // Save cloned object

			$http.get(push_url).
				success(function(data) {
					console.log(data);

					error_handler.response(data);

					$(new_section_item).
						attr('id', 'unit-section-' + data.response.UnitSection.id).
						attr('disabled', false).
						find('span').
						attr('contenteditable', true).
						focus().
						selectText();
				}).
				error(function() {
					error_handler.response(data);
				});
		};

		/*!
		 * Clone section in the DOM
		 *
		 * @author juanpablob
		 * @since 2014-10-15
		 * @return object
		 * @param string placeholder
		 */
		$self.clone = function(placeholder) {
			var cloned_element = $($self.sections_container).
				find('li:nth-last-child(2)').
				clone().
				insertBefore($($self.sections_add_item).parent()).
				hide().
				find('span').
				html(placeholder).
				attr('contenteditable', false).
				parent().
				attr('disabled', true).
				show('slide', {
					direction: 'left'
				}, 400).
				find('span').
				parent();

			return cloned_element;
		};

		/*!
		 * Edit section
		 *
		 * @author juanpablob
		 * @since 2014-10-18
		 * @return void
		 * @param string name
		 * @param int id_unit_section
		 * @param object element
		 */
		$scope.edit = function(name, id_unit_section, element) {
			var push_url = helper.ajax_url([
					'unit_sections',
					'edit',
					$self.id_campus,
					$self.id_program,
					$self.id_course,
					0,
					id_unit_section,
					encodeURI(name)
				]),
				updated_section_item = $self.update(element);

			$http.get(push_url).
				success(function(data) {
					console.log(data);

					error_handler.response(data);

					$(updated_section_item).
						attr('disabled', false).
						find('span').
						attr('contenteditable', true);
				}).
				error(function() {
					error_handler.response(data);
				});
		};

		/*!
		 * Update section in the DOM
		 *
		 * @author juanpablob
		 * @since 2014-10-18
		 * @return object
		 * @param object element
		 */
		$self.update = function(element) {
			var updated_element = $(element).
				parent().
				attr('disabled', true).
				find('span').
				attr('contenteditable', false).
				parent();

			return updated_element;
		};

		/*!
		 * Delete section
		 *
		 * @author juanpablob
		 * @since 2014-10-17
		 * @return void
		 * @param int id_unit_section
		 * @param object element
		 */
		$scope.delete = function(id_unit_section, element) {
			var push_url = helper.ajax_url([
					'unit_sections',
					'delete',
					$self.id_campus,
					$self.id_program,
					$self.id_course,
					0,
					id_unit_section
				]),
				old_section_item = $self.remove(element);

			$http.get(push_url).
				success(function(data) {
					console.log(data);

					error_handler.response(data);

					$(old_section_item).
						hide('slide', {
							direction: 'left'
						}, 400);
				}).
				error(function() {
					error_handler.response(data);
				});
		};

		/*!
		 * Removes desired section from the DOM
		 *
		 * @author juanpablob
		 * @since 2014-10-17
		 * @return object
		 * @param object element
		 */
		$self.remove = function(element) {
			var removed_element = $(element).
				parent().
				attr('disabled', true).
				find('span').
				attr('contenteditable', false).
				parent();

			return removed_element;
		};

		/*!
		 * Magic start (Initialization)
		 *
		 * @author juanpablob
		 * @since 2014-10-15
		 */
		$scope.index();
	}]);