Hybrid View

  1. #1
    Sencha User
    Join Date
    Jul 2012
    Location
    New Jersey
    Posts
    116
    Answers
    6
    Vote Rating
    5
    Mike6679 is on a distinguished road

      0  

    Default Unanswered: Carousel swipe conflicts with slider drag

    Unanswered: Carousel swipe conflicts with slider drag


    I have a slider within a carousel item. It seems half the time when I try to slide the thumb on the slider, Sencha thinks I'm swiping to the next carousel item. I tried increasing the width of my thumb but it doesn't seem to help no matter how big the thumb is. Is there any way have slider and my carousel not compete with each other?

  2. #2
    bricemason's Avatar
    Join Date
    Jan 2008
    Location
    Upstate NY
    Posts
    280
    Answers
    49
    Vote Rating
    44
    bricemason has a spectacular aura about bricemason has a spectacular aura about bricemason has a spectacular aura about

      0  

    Default


    Have you tried to do what's described here?:

    http://www.sencha.com/forum/showthread.php?207781

    Brice
    Brice Mason
    Front End Developer
    Modus Create

    @bricemason
    bricemason.com

    Sencha Touch Screencasts
    Vimeo - Sencha Touch Channel

    Github Projects:
    Sencha Cordova Builder enables the automatic creation, building, and running of PhoneGap (Cordova) projects with Sencha Touch.

    Am I Sencha Touch Ready? checks your system to determine what you need to do to start Sencha Touch development. If you're having trouble getting up and running, try this out.

    Sencha Tools Bridge allows Sencha SDK Tools to co-exist with Sencha Cmd on the same system.

  3. #3
    Sencha User
    Join Date
    Jul 2012
    Location
    New Jersey
    Posts
    116
    Answers
    6
    Vote Rating
    5
    Mike6679 is on a distinguished road

      0  

    Default


    Thanks Brice and while that is a sure fire way to cancel and start carousel swipe events , it doesn't help with my dilema. I have a carousel page in which I have a slider and for some reason on the ipad you have to be very precise how you tap the thumb otherwise Sencha thinks its a swipe so turing off the carrousel events do not really help. I tried increasing the size of the thumb and the hit area on top of it but still you have to be very precise with your tap on the ipad. In the browser however, the thumb is much more forgiving. 

  4. #4
    bricemason's Avatar
    Join Date
    Jan 2008
    Location
    Upstate NY
    Posts
    280
    Answers
    49
    Vote Rating
    44
    bricemason has a spectacular aura about bricemason has a spectacular aura about bricemason has a spectacular aura about

      0  

    Default


    I see what you mean now. I did some tests and I think I can duplicate what you're experiencing. I used this example:

    Code:
    Ext.define('Slider.view.Main', {
        extend: 'Ext.Carousel',
        xtype: 'main',
        requires: [
            'Ext.field.Slider',
            'Ext.form.FieldSet'
        ],
        config: {
            items: [
                {
                    html: 'Slider with Carousel',
                    items: [
                        {
                            xtype: 'fieldset',
                            docked: 'bottom',
                            items: [
                                {
                                    xtype: 'sliderfield',
                                    minValue: 0,
                                    maxValue: 100,
                                    value: 50,
                                    increment: 1
                                }
                            ]
                        }
                        
                    ]
                },
                {
                    html: 'Second Card'
                }
            ]
        }
    });
    and tried it out on my iPad which worked well. There wasn't any mixup between using the slider and detecting the swipe on the carousel.

    However if I just use the plain slider without the fieldset, I believe I can experience exactly what you are and it's consistent.

    So the question is, how is your view configured? Have you tried to wrap it in a fieldset?

    I also tested this with my Nexus 10 tablet and that demonstrated the same behavior too.

    Brice
    Brice Mason
    Front End Developer
    Modus Create

    @bricemason
    bricemason.com

    Sencha Touch Screencasts
    Vimeo - Sencha Touch Channel

    Github Projects:
    Sencha Cordova Builder enables the automatic creation, building, and running of PhoneGap (Cordova) projects with Sencha Touch.

    Am I Sencha Touch Ready? checks your system to determine what you need to do to start Sencha Touch development. If you're having trouble getting up and running, try this out.

    Sencha Tools Bridge allows Sencha SDK Tools to co-exist with Sencha Cmd on the same system.

  5. #5
    Sencha User
    Join Date
    Jul 2012
    Location
    New Jersey
    Posts
    116
    Answers
    6
    Vote Rating
    5
    Mike6679 is on a distinguished road

      0  

    Default


    Brice,
    I have created a custom component for my slider so I can just drop it in anywhere. It does extend Ext.field.Field:



    Code:
    Ext.define('MyApp.view.SliderExtended', {
      extend  : 'Ext.field.Field',
      xtype   : 'sliderextended',
      requires: [
        'Ext.slider.Slider'
      ],
      alternateClassName: 'Ext.form.SliderExtended',
      
    
    
      config: {
        cls: Ext.baseCSSPrefix + 'slider-field-extended',
        tabIndex: -1//,
        //helperPosition: 'right'
      },
    
    
      proxyConfig: {
        value: 0,
        minValue: 0,
        maxValue: 100,
        increment: 1
      },
    
    
      constructor: function(config) {
        config = config || {};
    
    
        if (config.hasOwnProperty('values')) {
          config.value = config.values;
        }
    
    
        this.callParent([config]);
      },
      
      initialize: function() {
        this.callParent();
        
        this.getComponent().on({
          scope: this,
          change: 'onSliderChange',
          dragstart: 'onSliderDragStart',
          drag: 'onSliderDrag',
          dragend: 'onSliderDragEnd',
         
        });
      },
       
    
    
       
      setHelperValue: function(value) {
        var value = value;
        this.helperInput.dom.value = value;
      },
      
      // @private
      applyComponent: function(config) {
        /*
        var self = this;
        self.helper.setStyle('float', self.config.helperPosition);
        var changeValue = function(e) {
          var keycode = e.which || window.event.keyCode;
          if( [8, 9, 13, 37, 38, 39, 40, 46].indexOf(Number(keycode)) !== -1 ) return true;
          var helperInputValue = Number(self.helperInput.getValue());
          if(helperInputValue < self.config.minValue || isNaN(helperInputValue))
          helperInputValue = self.config.minValue;
          else if(helperInputValue > self.config.maxValue)
          helperInputValue = self.config.maxValue;
          this.value = helperInputValue;
          self.setValue(helperInputValue);
        };
        self.helperInput.dom.onkeydown = function(e) {
          var keycode = e.which || window.event.keyCode;
          if( [8, 9, 13, 37, 38, 39, 40, 46, 190].indexOf(Number(keycode)) !== -1 ) return true;
          if( keycode > 57 || keycode < 48 ) return false;
        };
        self.helperInput.dom.onchange = changeValue;
        self.helperInput.dom.onclick = changeValue;
        self.helperInput.dom.onkeyup = changeValue;
        self.setHelperValue(self.config.value);
        */
        return Ext.factory(config, Ext.slider.Slider);
      },
      
    
    
      ////////////////////////////////////////////////////////////////////////////
      onSliderChange: function(me, thumb, newValue, oldValue) {
        
        //this.setHelperValue(newValue);
        this.fireEvent('change', this, thumb, newValue, oldValue);
        
      },
      onSliderDragStart: function(me, thumb, newValue, oldValue) {
        
        //debugger;
        
        //var thumbTest = Ext.getCmp('ext-thumb-1');
        
        //this.stopSwipe();
        
        this.setIncrement(0);
        
        this.fireEvent('dragstart', this, thumb, newValue, oldValue);
        
      },
      onSliderDrag: function(me, thumb, newValue, oldValue) {
        //this.setHelperValue(newValue);
        this.fireEvent('drag', this, thumb, newValue, oldValue);
        
        //console.log('slider changed position: ' + newValue);
        this.parent.fireSliderEvent(this,newValue);
      },
      onSliderDragEnd: function(me, thumb, newValue, oldValue) {
        
         //console.log('drag end  position: ' + newValue); 
        
         this.fireEvent('dragend', this, thumb, newValue, oldValue);
         
         this.setIncrement(this.config.increment_special);
        
         //this.startSwipe();
        
      },
      ////////////////////////////////////////////////////////////////////////////
    
    
    
    
      /**
       * Convience method. Calls {@link #setValue}
       */
      setValues: function(value) {
        this.setValue(value);
      },
    
    
      /**
       * Convience method. Calls {@link #getValue}
       */
      getValues: function() {
        return this.getValue();
      },
    
    
      reset: function() {
        debugger;  
          
        var config = this.config,
          initialValue = (this.config.hasOwnProperty('values')) ? config.values : config.value;
    
    
        this.setValue(initialValue);
      },
    
    
      doSetDisabled: function(disabled) {
        this.callParent(arguments);
    
    
        this.getComponent().setDisabled(disabled);
      },
      //
      // --- To make sure the user can more easily select the thumb without dragging the carousel page
      //
      getThumbPos:function(){
        
        var thumb =  this.getComponent().getThumb();
        
        //return this.rectThumb;
      },
      intersectRect:function(r1, r2) {
     
      
        return !(r2.left > r1.right || 
               r2.right < r1.left || 
               r2.top > r1.bottom ||
               r2.bottom < r1.top);
      },
      //-------------------------------------------------
      stopSwipe:function(){
          //debugger;
          var carousel = this.up('carousel'),
           element  = carousel.element;
    
    
          element.un({
            dragstart : 'onDragStart',
            drag      : 'onDrag',
            dragend   : 'onDragEnd',
            scope     : carousel
        });
          
      },
      startSwipe:function(){
          
          var carousel = this.up('carousel'),
          element  = carousel.element;
    
    
          element.on({
            dragstart : 'onDragStart',
            drag      : 'onDrag',
            dragend   : 'onDragEnd',
            scope     : carousel
         });
          
      }
                     
      
      
      /*NOT USED CURRENTLY:*/
      /* 
      getElementConfig: function() {
        var self = this;
        var originalConfig = self.callParent();
    
    
        originalConfig.children[1].children = [{
          reference: 'helper',
          tag: 'div',
          cls: Ext.baseCSSPrefix + 'slider-helper',
          children: [
          {
            reference: 'helperInput',
            tag: 'input',
            type: 'number',
            cls: Ext.baseCSSPrefix + 'slider-helper-input'
          }
          ]
        }];
    
    
        return originalConfig;
      },*/
      
      
    });

  6. #6
    bricemason's Avatar
    Join Date
    Jan 2008
    Location
    Upstate NY
    Posts
    280
    Answers
    49
    Vote Rating
    44
    bricemason has a spectacular aura about bricemason has a spectacular aura about bricemason has a spectacular aura about

      0  

    Default


    Why have you created a custom slider by extending Ext.field.Field? I'm also having trouble understanding what custom behavior you're creating with this code.

    You had mentioned that you did this so you could just drop it anywhere. What's more droppable than requiring the built-in slider and using:

    Code:
    { xtype: 'sliderfield' }
    Brice
    Brice Mason
    Front End Developer
    Modus Create

    @bricemason
    bricemason.com

    Sencha Touch Screencasts
    Vimeo - Sencha Touch Channel

    Github Projects:
    Sencha Cordova Builder enables the automatic creation, building, and running of PhoneGap (Cordova) projects with Sencha Touch.

    Am I Sencha Touch Ready? checks your system to determine what you need to do to start Sencha Touch development. If you're having trouble getting up and running, try this out.

    Sencha Tools Bridge allows Sencha SDK Tools to co-exist with Sencha Cmd on the same system.

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi