Subversion Repositories bacoAlunos

Compare Revisions

Ignore whitespace Rev 2065 → Rev 2068

/es2018/jmachado/src/web/exemplos/comSlide.jsp
New file
0,0 → 1,196
<%@ page import="org.json.JSONObject" %>
<%@ page import="org.json.JSONArray" %>
<%@ page import="pt.estgp.es.exemplos.hibernate.Seccao" %>
<%@ page import="pt.estgp.es.exemplos.hibernate.SeccaoImpl" %>
<%@ page import="java.util.List" %>
<%@ page import="java.util.ArrayList" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
 
<html>
<head>
</head>
<body >
 
 
<!-- MINIMO USANDO TILES DAQUI PARA DIANTE-->
 
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
 
 
<script type="text/javascript" src="<%=request.getContextPath()%>/exemplos/angular-pageslide-directive.js"></script>
 
 
<script src="<%=request.getContextPath()%>/js/rest-layer.js"></script>
 
 
 
<style>
.ng-pageslide{
background-color: rgb(230,230,181);
overflow: scroll;
}
body.ng-pageslide-body-open::before{
content: '.';
display: block;
position: absolute;
top: 0;
background-color: rgb(230,230,181);
left: 0;
right: 0;
bottom: 0;
z-index: 1;
opacity: 0.5;
transition: opacity 1s;
opacity: 0.57;
pointer-events: all;
}
 
body.ng-pageslide-body-closed::before{
transition: opacity 1s;
content: '.';
display: block;
position: absolute;
top: 0;
background-color: rgb(0,0,0);
left: 0;
right: 0;
bottom: 0;
z-index: 1;
opacity: 0;
pointer-events: none;
}
</style>
 
<div ng-app="testePageSlide" ng-controller="testePageSlideController" id="testePageSlide">
 
 
<%
 
Seccao s1 = new SeccaoImpl();
s1.setTitulo("Teste 1");
s1.setId(1);
 
Seccao s2 = new SeccaoImpl();
s2.setTitulo("Teste 2");
s2.setId(2);
 
List<Seccao> seccoes = new ArrayList<>();
seccoes.add(s1);
seccoes.add(s2);
 
JSONObject js = new JSONObject();
JSONArray arr = new JSONArray();
 
for(Seccao s : seccoes)
{
JSONObject sobj1 = new JSONObject();
sobj1.put("titulo",s.getTitulo());
sobj1.put("id",s.getId());
arr.put(sobj1);
}
 
js.put("seccoes",arr);
 
 
%>
 
<script>
var testePageSlide = angular.module('testePageSlide', ['pageslide-directive']);
 
 
testePageSlide.controller('testePageSlideController', function ($scope)
{
$scope.seccoes = <%=js.toString()%>;
$scope.seccaoEdit = null;
$scope.inSlide = "Hello Slide";
$scope.slideOpened = false;
$scope.isSlideOpened = function() { return $scope.slideOpened; };
$scope.openSlide = function() { $scope.slideOpened = true; };
$scope.closeSlide = function() { $scope.slideOpened = false; };
$scope.toogleSlide = function() { $scope.slideOpened = !$scope.slideOpened; };
 
 
$scope.editSeccao = function(s) {
$scope.seccaoEdit = s;
$scope.openSlide();
};
 
 
 
 
 
$scope.saveSeccao = function(s){
 
rest(
"<%=request.getContextPath()%>/ws/api/login",
"saveSeccao",
{
seccao: s
},
"#testePageSlide",
function(resposta){
alert("ok:" + resposta.result);
$scope.closeSlide();
$scope.$apply();
},
function(resposta){
alert("ok:" + resposta);
}
);
}
 
 
 
 
 
});
</script>
 
<div class="web-messages"></div>
 
<div id="slide" pageslide <%--ps-push="true"--%> ps-open="isSlideOpened()" ps-size="50%" <%--ps-size="1000px"--%> style="max-width: 100%;" ps-key-listener="false" ps-click-outside="false">
<div class="web-messages"></div>
<h1>{{inSlide}}</h1>
 
ID: {{seccaoEdit.id}}
<br/>
TITULO: <input type="text" ng-model="seccaoEdit.titulo">
<button ng-click="saveSeccao(seccaoEdit)">Salvar</button>
<button ng-click="toogleSlide()">Toggle Slide</button>
</div>
 
<button ng-click="openSlide()">Open Slide</button>
<button ng-click="toogleSlide()">Toggle Slide</button>
 
 
<table>
<thead>
<tr>
<th>ID</th>
<th>TITULO</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="s in seccoes.seccoes">
<th>{{s.id}}</th>
<th>{{s.titulo}}</th>
<th><button type="button" ng-click="editSeccao(s)">EDITAR</button></th>
</tr>
</tbody>
</table>
 
<pre>
{{seccoes | json}}
</pre>
 
 
</div>
<!-- FIM DO MINIMO PARA PAGESLIDE USANDO TILES-->
 
</body>
</html>
/es2018/jmachado/src/web/exemplos/angular-pageslide-directive.js
New file
0,0 → 1,332
 
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
define(['angular'], factory);
} else if (typeof module === 'object' && module.exports) {
module.exports = factory(require('angular'));
} else {
factory(root.angular);
}
}(this, function (angular) {
 
angular
.module('pageslide-directive', [])
.directive('pageslide', ['$document', '$timeout', function ($document, $timeout) {
var defaults = {};
 
 
return {
restrict: 'EA',
transclude: false,
scope: {
psOpen: '=?',
psAutoClose: '@',
psSide: '@',
psSpeed: '@',
psClass: '@',
psSize: '@',
psZindex: '@',
psPush: '@',
psContainer: '@',
psKeyListener: '@',
psBodyClass: '@',
psClickOutside: '@',
onopen: '&?',
onclose: '&?'
},
link: function (scope, el, attrs) {
 
var param = {};
 
param.side = scope.psSide || 'right';
param.speed = scope.psSpeed || '0.5';
param.size = scope.psSize || '300px';
param.zindex = scope.psZindex || 1000;
param.className = scope.psClass || 'ng-pageslide';
param.push = scope.psPush === 'true';
param.container = scope.psContainer || false;
param.keyListener = scope.psKeyListener === 'true';
param.bodyClass = scope.psBodyClass || false;
param.clickOutside = scope.psClickOutside !== 'false';
param.autoClose = scope.psAutoClose || false;
 
param.push = param.push && !param.container;
 
el.addClass(param.className);
 
/* DOM manipulation */
 
var content, slider, body, isOpen = false;
 
if (param.container) {
body = document.getElementById(param.container);
} else {
body = document.body;
}
 
function onBodyClick(e) {
var target = e.touches && e.touches[0] || e.target;
if(
isOpen &&
body.contains(target) &&
!slider.contains(target)
) {
isOpen = false;
scope.psOpen = false;
scope.$apply();
}
 
if(scope.psOpen) {
isOpen = true;
}
}
 
function setBodyClass(value){
if (param.bodyClass) {
var bodyClass = param.className + '-body';
var bodyClassRe = new RegExp(bodyClass + '-closed|' + bodyClass + '-open');
body.className = body.className.replace(bodyClassRe, '');
var newBodyClassName = bodyClass + '-' + value;
if (body.className[body.className.length -1] !== ' ') {
body.className += ' ' + newBodyClassName;
} else {
body.className += newBodyClassName;
}
}
}
 
setBodyClass('closed');
 
slider = el[0];
 
if (slider.tagName.toLowerCase() !== 'div' &&
slider.tagName.toLowerCase() !== 'pageslide') {
throw new Error('Pageslide can only be applied to <div> or <pageslide> elements');
}
 
if (slider.children.length === 0) {
throw new Error('You need to have content inside the <pageslide>');
}
 
content = angular.element(slider.children);
 
body.appendChild(slider);
 
slider.style.zIndex = param.zindex;
slider.style.position = 'fixed';
slider.style.transitionDuration = param.speed + 's';
slider.style.webkitTransitionDuration = param.speed + 's';
slider.style.height = param.size;
slider.style.transitionProperty = 'top, bottom, left, right';
 
if (param.push) {
body.style.position = 'absolute';
body.style.transitionDuration = param.speed + 's';
body.style.webkitTransitionDuration = param.speed + 's';
body.style.transitionProperty = 'top, bottom, left, right';
}
 
if (param.container) {
slider.style.position = 'absolute';
body.style.position = 'relative';
body.style.overflow = 'hidden';
}
 
function onTransitionEnd() {
if (scope.psOpen) {
if (typeof scope.onopen === 'function') {
scope.onopen()();
}
} else {
if (typeof scope.onclose === 'function') {
scope.onclose()();
}
}
}
 
slider.addEventListener('transitionend', onTransitionEnd);
 
initSlider();
 
function initSlider() {
switch (param.side) {
case 'right':
slider.style.width = param.size;
slider.style.height = '100%';
slider.style.top = '0px';
slider.style.bottom = '0px';
slider.style.right = '0px';
break;
case 'left':
slider.style.width = param.size;
slider.style.height = '100%';
slider.style.top = '0px';
slider.style.bottom = '0px';
slider.style.left = '0px';
break;
case 'top':
slider.style.height = param.size;
slider.style.width = '100%';
slider.style.left = '0px';
slider.style.top = '0px';
slider.style.right = '0px';
break;
case 'bottom':
slider.style.height = param.size;
slider.style.width = '100%';
slider.style.bottom = '0px';
slider.style.left = '0px';
slider.style.right = '0px';
break;
}
}
 
function psClose(slider, param) {
switch (param.side) {
case 'right':
slider.style.right = "-" + param.size;
if (param.push) {
body.style.right = '0px';
body.style.left = '0px';
}
break;
case 'left':
slider.style.left = "-" + param.size;
if (param.push) {
body.style.left = '0px';
body.style.right = '0px';
}
break;
case 'top':
slider.style.top = "-" + param.size;
if (param.push) {
body.style.top = '0px';
body.style.bottom = '0px';
}
break;
case 'bottom':
slider.style.bottom = "-" + param.size;
if (param.push) {
body.style.bottom = '0px';
body.style.top = '0px';
}
break;
}
 
if (param.keyListener) {
$document.off('keydown', handleKeyDown);
}
 
if (param.clickOutside) {
$document.off('touchend click', onBodyClick);
}
isOpen = false;
setBodyClass('closed');
scope.psOpen = false;
}
 
function psOpen(slider, param) {
switch (param.side) {
case 'right':
slider.style.right = "0px";
if (param.push) {
body.style.right = param.size;
body.style.left = '-' + param.size;
}
break;
case 'left':
slider.style.left = "0px";
if (param.push) {
body.style.left = param.size;
body.style.right = '-' + param.size;
}
break;
case 'top':
slider.style.top = "0px";
if (param.push) {
body.style.top = param.size;
body.style.bottom = '-' + param.size;
}
break;
case 'bottom':
slider.style.bottom = "0px";
if (param.push) {
body.style.bottom = param.size;
body.style.top = '-' + param.size;
}
break;
}
 
scope.psOpen = true;
 
if (param.keyListener) {
$document.on('keydown', handleKeyDown);
}
 
if (param.clickOutside) {
$document.on('touchend click', onBodyClick);
}
setBodyClass('open');
}
 
function handleKeyDown(e) {
var ESC_KEY = 27;
var key = e.keyCode || e.which;
 
if (key === ESC_KEY) {
psClose(slider, param);
 
// FIXME check with tests
// http://stackoverflow.com/questions/12729122/angularjs-prevent-error-digest-already-in-progress-when-calling-scope-apply
 
$timeout(function () {
scope.$apply();
});
}
}
 
 
// Watchers
 
scope.$watch('psOpen', function(value) {
if (!!value) {
psOpen(slider, param);
} else {
psClose(slider, param);
}
});
 
scope.$watch('psSize', function(newValue, oldValue) {
if (oldValue !== newValue) {
param.size = newValue;
initSlider();
}
});
 
 
// Events
 
scope.$on('$destroy', function () {
if (slider.parentNode === body) {
if (param.clickOutside) {
$document.off('touchend click', onBodyClick);
}
body.removeChild(slider);
}
 
slider.removeEventListener('transitionend', onTransitionEnd);
});
 
if (param.autoClose) {
scope.$on('$locationChangeStart', function() {
psClose(slider, param);
});
scope.$on('$stateChangeStart', function() {
psClose(slider, param);
});
}
 
}
};
}]);
}));