--- /dev/null
+<html>\r
+<head>\r
+ <title>The source code</title>\r
+ <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
+ <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
+</head>\r
+<body onload="prettyPrint();">\r
+ <pre class="prettyprint lang-js">Imgorg.ImageThumbPanel = Ext.extend(Ext.Panel, {
+ minWidth: 80,
+ title: 'All Photos',
+
+ initComponent: function() {
+ this.tfId = 'tag-filter-'+Ext.id();
+
+ var sliderValue = 0;
+ var p = Ext.state.Manager.getProvider();
+ if (p) {
+ sliderValue = Ext.num(p.get('sliderValue'), 0);
+ }
+
+ Ext.apply(this,{
+ layout:'fit',
+ cls: 'images-view',
+ items:Ext.apply({
+ xtype: 'img-dv',
+ itemId: 'imgorg-dv'
+ },this.dvConfig||{}),
+ bbar:['Tags:',{
+ xtype: 'img-tagmulticombo',
+ id: this.tfId,
+ listeners: {
+ select: function(combo, record, idx) {
+ var vals = combo.getValue();
+ this.tagFilter(vals);
+ return true;
+ },
+ clearall: function(combo) {
+ this.clearFilter();
+ },
+ scope: this
+ }
+ },'->',{
+ xtype: 'slider',
+ itemId: 'size-slider',
+ width: 200,
+ style: 'margin-right:20px;',
+ value: sliderValue,
+ plugins: new Ext.ux.SliderTip({
+ getText: function(slider){
+ return String.format('<b>{0}%</b>', 100+slider.getValue()*3);
+ }
+ }),
+ listeners: {
+ change: this.onChange,
+ scope: this
+ }
+ }]
+ });
+ Imgorg.ImageThumbPanel.superclass.initComponent.call(this);
+ this.on('activate', this.onActivate, this);
+ },
+
+ afterRender: function() {
+ Imgorg.ImageThumbPanel.superclass.afterRender.call(this);
+ this.view = this.getComponent('imgorg-dv');
+ (function() {
+ this.dragZone = new ImageDragZone(this.view, {
+ containerScroll:true,
+ ddGroup: 'organizerDD'
+ });
+ }).defer(100, this);
+ },
+
+ onActivate: function() {
+ this.reload();
+ var p = Ext.state.Manager.getProvider();
+ if (p) {
+ sliderValue = Ext.num(p.get('sliderValue'), 0);
+ var slider = this.getBottomToolbar().getComponent('size-slider');
+ slider.setValue(sliderValue);
+ this.onChange(slider);
+ }
+ },
+
+ onChange: function(slider, e) {
+ var p = Ext.state.Manager.getProvider();
+ if (p) {
+ p.set('sliderValue', slider.getValue());
+ }
+ Ext.util.CSS.updateRule('.images-view .thumb img','height',this.minWidth+slider.getValue()*3);
+ },
+
+ tagFilter: function(vals) {
+ if (this.view.store.lastOptions.params) {
+ var album = this.view.store.lastOptions.params.album;
+ }
+
+ this.view.store.load({
+ params: {
+ tags: vals,
+ album: album
+ }
+ });
+ },
+
+ clearFilter: function() {
+ var album = this.view.store.lastOptions.params.album;
+ this.view.store.load({
+ params: {
+ album: album
+ }
+ });
+ Ext.getCmp(this.tfId).reset();
+ },
+
+ albumFilter: function(album) {
+ this.getComponent('imgorg-dv').store.load({
+ params: {
+ album: album.id
+ }
+ });
+ },
+
+ reload: function() {
+ this.view.store.reload();
+ }
+});
+Ext.reg('img-thumbpanel', Imgorg.ImageThumbPanel);
+
+
+ImageDragZone = function(view, config){
+ this.view = view;
+ ImageDragZone.superclass.constructor.call(this, view.getEl(), config);
+};
+Ext.extend(ImageDragZone, Ext.dd.DragZone, {
+ // We don't want to register our image elements, so let's
+ // override the default registry lookup to fetch the image
+ // from the event instead
+ getDragData : function(e){
+ var target = e.getTarget('.thumb-wrap');
+ if(target){
+ var view = this.view;
+ if(!view.isSelected(target)){
+ view.onClick(e);
+ }
+ var selNodes = view.getSelectedNodes();
+ var dragData = {
+ nodes: selNodes
+ };
+ if(selNodes.length == 1){
+ dragData.ddel = target;
+ dragData.single = true;
+ }else{
+ var div = document.createElement('div'); // create the multi element drag "ghost"
+ div.className = 'multi-proxy';
+ for(var i = 0, len = selNodes.length; i < len; i++){
+ div.appendChild(selNodes[i].firstChild.firstChild.cloneNode(true)); // image nodes only
+ if((i+1) % 3 == 0){
+ div.appendChild(document.createElement('br'));
+ }
+ }
+ var count = document.createElement('div'); // selected image count
+ count.innerHTML = i + ' images selected';
+ div.appendChild(count);
+
+ dragData.ddel = div;
+ dragData.multi = true;
+ }
+ return dragData;
+ }
+ return false;
+ },
+
+ // this method is called by the TreeDropZone after a node drop
+ // to get the new tree node (there are also other way, but this is easiest)
+ getTreeNode : function(){
+ var treeNodes = [];
+ var nodeData = this.view.getRecords(this.dragData.nodes);
+ for(var i = 0, len = nodeData.length; i < len; i++){
+ var data = nodeData[i].data;
+ treeNodes.push(new Ext.tree.TreeNode({
+ text: data.name,
+ icon: '../view/'+data.url,
+ data: data,
+ leaf:true,
+ cls: 'image-node'
+ }));
+ }
+ return treeNodes;
+ },
+
+ // the default action is to "highlight" after a bad drop
+ // but since an image can't be highlighted, let's frame it
+ afterRepair:function(){
+ for(var i = 0, len = this.dragData.nodes.length; i < len; i++){
+ Ext.fly(this.dragData.nodes[i]).frame('#8db2e3', 1);
+ }
+ this.dragging = false;
+ },
+
+ // override the default repairXY with one offset for the margins and padding
+ getRepairXY : function(e){
+ if(!this.dragData.multi){
+ var xy = Ext.Element.fly(this.dragData.ddel).getXY();
+ xy[0]+=3;xy[1]+=3;
+ return xy;
+ }
+ return false;
+ }
+});</pre> \r
+</body>\r
+</html>
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff