+++ /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