CODEWITHSUNDEEP
onsen-ui
Matthias
Matthias

Reputation: 33

Combining <ons-sliding-menu> and <ons-carousel>

I have an app with <ons-sliding-menu> and a page with <ons-toolbar> and a horizontal
<ons-carousel> covering the remaining space.
For the <ons-sliding-menu> the parameter swipe-target-width="50px" is set.

Is there a way to tell the <ons-carousel> to ignore events originating from the most left 50px and let these go to the menu?

Upvotes: 2

Views: 394

Answers (2)

Matthias
Matthias

Reputation: 33

After some experimentation, I came to the solution to inject the necessary functionality directly in the drag event handlers of the OnsCarouselElement. For this purpose I have introduced the attribute swipe-ignore-left for the <ons-carousel>. The other sites could easily be added when needed.

In order to inject the functionality, load this JS-Code after loading onsenui.js:

(function () {

  'use strict';

  /****************************************************************
  Checks the current event against the attribute swipe-ignore-left.
  ****************************************************************/
  window.OnsCarouselElement.prototype._ignoreDrag = function (event) {
    var attr = this.getAttribute('swipe-ignore-left');
    if (attr === undefined) return false;

    var left = parseInt(attr, 10);
    if (left === undefined || left < 1) return false;

    var startX = event.gesture.center.clientX - event.gesture.deltaX;
    return startX < left;
  };

  /****************************************************************
  Save the original drag-event-handlers
  ****************************************************************/
  var originalCarouselOnDrag = window.OnsCarouselElement.prototype._onDrag;
  var originalCarouselOnDragEnd = window.OnsCarouselElement.prototype._onDragEnd;

  /****************************************************************
  Override: OnsCarouselElement.prototype._onDrag
  ****************************************************************/
  window.OnsCarouselElement.prototype._onDrag = function (event) {
    if (this._ignoreDrag(event)) return;
    originalCarouselOnDrag.apply(this, arguments);
  };

  /****************************************************************
  Override: OnsCarouselElement.prototype._onDragEnd
  ****************************************************************/
  window.OnsCarouselElement.prototype._onDragEnd = function (event) {
    if (this._ignoreDrag(event)) return;
    originalCarouselOnDragEnd.apply(this, arguments);
  };

})();


To preserve for example the left 20 pixel for the <ons-sliding-menu>, this HTML is to provide:

<ons-sliding-menu ... side="left" swipeable swipe-target-width="20px" />
...
<ons-carousel ... swipeable swipe-ignore-left="20px" />

Upvotes: 1

Fran Dios
Fran Dios

Reputation: 3482

Currently there is no option to make the carousel ignore events on one side, but perhaps you can make a trick. You can put a div at the same level than the carousel and let it take the clicks instead of the carousel in the area you need:

<div class="cover"></div>
<ons-carousel>
    ...
</ons-carousel>

You can change these values to fit your case:

.cover {
  position: absolute;
  left: 0;
  height: 100%;
  width: 200px;
  z-index: 1;
}

Check it out here: http://codepen.io/frankdiox/pen/YqKOJE

Hope it helps!

Upvotes: 1

Related Questions