Skip to content
Permalink
Browse files

resizeable rooms and contacts area

  • Loading branch information...
SSilence committed Apr 7, 2015
1 parent a6ccebc commit 95252df74a030bcf0ef91fa4cf1c4c8668b94234
Showing with 223 additions and 12 deletions.
  1. +2 −0 README.md
  2. +6 −0 app/index.html
  3. +24 −0 app/main.css
  4. +40 −0 app/sum-backend-storage.js
  5. +32 −0 app/sum-backend.js
  6. +115 −12 app/sum-frontend-events.js
  7. +4 −0 website/index.html
@@ -98,6 +98,7 @@ Following configuration parameters are available in config.ini:
* ``lock_retry_maximum``: retry in maximum random ms when file is locked
* ``notification_reminder``: timeout for notification about unread messages reminder in ms
* ``excluded_ips``: ips which will be ignored on creating server
* ``conversation_items``: amount of chat messages until "show more" will be shown
* ``about_url``: url for menue entry 'about sum'
* ``highlight_languages_value``: supported highlight.js languages in code input selection (replace value by language key)
* ``welcome_text``: welcome text which will be shown on startup
@@ -129,6 +130,7 @@ Special thanks to the great programmers of this libraries which will be used in
* jquery custom content scroller: http://manos.malihu.gr/jquery-custom-content-scroller/
* jCrop: http://deepliquid.com/content/Jcrop.html
* selectize.js: http://brianreavis.github.io/selectize.js/
* draggabilly: http://draggabilly.desandro.com/
* highlight.js: http://highlightjs.org/
* Simple Class Creation and Inheritance: http://ejohn.org/blog/simple-javascript-inheritance/
* grunt: http://gruntjs.com/
@@ -45,6 +45,9 @@
</ul>
</div>

<!-- dragger for resizing rooms -->
<div id="rooms-dragger"></div>

<!-- rooms -->
<div id="rooms">
<h1>{lang.nav_rooms} <span id="rooms-add" class="ion-plus-round"></span></h1>
@@ -57,6 +60,9 @@ <h1>{lang.nav_rooms} <span id="rooms-add" class="ion-plus-round"></span></h1>
</div>
</div>

<!-- dragger for resizing rooms -->
<div id="nav-dragger"></div>

<!-- chat area -->
<div id="main">
<!-- chat header -->
@@ -199,6 +199,17 @@ input.remove,
}


#nav-dragger {
position:absolute;
height:100%;
z-index:100;
width:20px;
left:25%;
cursor:w-resize;
}



/**********/
/* splash */
/**********/
@@ -294,6 +305,14 @@ input.remove,
z-index:100;
}

#nav #rooms-dragger {
position:absolute;
width:100%;
height:20px;
cursor:n-resize;
z-index: 100;
}


/* contact list */

@@ -866,6 +885,11 @@ input.remove,
border-top:0;
}

#open-conversations-menue-dropdown .room .rooms-invite,
#open-conversations-menue-dropdown .room .rooms-leave {
display:none;
}


#content {
padding:20px;
@@ -71,6 +71,46 @@ define('sum-backend-storage', Class.extend({
},


/**
* load saved room size
* @returns (int|boolean) size or false
*/
loadRoomHeight: function() {
if (typeof localStorage.roomheight != 'undefined' && localStorage.roomheight !== null)
return localStorage.roomheight;
return false;
},


/**
* save height of rooms
* @param height new height
*/
saveRoomHeight: function(height) {
localStorage.roomheight = height;
},


/**
* load saved contacts size
* @returns (int|boolean) size or false
*/
loadContactsWidth: function() {
if (typeof localStorage.contactswidth != 'undefined' && localStorage.contactswidth !== null)
return localStorage.contactswidth;
return false;
},


/**
* save size of contacts
* @param width new width
*/
saveContactsWidth: function(width) {
localStorage.contactswidth = width;
},


/**
* load window position
* @return (object) {x: 123, y: 456}
@@ -384,6 +384,38 @@ define('sum-backend', Class.extend({
// functions for frontend //
////////////////////////////


// window size

/**
* loads size of the rooms and contacts
* @returns (object) {roomsHeight: 123, contactsWidth: 456}
*/
getRoomsHeightAndContactsWidth: function() {
return {
roomHeight: this.backendStorage.loadRoomHeight(),
contactsWidth: this.backendStorage.loadContactsWidth()
};
},


/**
* save height of the rooms
* @param height new height
*/
saveRoomsHeight: function(height) {
this.backendStorage.saveRoomHeight(height);
},


/**
* save width of contacts
* @param width new width
*/
saveContactsWidth: function(width) {
this.backendStorage.saveContactsWidth(width);
},


// notification handling

@@ -46,13 +46,7 @@ define('sum-frontend-events', Class.extend({
* cursor in history
*/
historyCursor: 0,


/**
* window height before last resize event
*/
lastWindowHeight: $(window).height(),



/**
* initialize events (clicks, ...)
@@ -65,6 +59,7 @@ define('sum-frontend-events', Class.extend({
this.initMessageMenue();
this.initMessageInput();
this.initNavigation();
this.initDraggables();
},


@@ -949,6 +944,79 @@ define('sum-frontend-events', Class.extend({
},


/**
* initialize draggable areas
*/
initDraggables: function() {
var that = this;

// load initial room height
var sizes = this.backend.getRoomsHeightAndContactsWidth();
if (sizes.roomHeight !== false) {
$('#rooms').css('height', sizes.roomHeight + 'px');
that.resetRoomsDraggerTop();
}

// load initial contacts/nav width
if (sizes.contactsWidth !== false) {
that.setContactsWidth(sizes.contactsWidth);
$("#nav-dragger").css('left', $('#nav').css('width'));
}


// draggable rooms
$("#rooms-dragger").draggabilly({
axis: 'y',
containment: '#nav'
});

var roomHeight;

$("#rooms-dragger").on('dragStart', function(event, pointer) {
$("#rooms-dragger").addClass('dragging');
roomHeight = parseInt($('#rooms').css('height'));
});

$("#rooms-dragger").on('dragMove', function(event, pointer, moveVector) {
if (roomHeight - moveVector.y > $(window).height() * 0.7 || roomHeight - moveVector.y < $(window).height() * 0.2)
return;
$('#rooms').css('height', (roomHeight - moveVector.y) + "px");
that.resize();
});

$("#rooms-dragger").on('dragEnd', function(event, pointer) {
$("#rooms-dragger").removeClass('dragging');
that.backend.saveRoomsHeight(parseInt($('#rooms').css('height')));
that.resetRoomsDraggerTop();
});


// draggable contacts/nav
$("#nav-dragger").draggabilly({
axis: 'x',
containment: 'body'
});

var contactsWidth;

$("#nav-dragger").on('dragStart', function(event, pointer) {
contactsWidth = parseInt($('#nav').css('width'));
});

$("#nav-dragger").on('dragMove', function(event, pointer, moveVector) {
if (contactsWidth + moveVector.x > $(window).width() * 0.7 || contactsWidth + moveVector.x < 210) {
return;
}
that.setContactsWidth(contactsWidth + moveVector.x);
});

$("#nav-dragger").on('dragEnd', function(event, pointer) {
that.backend.saveContactsWidth(parseInt($('#nav').css('width')));
$("#nav-dragger").css('left', $('#nav').css('width'));
});
},


/**
* select new avatar
*/
@@ -1111,11 +1179,46 @@ define('sum-frontend-events', Class.extend({

$('#content-wrapper').height(windowHeight - headerHeight - messageHeight - padding);

// set rooms popup height
if ($('#rooms').height() > $(window).height() * 0.7)
$('#rooms').css('height', ($(window).height() * 0.7) + "px");

// set height of rooms listing
var roomsHeadingHeight = parseInt($('#rooms h1').height()) + parseInt($('#rooms h1').css('marginTop')) + parseInt($('#rooms h1').css('marginBottom'));
$('#rooms-wrapper').css('height', (roomsHeight - roomsHeadingHeight) + 'px');
$("#rooms-wrapper").mCustomScrollbar("update");

// reset dragger
this.resetRoomsDraggerTop();

// reset message input width
$('#message').css('width', ($(window).width() - parseInt($('#nav').css('width'))) + "px");

// set new position for rooms popups
var diff = windowHeight - this.lastWindowHeight;
this.lastWindowHeight = windowHeight;
$('.rooms-popup').each(function(index, item) {
$(item).css('top', parseInt($(item).css('top')) + diff);
});
$('.rooms-popup').css('top', $('#rooms-add').position().top + 'px');
},


/**
* reset position of room resize dragger to top of rooms
*/
resetRoomsDraggerTop: function() {
if ($("#rooms-dragger").hasClass('dragging'))
return;
var roomHeight = parseInt($('#rooms').css('height'));
var windowHeight = $(window).height();
$("#rooms-dragger").css('top', (windowHeight-roomHeight) + 'px');
},


/**
* set width of contacts
* @param width new width
*/
setContactsWidth: function(width) {
$('#nav').css('width', width + "px");
$('#main').css('marginLeft', width + "px");
$('#message').css('left', width + "px");
$('#message').css('width', ($(window).width() - width) + "px");
}
}));
@@ -190,6 +190,10 @@ <h3>Configuration</h3>
<td>excluded_ips</td>
<td>ips which will be ignored on creating server (e.g. for excluding local virtual machine network devices)</td>
</tr>
<tr>
<td>conversation_items</td>
<td>amount of chat messages until "show more" will be shown</td>
</tr>
<tr>
<td>about_url</td>
<td>url for menue entry 'about sum'</td>

0 comments on commit 95252df

Please sign in to comment.
You can’t perform that action at this time.