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

Implement modal without bootstrap.js and jQuery

Browse source
This commit is contained in:
Lorenz Hübschle-Schneider 2014-07-05 14:36:58 +01:00
parent 018feb2fd5
commit 23fb4da05a
3 changed files with 43 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
css/glowingbear.css
View file

@ -359,15 +359,42 @@ table.notimestampseconds td.time span.seconds {
display: none !important; display: none !important;
} }
.modal ul { .gb-modal {
position: absolute;
left: 0px;
width:100%;
height:200%;
z-index: 1000;
background-color:rgba(0, 0, 0, 0.5)
}
.gb-modal[data-state=hidden] {
transition: .2s ease-in-out, top .2s ease-in;
transition-delay: 0.1s, 0s;
top: -150px;
visibility: hidden;
opacity: 0;
}
.gb-modal[data-state=visible] {
transition: .2s ease-in-out, top .3s ease-out;
transition-delay: 0s, 0.1s;
top: 0px;
visibility: visible;
opacity: 1;
}
.gb-modal[ng-click], .gb-modal div[ng-click] {
cursor: default;
}
.gb-modal ul {
list-style: none; list-style: none;
padding-left: 15px; padding-left: 15px;
} }
.modal li { .gb-modal li {
font-size: larger; font-size: larger;
margin-bottom: 10px; margin-bottom: 10px;
} }
.modal li li { .gb-modal li li {
font-size: medium; font-size: medium;
} }
.modal-header { .modal-header {

8
index.html
View file

@ -198,7 +198,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="title" ng-bind-html="activeBuffer().title | irclinky:'_blank'" title="{{activeBuffer().title}}"></div>
<div class="actions pull-right vertical-line-left"> <div class="actions pull-right vertical-line-left">
<div class="pull-left"> <div class="pull-left">
<a class="" data-toggle="modal" data-target="#settingsModal" title="Options menu"> <a class="settings-toggle" ng-click="toggleModal('settingsModal')" title="Options menu">
<i class="glyphicon glyphicon-cog"></i> <i class="glyphicon glyphicon-cog"></i>
</a> </a>
</div> </div>
@ -265,8 +265,8 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
</div> </div>
</div> </div>
<div id="soundNotification"></div> <div id="soundNotification"></div>
<div id="settingsModal" class="modal fade"> <div id="settingsModal" class="gb-modal" data-state="hidden" ng-click="toggleModal('settingsModal')">
<div class="modal-dialog"> <div class="modal-dialog" ng-click="preventModalToggle('settingsModal', $event)">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
@ -385,7 +385,7 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
</ul> </ul>
</div> </div>
<div class="modal-footer"> <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="toggleModal('settingsModal')">Close</button>
</div> </div>
</div><!-- /.modal-content --> </div><!-- /.modal-content -->
</div><!-- /.modal-dialog --> </div><!-- /.modal-dialog -->

9
js/glowingbear.js
View file

@ -1080,6 +1080,15 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
} }
}; };
// Modal toggles
$scope.toggleModal = function(elementId) {
var element = document.getElementById(elementId);
element.setAttribute('data-state', element.getAttribute('data-state') === "hidden" ? "visible" : "hidden");
};
$scope.preventModalToggle = function(elementId, event) {
event.stopPropagation();
};
/* Function gets called from bufferLineAdded code if user should be notified */ /* Function gets called from bufferLineAdded code if user should be notified */
$rootScope.createHighlight = function(buffer, message) { $rootScope.createHighlight = function(buffer, message) {