Skip to content

Commit 194ebed

Browse files
author
Null McNull
committed
single element examples & styling
1 parent 4a1d903 commit 194ebed

File tree

8 files changed

+147
-67
lines changed

8 files changed

+147
-67
lines changed

‎.idea/runConfigurations/gulpfile_js_app.xml‎

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/runConfigurations/gulpfile_js_kitchensink.xml‎

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/angular-block-ui/angular-block-ui.css‎

Lines changed: 53 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
.block-ui {
2+
position: relative;
3+
}
4+
15
.block-ui-overlay {
26
z-index: 10001;
37
border: none;
@@ -10,6 +14,54 @@
1014
position: absolute;
1115
}
1216

17+
body.block-ui > .block-ui-container > .block-ui-overlay,
18+
body.block-ui > .block-ui-container > .block-ui-message-container {
19+
position: fixed;
20+
}
21+
22+
.block-ui-overlay.block-ui-visible {
23+
background-color: #fff;
24+
opacity: 0.5;
25+
-ms-filter:"alpha(opacity=50)";
26+
cursor: wait;
27+
}
28+
29+
.block-ui-message-container {
30+
position: absolute;
31+
top: 35%;
32+
left: 0;
33+
right: 0;
34+
height: 0;
35+
text-align: center;
36+
z-index: 10002;
37+
}
38+
39+
.block-ui-message {
40+
cursor: wait;
41+
display: inline-block;
42+
text-align: left;
43+
background-color: #333;
44+
color: #f5f5f5;
45+
padding: 20px;
46+
-webkit-border-radius: 4px;
47+
-moz-border-radius: 4px;
48+
border-radius: 4px;
49+
font-size: 20px;
50+
font-weight: bold;
51+
}
52+
53+
/*.block-ui-overlay {
54+
z-index: 10001;
55+
border: none;
56+
margin: 0;
57+
padding: 0;
58+
width: 100%;
59+
height: 100%;
60+
top: 0;
61+
left: 0;
62+
position: absolute;
63+
}
64+
1365
body > .block-ui > .block-ui-overlay {
1466
position: fixed;
1567
}
@@ -47,4 +99,4 @@ body > .block-ui > .block-ui-message-container {
4799
border-radius: 4px;
48100
font-size: 20px;
49101
font-weight: bold;
50-
}
102+
}*/

‎src/angular-block-ui/angular-block-ui.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ blkUI.config(function($provide, $httpProvider) {
2525

2626
blkUI.run(function($document, blockUIConfig) {
2727
if(blockUIConfig.autoInjectBodyBlock) {
28-
$document.find('body').append('<div block-ui="main"></div>');
28+
// $document.find('body').append('<div block-ui="main"></div>');
29+
$document.find('body').attr('block-ui', 'main');
2930
}
3031
});

‎src/app/app.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,4 +35,6 @@ angular.module('myApp', ['ngRoute', 'ngResource', 'blockUI', 'showdown', 'delay'
3535
//blockUIConfigProvider.message('Fun with config');
3636
// blockUIConfigProvider.autoBlock(false);
3737
//blockUIConfigProvider.template('<div class="block-ui-overlay">{{ message }}</div>');
38+
}).controller('MainController', function($scope, blockUI) {
39+
// blockUI.start();
3840
});

‎src/app/examples/element-blocking.html‎

Lines changed: 38 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<div ng-controller="ElementBlockingController">
22

33
<p>
4-
It's also possible to block individual elements by using the <em>block-ui</em> directive.
4+
It's also possible to block individual elements by using the <em>block-ui</em> directive.
55
Blocking individual elements can be done manually or automatically by informing the module which request correlates with a certain element.
66
If no match can be found for a certain request, the main block will be initiated.
77
</p>
@@ -12,19 +12,19 @@ <h2 class="spacer-lg">Automatic Element Blocking</h2>
1212
</p>
1313

1414
<div class="example">
15-
<div>
16-
<!--
17-
Mark this region as blockable for any request that
15+
<!--
16+
Mark this region as blockable for any request that
1817
matches the provided pattern: app/examples/data-array.json
1918
-->
20-
<div block-ui block-ui-pattern="/^app\/examples\/data-array\.json$/"></div>
19+
<!--<div block-ui block-ui-pattern="/^app\/examples\/data-array\.json$/"></div>-->
20+
<div block-ui block-ui-pattern="/^app\/examples\/data-array\.json$/">
2121
<div my-demo-table limit="5"></div>
2222
</div>
2323

2424
<h3>Html</h3>
2525
<pre><code>&lt;div&gt;
26-
&lt;!--
27-
Mark this region as blockable for any request that
26+
&lt;!--
27+
Mark this region as blockable for any request that
2828
starts with &quot;/api/person&quot;
2929
--&gt;
3030
&lt;div block-ui block-ui-pattern=&quot;/^\/api\/person($|\/).*/&quot;&gt;&lt;/div&gt;
@@ -34,21 +34,22 @@ <h3>Html</h3>
3434

3535
<h2 class="spacer-lg">Manual Element Blocking</h2>
3636
<p>
37-
Just like the main blockUI instance, blocking individual elements can also be done manually.
37+
Just like the main blockUI instance, blocking individual elements can also be done manually.
3838
By providing the <em>block-ui</em> an name the associated blockUI instance can be requested in our controller or service.
3939
</p>
40-
40+
4141
<div class="example">
4242

4343
<div style="max-width: 400px; margin: 0 auto 10px;">
44-
<div class="well">
45-
<div block-ui="myBlock"></div>
46-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
47-
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
48-
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
49-
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
50-
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
51-
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
44+
<div block-ui="myBlock">
45+
<div class="well">
46+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
47+
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
48+
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
49+
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
50+
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
51+
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
52+
</div>
5253
</div>
5354
<button ng-click="toggleBlock('myBlock')" type="button" class="btn btn-primary btn-lg btn-block">Toggle Block</button>
5455
</div>
@@ -59,7 +60,7 @@ <h3>Html</h3>
5960
&lt;p&gt;Lorem ipsum dolor sit amet ... &lt;/p&gt;
6061
&lt;/div&gt;
6162
&lt;button ng-click=&quot;toggleBlock()&quot;&gt;Toggle Block&lt;/button&gt;</code></pre>
62-
63+
6364
<h3>JavaScript</h3>
6465
<pre><code>// Get a reference to the blockUI instance
6566
var myBlock = blockUI.instances.get('myBlock');
@@ -71,7 +72,7 @@ <h3>JavaScript</h3>
7172
myBlock.start();
7273
}
7374
};</code></pre>
74-
75+
7576
</div>
7677
<h2>Shared blockUI instances</h2>
7778
<p>
@@ -81,26 +82,29 @@ <h2>Shared blockUI instances</h2>
8182

8283
<div class="row">
8384
<div class="col-sm-4">
84-
<div class="well">
85-
<h3>Sharing blockUI instance</h3>
86-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
87-
<div block-ui="mySharedBlock"></div>
85+
<div block-ui="mySharedBlock">
86+
<div class="well">
87+
<h3>Sharing blockUI instance</h3>
88+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
89+
</div>
8890
</div>
89-
</div>
91+
</div>
9092
<div class="col-sm-4">
91-
<div class="well">
92-
<h3>Sharing blockUI instance</h3>
93-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
94-
<div block-ui="mySharedBlock"></div>
93+
<div block-ui="mySharedBlock">
94+
<div class="well">
95+
<h3>Sharing blockUI instance</h3>
96+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
97+
</div>
9598
</div>
96-
</div>
99+
</div>
97100
<div class="col-sm-4">
98-
<div class="well">
99-
<h3>Sharing blockUI instance</h3>
100-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
101-
<div block-ui="mySharedBlock"></div>
101+
<div block-ui="mySharedBlock">
102+
<div class="well">
103+
<h3>Sharing blockUI instance</h3>
104+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
105+
</div>
102106
</div>
103-
</div>
107+
</div>
104108
</div>
105109

106110
<div style="max-width: 400px; margin: 0 auto 10px;">

‎src/app/examples/focus-input.html‎

Lines changed: 37 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -2,48 +2,55 @@
22

33
<p>
44
To prevent forms from re-submitting data, focused elements will be <em>blured</em>
5-
whenever a containing block is active.
6-
Unless the focus has been changed by the user while the (non-global) block was active, the focus is restored whenever the block has finished.
5+
whenever a containing block is active.
6+
Unless the focus has been changed by the user while the (non-global) block was active, the focus is restored
7+
whenever the block has finished.
78
</p>
9+
810
<div class="alert alert-info">
9-
<p>Restoring focus to any input element other than the submit button is not possible in any version of <em>Internet Explorer</em>. All other major browsers should be able to restore the focus to any previous element.</p>
11+
<p>Restoring focus to any input element other than the submit button is not possible in any version of <em>Internet
12+
Explorer</em>. All other major browsers should be able to restore the focus to any previous element.</p>
1013
</div>
1114
<p>
12-
The example below contains two forms both with their own blocking scope. Blocking is activated whenever the form is submitted by pressing enter in one of the inputs or by clicking on the submit button.
15+
The example below contains two forms both with their own blocking scope. Blocking is activated whenever the form is
16+
submitted by pressing enter in one of the inputs or by clicking on the submit button.
1317
</p>
18+
1419
<div class="example">
1520
<div class="row">
1621

1722
<div class="col-sm-6">
18-
<form role="form" ng-submit="login()">
19-
<legend>Login</legend>
20-
<div block-ui="loginFormBlock" class="form-block"></div>
21-
<div class="form-group">
22-
<label>Email address</label>
23-
<input class="form-control" placeholder="Enter email">
24-
</div>
25-
<div class="form-group">
26-
<label>Password</label>
27-
<input type="password" class="form-control" placeholder="Password">
28-
</div>
29-
<button type="submit" class="btn btn-default">Login</button>
30-
</form>
23+
<div block-ui="loginFormBlock" class="form-block">
24+
<form role="form" ng-submit="login()">
25+
<legend>Login</legend>
26+
<div class="form-group">
27+
<label>Email address</label>
28+
<input class="form-control" placeholder="Enter email">
29+
</div>
30+
<div class="form-group">
31+
<label>Password</label>
32+
<input type="password" class="form-control" placeholder="Password">
33+
</div>
34+
<button type="submit" class="btn btn-default">Login</button>
35+
</form>
36+
</div>
3137
</div>
3238

3339
<div class="col-sm-6">
34-
<form role="form" ng-submit="search()">
35-
<legend>Search</legend>
36-
<div block-ui="searchFormBlock" class="form-block"></div>
37-
<div class="form-group">
38-
<label>Name</label>
39-
<input class="form-control" placeholder="Enter the name">
40-
</div>
41-
<div class="form-group">
42-
<label>Last name</label>
43-
<input class="form-control" placeholder="Enter the lastname">
44-
</div>
45-
<button type="submit" class="btn btn-default">Search</button>
46-
</form>
40+
<div block-ui="searchFormBlock" class="form-block">
41+
<form role="form" ng-submit="search()">
42+
<legend>Search</legend>
43+
<div class="form-group">
44+
<label>Name</label>
45+
<input class="form-control" placeholder="Enter the name">
46+
</div>
47+
<div class="form-group">
48+
<label>Last name</label>
49+
<input class="form-control" placeholder="Enter the lastname">
50+
</div>
51+
<button type="submit" class="btn btn-default">Search</button>
52+
</form>
53+
</div>
4754
</div>
4855

4956
</div>

‎src/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
<![endif]-->
2424

2525
</head>
26-
<body>
26+
<body ng-controller="MainController">
2727

2828
<header>
2929
<div class="container">

0 commit comments

Comments
 (0)