tobast/glowingbear-mainbox
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Merge pull request #349 from glowing-bear/dejquery

Browse source 
[PLEASE TEST] Remove dependency on jQuery
This commit is contained in:
David Cormier 2014-07-21 16:18:57 -04:00
parent 8a15690557 c9e3c1a55c
commit 013cc03380
3 changed files with 143 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

85
css/glowingbear.css
View file

@ -359,15 +359,68 @@ table.notimestampseconds td.time span.seconds {
display: none !important;
}
.modal ul {
.gb-modal {
z-index: 1000;
height: 100%;
overflow-y: scroll;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.gb-modal[data-state=hidden] {
transition: .2s ease-in-out;
visibility: hidden;
opacity: 0;
}
.gb-modal[data-state=visible] {
transition: .2s ease-in-out;
visibility: visible;
opacity: 1;
}
.gb-modal[data-state=hidden] .modal-dialog {
transition: top .3s ease-in;
top: -150px;
}
.gb-modal[data-state=visible] .modal-dialog {
transition: top .3s ease-out;
top: 0px;
}
.gb-modal .backdrop {
z-index: 999;
position: fixed;
top: 0;
height: 100%;
width: 100%;
overflow: none;
background-color:rgba(0, 0, 0, 0.5)
}
.gb-modal .modal-dialog {
z-index: 1001;
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
top: 35px;
}
.gb-modal[ng-click], .gb-modal div[ng-click] {
cursor: default;
}
.gb-modal ul {
list-style: none;
padding-left: 15px;
}
.modal li {
.gb-modal li {
font-size: larger;
margin-bottom: 10px;
}
.modal li li {
.gb-modal li li {
font-size: medium;
}
.modal-header {
@ -396,6 +449,27 @@ h2 span, h2 small {
display: block;
}
.panel[data-state=active] .panel-collapse {
transition: max-height 0.5s;
max-height: 60em;
height: auto;
display: block;
}
.panel[data-state=collapsed] .panel-collapse {
transition: max-height 0.5s;
max-height: 0;
}
.panel[data-state=collapsed] {
border: 0px solid transparent;
}
/* fix for firefox being stupid */
@-moz-document url-prefix() {
.panel[data-state=collapsed] .panel-collapse * {
display: none;
}
}
/* */
/* Mobile layout */
/* */
@ -503,6 +577,11 @@ h2 span, h2 small {
padding: 0px !important;
}
.gb-modal .modal-dialog {
margin: 20px 2%;
width: 96%;
}
/* a different colour is too irregular on mobile */
.repeated-time .cof-chat_time,
.repeated-time .cof-chat_time_delimiters {

43
index.html
View file

@ -13,7 +13,6 @@
<link rel="shortcut icon" type="image/png" href="assets/img/favicon.png" >
<link href="css/style.css" rel="stylesheet" media="screen">
<link href="css/glowingbear.css" rel="stylesheet" media="screen">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.8/angular-route.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.8/angular-sanitize.min.js"></script>
@ -29,7 +28,6 @@
<script type="text/javascript" src="js/plugins.js"></script>
<script type="text/javascript" src="3rdparty/bindonce.min.js"></script>
<script type="text/javascript" src="3rdparty/favico-0.3.4-mod.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body ng-controller="WeechatCtrl" ng-keydown="handleKeyPress($event)" ng-class="{'no-overflow': connected}">
<div ng-hide="connected" class="container">
@ -47,18 +45,18 @@
<div class="alert alert-danger" ng-show="securityError">
<strong>Secure connection error</strong> Unable to connect to unencrypted relay when your are connecting to Glowing Bear over HTTPS. Please use an encrypted relay or load the page without using HTTPS.
</div>
<div class="panel-group" id="accordion">
<div class="panel">
<div class="panel-group accordion">
<div class="panel" data-state="active">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<a class="accordion-toggle" ng-click="toggleAccordion($event)">
Connection settings
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<form class="form-signin" role="form">
<form class="form-signin" role="form">
<div class="form-group">
<label class="control-label" for="host">WeeChat relay hostname and port number</label>
<div class="input-group">
@ -95,15 +93,15 @@
</div>
</div>
</div>
<div class="panel">
<div class="panel" data-state="collapsed">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
<a class="accordion-toggle" ng-click="toggleAccordion($event)">
Usage instructions
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div id="collapseTwo" class="panel-collapse collapse in">
<div class="panel-body">
<h3>Configuring the relay</h3>
<div>To start using glowing bear, please enable the relay plugin in your WeeChat client:
@ -133,15 +131,15 @@
</div>
</div>
</div>
<div class="panel ">
<div class="panel" data-state="collapsed">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
<a class="accordion-toggle" ng-click="toggleAccordion($event)">
Encryption instructions
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div id="collapseThree" class="panel-collapse collapse in">
<div class="panel-body">
<p>If you check the encryption box, the communication between browser and WeeChat will be encrypted with SSL.</p>
<p><strong>Note</strong>: If you are using a self-signed certificate, you have to visit <a href="https://{{ host }}:{{ port }}/">https://{{ host || 'weechathost' }}:{{ port || 'relayport' }}/</a> in your browser first to add a security exception. You can close that tab once you confirmed the certificate, no content will appear. The necessity of this process is a bug in <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=594502">Firefox</a> and other browsers.</p>
@ -159,15 +157,15 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
</div>
</div>
</div>
<div class="panel" ng-hide="isinstalled">
<div class="panel" data-state="collapsed" ng-hide="isinstalled">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseFour">
<a class="accordion-toggle" ng-click="toggleAccordion($event)">
Install app
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div id="collapseFour" class="panel-collapse collapse in">
<div class="panel-body">
<p>You don't need to install anything to use this app, it should work with any modern browser. Start using it <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">right now</a>! However, there are a few ways to improve integration with your operating system.</p>
<h3>Firefox</h3>
@ -178,15 +176,15 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
</div>
</div>
</div>
<div class="panel">
<div class="panel" data-state="collapsed">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseFive">
<a class="accordion-toggle" ng-click="toggleAccordion($event)">
Get involved
</a>
</h4>
</div>
<div id="collapseFive" class="panel-collapse collapse">
<div id="collapseFive" class="panel-collapse collapse in">
<div class="panel-body">
<p>Glowing bear is built by a small group of developers in their free time. As we're always trying to improve it, we would love getting your feedback and help. If that sounds like something you might enjoy, check out our <a href="https://github.com/glowing-bear/glowing-bear">project page</a> on GitHub!</p>
<p>If you're interested in contributing or simply want to say hello, head over to <strong>#glowing-bear</strong> on <strong>freenode!</strong> We won't bite, promise (-ish).</p>
@ -206,7 +204,7 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
<div class="title" ng-bind-html="activeBuffer().title | irclinky:'_blank'" title="{{activeBuffer().title}}"></div>
<div class="actions pull-right vertical-line-left">
<div class="pull-left">
<a class="" data-toggle="modal" data-target="#settingsModal" title="Options menu">
<a class="settings-toggle" ng-click="showModal('settingsModal')" title="Options menu">
<i class="glyphicon glyphicon-cog"></i>
</a>
</div>
@ -273,11 +271,12 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
</div>
</div>
<div id="soundNotification"></div>
<div id="settingsModal" class="modal fade">
<div id="settingsModal" class="gb-modal" data-state="hidden">
<div class="backdrop" ng-click="closeModal($event)"></div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<button type="button" class="close" ng-click="closeModal($event)" aria-hidden="true">&times;</button>
<h4 class="modal-title">Settings</h4>
<p>Settings will be stored in your browser.</p>
</div>
@ -403,7 +402,7 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" ng-click="closeModal($event)">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

40
js/glowingbear.js
View file

@ -1093,6 +1093,36 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
}
};
$scope.showModal = function(elementId) {
document.getElementById(elementId).setAttribute('data-state', 'visible');
};
$scope.closeModal = function($event) {
function closest(elem, selector) {
var matchesSelector = elem.matches || elem.webkitMatchesSelector || elem.mozMatchesSelector || elem.msMatchesSelector;
while (elem) {
if (matchesSelector.call(elem, selector)) return elem;
else elem = elem.parentElement;
}
}
closest($event.target, '.gb-modal').setAttribute('data-state', 'hidden');
};
$scope.toggleAccordion = function(event) {
event.stopPropagation();
event.preventDefault();
var target = event.target.parentNode.parentNode.parentNode;
target.setAttribute('data-state', target.getAttribute('data-state') === 'active' ? 'collapsed' : 'active');
// Hide all other siblings
var siblings = target.parentNode.children;
for (var childId in siblings) {
var child = siblings[childId];
if (child.nodeType === 1 && child !== target) {
child.setAttribute('data-state', 'collapsed');
}
}
};
/* Function gets called from bufferLineAdded code if user should be notified */
$rootScope.createHighlight = function(buffer, message) {
@ -1500,6 +1530,16 @@ weechat.directive('inputBar', function() {
// Double-tap Escape -> disconnect
if (code === 27) {
$event.preventDefault();
// Check if a modal is visible. If so, close it instead of disconnecting
var modals = document.querySelectorAll('.gb-modal');
for (var modalId in modals) {
if (modals[modalId].getAttribute('data-state') === 'visible') {
modals[modalId].setAttribute('data-state', 'hidden');
return true;
}
}
if (typeof $scope.lastEscape !== "undefined" && (Date.now() - $scope.lastEscape) <= 500) {
// Double-tap
connection.disconnect();