Gelmiş geçmiş en büyük porno sitemiz olan 2pe de her zaman en kaliteli pornoları sunmayı hedefledik. Diğer video sitemiz olan vuam da ise hd porno ağırlıklı çalışmalara başladık.

  1. #1
    Sencha User jep's Avatar
    Join Date
    Sep 2010
    Posts
    862
    Vote Rating
    21
    jep will become famous soon enough jep will become famous soon enough

      0  

    Default ItemInfoHint - a popup hint interaction for series

    ItemInfoHint - a popup hint interaction for series


    I created a nice little popup hint for series points. When you click on the point, it fades in:
    ItemInfoHint.png

    When you click on another point, it animates the hint over to that point. When you click on a non-point area of the chart, it fades out.

    Code:
    Ext.define('OHHChart.components.ItemInfoHint', {
        extend:'Ext.chart.interactions.Abstract',
        type: 'iteminfohint',
        alias: 'interaction.iteminfohint',
    
        requires:[
            'Ext.Label',
            'Ext.Animator'
        ],
    
        config:{
            label:{
                cls:'item-info-hint',
                styleHtmlContent:true,
                hidden:true,
                showAnimation:'fadeIn',
                hideAnimation:'fadeOut',
                zIndex:30 // was in ItemInfo
            }
        },
    
    
        getGestures:function () {
            var gestures = {};
            gestures.tap = 'onGesture';
            return gestures;
        },
    
        onGesture:function (e) {
            var item = this.getItemForEvent(e);
    
            var label;
    
            if (item) {
                var chart = this.getChart();
                var chartRegion = chart.getMainRegion();
                var clientCoords = item.sprite.attr.matrix.transformPoint([
                    item.series.getXAxis().getCoordFor(item.record.get(item.series.getXField())),
                    item.series.getYAxis().getCoordFor(item.record.get(item.field))
                ]);
                var chartXY = chart.element.getXY();
                var seriesScreenX = clientCoords[0] + chartXY[0] + chartRegion[0] - 2;
                var seriesScreenY = chartRegion[3] - clientCoords[1] + chartXY[1] + chartRegion[1];
    
                if (!this.item) {
                    this.item = item;
    
                    var labelConfig = this.getLabel();
                    var me = this;
                    var config = Ext.apply({}, labelConfig, {
                        left:seriesScreenX,
                        top:seriesScreenY
                    });
    
                    label = Ext.create('Ext.Label', config);
                    Ext.Viewport.add(label);
                    label.on('hide', function () {
                        // I really only do this because it was in the ItemInfo.  I don't think it does anything.
                        me.item.series.setAttributesForItem(item, { highlighted:false });
    
                        delete me.item;
                        Ext.Viewport.remove(label, true);
                        me.setLabel(labelConfig);
                    });
                    this.setLabel(label);
                }
                else {
                    label = this.getLabel();
                }
    
                this.fireEvent('show', this, item);
                var html = item.html + '<div class="item-info-hint-callout">';
    
                if (label.getHidden()) {
                    label.setHtml(html);
                    label.show();
                }
                else {
                    var a = new Ext.fx.Animation({
                        element:label.element,
                        duration:325,
                        easing:'ease-in',
                        preserveEndState:true,
                        from:{top:label.getTop(), left:label.getLeft()},
                        to:{top:seriesScreenY, left:seriesScreenX}
                    });
    
                    a.on('animationend', function (animation, element, isInterrupted) {
                        label.setHtml(html);
                        // this is done to keep the ST properties in sync with what the animation has done
                        label.setTop(label.element.getTop());
                        label.setLeft(label.element.getLeft());
                    });
    
                    Ext.Animator.run(a);
                }
    
                // I really only do this because it was in the ItemInfo.  I don't think it does anything.
                item.series.setAttributesForItem(item, { highlighted:true });
    
                this.sync();
            }
            else if (this.item) {
                this.getLabel().hide();
            }
        }
    });
    And here's the CSS code for the hint (probably should do something with SASS but I'm still learning it):
    Code:
    .item-info-hint {
      pointer-events: none;
      text-align: center;
      width: 10em;
      height: 4em;
      margin-top: -5em;
      margin-left: -5em;
      font-weight: bold;
    }
    
    .item-info-hint .x-innerhtml {
      font-weight: bold;
      text-shadow: black 2px 2px 20px, black -2px -2px 20px, black 2px -2px 20px, black -2px 2px 20px;
      color: white;
      padding: 0;
      bottom: 0;
      position: absolute;
    }
    
    .item-info-hint-callout {
      border-left: 2px solid white;
      border-bottom: 2px solid white;
      width: 10px;
      height: 10px;
      left: 50%;
      position: absolute;
      -webkit-transform: rotate(-45deg);
      -webkit-transform-origin-y: 10px;
    }
    Here's how you call it in your chart. You set the item's html property to the new html that will be shown when the hint is at the series point:
    Code:
    interactions:[
        {
            type:'iteminfohint',
            listeners:{
                show:function (me, item, hint) {
                    var date = Ext.Date.add(new Date('1/1/' + item.record.get('year')),
                        Ext.Date.DAY, (item.record.get('week') - 1) * 7);
                    var value = item.record.get(item.field);
    
                    item.html =
                        item.series.getTitle() + '<br>' +
                        Ext.Date.format(date, 'M d') + ' - ' +
                        Ext.Date.format(Ext.Date.add(date, Ext.Date.DAY, 6), 'M d') + '<br>' + value
                }
            }
        }
    ]
    Shortcomings:
    • It doesn't allow for possibly appearing too high on the screen and getting the top cut off. Ideally, it'd be set up where when this happens the arrow moves to the top of the hint and the hint appears below the series point.
    • You can't tweak the move animation. Could put the config for it as a property of the interaction like how the hint config is.
    • When you toggle a series to hide it, any showing hint won't be hidden. Right now there is no hide/show event for series, so there's no good way to tap into this process. I've entered a feature request. Hopefully this will get added before release.

  2. #2
    Sencha User jep's Avatar
    Join Date
    Sep 2010
    Posts
    862
    Vote Rating
    21
    jep will become famous soon enough jep will become famous soon enough

      0  

    Default


    Oh, I might also note something else. In ST 2.1 RC2, clicking on a point on the chart will return hits for series even if they are hidden. This is bugged here:
    http://www.sencha.com/forum/showthre...-hidden-series

    Until they fix it, you can use my workaround to avoid the problem. My code calls chart.getItemForPoint(), so if you use that workaround it will take it into account.

  3. #3
    Sencha User jep's Avatar
    Join Date
    Sep 2010
    Posts
    862
    Vote Rating
    21
    jep will become famous soon enough jep will become famous soon enough

      0  

    Default


    Fixed the problem with category axes. Also changed from xtype to type (now that I figured out how to make that work).