Browse files

Encapsulation des fonctions de layout dans une librairie pmLayout

  • Loading branch information...
1 parent 4c5f227 commit d47b6403ad2c4a52f110b9797da3bf5750dcdb13 @romaricdrigon romaricdrigon committed May 6, 2012
View
8 src/PHPM/Bundle/Resources/public/js/affectation/controller/ParameterController.js
@@ -59,18 +59,18 @@ ParameterController.prototype = {
// taille des sidebars
var _ssOrga = pmUtils.getLocalStorage('SizeSidebarOrga');
if (_ssOrga !== undefined) {
- pmUtils.resizeCalendar($('#sidebar_orga').width()-_ssOrga);
+ pmLayout.resizeCalendar($('#sidebar_orga').width()-_ssOrga);
$('#sidebar_orga').width(_ssOrga);
- pmUtils.setPourcentWidth('#sidebar_orga');
+ pmLayout.setPourcentWidth('#sidebar_orga');
}
var _ssTache = pmUtils.getLocalStorage('SizeSidebarTache');
if (_ssTache !== undefined) {
- pmUtils.resizeCalendar($('#sidebar_tache').width()-_ssTache);
+ pmLayout.resizeCalendar($('#sidebar_tache').width()-_ssTache);
$('#sidebar_tache').width(_ssTache);
- pmUtils.setPourcentWidth('#sidebar_tache');
+ pmLayout.setPourcentWidth('#sidebar_tache');
}
}
View
3 src/PHPM/Bundle/Resources/public/js/affectation/main.js
@@ -10,6 +10,7 @@
// utilitaires
pmUtils = new PmUtils();
+ pmLayout = new PmLayout();
pmHistory = new PmHistory();
pmMessage = new PmMessage();
@@ -49,7 +50,7 @@ $(document).ready(function() {
$('#client').addClass('spinner_large'); // au cas où le chargement soit vraiment très très long
// 0 : setter le layout et récupérer les paramètres dans l'Url
- pmUtils.setResizeableSidebars();
+ pmLayout.setResizeableSidebars();
// 0.5 : travail sur l'historique
pmHistory.initHistoryListener();
pmHistory.parseUrlParam(); // un peu bizarre : parfois faut le faire, parfois pas
View
117 src/PHPM/Bundle/Resources/public/js/affectation/util/PmLayout.js
@@ -0,0 +1,117 @@
+/*
+ * Page affectation
+ * Petite librairie spécifique
+ * S'occupe de totu ce qui touche au layout
+ */
+
+/*
+ * Création du namespace et utils
+ */
+function PmLayout() {
+}
+
+/*
+ * Fonctions
+ */
+PmLayout.prototype = {
+ /*
+ * Adapte la hauteur du layout
+ */
+ setAppHeight: function() {
+ var _headerHeight = $('.navbar').height();
+ var _contentHeight = $(window).height()-_headerHeight;
+ var _clientHeight = _contentHeight-$('#menu_calendar').outerHeight()-3; // 3 de border tout en bas
+
+ $('#content').height(_contentHeight+'px');
+ $('#client').height(_clientHeight+'px');
+
+ $('#jours').height(_clientHeight-30+'px');
+
+ var _sidebarHeight = $('#sidebar_tache').height();
+
+ $('#liste_orgas').height(_sidebarHeight-34-6+'px'); // 6px de diverses marges
+ $('#liste_taches').height(_sidebarHeight-34-6+'px');
+ },
+ // fonction appelée lorsqu'on touche au calendrier
+ setResizeableApp: function() {
+ ici();
+
+ window.onresize = this.setAppHeight;
+
+ this.setAppHeight();
+ },
+
+ /*
+ * Pour les sidebars redimensionnables
+ */
+ setResizeableSidebars: function() {
+ $(function() {
+ $("#sidebar_orga").resizable({
+ minWidth: 150,
+ maxWidth: 400,
+ autoHide: true,
+ handles: 'e',
+ resize: pmLayout.hideCalendar,
+ stop: pmLayout.resizeHandler
+ });
+
+ $("#sidebar_tache").resizable({
+ minWidth: 150,
+ maxWidth: 400,
+ autoHide: true,
+ handles: 'w',
+ resize: pmLayout.hideCalendar,
+ stop: pmLayout.resizeHandler
+ });
+ });
+ },
+ // handler pendant le resize
+ hideCalendar: function() {
+ $('#calendar').css('visibility', 'hidden');
+ },
+ // handler de fin
+ resizeHandler: function(event, ui) {
+ $('#calendar').css('visibility', 'visible'); // raffiche
+
+ pmLayout.resizeCalendar(ui.originalSize.width-ui.size.width);
+
+ // on stock ces tailles dans les paramètres de l'utilisateur
+ // volontairement on travaille en pixels
+ pmUtils.setLocalStorage('SizeSidebarOrga', $('#sidebar_orga').width());
+ pmUtils.setLocalStorage('SizeSidebarTache', $('#sidebar_tache').width());
+ },
+ // resize le calendar et tout ce qui va avec
+ resizeCalendar: function(deltaTaille) {
+ // on convertit tout en % pour mieux gérer le redimensionnement de la fenêtre
+ // 1 px de décalage qui vient de je ne sais où, juste le rajouter
+ var _newWidth = ($('#calendar').width()+deltaTaille+1)/$('.affectation-wrapper').width()*100;
+ $('#calendar').width(_newWidth+'%');
+
+ // même chose pour les sidebars
+ pmLayout.setPourcentWidth('#sidebar_orga');
+ pmLayout.setPourcentWidth('#sidebar_tache');
+ },
+
+ /* ******************** */
+ /* *** UTILITAIRES **** */
+ /* ******************** */
+ /*
+ * Retourne la taille de l'élément (jQuery) passé
+ * en pourcentage %
+ */
+ getPourcentWidth: function(unElement, elementRelatif) {
+ if ($(elementRelatif).width() === null) {
+ var _rapport = $(document);
+ } else {
+ var _rapport = $(elementRelatif);
+ }
+
+ return $(unElement).width()/_rapport.width()*100;
+ },
+ /*
+ * Même chose, l'applique
+ */
+ setPourcentWidth: function(unElement, elementRelatif) {
+ $(unElement).width(this.getPourcentWidth(unElement, elementRelatif)+'%');
+ }
+}
View
100 src/PHPM/Bundle/Resources/public/js/affectation/util/PmUtils.js
@@ -104,87 +104,6 @@ function PmUtils() {
*/
PmUtils.prototype = {
/* ******************** */
- /* ****** LAYOUT ****** */
- /* ******************** */
-
- /*
- * Adapte la taille du layout
- */
- setAppHeight: function() {
- var _headerHeight = $('.navbar').height();
- var _contentHeight = $(window).height()-_headerHeight;
- var _clientHeight = _contentHeight-$('#menu_calendar').outerHeight()-3; // 3 de border tout en bas
-
- $('#content').height(_contentHeight+'px');
- $('#client').height(_clientHeight+'px');
-
- $('#jours').height(_clientHeight-30+'px');
-
- var _sidebarHeight = $('#sidebar_tache').height();
-
- $('#liste_orgas').height(_sidebarHeight-34-6+'px'); // 6px de diverses marges
- $('#liste_taches').height(_sidebarHeight-34-6+'px');
- },
- // fonction appelée lorsqu'on touche au calendrier
- setResizeableApp: function() {
- window.onresize = this.setAppHeight;
-
- this.setAppHeight();
- },
-
- /*
- * Pour les sidebars redimensionnables
- */
- setResizeableSidebars: function() {
- $(function() {
- $("#sidebar_orga").resizable({
- minWidth: 150,
- maxWidth: 400,
- autoHide: true,
- handles: 'e',
- resize: pmUtils.hideCalendar,
- stop: pmUtils.resizeHandler
- });
-
- $("#sidebar_tache").resizable({
- minWidth: 150,
- maxWidth: 400,
- autoHide: true,
- handles: 'w',
- resize: pmUtils.hideCalendar,
- stop: pmUtils.resizeHandler
- });
- });
- },
- // handler pendant le resize
- hideCalendar: function() {
- $('#calendar').css('visibility', 'hidden');
- },
- // handler de fin
- resizeHandler: function(event, ui) {
- $('#calendar').css('visibility', 'visible'); // raffiche
-
- pmUtils.resizeCalendar(ui.originalSize.width-ui.size.width);
-
- // on stock ces tailles dans les paramètres de l'utilisateur
- // volontairement on travaille en pixels
- pmUtils.setLocalStorage('SizeSidebarOrga', $('#sidebar_orga').width());
- pmUtils.setLocalStorage('SizeSidebarTache', $('#sidebar_tache').width());
- },
- // resize le calendar et tout ce qui va avec
- resizeCalendar: function(deltaTaille) {
- // on convertit tout en % pour mieux gérer le redimensionnement de la fenêtre
- // 1 px de décalage qui vient de je ne sais où, juste le rajouter
- var _newWidth = ($('#calendar').width()+deltaTaille+1)/$('.affectation-wrapper').width()*100;
- $('#calendar').width(_newWidth+'%');
-
- // même chose pour les sidebars
- pmUtils.setPourcentWidth('#sidebar_orga');
- pmUtils.setPourcentWidth('#sidebar_tache');
- },
-
-
- /* ******************** */
/* ***** JOURNAL ****** */
/* ******************** */
/*
@@ -199,25 +118,6 @@ PmUtils.prototype = {
/* ******************** */
/* *** UTILITAIRES **** */
/* ******************** */
- /*
- * Retourne la taille de l'élément (jQuery) passé
- * en pourcentage %
- */
- getPourcentWidth: function(unElement, elementRelatif) {
- if ($(elementRelatif).width() === null) {
- var _rapport = $(document);
- } else {
- var _rapport = $(elementRelatif);
- }
-
- return $(unElement).width()/_rapport.width()*100;
- },
- /*
- * Même chose, l'applique
- */
- setPourcentWidth: function(unElement, elementRelatif) {
- $(unElement).width(this.getPourcentWidth(unElement, elementRelatif)+'%');
- },
/*
* Stockage et retrieve dans localStorage
View
2 src/PHPM/Bundle/Resources/public/js/affectation/view/CalendarView.js
@@ -64,7 +64,7 @@ CalendarView.prototype = {
$('#'+pmAffectation.current['quart_heure']).addClass('current');
// on redimensionne l'app comme il faut
- pmUtils.setAppHeight();
+ pmLayout.setAppHeight();
},
// fabrique un jour
makeADay: function(date, jourSemaine, nbJours) {

0 comments on commit d47b640

Please sign in to comment.