Subversion Repositories eFlore/Applications.cel

package org.tela_botanica.client.vues.image;

import org.tela_botanica.client.image.ImageMediateur;

import org.tela_botanica.client.interfaces.ListePaginable;

import org.tela_botanica.client.interfaces.Rafraichissable;

import org.tela_botanica.client.interfaces.VueListable;

import org.tela_botanica.client.vues.BarrePaginationVue;

import com.google.gwt.user.client.Element;

import com.google.gwt.user.client.ui.HTML;

import com.gwtext.client.core.EventCallback;

import com.gwtext.client.core.EventObject;

import com.gwtext.client.core.Ext;

import com.gwtext.client.core.ExtElement;

import com.gwtext.client.core.XTemplate;

import com.gwtext.client.data.FieldDef;

import com.gwtext.client.data.IntegerFieldDef;

import com.gwtext.client.data.Record;

import com.gwtext.client.data.RecordDef;

import com.gwtext.client.data.Store;

import com.gwtext.client.data.StringFieldDef;

import com.gwtext.client.dd.DragData;

import com.gwtext.client.dd.DragSource;

import com.gwtext.client.dd.DropTarget;

import com.gwtext.client.dd.DropTargetConfig;

import com.gwtext.client.util.Format;

import com.gwtext.client.widgets.Component;

import com.gwtext.client.widgets.Container;

import com.gwtext.client.widgets.DataView;

import com.gwtext.client.widgets.Panel;

import com.gwtext.client.widgets.event.ContainerListener;

import com.gwtext.client.widgets.event.ContainerListenerAdapter;

import com.gwtext.client.widgets.event.DataViewListener;

import com.gwtext.client.widgets.event.DataViewListenerAdapter;

import com.gwtext.client.widgets.event.PanelListenerAdapter;

import com.gwtext.client.widgets.grid.GridDragData;

/**

 * Galerie d'images miniatures Avec barre de pagination

 *

 * @author aurelien

 */

public class GalerieImageVue extends Panel implements Rafraichissable,

		VueListable, ListePaginable {

	/**

	 * instance du médiateur

	 */

	private ImageMediateur iMediateur = null;

	/**

	 * Dataview, littéralement "vue de données" qui permet de définir la manière

	 * d'afficher les données

	 */

	private DataView dView = null;

	/**

	 * Dataview, littéralement "vue de données" qui permet de définir la manière

	 * d'afficher les données

	 */

	private Store st = null;

	/**

	 * Barre de pagination gérant l'affichage d'un nombre donné d'élements par

	 * page et la navigation entre eux

	 */

	private BarrePaginationVue pt = null;

	/**

	 * Booleen indiquant si la galerie est instanciée ou pas

	 */

	private boolean estInstancie = false;

	private boolean garderRatio = true;

	private int tailleOr = 100 ;

	boolean lienUploadInitialise = false ;

	HTML videPanel = null ;

	/**

	 * Constructeur sans argument, privé car ne doit pas être utilisé

	 */

	@SuppressWarnings("unused")

	private GalerieImageVue() {

		super();

	}

	/**

	 * Constructeur avec argument

	 *

	 * @param im

	 *            le médiateur avec lequel la vue va communiquer

	 */

	public GalerieImageVue(ImageMediateur im) {

		super("Galerie");

		iMediateur = im;

		// on ajoute des listeners au composant tout entier

		this.addListener(new ContainerListenerAdapter() {

			// pour gagner du temps on n'instancie la vue en elle même que lors

			// du premier affichage (lazy rendering)

			public void onShow(Component component) {

				if (!estInstancie) {

					initialiser();

				}

			}

		});

		AjouterListenersLiens();

		// et on ajoute la tool bar

		pt = new BarrePaginationVue(this);

		pt.setLabelElement("Images");

		pt.setTaillePageParDefaut(50);

		this.setBottomToolbar(pt);

	}

	/**

	 * Ajoute tous les listeners nécessaires à l'intercation utilisateur avec la

	 * vue de données

	 */

	public void ajouterListenersDataView() {

		// ajout de listeners pour la gestion de la selection

		// dans la galerie

		dView.addListener(new DataViewListenerAdapter() {

			// gestion du clic sur une image

			public void onClick(DataView source, int index, Element node,

					EventObject e) {

				// on en notifie le médiateur

				getIMediateur().clicGalerieImage(index, node, e);

			}

			// gestion du clic droit

			public void onContextMenu(DataView source, int index, Element node,

					EventObject e) {

				// on stoppe l'évenement

				e.stopEvent();

				// et on notifie le médiateur

				getIMediateur().montrerContextMenu(e);

			}

			// gestion du double clic

			public void onDblClick(DataView source, int index, Element node,

					EventObject e) {

				// on notife le mediateur

				getIMediateur().clicGalerieImage(index, node, e);

			}

			// gestion des actions en fonction de la selection

			public void onSelectionChange(DataView view, Element[] selections) {

				// s'il n'y a aucun élement sélectionné

				if (selections.length <= 0) {

					// on en notifie le médiateur

					getIMediateur().aucuneSelection();

				} else {

					// sinon on notifie le médiateur

					getIMediateur().selection();

					// et on lui demande de synchroniser la séléction avec les

					// autres vues

					getIMediateur().synchroniserSelection("galerie");

				}

			}

		});

	}

	/**

	 * Accesseur pour la dataview

	 *

	 * @return la dataview

	 */

	public DataView getDView() {

		return dView;

	}

	/**

	 * Renvoie les ids des images sélectionnées

	 *

	 * @return un tableau de String contenant les identifiants des images

	 *         sélectionnées

	 */

	public String[] getIdSelectionnees() {

		Record[] selection = getDView().getSelectedRecords();

		int taille = selection.length;

		String id_selection[] = new String[taille];

		for (int i = 0; i < selection.length; i++) {

			id_selection[i] = selection[i].getAsString("num_image");

		}

		return id_selection;

	}

	/**

	 * Accesseur pour le médiateur

	 *

	 * @return le médiateur associé à la vue

	 */

	public ImageMediateur getIMediateur() {

		return iMediateur;

	}

	/**

	 * Accesseur pour le store

	 *

	 * @return le store associé à la vue

	 */

	public Store getSt() {

		return st;

	}

	/**

	 * Accesseur pour la toolbar

	 *

	 * @return la toolbar associée à la vue

	 */

	public BarrePaginationVue getToolBarVue() {

		return pt;

	}

	/**

	 * Fonction d'initialisation du contenu (appelée lors du premier affichage

	 * de la liste)

	 */

	public void initialiser() {

		// Preparation de la dataview et du template

		// le template va créer une div contenant une image

		// pour chacune des photos

		final XTemplate template = new XTemplate(

				new String[] {

						"<tpl for='.'>",

						"<div class='thumb-wrap' id='{num_image}'>",

						"<div class='thumb dview-list'><img src='{url_image_M}' width='{taille_x_s} px' height='{taille_y_s} px' title='{nom_original}'></div>",

						"<span></span></div>", "</tpl>",

						"<div class='x-clear'></div>" });

		// pour des raisons de performances on compile le template en une

		// fonction

		template.compile();

		// la dataview affichera les images en accord avec le template

		// cree precedemment

		dView = new DataView("div.thumb-wrap") {

			public void prepareData(Data data) {

				data.setProperty("shortName", Format.ellipsis(data

						.getProperty("nom_original"), 15));

				int[] XY = {data.getPropertyAsInt("taille_x") ,data.getPropertyAsInt("taille_y")} ;

				int[] XYresize ;

				if(garderRatio) {

					XYresize = calculerDimensions(XY);

				}

				else {

					XYresize = new int[2] ;

					XYresize[0] = XYresize[1] = tailleOr ;

				}

				data.setProperty("taille_x_s", XYresize[0]);

				data.setProperty("taille_y_s", XYresize[1]);

			}

		};

		dView.setTpl(template);

		// parametre d'affichage de la dataview

		this.setAutoScroll(true);

		dView.setAutoHeight(true);

		dView.setMultiSelect(true);

		dView.setOverCls("x-view-over");

		dView.setEmptyText("");

		// creation du store

		FieldDef defNumImage = new IntegerFieldDef("num_image");

		FieldDef defNomImage = new StringFieldDef("nom_original");

		FieldDef defDatImage = new StringFieldDef("dat_image");

		FieldDef defLieImage = new StringFieldDef("lie_image");

		FieldDef defAppImage = new StringFieldDef("app_image");

		FieldDef defUrlImageS = new StringFieldDef("url_image_S");

		FieldDef defUrlImageM = new StringFieldDef("url_image_M");

		FieldDef defUrlImage = new StringFieldDef("url_image");

		FieldDef defTailleX = new IntegerFieldDef("taille_x");

		FieldDef defTailleY = new IntegerFieldDef("taille_y");

		FieldDef[] defTab = { defNumImage, defNomImage, defDatImage, defLieImage,

				defAppImage, defUrlImageS, defUrlImageM, defUrlImage,defTailleX,defTailleY};

		RecordDef rd = new RecordDef(defTab);

		st = new Store(rd);

		dView.setStore(st);

		this.getDView().setLoadingText("chargement");

		this.add(dView);

		dView.hide();

		videPanel = new HTML("<div class=\"avertissement\" >Aucune image à afficher. <br/> <a id=\"lienUploadMultiple\" href=\"#\" > Cliquez ici pour ajouter un dossier entier ou plusieurs fichiers </a> (nécessite Java) <br/> " +

				"			<a id=\"lienUploadSimple\" href=\"#\" > Cliquez ici pour ajouter un fichier à la fois </a> <br/> " +

				"			Pour ajouter des images plus tard, allez dans le menu Fichier -> Ajouter des images </div>");

		this.add(videPanel);

		// ajouts de la gestion des evenements pour la dataview

		configDragAndDrop() ;

		ajouterListenersDataView();

		estInstancie = true ;

	}

	public void configDragAndDrop()

	{

		// on fabrique la nouvelle configuration

		// les éléments sur lesquels on fait du drag 'n drop doivent tous avoir le même ddGroup

		DropTargetConfig dtc = new DropTargetConfig();

		dtc.setdDdGroup("DragGroupName");

		//La drop target permet de gérer l'évenement onDrop sur l'élement courant

		@SuppressWarnings("unused")

		DropTarget tg = new DropTarget(this, dtc)

		{

			public boolean notifyDrop(DragSource source, EventObject e, DragData data){

				// si les données proviennent d'une grille

				if(data instanceof GridDragData)

		    	{

					// on appelle le médiateur

		    		  	return iMediateur.lierObsDD(source, e, data,getId()) ;

		    	}

				return false ;

			}

			public String notifyOver(DragSource source, EventObject e, DragData data){

			    return "x-dd-drop-ok";

			}

		};

	}

	/**

	 * Méthode héritée de l'interface rafraichissable

	 */

	public void rafraichir(Object nouvelleDonnees,

			boolean repandreRafraichissement) {

		// si l'objet reçu est un store

		if (nouvelleDonnees instanceof Store) {

				st = (Store) nouvelleDonnees;

			if(st.getCount() != 0) {

				// on le charge

				st.load();

				if(videPanel.isVisible()) {

					videPanel.setVisible(false) ;

				}

				if(!dView.isVisible()) {

					dView.setVisible(true);

				}

					// on l'affecte à la vue

					dView.setStore(st);

					// et on rafrachit la vue

					dView.refresh();

			}

			else

			{

				st.removeAll();

				st.load();

				dView.setStore(st);

				if(dView.isVisible()) {

					dView.hide() ;

				}

				if(!videPanel.isVisible()) {

					videPanel.setVisible(true);

					AjouterListenersLiens();

				}

			}

		}

		// si le composant doit répandre le rafraichissement

		if (repandreRafraichissement) {

			// il en notifie le médiateur en lui donnant une copie des données

			// et en notifiant qu'il en est l'expéditeur

			getIMediateur().synchroniserDonneesZoomListeGalerie(

					nouvelleDonnees, this);

		}

	}

	/**

	 * Méthode héritée de l'interface VueListable Sélectionne les images dans la

	 * galerie suivant les identifiants donnés en paramètres

	 *

	 * @param ids

	 *            les identifiants des images à sélectionner

	 */

	public void selectionnerImages(int[] ids) {

		getDView().select(ids);

	}

	public void changerNumeroPage(int pageCourante) {

		iMediateur.changerNumeroPage(pageCourante) ;

	}

	public void changerTaillePage(int nouvelleTaillePage) {

		iMediateur.changerTaillePage(nouvelleTaillePage) ;

	}

	public int[] calculerDimensions(int[] tailleXY) {

		float[] tailleXYf = {new Float(tailleXY[0]),new Float(tailleXY[1])} ;

        float tailleOr = this.tailleOr ;

        float maxTaille = Math.max(tailleXYf[1],tailleXYf[0]) ;

        float[] XYresize = new float[2];

        if(maxTaille == tailleXY[0]) {

            float rapport = tailleXYf[1]/tailleXYf[0] ;

            XYresize[0] = tailleOr ;

            XYresize[1] = tailleOr*rapport ;

        }else {

            float rapport = tailleXYf[0]/tailleXYf[1] ;

            XYresize[1] = tailleOr ;

            XYresize[0] = tailleOr*rapport ;

        }

        int[] res = {Math.round(XYresize[0]),Math.round(XYresize[1])} ;

        return res;

    }

	private void AjouterListenersLiens() {

		addListener(new PanelListenerAdapter() {

			public void onAfterLayout(Container c) {

				ExtElement uploadS = Ext.get("lienUploadSimple");

				uploadS.removeAllListeners();

				uploadS.addListener("click", new EventCallback() {

					public void execute(EventObject e) {

						getIMediateur().uploaderImages(false);

					}

				}) ;

				ExtElement uploadM = Ext.get("lienUploadMultiple");

				uploadM.removeAllListeners();

				uploadM.addListener("click", new EventCallback() {

					public void execute(EventObject e) {

						getIMediateur().uploaderImages(true);

					}

				});

			}

		});

	}

}