My image viewer component

[jonasba]

Hi!

I've been looking for an image viewer component, capable of viewing an image and zooming in and out. I could not find any, so I decided to make one for myself. It is my first ExtJS component ever, but I thought I'd share it with you anyway. Feedback is *much* appreciated.

It can be found on Github.

I also have a live demo.

Ext.create('Ext.container.Viewport', {
     layout: 'fit',
     items: Ext.create('ImageViewer', {
         renderTo: Ext.getBody(),
         src: 'path/to/your/image.png'
    })
});

Localization

The tooltips are configurable in the following way, enabling the possibility for localization.

Ext.create('Ext.container.Viewport', {
    layout: 'fit',
    items: Ext.create('ImageViewer', {
        renderTo: Ext.getBody(),
        src: 'resources/images/image.png',
        tooltips: {
            stretchHorizontally: 'Strekk vertikalt',
            stretchVertically: 'Strekk horisontalt',
            stretchOptimally: 'Strekk optimalt',
            zoomIn: 'Zoom inn',
            zoomOut: 'Zoom ut',
            rotateClockwise: 'Roter med klokka',
            rotateAntiClockwise: 'Roter mot klokka'
        }
    })
});

Multiimage viewing

I have extended the component to support viewing of multiple images. (This is part of my current work at my job, where I'm doing online browser preview of office documents and etc.)

It can be found on Github.

I also have a live demo.

Ext.create('Ext.container.Viewport', {
     layout: 'fit',
     items: Ext.create('MultiImageViewer', {
        renderTo: Ext.getBody(),
        src: [
            'resources/images/001.jpg',
            'resources/images/002.jpg'
        ],
        currentImageTemplate: 'Viewing page {i} of {total}'
    })
});

[loiane]

Really nice!
Thanks for sharing!

[hendricd]

@jonasba -- Nicely done

Succinct and very clean.

Thought I'd offer a couple suggestions for Component structure and script performance if you're game.

These listeners appear a bit 'broad' (and they are never removed) as they would fire your mouse methods any time the mouse moved anywhere in the document

Ext.EventManager.addListener(window, 'mouseup', me.mouseup, me);
Ext.EventManager.addListener(window, 'mousemove', me.mousemove, me);

Remember, this cool Component may be nested in a TabPanel or Accordian layout somewhere amoungst hundreds of neighbors

Consider 'scoping' them to the ImageContainer only.
You could either add them to your current #ImageContainer listeners block:

listeners: { 
  el: 
     { mousedown: me.mousedown,
       mousemove: me.mousemove,
       mouseup:   me.mouseup,
       scope: me 
 } },

or implement them here (ideally using mon) using the initEvents template method:

initEvents : function() {
         var me = this;
         me.callParent();
         me.mon( me.getImageContainer().getEl(), {
         
            mousedown: me.mousedown,
            mousemove: me.mousemove,
            mouseup:   me.mouseup,
            scope: me 
        });
 },

For those following along: either is equivalent but, more importantly, listeners set this way are removed for you during destruction.

On the performance side, try to reduce the calls to the getters during DOM events. Get the references you need once, and run with them. Should smooth things out a bit:

rotateImage: function () {

        var me = this,
            imageEl = me.getImage().getEl(),
            rotation = me.getRotation(),
            tmpOriginalWidth;

        tmpOriginalWidth = me.getOriginalWidth();
        me.setOriginalWidth(me.getOriginalHeight());
        me.setOriginalHeight(tmpOriginalWidth);

        imageEl.applyStyles( {    //a bit quicker
             'transform' :  'rotate(' + rotation + 'deg)',
             '-o-transform' : 'rotate(' + rotation + 'deg)',
             '-ms-transform' : 'rotate(' + rotation + 'deg)',
             '-moz-transform' : 'rotate(' + rotation + 'deg)',
             '-webkit-transform' : 'rotate(' + rotation + 'deg)'
         });

        me.setMargins(me.getMargins());
    },

Anyway, you see the pattern, right? (Compiled Java this is not!)

Great job!

Now, let's see some more of these!

[jonasba]

Thanks for the feedback! I'll definitely make some changes, now that I know what's best practise around here. By the way, I extended the component to add support for multiple images.

It can be found on Github.

I also have a live demo.

[loiane]

Why don't you submit this example to Sencha Try?
I'm sure people will enjoy it!

http://try.sencha.com/

[jonasba]

These listeners appear a bit 'broad' (and they are never removed) as they would fire your mouse methods any time the mouse moved anywhere in the document

The problem with scoping the mousemove event to apply only to the actual image container, is that when a user drags an image, moves the mouse outside the image container area and then moves it inside from another side, the image will jump suddenly. Although I as a developer very much understands why and how this happens, it is a very unexpected behaviour for a typical user. Therefore I'd like the image to follow the mouse no matter where it is being moved.

Do you have a suggestion of how to do this and accomplish the same behaviour?

Edit: I suppose I could make this a configurable option?

[Romick]

Did you test your component in IE? It seems not working properly... omg.

[jonasba]

Consider 'scoping' them to the ImageContainer only.

or implement them here (ideally using mon) using the initEvents template method:

On the performance side, try to reduce the calls to the getters during DOM events. Get the references you need once, and run with them. Should smooth things out a bit:

I have done all of the above now.

Did you test your component in IE? It seems not working properly... omg.

No, I did not. However, I have done it now and I fixed a couple of bugs. I don't generally support IE or any Microsoft products, but you seem like a really nice and appreciative guy, so I figured what the heck!

[jonasba]

@Vaugheren: Thanks!

I've updated it and made the tooltips configurable. See first post.

[chandan.behura]

thanks a lot

try to solve miy issue in bellow link


http://www.sencha.com/forum/showthre...ded#post861101