Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Add slideUp and slideDown methods

Browse Source 
And use them in the roomslist plugin instead of the jQuery methods.
ALso removed the jQuery dependency in roomslist.
This commit is contained in:
JC Brand 2017-07-14 10:01:00 +02:00
parent 76cc9642e0
commit 914f739dbc
4 changed files with 77 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGES.md
View File

@ -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]

2
Makefile
View File

@ -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

30
src/converse-roomslist.js
View File

@ -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");
});
}
}
});

59
src/utils.js
View File

@ -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)) {