Commit 914f739d authored by JC Brand's avatar JC Brand

Add `slideUp` and `slideDown` methods

And use them in the roomslist plugin instead of the jQuery methods.
ALso removed the jQuery dependency in roomslist.
parent 76cc9642
......@@ -2,6 +2,7 @@
## 3.2.0 (Unreleased)
- Removed jQuery from `converse-core`, `converse-vcard` and `converse-roomslist`. [jcbrand]
- All promises are now native (or polyfilled) ES2015 Promises
instead of jQuery's Deferred. [jcbrand]
- #866 Add babel in order to support ES2015 syntax [jcbrand]
......
......@@ -148,7 +148,7 @@ css/mobile.min.css:: stamp-npm sass/*
.PHONY: watch
watch: stamp-bundler
$(SASS) --watch -I ./node_modules/bourbon/app/assets/stylesheets/ sass/converse.scss:css/converse.css sass/_muc_embedded.scss:css/converse-muc-embedded.css
$(SASS) --watch -I ./node_modules/bourbon/app/assets/stylesheets/ sass/converse/converse.scss:css/converse.css sass/_muc_embedded.scss:css/converse-muc-embedded.css
.PHONY: watchjs
watchjs: stamp-npm
......
......@@ -10,14 +10,13 @@
* rooms in the "Rooms Panel" of the ControlBox.
*/
(function (root, factory) {
define(["jquery.noconflict",
"utils",
define(["utils",
"converse-core",
"converse-muc",
"tpl!rooms_list",
"tpl!rooms_list_item"
], factory);
}(this, function ($, utils, converse, muc, tpl_rooms_list, tpl_rooms_list_item) {
}(this, function (utils, converse, muc, tpl_rooms_list, tpl_rooms_list_item) {
const { Backbone, Promise, b64_sha1, sizzle, _ } = converse.env;
converse.plugins.add('converse-roomslist', {
......@@ -26,13 +25,12 @@
* loaded by converse.js's plugin machinery.
*/
const { _converse } = this,
{ __,
___ } = _converse;
{ __, ___ } = _converse;
_converse.RoomsList = Backbone.Model.extend({
defaults: {
"toggle-state": _converse.OPENED
},
}
});
_converse.RoomsListView = Backbone.View.extend({
......@@ -44,6 +42,8 @@
},
initialize () {
this.toggleRoomsList = _.debounce(this.toggleRoomsList, 600, {'leading': true});
this.model.on('add', this.renderRoomsListElement, this);
this.model.on('change:bookmarked', this.renderRoomsListElement, this);
this.model.on('change:name', this.renderRoomsListElement, this);
......@@ -142,15 +142,17 @@
if (ev && ev.preventDefault) { ev.preventDefault(); }
const el = ev.target;
if (el.classList.contains("icon-opened")) {
this.$('.open-rooms-list').slideUp('fast');
this.list_model.save({'toggle-state': _converse.CLOSED});
el.classList.remove("icon-opened");
el.classList.add("icon-closed");
utils.slideUp(this.el.querySelector('.open-rooms-list')).then(() => {
this.list_model.save({'toggle-state': _converse.CLOSED});
el.classList.remove("icon-opened");
el.classList.add("icon-closed");
});
} else {
el.classList.remove("icon-closed");
el.classList.add("icon-opened");
this.$('.open-rooms-list').slideDown('fast');
this.list_model.save({'toggle-state': _converse.OPENED});
utils.slideDown(this.el.querySelector('.open-rooms-list')).then(() => {
this.list_model.save({'toggle-state': _converse.OPENED});
el.classList.remove("icon-closed");
el.classList.add("icon-opened");
});
}
}
});
......
......@@ -206,7 +206,66 @@
}
},
slideDown: function (el, interval=0.6) {
return new Promise((resolve, reject) => {
if (_.isNil(el)) {
const err = "Undefined or null element passed into slideDown"
console.warn(err);
reject(new Error(err));
}
let intval = el.getAttribute('data-slider-intval');
if (intval) {
window.clearInterval(intval);
}
let h = 0;
const end_height = el.getAttribute('data-slider-height');
intval = window.setInterval(function () {
h++;
el.style.height = h + 'px';
if (h >= end_height) {
window.clearInterval(intval);
el.style.height = '';
el.style.overflow = '';
el.removeAttribute('data-slider-intval');
el.removeAttribute('data-slider-height');
resolve();
}
}, interval);
el.setAttribute('data-slider-intval', intval);
});
},
slideUp: function (el, interval=0.6) {
return new Promise((resolve, reject) => {
if (_.isNil(el)) {
const err = "Undefined or null element passed into slideUp";
console.warn(err);
reject(new Error(err));
}
let intval = el.getAttribute('data-slider-intval');
if (intval) {
window.clearInterval(intval);
}
let h = el.offsetHeight;
el.setAttribute('data-slider-height', h);
el.style.overflow = 'hidden';
intval = window.setInterval(function () {
el.style.height = h + 'px';
h--;
if (h < 0) {
window.clearInterval(intval);
el.removeAttribute('data-slider-intval');
resolve();
}
}, interval);
el.setAttribute('data-slider-intval', intval);
});
},
fadeIn: function (el, callback) {
if (_.isNil(el)) {
console.warn("Undefined or null element passed into fadeIn");
}
if ($.fx.off) {
el.classList.remove('hidden');
if (_.isFunction(callback)) {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment