<commit_before>import $ from 'jquery';
import _ from 'underscore';
import Backbone from 'backbone';
import Marionette from 'backbone.marionette';
import DelView from './delete';
import State from './model';

export default class SwipeToDeleteView extends Marionette.LayoutView {
	template() {
		return `
			<div class="js-delete"></div>
			<div class="js-content"></div>
		`;
	}

	regions() {
		return {
			delete: '.js-delete',
			content: '.js-content'
		};
	}

	initialize({View, DeleteView = DelView}) {
		//console.info('init', this.options);

		if (typeof View !== 'function') {
			throw new Error('"View" can be any Backbone.View or be derived from Marionette.ItemView.');
		}

		if (typeof DeleteView !== 'function') {
			throw new Error('"DeleteView" can be any Backbone.View or be derived from Marionette.ItemView.');
		}

		this.state = new State();
		this.View = View;
		this.DeleteView = DeleteView;

		_.bindAll(this, 'addHandlers', 'offStartInteract', 'interact', 'moveAt', 'stopInteract', 'offStopInteract', 'offInteract', 'endInteract', 'onDelete', 'onCancel', 'offTransitionend');
	}

	onRender() {
		this.$el.addClass('swipe-to-delete');
		this.showDelete();
		this.showContent();
		this.addHandlers();
	}

	showDelete() {
		var view = new this.DeleteView();
		this.showChildView('delete', view);
	}

	showContent() {
		var view = new this.View(_.omit(this.options, 'el', 'tagName', 'className', 'View', 'DeleteView'));
		this.showChildView('content', view);
	}

	addHandlers() {
		console.info('addHandlers');

		this.startInteract()
				.done(this.offStartInteract)
				.done(this.interact)
			.then(this.stopInteract)
				.always(this.offStopInteract)
				.always(this.offInteract)
			.then(this.endInteract)
				.fail(this.addHandlers);
	}

	startInteract() {
		console.info('startInteract');

		var dfd = new $.Deferred();

		this.onInteract = (e) => {
			console.info('startInteract resolve');
			this.state.set({startX: e.pageX});
			dfd.resolve();
		};
		this.$('.js-content > *').on('mousedown', this.onInteract);

		return dfd;
	}

	offStartInteract() {
		console.info('offStartInteract');

		this.$('.js-content > *').off('mousedown', this.onInteract);
	}

	interact() {
		console.info('interact');

		$(document).on('mousemove', this.moveAt);
	}

	moveAt(e) {
		var target = this.getRegion('content').currentView.$el;
		var res = e.pageX - this.state.get('startX');
		target.css({left: res});
	}

	offInteract() {
		console.info('offInteract');

		$(document).off('mousemove', this.moveAt);
	}

	stopInteract() {
		console.info('stopInteract');

		var dfd = new $.Deferred();

		this.onStopInteract = (e) => {
			console.info('stopInteract resolve');

			if (this.state.get('startX') === e.pageX) {
				dfd.reject(e);
			}

			dfd.resolve(e);
		};

		this.$('.js-content > *').on('mouseup', this.onStopInteract);
		this.$('.js-content > *').on('mouseleave', this.onStopInteract);

		return dfd;
	}

	offStopInteract() {
		console.info('offStopInteract');

		this.$('.js-content > *').off('mouseup', this.onStopInteract);
		this.$('.js-content > *').off('mouseleave', this.onStopInteract);
	}

	endInteract(event) {
		console.info('endInteract');

		var dfd = new $.Deferred();
		var target = $(event.currentTarget);
		var swipePercent = this.getSwipePercent();

		dfd
			.done(this.onDelete)
			.fail(this.onCancel)
			.always(this.offTransitionend);

		if (this.state.isDelete(swipePercent)) {
			this.onTransitionend = (e) => dfd.resolve(e);
			target.on('transitionend', this.onTransitionend);
			swipePercent < 0 ? target.addClass('js-transition-delete-left') : target.addClass('js-transition-delete-right');
		} else {
			this.onTransitionend = (e) => dfd.reject(e);
			target.on('transitionend', this.onTransitionend);
			target.addClass('js-transition-cancel');
		}

		return dfd;
	}

	getSwipePercent() {
		var shift = this.getRegion('content').currentView.$el.position().left;
		var width = this.getRegion('content').$el.innerWidth();

		return this.state.calcSwipePercent({shift, width});
	}

	onDelete() {
		console.info('onDelete');

		this.model.destroy({wait: true});
	}

	onCancel(e) {
		console.info('onCancel');

		var target = $(e.currentTarget);
		target.removeClass('js-transition-cancel');
		target.css({left: 0});

		this.state.set({startX: 0});
	}

	offTransitionend(e) {
		var target = $(e.currentTarget);
		target.off('transitionend', this.onTransitionend);
	}
}<commit_msg>Refactoring: use jQuery ".one()" instead ".on()"<commit_after>import $ from 'jquery';
import _ from 'underscore';
import Backbone from 'backbone';
import Marionette from 'backbone.marionette';
import DelView from './delete';
import State from './model';

export default class SwipeToDeleteView extends Marionette.LayoutView {
	template() {
		return `
			<div class="js-delete"></div>
			<div class="js-content"></div>
		`;
	}

	regions() {
		return {
			delete: '.js-delete',
			content: '.js-content'
		};
	}

	initialize({View, DeleteView = DelView}) {
		if (typeof View !== 'function') {
			throw new Error('"View" can be any Backbone.View or be derived from Marionette.ItemView.');
		}

		if (typeof DeleteView !== 'function') {
			throw new Error('"DeleteView" can be any Backbone.View or be derived from Marionette.ItemView.');
		}

		this.state = new State();
		this.View = View;
		this.DeleteView = DeleteView;

		_.bindAll(this, 'addHandlers', 'interact', 'moveAt', 'stopInteract', 'offInteract', 'endInteract', 'onDelete', 'onCancel');
	}

	onRender() {
		this.$el.addClass('swipe-to-delete');
		this.showDelete();
		this.showContent();
		this.addHandlers();
	}

	showDelete() {
		var view = new this.DeleteView();
		this.showChildView('delete', view);
	}

	showContent() {
		var view = new this.View(_.omit(this.options, 'el', 'tagName', 'className', 'View', 'DeleteView'));
		this.showChildView('content', view);
	}

	addHandlers() {
		this.startInteract()
				.done(this.interact)
			.then(this.stopInteract)
				.always(this.offInteract)
			.then(this.endInteract)
				.fail(this.addHandlers);
	}

	startInteract() {
		var dfd = new $.Deferred();

		this.onInteract = (e) => {
			this.state.set({startX: e.pageX});
			dfd.resolve();
		};
		this.$('.js-content > *').one('mousedown', this.onInteract);

		return dfd;
	}

	interact() {
		$(document).on('mousemove', this.moveAt);
	}

	moveAt(e) {
		var target = this.getRegion('content').currentView.$el;
		var res = e.pageX - this.state.get('startX');
		target.css({left: res});
	}

	offInteract() {
		$(document).off('mousemove', this.moveAt);
	}

	stopInteract() {
		var dfd = new $.Deferred();

		this.onStopInteract = (e) => this.state.get('startX') === e.pageX ? dfd.reject(e) : dfd.resolve(e);

		this.$('.js-content > *').one('mouseup', this.onStopInteract);
		this.$('.js-content > *').one('mouseleave', this.onStopInteract);

		return dfd;
	}

	endInteract(event) {
		var dfd = new $.Deferred();
		var target = $(event.currentTarget);
		var swipePercent = this.getSwipePercent();

		dfd
			.done(this.onDelete)
			.fail(this.onCancel);

		if (this.state.isDelete(swipePercent)) {
			target.one('transitionend', (e) => dfd.resolve(e));
			swipePercent < 0 ? target.addClass('js-transition-delete-left') : target.addClass('js-transition-delete-right');
		} else {
			target.one('transitionend', (e) => dfd.reject(e));
			target.addClass('js-transition-cancel');
		}

		return dfd;
	}

	getSwipePercent() {
		var shift = this.getRegion('content').currentView.$el.position().left;
		var width = this.getRegion('content').$el.innerWidth();

		return this.state.calcSwipePercent({shift, width});
	}

	onDelete() {
		this.model.destroy({wait: true});
	}

	onCancel(e) {
		var target = $(e.currentTarget);
		target.removeClass('js-transition-cancel');
		target.css({left: 0});

		this.state.set({startX: 0});
	}
}
{'fraction_non_alphanumeric': 0.18726783655693607, 'fraction_numerical': 0.0007685410529012425, 'mean_word_length': 4.109947643979058, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 28, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1494020', 'n_tokens_mistral': 3030, 'n_tokens_neox': 2709, 'n_words': 497}