Skip to content

Commit ce6e508

Browse files
silverbuxsilverbux
committed
Modal component and sweet alerts (silverbux#41)
* Added ui modal component * Added sweet alert
1 parent f15b16e commit ce6e508

File tree

7 files changed

+257
-1
lines changed

7 files changed

+257
-1
lines changed

‎angular/app/components/nav-sidebar/nav-sidebar.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@
8686
<li><a ui-sref="app.uibuttons"><i class="fa fa-circle-o"></i> Buttons</a></li>
8787
<li><a ui-sref="app.comingsoon"><i class="fa fa-circle-o"></i> Sliders</a></li>
8888
<li><a ui-sref="app.uitimeline"><i class="fa fa-circle-o"></i> Timeline</a></li>
89-
<li><a ui-sref="app.comingsoon"><i class="fa fa-circle-o"></i> Modals</a></li>
89+
<li><a ui-sref="app.uimodal"><i class="fa fa-circle-o"></i> Modals</a></li>
9090
</ul>
9191
</li>
9292
<li class="treeview">

‎angular/app/components/ui-modal/ui-modal.component.html

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<script type="text/ng-template" id="myModalContent.html">
2+
<div class="modal-header">
3+
<h3 class="modal-title">I'm a modal!</h3>
4+
</div>
5+
<div class="modal-body">
6+
<ul>
7+
<li ng-repeat="item in mvm.items">
8+
<a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item }}</a>
9+
</li>
10+
</ul>
11+
<h4>Selected: <small><code>{{ selected.item }}</code></small></h4>
12+
</div>
13+
<div class="modal-footer">
14+
<button class="btn btn-primary" type="button" ng-click="mvm.ok()">OK</button>
15+
<button class="btn btn-warning" type="button" ng-click="mvm.cancel()">Cancel</button>
16+
</div>
17+
</script>
18+
<section class="content-header">
19+
<h1>
20+
Modals
21+
<small>new</small>
22+
</h1>
23+
<ol class="breadcrumb">
24+
<li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
25+
<li><a href="#">UI</a></li>
26+
<li class="active">Modals</li>
27+
</ol>
28+
</section>
29+
<section class="content">
30+
<div class="box box-default">
31+
<div class="box-header with-border">
32+
<i class="fa fa-clone"></i>
33+
<h3 class="box-title">Modals</h3>
34+
</div>
35+
<div class="box-body">
36+
<button type="button" class="btn btn-default" ng-click="vm.modalOpen()">Open me!</button>
37+
<button type="button" class="btn btn-default" ng-click="vm.modalOpen('lg')">Large modal</button>
38+
<button type="button" class="btn btn-default" ng-click="vm.modalOpen('sm')">Small modal</button>
39+
<button type="button" class="btn btn-default" ng-click="vm.toggleModalAnimation()">Toggle Animation ({{ vm.animationsEnabled }})</button>
40+
<div ng-show="selected"><h4>Selection from a modal: <small><code>{{ selected }}</code></small></h4></div>
41+
</div>
42+
</div>
43+
<div class="box box-default">
44+
<div class="box-header with-border">
45+
<i class="fa fa-info-circle"></i>
46+
<h3 class="box-title">Sweet Alerts</h3>
47+
</div>
48+
<div class="box-body">
49+
<button type="button" class="btn btn-default" ng-click="vm.swalBasic()">Basic</button>
50+
<button type="button" class="btn btn-success" ng-click="vm.swalSuccess()">Success Message</button>
51+
<button type="button" class="btn btn-danger" ng-click="vm.swalConfirm()">Confirm</button>
52+
<button type="button" class="btn btn-primary" ng-click="vm.swalAjax()">AJAX</button>
53+
<button type="button" class="btn btn-info" ng-click="vm.swalDecide()">Decision</button>
54+
<button type="button" class="btn btn-info" ng-click="vm.swalImage()">Custom Image</button>
55+
<button type="button" class="btn btn-info" ng-click="vm.swalHtmlMessage()">HTML Message</button>
56+
<button type="button" class="btn btn-info" ng-click="vm.swalAutoClose()">Auto Close</button>
57+
<button type="button" class="btn btn-info" ng-click="vm.swalPrompt()">Prompt</button>
58+
</div>
59+
</div>
60+
</section>

‎angular/app/components/ui-modal/ui-modal.component.js

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
class UiModalController {
2+
constructor ($scope, $uibModal, $log, API) {
3+
'ngInject'
4+
5+
this.API = API
6+
this.$uibModal = $uibModal
7+
this.$log = $log
8+
this.$scope = $scope
9+
this.items = ['item1', 'item2', 'item3']
10+
this.animationsEnabled = true
11+
}
12+
13+
modalOpen (size) {
14+
let $uibModal = this.$uibModal
15+
let $scope = this.$scope
16+
let $log = this.$log
17+
let items = this.items
18+
19+
var modalInstance = $uibModal.open({
20+
animation: this.animationsEnabled,
21+
templateUrl: 'myModalContent.html',
22+
controller: this.modalcontroller,
23+
controllerAs: 'mvm',
24+
size: size,
25+
resolve: {
26+
items: function () {
27+
return items
28+
}
29+
}
30+
})
31+
32+
modalInstance.result.then(function (selectedItem) {
33+
$scope.selected = selectedItem
34+
}, function () {
35+
$log.info('Modal dismissed at: ' + new Date())
36+
})
37+
}
38+
39+
modalcontroller ($scope, $uibModalInstance, items) {
40+
this.items = items
41+
42+
$scope.selected = {
43+
item: items[0]
44+
}
45+
46+
this.ok = function () {
47+
$uibModalInstance.close($scope.selected.item)
48+
}
49+
50+
this.cancel = function () {
51+
$uibModalInstance.dismiss('cancel')
52+
}
53+
}
54+
55+
toggleModalAnimation () {
56+
this.animationsEnabled = !this.animationsEnabled
57+
}
58+
59+
swalConfirm () {
60+
swal({
61+
title: 'Are you sure?',
62+
text: 'You will not be able to recover this imaginary file!',
63+
type: 'warning',
64+
showCancelButton: true,
65+
confirmButtonColor: '#DD6B55',
66+
confirmButtonText: 'Yes, delete it!',
67+
closeOnConfirm: false
68+
}, function () {
69+
swal('Deleted!', 'Your imaginary file has been deleted.', 'success')
70+
})
71+
}
72+
73+
swalBasic () {
74+
swal("Here's a message!", "It's pretty, isn't it?")
75+
}
76+
77+
swalSuccess () {
78+
swal('Good job!', 'You clicked the button!', 'success')
79+
}
80+
81+
swalDecide () {
82+
swal({
83+
title: 'Are you sure?',
84+
text: 'You will not be able to recover this imaginary file!',
85+
type: 'warning',
86+
showCancelButton: true,
87+
confirmButtonColor: '#DD6B55',
88+
confirmButtonText: 'Yes, delete it!',
89+
cancelButtonText: 'No, cancel plx!',
90+
closeOnConfirm: false,
91+
closeOnCancel: false
92+
}, function (isConfirm) {
93+
if (isConfirm) {
94+
swal('Deleted!', 'Your imaginary file has been deleted.', 'success')
95+
} else {
96+
swal('Cancelled', 'Your imaginary file is safe :)', 'error')
97+
}
98+
})
99+
}
100+
101+
swalImage () {
102+
swal({
103+
title: 'Sweet!',
104+
text: "Here's a custom image.",
105+
imageUrl: '/img/avatar5.png'
106+
})
107+
}
108+
109+
swalHtmlMessage () {
110+
swal({
111+
title: 'HTML <small>Title</small>!',
112+
text: 'A custom <span style="color:#F8BB86">html<span> message.',
113+
html: true
114+
})
115+
}
116+
117+
swalAutoClose () {
118+
swal({
119+
title: 'Auto close alert!',
120+
text: 'I will close in 2 seconds.',
121+
timer: 2000,
122+
showConfirmButton: false
123+
})
124+
}
125+
126+
swalPrompt () {
127+
swal({
128+
title: 'An input!',
129+
text: 'Write something interesting:',
130+
type: 'input',
131+
showCancelButton: true,
132+
closeOnConfirm: false,
133+
animation: 'slide-from-top',
134+
inputPlaceholder: 'Write something'
135+
}, function (inputValue) {
136+
if (inputValue === false)
137+
return false
138+
if (inputValue === '') {
139+
swal.showInputError('You need to write something!')
140+
return false
141+
}
142+
swal('Nice!', 'You wrote: ' + inputValue, 'success')
143+
})
144+
}
145+
146+
swalAjax () {
147+
let API = this.API
148+
149+
swal({
150+
title: 'Ajax request example',
151+
text: 'Submit to run ajax request',
152+
type: 'info',
153+
showCancelButton: true,
154+
closeOnConfirm: false,
155+
showLoaderOnConfirm: true
156+
}, function () {
157+
let UserData = API.service('me', API.all('users'))
158+
159+
UserData.one().get()
160+
.then((response) => {
161+
let userdata = response.plain()
162+
swal('Your Name is: ' + userdata.data.name)
163+
})
164+
})
165+
}
166+
}
167+
168+
export const UiModalComponent = {
169+
templateUrl: './views/app/components/ui-modal/ui-modal.component.html',
170+
controller: UiModalController,
171+
controllerAs: 'vm',
172+
bindings: {}
173+
}

‎angular/app/components/ui-modal/ui-modal.scss

Whitespace-only changes.

‎angular/config/routes.config.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,17 @@ export function RoutesConfig ($stateProvider, $urlRouterProvider) {
5252
}
5353
}
5454
})
55+
.state('app.uimodal', {
56+
url: '/ui-modal',
57+
data: {
58+
auth: true
59+
},
60+
views: {
61+
'main@app': {
62+
template: '<ui-modal></ui-modal>'
63+
}
64+
}
65+
})
5566
.state('app.uitimeline', {
5667
url: '/ui-timeline',
5768
data: {

‎angular/index.components.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { UiModalComponent } from './app/components/ui-modal/ui-modal.component'
12
import { UiTimelineComponent } from './app/components/ui-timeline/ui-timeline.component'
23
import { UiButtonsComponent } from './app/components/ui-buttons/ui-buttons.component'
34
import { UiIconsComponent } from './app/components/ui-icons/ui-icons.component'
@@ -26,6 +27,7 @@ import { LoginFormComponent } from './app/components/login-form/login-form.compo
2627
import { RegisterFormComponent } from './app/components/register-form/register-form.component'
2728

2829
angular.module('app.components')
30+
.component('uiModal', UiModalComponent)
2931
.component('uiTimeline', UiTimelineComponent)
3032
.component('uiButtons', UiButtonsComponent)
3133
.component('uiIcons', UiIconsComponent)

‎tests/angular/app/components/ui-modal.component.spec.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
ngDescribe({
2+
name: 'Test ui-modal component',
3+
modules: 'app',
4+
element: '<ui-modal></ui-modal>',
5+
tests: function (deps) {
6+
it('basic test', () => {
7+
//
8+
})
9+
}
10+
})

0 commit comments

Comments
 (0)