Adicionado suporte ao Safari e novos campos no Enviar Sinal.

Adabriand Furtado
1 parent e3569528
Showing 105 changed files with 414 additions and 251 deletions Show diff stats
view/css/main.css
view/img/circular/md/plano-baixo-esquerda.mp4
view/img/circular/md/plano-baixo-tras.mp4
view/img/circular/md/plano-cima-direita.mp4
view/img/circular/md/plano-cima-frente.mp4
view/img/circular/md/plano-direita-baixo.mp4
view/img/circular/md/plano-direita-tras.mp4
view/img/circular/md/plano-esquerda-cima.mp4
view/img/circular/md/plano-esquerda-frente.mp4
view/img/circular/md/plano-frente-baixo.mp4
view/img/circular/md/plano-frente-direita.mp4
view/img/circular/md/plano-tras-cima.mp4
view/img/circular/md/plano-tras-esquerda.mp4
view/img/circular/md/raio-grande.mp4
view/img/circular/md/raio-normal.mp4
view/img/circular/md/raio-pequeno.mp4
view/img/circular/md/sentido-anti-horario.mp4
view/img/circular/md/sentido-horario.mp4
view/img/circular/md/velocidade-lento.mp4
view/img/circular/md/velocidade-normal.mp4
@@ -8,6 +8,10 @@ body nav.navbar:first-child {
 	display: none;
 }
+.navbar-wl .navbar-nav {
+	padding-left: 60px;
+}
+
 footer {
 	display: none;
 }
@@ -534,6 +538,10 @@ ul.rig.columns-4 li {
 	width: 100%;
 }
+#thanks-screen a {
+	text-decoration: underline;
+}
+
 #completed-all-task-msg {
 	display: none;
 }
 (function(videoHelper, $, undefined) {
-	
+
+	function _getSource(videoBaseUrl) {
+		return '<source src="' + videoBaseUrl + '.webm" type="video/webm">'
+				+ '<source src="' + videoBaseUrl
+				+ '.mp4" type="video/mp4">Sem suporte a vídeos';
+	}
+
 	function _controlVideo(elId, toPlay) {
-		var videoSrc = $(elId).attr("src");
-		if (typeof videoSrc == "undefined" ||
-				(typeof videoSrc != "undefined" && videoSrc === ""))
+		if ($(elId).length === 0)
 			return;
 		if (toPlay) {
 			$(elId).get(0).play();
@@ -11,13 +15,17 @@
 			$(elId).get(0).pause();
 		}
 	}
-	
+
 	videoHelper.play = function(elId) {
 		_controlVideo(elId, true);
-	}
-	
-	 videoHelper.pause = function(elId) {
+	};
+
+	videoHelper.pause = function(elId) {
 		_controlVideo(elId, false);
-	}
+	};
+
+	videoHelper.getSource = function(videoBaseUrl) {
+		return _getSource(videoBaseUrl);
+	};
 }(window.videoHelper = window.videoHelper || {}, jQuery));
 (function(renderSign, $, undefined) {
-	
+
 	var api_url = '';
-	
+
 	function _submitParameterJSON(parsedParameterJSON, callback) {
 		console.log(parsedParameterJSON);
 		$.ajax({
@@ -18,14 +18,15 @@
 			}
 		});
 	}
-	
+
 	function _showRenderedAvatar(parameterJSON) {
 		var userId = parameterJSON['userId'];
 		var signName = parameterJSON['sinal'];
-		$("#render-avatar video").attr("src",
-				_getRenderedAvatarUrl(userId, signName));
+
+		var avatarBaseUrl = _getRenderedAvatarBaseUrl(userId, signName);
+		$('#render-avatar video').html(videoHelper.getSource(avatarBaseUrl));
 		$("#render-avatar").fadeIn(300);
-	}	
+	}
 	function _showRenderScreen(toShow) {
 		if (toShow) {
@@ -38,22 +39,22 @@
 			videoHelper.pause("#render-avatar video");
 		}
 	}
-	
-	function _getRenderedAvatarUrl(userId, signName) {
-		return api_url + '/public/' + userId + '/' + signName + ".webm";
+
+	function _getRenderedAvatarBaseUrl(userId, signName) {
+		return api_url + '/public/' + userId + '/' + signName;
 	}
-	
+
 	renderSign.showRenderedAvatar = function(parameterJSON) {
 		_showRenderedAvatar(parameterJSON);
 		_showRenderScreen(true);
 	}
-	
+
 	renderSign.showRenderScreen = function(toShow) {
 		_showRenderScreen(toShow);
 	}
-	
-	renderSign.getRenderedAvatarUrl = function(userId, signName) {
-		return _getRenderedAvatarUrl(userId, signName);
+
+	renderSign.getRenderedAvatarBaseUrl = function(userId, signName) {
+		return _getRenderedAvatarBaseUrl(userId, signName);
 	}
 	renderSign.submit = function(parsedParameterJSON) {
@@ -65,13 +66,14 @@
 		$("#finish-button").addClass("disabled");
 		$("#finish-button").show();
-		_submitParameterJSON(parsedParameterJSON, function(parsedParameterJSON) {
-			$("#render-loading").fadeOut(300);
-			$("#finish-button").removeClass("disabled");
-			_showRenderedAvatar(parsedParameterJSON);
-		});
+		_submitParameterJSON(parsedParameterJSON,
+				function(parsedParameterJSON) {
+					$("#render-loading").fadeOut(300);
+					$("#finish-button").removeClass("disabled");
+					_showRenderedAvatar(parsedParameterJSON);
+				});
 	};
-	
+
 	renderSign.setup = function(apiUrl) {
 		api_url = apiUrl;
 		$("#render-edit").off("click").on("click", function() {
 (function(submitSign, $, undefined) {
 	var submitUrl = '';
-	
+	var MIN_PHRASES_LENGTH = 3;
+	var MAX_PHRASES_LENGTH = 20;
+
 	function _isEmpty(str) {
 		return (!str || 0 === str.length);
 	}
-	function _validadeInputFields() {
+	function _alertSignName() {
+		$('#upload-warning-msg').hide();
 		var signName = $('#input-sign-name').val();
+		if (_isEmpty(signName)) {
+			$('#upload-warning-msg').html('Por favor indique o nome do sinal.');
+			$('#upload-warning-msg').show();
+		}
+	}
+
+	function _alertWordClass() {
+		$('#upload-warning-msg').hide();
+		var wordClass = $('#input-word-class').val();
+		if (_isEmpty(wordClass)) {
+			$('#upload-warning-msg').html(
+					'Por favor selecione a classe gramatical do sinal.');
+			$('#upload-warning-msg').show();
+		}
+	}
+
+	function _areValidPhrases(phrases) {
+		var cleanPhrases = phrases.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, "");
+		var splitPhrasesLength = cleanPhrases.trim().split(/\s+/g).length;
+		return splitPhrasesLength >= MIN_PHRASES_LENGTH
+				&& splitPhrasesLength <= MAX_PHRASES_LENGTH;
+	}
+
+	function _alertPhrase() {
+		$('#upload-warning-msg').hide();
+		var phrases = $('#input-phrases').val();
+		if (!_areValidPhrases(phrases)) {
+			$('#upload-warning-msg').html(
+					'As frases de exemplo devem possuir no minímo '
+							+ MIN_PHRASES_LENGTH + ' e no máximo '
+							+ MAX_PHRASES_LENGTH + ' palavras.');
+			$('#upload-warning-msg').show();
+		}
+	}
+
+	function _alertState() {
+		$('#upload-warning-msg').hide();
 		var state = $('#input-state').val();
+		if (_isEmpty(state)) {
+			$('#upload-warning-msg').html('Por favor selecione seu estado.');
+			$('#upload-warning-msg').show();
+		}
+	}
+
+	function _alertCity() {
+		$('#upload-warning-msg').hide();
 		var city = $('#input-city').val();
+		if (_isEmpty(city)) {
+			$('#upload-warning-msg').html(
+					'Por favor indique o nome da sua cidade.');
+			$('#upload-warning-msg').show();
+		}
+	}
+
+	function _alertSignUpload() {
+		$('#upload-warning-msg').hide();
 		var signUpload = $('#input-sign-upload').val();
-		return !_isEmpty(signName) && !_isEmpty(state) && !_isEmpty(city)
-				&& !_isEmpty(signUpload);
+		if (_isEmpty(signUpload)) {
+			$('#upload-warning-msg').html(
+					'Por favor selecione o arquivo do vídeo do seu sinal.');
+			$('#upload-warning-msg').show();
+		}
+	}
+
+	function _validadeAllFields() {
+		var signName = $('#input-sign-name').val();
+		var wordClass = $('#input-word-class').val();
+		var phrases = $('#input-phrases').val();
+		var state = $('#input-state').val();
+		var city = $('#input-city').val();
+		var signUpload = $('#input-sign-upload').val();
+		return !_isEmpty(signName) && !_isEmpty(wordClass)
+				&& _areValidPhrases(phrases) && !_isEmpty(state)
+				&& !_isEmpty(city) && !_isEmpty(signUpload);
 	}
 	function _updateSubmitButton() {
-		if (_validadeInputFields()) {
-			$('#submit-sign-container button').removeClass('disabled');
+		if (_validadeAllFields()) {
+			_enableSubmitButton();
 		} else {
-			$('#submit-sign-container button').addClass('disabled');
+			_disableSubmitButton();
 		}
 	}
-	
+
+	function _enableSubmitButton() {
+		$('#submit-sign-container button').removeClass('disabled');
+		$('#submit-sign-container button').off('click');
+	}
+
+	function _disableSubmitButton() {
+		$('#submit-sign-container button').addClass('disabled');
+		$('#submit-sign-container button').on('click', function(event) {
+			event.preventDefault();
+		});
+	}
+
 	function _resetFormFields() {
 		$('#input-sign-name').val('');
 		$('#input-state').val('');
 		$('#input-city').val('');
 		$('#input-sign-upload').val('');
 		$("#upload-progress .progress-bar").css("width", "0px");
-    	$('#upload-progress-container').hide();
+		$('#upload-progress-container').hide();
 		$('#input-sign-upload').show();
 	}
-	
-	submitSign.show = function() {
-		$(".sub-main-container").hide();
-		$("#submit-sign-container").show();
-		$("#submit-sign-anchor").focus();
-	}
-	submitSign.setup = function(uploadSignHost) {
-		submitUrl = uploadSignHost;
+	function _setupSubmitSignForm() {
+		_disableSubmitButton();
 		$('#submit-sign-container form').fileupload(
 				{
 					url : submitUrl,
-				    add: function (e, data) {            
-				        $('#submit-sign-container button').off('click').on('click', function (event) {
-				        	event.preventDefault();
-				        	
-				        	$('#submit-sign-container button').addClass('disabled');
-				        	$('#input-sign-upload').hide();
-				        	$('#upload-progress-container').show();
-				        	data.submit();
-				        });
-				    },
+					add : function(e, data) {
+						$('#submit-sign-container button').off('click').on(
+								'click',
+								function(event) {
+									event.preventDefault();
+
+									$('#submit-sign-container button')
+											.addClass('disabled');
+									$('#input-sign-upload').hide();
+									$('#upload-progress-container').show();
+									data.submit();
+								});
+					},
 					done : function(e, data) {
 						$('#upload-success-msg').fadeIn(500);
 						setTimeout(function() {
@@ -64,27 +145,52 @@
 					progressall : function(e, data) {
 						var progress = parseInt(data.loaded / data.total * 100,
 								10);
-						$("#upload-progress .progress-bar").attr('aria-valuenow', progress).
-							css("width", progress + "%");
+						$("#upload-progress .progress-bar").attr(
+								'aria-valuenow', progress).css("width",
+								progress + "%");
 					},
 					error : function(error) {
 						alert(error.responseText);
 					},
-					replaceFileInput: false
+					replaceFileInput : false
 				});
 		$('#input-sign-name').on('input', function() {
+			_alertSignName();
+			_updateSubmitButton();
+		});
+		$('#input-word-class').on('input', function() {
+			_alertWordClass();
+			_updateSubmitButton();
+		});
+		$('#input-phrases').on('input', function() {
+			_alertPhrase();
 			_updateSubmitButton();
 		});
 		$('#input-state').on('input', function() {
+			_alertState();
 			_updateSubmitButton();
 		});
 		$('#input-city').on('input', function() {
+			_alertCity();
 			_updateSubmitButton();
 		});
 		$('#input-sign-upload').on('change', function() {
+			_alertSignUpload();
 			_updateSubmitButton();
 		});
+	}
+
+	submitSign.show = function() {
+		$(".sub-main-container").hide();
+		$("#submit-sign-container").show();
+		$("#submit-sign-anchor").focus();
+	};
+
+	submitSign.setup = function(uploadSignHost) {
+		submitUrl = uploadSignHost;
+		loadHtmlHelper.load('/submit-sign/submit-sign.html',
+				'#submit-sign-container', _setupSubmitSignForm);
 	};
 }(window.submitSign = window.submitSign || {}, jQuery));
@@ -6,20 +6,20 @@
 	var projectId = -1;
 	function _updateTeachedSignsMessage() {
-		$(".teached-signs-msg").hide();
+		$('.teached-signs-msg').hide();
 		if (doneTasks == 0) {
-			$(".teached-signs-msg[type=none]").show();
+			$('.teached-signs-msg[type=none]').show();
 		} else if (doneTasks == 1) {
-			$(".teached-signs-msg[type=one]").show();
+			$('.teached-signs-msg[type=one]').show();
 		} else {
-			$(".teached-signs-msg[type=more] span").text(doneTasks);
-			$(".teached-signs-msg[type=more]").show();
+			$('.teached-signs-msg[type=more] span').text(doneTasks);
+			$('.teached-signs-msg[type=more]').show();
 		}
 	}
 	function _createSigns(answers) {
 		_updateTeachedSignsMessage();
-		$("#signs-list-container").html("");
+		$('#signs-list-container').html('');
 		for (i = 0; i < answers.length; i++) {
 			_addSign(answers[i].info);
 		}
@@ -28,25 +28,24 @@
 	function _addSign(answer) {
 		var signName = answer.parameter_json.sinal;
 		var apiUserId = answer.parameter_json.userId;
-		var videoUrl = renderSign.getRenderedAvatarUrl(apiUserId, signName);
-		$("#signs-list-container").append(
+		var videoBaseUrl = renderSign.getRenderedAvatarBaseUrl(apiUserId,
+				signName);
+		$('#signs-list-container').append(
 				'<div class="col-btn col-xs-6 col-sm-3 col-md-2" sign-name="'
 						+ signName
 						+ '"><button class="btn btn-danger btn-block">'
 						+ signName + '</button></div>');
-		$("#signs-list-container .col-btn[sign-name=" + signName + "]")
-				.off("click")
-				.on(
-						"click",
-						function() {
-							$('#teached-sign-video-container')
-									.html(
-											"<video autoplay loop><source src='"
-													+ videoUrl
-													+ "' type='video/webm'>Sem suporte a vídeos</video>");
-							$('#teached-sign-name').html(signName);
-							$('#teached-sign-modal').modal('show');
-						});
+		$('#signs-list-container .col-btn[sign-name=' + signName + ']').off(
+				'click').on(
+				'click',
+				function() {
+					$('#teached-sign-video-container').html(
+							'<video autoplay loop>'
+									+ videoHelper.getSource(videoBaseUrl)
+									+ '</video>');
+					$('#teached-sign-name').html(signName);
+					$('#teached-sign-modal').modal('show');
+				});
 	}
 	function _updateTeachedSignsContainer() {
@@ -56,13 +55,13 @@
 	}
 	teachedSigns.show = function() {
-		$(".sub-main-container").hide();
-		$("#teached-signs-container").show();
+		$('.sub-main-container').hide();
+		$('#teached-signs-container').show();
 	}
 	teachedSigns.setup = function() {
 		pybossaApiHelper.getProjectId().done(function(response) {
-			if (typeof response == "undefined" || response.length < 1) {
+			if (typeof response == 'undefined' || response.length < 1) {
 				return;
 			}
 			projectId = response[0].id;
@@ -33,10 +33,9 @@
 	function _loadTaskInfo(task) {
 		currentTaskId = task.id;
 		var signName = task.info.sign_name;
-		var refVidLink = videosUrl + signName + '_REF.webm';
+		var baseRefVidUrl = videosUrl + signName + '_REF';
 		$('.sign-label').text(signName);
-		$('.ref-video').attr('src', refVidLink);
-
+		$('.ref-video').html(videoHelper.getSource(baseRefVidUrl));
 		_setupTmpParameterJSON(task.info.sign_name);
 	}
@@ -4,30 +4,33 @@
 	</div>
 	<div class="single-column-option-container">
 		<div class="single-column-option">
-			<video src="{{ server }}/img/exf/duration-slow.webm"
+			<video
 				preload="metadata" value="lento"
 				class="video-panel-option selection-panel-option" autoplay loop>
-				<source type="video/webm">
+				<source src="{{ server }}/img/exf/duration-slow.webm" type="video/webm">
+				<source src="{{ server }}/img/exf/duration-slow.mp4" type="video/mp4">
 		</div>
 		<img class="single-column-option"
 			src="{{ server }}/img/long-duration-icon.png" /> Longa
 	</div>
 	<div class="single-column-option-container">
 		<div class="single-column-option">
-			<video src="{{ server }}/img/exf/duration-normal.webm"
+			<video
 				preload="metadata" value="normal"
 				class="video-panel-option selection-panel-option" autoplay loop>
-				<source type="video/webm">
+				<source src="{{ server }}/img/exf/duration-normal.webm" type="video/webm">
+				<source src="{{ server }}/img/exf/duration-normal.mp4" type="video/mp4">
 		</div>
 		<img class="single-column-option"
 			src="{{ server }}/img/normal-duration-icon.png" /> Normal
 	</div>
 	<div class="single-column-option-container">
 		<div class="single-column-option">
-			<video src="{{ server }}/img/exf/duration-fast.webm"
+			<video
 				preload="metadata" value="rapido"
 				class="video-panel-option selection-panel-option" autoplay loop>
-				<source type="video/webm">
+				<source src="{{ server }}/img/exf/duration-fast.webm" type="video/webm">
+				<source src="{{ server }}/img/exf/duration-fast.mp4" type="video/mp4">
 		</div>
 		<img class="single-column-option"
 			src="{{ server }}/img/short-duration-icon.png" /> Breve
@@ -5,30 +5,33 @@
 	</div>
 	<div class="single-column-option-container">
 		<div class="single-column-option">
-			<video src="{{ server }}/img/exf/velocity-slow.webm"
+			<video
 				preload="metadata" value="lento"
 				class="video-panel-option selection-panel-option" autoplay loop>
-				<source type="video/webm">
+				<source src="{{ server }}/img/exf/velocity-slow.webm" type="video/webm">
+				<source src="{{ server }}/img/exf/velocity-slow.mp4" type="video/mp4">
 		</div>
 		<img class="single-column-option"
 			src="{{ server }}/img/slow-velocity-icon.png" /> Lento
 	</div>
 	<div class="single-column-option-container">
 		<div class="single-column-option">
-			<video src="{{ server }}/img/exf/velocity-normal.webm"
+			<video
 				preload="metadata" value="normal"
 				class="video-panel-option selection-panel-option" autoplay loop>
-				<source type="video/webm">
+				<source src="{{ server }}/img/exf/velocity-normal.webm" type="video/webm">
+				<source src="{{ server }}/img/exf/velocity-normal.mp4" type="video/mp4">
 		</div>
 		<img class="single-column-option"
 			src="{{ server }}/img/normal-velocity-icon.png" /> Normal
 	</div>
 	<div class="single-column-option-container">
 		<div class="single-column-option">
-			<video src="{{ server }}/img/exf/velocity-fast.webm"
+			<video
 				preload="metadata" value="rapido"
 				class="video-panel-option selection-panel-option" autoplay loop>
-				<source type="video/webm">
+				<source src="{{ server }}/img/exf/velocity-fast.webm" type="video/webm">
+				<source src="{{ server }}/img/exf/velocity-fast.mp4" type="video/mp4">
 		</div>
 		<img class="single-column-option"
 			src="{{ server }}/img/fast-velocity-icon.png" /> Rápido
@@ -5,36 +5,30 @@
 	</div>
 	<div class="selection-panel-inner-body">
 		<ul class="rig columns-2">
-			<li><video src="{{ server }}/img/mov/PONTUAL.webm"
+			<li><video 
 					preload="metadata" value="pontual"
 					class="video-panel-option selection-panel-option" autoplay loop>
-					<source type="video/webm">
+					<source src="{{ server }}/img/mov/PONTUAL.webm" type="video/webm">
+					<source src="{{ server }}/img/mov/PONTUAL.mp4" type="video/mp4">
 				</video> Pontual</li>
-			<li><video src="{{ server }}/img/mov/RETILINEO.webm"
+			<li><video
 					preload="metadata" value="retilineo"
 					class="video-panel-option selection-panel-option" autoplay loop>
-					<source type="video/webm">
+					<source src="{{ server }}/img/mov/RETILINEO.webm" type="video/webm">
+					<source src="{{ server }}/img/mov/RETILINEO.mp4" type="video/mp4">
 				</video> Retilíneo</li>
-			<li><video src="{{ server }}/img/mov/CIRCULAR.webm"
+			<li><video
 					preload="metadata" value="circular"
 					class="video-panel-option selection-panel-option" autoplay loop>
-					<source type="video/webm">
+					<source src="{{ server }}/img/mov/CIRCULAR.webm" type="video/webm">
+					<source src="{{ server }}/img/mov/CIRCULAR.mp4" type="video/mp4">					
 				</video> Circular</li>
-			<li><video src="{{ server }}/img/mov/SEMICIRCULAR.webm"
+			<li><video
 					preload="metadata" value="semicircular"
 					class="video-panel-option selection-panel-option" autoplay loop>
-					<source type="video/webm">
+					<source src="{{ server }}/img/mov/SEMICIRCULAR.webm" type="video/webm">
+					<source src="{{ server }}/img/mov/SEMICIRCULAR.mp4" type="video/mp4">
 				</video> Semi-Circular</li>
-			<!--
-      <li><img class="video-panel-option selection-panel-option"
-        src="{{ server }}/img/exf/0000.png" value="semicircular"/>Semi-Circular</li>
-      <li><img class="video-panel-option selection-panel-option"
-        src="{{ server }}/img/exf/0000.png" value="helicoidal"/>Espiral</li>
-      <li><img class="video-panel-option selection-panel-option"
-        src="{{ server }}/img/exf/0000.png" value="senoidal"/>Curvas</li>
-      <li><img class="video-panel-option selection-panel-option"
-        src="{{ server }}/img/exf/0000.png" value="contato"/>Contato</li>
-         -->
 		</ul>
 	</div>
 </div>
@@ -6,76 +6,76 @@
 	<div class="selection-panel-inner-body">
 		<ul class="rig columns-2">
 			<li><video
-					src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-baixo-esquerda.webm"
 					preload="metadata" value="baixo-esquerda"
 					class="box-panel-option selection-panel-option" autoplay>
-					<source type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-baixo-esquerda.webm" type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-baixo-esquerda.mp4" type="video/mp4">
 				</video>Baixo - Direita</li>
 			<li><video
-					src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-cima-direita.webm"
 					preload="metadata" value="cima-direita"
 					class="box-panel-option selection-panel-option" autoplay>
-					<source type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-cima-direita.webm" type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-cima-direita.mp4" type="video/mp4">
 				</video>Cima - Esquerda</li>
 			<li><video
-					src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-direita-baixo.webm"
 					preload="metadata" value="direita-baixo"
 					class="box-panel-option selection-panel-option" autoplay>
-					<source type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-direita-baixo.webm" type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-direita-baixo.mp4" type="video/mp4">
 				</video>Esquerda - Baixo</li>
 			<li><video
-					src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-esquerda-cima.webm"
 					preload="metadata" value="esquerda-cima"
 					class="box-panel-option selection-panel-option" autoplay>
-					<source type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-esquerda-cima.webm" type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-esquerda-cima.mp4" type="video/mp4">
 				</video>Direita - Cima</li>
 			<li><video
-					src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-baixo-tras.webm"
 					preload="metadata" value="baixo-tras"
 					class="box-panel-option selection-panel-option" autoplay>
-					<source type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-baixo-tras.webm" type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-baixo-tras.mp4" type="video/mp4">
 				</video>Baixo - Trás</li>
 			<li><video
-					src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-cima-frente.webm"
 					preload="metadata" value="cima-frente"
 					class="box-panel-option selection-panel-option" autoplay>
-					<source type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-cima-frente.webm" type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-cima-frente.mp4" type="video/mp4">
 				</video>Cima - Frente</li>
 			<li><video
-					src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-frente-baixo.webm"
 					preload="metadata" value="frente-baixo"
 					class="box-panel-option selection-panel-option" autoplay>
-					<source type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-frente-baixo.webm" type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-frente-baixo.mp4" type="video/mp4">
 				</video>Frente - Baixo</li>
 			<li><video
-					src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-tras-cima.webm"
 					preload="metadata" value="tras-cima"
 					class="box-panel-option selection-panel-option" autoplay>
-					<source type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-tras-cima.webm" type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-tras-cima.mp4" type="video/mp4">
 				</video>Trás - Cima</li>
 			<li><video
-					src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-frente-direita.webm"
 					preload="metadata" value="frente-direita"
 					class="box-panel-option selection-panel-option" autoplay>
-					<source type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-frente-direita.webm" type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-frente-direita.mp4" type="video/mp4">
 				</video>Frente - Esquerda</li>
 			<li><video
-					src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-tras-esquerda.webm"
 					preload="metadata" value="tras-esquerda"
 					class="box-panel-option selection-panel-option" autoplay>
-					<source type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-tras-esquerda.webm" type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-tras-esquerda.mp4" type="video/mp4">
 				</video>Trás - Direita</li>	
 			<li><video
-					src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-direita-tras.webm"
 					preload="metadata" value="direita-tras"
 					class="box-panel-option selection-panel-option" autoplay>
-					<source type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-direita-tras.webm" type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-direita-tras.mp4" type="video/mp4">
 				</video>Esquerda - Trás</li>
 			<li><video
-					src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-esquerda-frente.webm"
 					preload="metadata" value="esquerda-frente"
 					class="box-panel-option selection-panel-option" autoplay>
-					<source type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-esquerda-frente.webm" type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-esquerda-frente.mp4" type="video/mp4">
 				</video>Direita - Frente</li>
 		</ul>
 	</div>
1	(function(submitSign, $, undefined) {	1	(function(submitSign, $, undefined) {
2		2
3	var submitUrl = '';	3	var submitUrl = '';
4	-	4	+ var MIN_PHRASES_LENGTH = 3;
		5	+ var MAX_PHRASES_LENGTH = 20;
		6	+
5	function _isEmpty(str) {	7	function _isEmpty(str) {
6	return (!str \|\| 0 === str.length);	8	return (!str \|\| 0 === str.length);
7	}	9	}
8		10
9	- function _validadeInputFields() {	11	+ function _alertSignName() {
		12	+ $('#upload-warning-msg').hide();
10	var signName = $('#input-sign-name').val();	13	var signName = $('#input-sign-name').val();
		14	+ if (_isEmpty(signName)) {
		15	+ $('#upload-warning-msg').html('Por favor indique o nome do sinal.');
		16	+ $('#upload-warning-msg').show();
		17	+ }
		18	+ }
		19	+
		20	+ function _alertWordClass() {
		21	+ $('#upload-warning-msg').hide();
		22	+ var wordClass = $('#input-word-class').val();
		23	+ if (_isEmpty(wordClass)) {
		24	+ $('#upload-warning-msg').html(
		25	+ 'Por favor selecione a classe gramatical do sinal.');
		26	+ $('#upload-warning-msg').show();
		27	+ }
		28	+ }
		29	+
		30	+ function _areValidPhrases(phrases) {
		31	+ var cleanPhrases = phrases.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, "");
		32	+ var splitPhrasesLength = cleanPhrases.trim().split(/\s+/g).length;
		33	+ return splitPhrasesLength >= MIN_PHRASES_LENGTH
		34	+ && splitPhrasesLength <= MAX_PHRASES_LENGTH;
		35	+ }
		36	+
		37	+ function _alertPhrase() {
		38	+ $('#upload-warning-msg').hide();
		39	+ var phrases = $('#input-phrases').val();
		40	+ if (!_areValidPhrases(phrases)) {
		41	+ $('#upload-warning-msg').html(
		42	+ 'As frases de exemplo devem possuir no minímo '
		43	+ + MIN_PHRASES_LENGTH + ' e no máximo '
		44	+ + MAX_PHRASES_LENGTH + ' palavras.');
		45	+ $('#upload-warning-msg').show();
		46	+ }
		47	+ }
		48	+
		49	+ function _alertState() {
		50	+ $('#upload-warning-msg').hide();
11	var state = $('#input-state').val();	51	var state = $('#input-state').val();
		52	+ if (_isEmpty(state)) {
		53	+ $('#upload-warning-msg').html('Por favor selecione seu estado.');
		54	+ $('#upload-warning-msg').show();
		55	+ }
		56	+ }
		57	+
		58	+ function _alertCity() {
		59	+ $('#upload-warning-msg').hide();
12	var city = $('#input-city').val();	60	var city = $('#input-city').val();
		61	+ if (_isEmpty(city)) {
		62	+ $('#upload-warning-msg').html(
		63	+ 'Por favor indique o nome da sua cidade.');
		64	+ $('#upload-warning-msg').show();
		65	+ }
		66	+ }
		67	+
		68	+ function _alertSignUpload() {
		69	+ $('#upload-warning-msg').hide();
13	var signUpload = $('#input-sign-upload').val();	70	var signUpload = $('#input-sign-upload').val();
14	- return !_isEmpty(signName) && !_isEmpty(state) && !_isEmpty(city)
15	- && !_isEmpty(signUpload);	71	+ if (_isEmpty(signUpload)) {
		72	+ $('#upload-warning-msg').html(
		73	+ 'Por favor selecione o arquivo do vídeo do seu sinal.');
		74	+ $('#upload-warning-msg').show();
		75	+ }
		76	+ }
		77	+
		78	+ function _validadeAllFields() {
		79	+ var signName = $('#input-sign-name').val();
		80	+ var wordClass = $('#input-word-class').val();
		81	+ var phrases = $('#input-phrases').val();
		82	+ var state = $('#input-state').val();
		83	+ var city = $('#input-city').val();
		84	+ var signUpload = $('#input-sign-upload').val();
		85	+ return !_isEmpty(signName) && !_isEmpty(wordClass)
		86	+ && _areValidPhrases(phrases) && !_isEmpty(state)
		87	+ && !_isEmpty(city) && !_isEmpty(signUpload);
16	}	88	}
17		89
18	function _updateSubmitButton() {	90	function _updateSubmitButton() {
19	- if (_validadeInputFields()) {
20	- $('#submit-sign-container button').removeClass('disabled');	91	+ if (_validadeAllFields()) {
		92	+ _enableSubmitButton();
21	} else {	93	} else {
22	- $('#submit-sign-container button').addClass('disabled');	94	+ _disableSubmitButton();
23	}	95	}
24	}	96	}
25	-	97	+
		98	+ function _enableSubmitButton() {
		99	+ $('#submit-sign-container button').removeClass('disabled');
		100	+ $('#submit-sign-container button').off('click');
		101	+ }
		102	+
		103	+ function _disableSubmitButton() {
		104	+ $('#submit-sign-container button').addClass('disabled');
		105	+ $('#submit-sign-container button').on('click', function(event) {
		106	+ event.preventDefault();
		107	+ });
		108	+ }
		109	+
26	function _resetFormFields() {	110	function _resetFormFields() {
27	$('#input-sign-name').val('');	111	$('#input-sign-name').val('');
28	$('#input-state').val('');	112	$('#input-state').val('');
29	$('#input-city').val('');	113	$('#input-city').val('');
30	$('#input-sign-upload').val('');	114	$('#input-sign-upload').val('');
31	$("#upload-progress .progress-bar").css("width", "0px");	115	$("#upload-progress .progress-bar").css("width", "0px");
32	- $('#upload-progress-container').hide();	116	+ $('#upload-progress-container').hide();
33	$('#input-sign-upload').show();	117	$('#input-sign-upload').show();
34	}	118	}
35	-
36	- submitSign.show = function() {
37	- $(".sub-main-container").hide();
38	- $("#submit-sign-container").show();
39	- $("#submit-sign-anchor").focus();
40	- }
41		119
42	- submitSign.setup = function(uploadSignHost) {
43	- submitUrl = uploadSignHost;	120	+ function _setupSubmitSignForm() {
		121	+ _disableSubmitButton();
44	$('#submit-sign-container form').fileupload(	122	$('#submit-sign-container form').fileupload(
45	{	123	{
46	url : submitUrl,	124	url : submitUrl,
47	- add: function (e, data) {
48	- $('#submit-sign-container button').off('click').on('click', function (event) {
49	- event.preventDefault();
50	-
51	- $('#submit-sign-container button').addClass('disabled');
52	- $('#input-sign-upload').hide();
53	- $('#upload-progress-container').show();
54	- data.submit();
55	- });
56	- },	125	+ add : function(e, data) {
		126	+ $('#submit-sign-container button').off('click').on(
		127	+ 'click',
		128	+ function(event) {
		129	+ event.preventDefault();
		130	+
		131	+ $('#submit-sign-container button')
		132	+ .addClass('disabled');
		133	+ $('#input-sign-upload').hide();
		134	+ $('#upload-progress-container').show();
		135	+ data.submit();
		136	+ });
		137	+ },
57	done : function(e, data) {	138	done : function(e, data) {
58	$('#upload-success-msg').fadeIn(500);	139	$('#upload-success-msg').fadeIn(500);
59	setTimeout(function() {	140	setTimeout(function() {
	@@ -64,27 +145,52 @@		@@ -64,27 +145,52 @@
64	progressall : function(e, data) {	145	progressall : function(e, data) {
65	var progress = parseInt(data.loaded / data.total * 100,	146	var progress = parseInt(data.loaded / data.total * 100,
66	10);	147	10);
67	- $("#upload-progress .progress-bar").attr('aria-valuenow', progress).
68	- css("width", progress + "%");	148	+ $("#upload-progress .progress-bar").attr(
		149	+ 'aria-valuenow', progress).css("width",
		150	+ progress + "%");
69	},	151	},
70	error : function(error) {	152	error : function(error) {
71	alert(error.responseText);	153	alert(error.responseText);
72	},	154	},
73	- replaceFileInput: false	155	+ replaceFileInput : false
74	});	156	});
75		157
76	$('#input-sign-name').on('input', function() {	158	$('#input-sign-name').on('input', function() {
		159	+ _alertSignName();
		160	+ _updateSubmitButton();
		161	+ });
		162	+ $('#input-word-class').on('input', function() {
		163	+ _alertWordClass();
		164	+ _updateSubmitButton();
		165	+ });
		166	+ $('#input-phrases').on('input', function() {
		167	+ _alertPhrase();
77	_updateSubmitButton();	168	_updateSubmitButton();
78	});	169	});
79	$('#input-state').on('input', function() {	170	$('#input-state').on('input', function() {
		171	+ _alertState();
80	_updateSubmitButton();	172	_updateSubmitButton();
81	});	173	});
82	$('#input-city').on('input', function() {	174	$('#input-city').on('input', function() {
		175	+ _alertCity();
83	_updateSubmitButton();	176	_updateSubmitButton();
84	});	177	});
85	$('#input-sign-upload').on('change', function() {	178	$('#input-sign-upload').on('change', function() {
		179	+ _alertSignUpload();
86	_updateSubmitButton();	180	_updateSubmitButton();
87	});	181	});
		182	+ }
		183	+
		184	+ submitSign.show = function() {
		185	+ $(".sub-main-container").hide();
		186	+ $("#submit-sign-container").show();
		187	+ $("#submit-sign-anchor").focus();
		188	+ };
		189	+
		190	+ submitSign.setup = function(uploadSignHost) {
		191	+ submitUrl = uploadSignHost;
		192	+ loadHtmlHelper.load('/submit-sign/submit-sign.html',
		193	+ '#submit-sign-container', _setupSubmitSignForm);
88	};	194	};
89		195
90	}(window.submitSign = window.submitSign \|\| {}, jQuery));	196	}(window.submitSign = window.submitSign \|\| {}, jQuery));