Skip to content

Commit 85feb2b

Browse files
brianbakerbrianbaker
committed
updated example container to dynamically place apps in new rows when a row fills up. fixes #20 
1 parent b8db3cf commit 85feb2b

File tree

4 files changed

+77
-38
lines changed

4 files changed

+77
-38
lines changed

‎.jshintrc

+2-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@
99
"EventEmitter2": true,
1010
"exports": true,
1111
"F2": true,
12-
"jQuery": true
12+
"jQuery": true,
13+
"$": true
1314
},
1415
"latedef": true,
1516
"noarg": true,

‎examples/container/index.html

+2-4
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,7 @@
3333
</div>
3434
</div>
3535

36-
<div id="mainContent" class="indexPage container">
37-
<div class="row"></div>
38-
</div>
36+
<div id="mainContent" class="indexPage container"></div>
3937

4038
<div id="languageSelect" class="modal hide">
4139
<div class="modal-header">
@@ -79,7 +77,7 @@ <h3>F2 Example Container</h3>
7977

8078
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
8179
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>
82-
<script src="../../sdk/f2.min.js" type="text/javascript"></script>
80+
<script src="../../sdk/f2.debug.js" type="text/javascript"></script>
8381
<script src="./js/bootstrap.min.js?2.2.2" type="text/javascript"></script>
8482

8583
<!-- Include container-specific logic, notably F2.init() -->

‎examples/container/js/container-app-handlers.js

+38-17
Original file line numberDiff line numberDiff line change
@@ -12,24 +12,23 @@ $(function() {
1212
}
1313
},
1414
supportedViews: [F2.Constants.Views.HOME, F2.Constants.Views.SETTINGS, F2.Constants.Views.REMOVE],
15-
secureAppPagePath: "secure.html" // this should go on a separate domain from index.html
15+
secureAppPagePath: 'secure.html' // this should go on a separate domain from index.html
1616
});
1717

1818
// Define these prior to init
1919
F2.AppHandlers
2020
.on(
2121
containerAppHandlerToken,
2222
F2.Constants.AppHandlers.APP_CREATE_ROOT,
23-
function(appConfig)
24-
{
23+
function(appConfig) {
2524
var hasSettings = F2.inArray(F2.Constants.Views.SETTINGS, appConfig.views);
2625
var hasHelp = F2.inArray(F2.Constants.Views.HELP, appConfig.views);
2726
var hasAbout = F2.inArray(F2.Constants.Views.ABOUT, appConfig.views);
2827
var showDivider = hasSettings || hasHelp || hasAbout;
2928
var gridWidth = appConfig.minGridSize || 3;
3029

3130
appConfig.root = $([
32-
'<section class="' + F2.Constants.Css.APP + ' span' + gridWidth + '">',
31+
'<section class="' + F2.Constants.Css.APP + ' span' + gridWidth + '" data-grid-width="' + gridWidth + '">',
3332
'<header class="clearfix">',
3433
'<h2 class="pull-left ', F2.Constants.Css.APP_TITLE, '">', appConfig.name.toUpperCase(), '</h2>',
3534
'<div class="btn-group pull-right">',
@@ -52,12 +51,34 @@ $(function() {
5251
.on(
5352
containerAppHandlerToken,
5453
F2.Constants.AppHandlers.APP_RENDER,
55-
$("body").get(0)
54+
function(appConfig, app) {
55+
56+
var gridWidth = appConfig.minGridSize || 3;
57+
58+
// find a row that can fit this app
59+
var row;
60+
$('#mainContent div.row').each(function(i, el) {
61+
var span = 0;
62+
$('.f2-app', el).each(function(j, app) {
63+
span += Number($(app).data('gridWidth'));
64+
});
65+
if (span <= (12 - gridWidth)) {
66+
row = el;
67+
return false;
68+
}
69+
});
70+
// create a new row if one wasn't found
71+
if (row === undefined) {
72+
row = $('<div class="row"></div>').appendTo('#mainContent');
73+
}
74+
// append app to app root and also to row
75+
$(appConfig.root).append(app).appendTo(row);
76+
}
5677
)
5778
.on(
5879
containerAppHandlerToken,
5980
F2.Constants.AppHandlers.APP_RENDER_AFTER,
60-
function(appConfig){
81+
function(appConfig) {
6182
F2.UI.hideMask(appConfig.instanceId, appConfig.root);
6283
}
6384
)
@@ -68,14 +89,14 @@ $(function() {
6889
if(!appInstance) { return; }
6990

7091
// call the apps destroy method, if it has one
71-
if(appInstance.app && appInstance.app.destroy && typeof(appInstance.app.destroy) == "function")
92+
if(appInstance.app && appInstance.app.destroy && typeof(appInstance.app.destroy) == 'function')
7293
{
7394
appInstance.app.destroy();
7495
}
7596
// warn the container developer/app developer that even though they have a destroy method it hasn't been
7697
else if(appInstance.app && appInstance.app.destroy)
7798
{
78-
F2.log(app.config.appId + " has a Destroy property, but Destroy is not of type function and as such will not be executed.");
99+
F2.log(appInstance.appId + ' has a Destroy property, but Destroy is not of type function and as such will not be executed.');
79100
}
80101

81102
// fade out and remove the root
@@ -89,15 +110,15 @@ $(function() {
89110
//listen for app symbol change events and re-broadcast
90111
F2.Events.on(
91112
F2.Constants.Events.APP_SYMBOL_CHANGE,
92-
function(data){
93-
F2.Events.emit(F2.Constants.Events.CONTAINER_SYMBOL_CHANGE, { symbol: data.symbol, name: data.name || "" });
113+
function(data) {
114+
F2.Events.emit(F2.Constants.Events.CONTAINER_SYMBOL_CHANGE, { symbol: data.symbol, name: data.name || '' });
94115
}
95116
);
96117

97118
/**
98119
* init symbol lookup in navbar
99120
*/
100-
$("#symbolLookup")
121+
$('#symbolLookup')
101122
.on('keypress', function(event) {
102123
if (event.keyCode == 13) {
103124
event.preventDefault();
@@ -112,24 +133,24 @@ $(function() {
112133
source: function (request, response) {
113134

114135
$.ajax({
115-
url: "http://dev.markitondemand.com/api/Lookup/jsonp",
116-
dataType: "jsonp",
136+
url: 'http://dev.markitondemand.com/api/Lookup/jsonp',
137+
dataType: 'jsonp',
117138
data: {
118139
input: request.term
119140
},
120141
success: function (data) {
121142
response($.map(data, function (item) {
122143
return {
123-
label: item.Name + " (" + item.Exchange + ")",
144+
label: item.Name + ' (' + item.Exchange + ')',
124145
value: item.Symbol
125-
}
146+
};
126147
}));
127148
},
128149
open: function() {
129-
$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
150+
$(this).removeClass('ui-corner-all').addClass('ui-corner-top');
130151
},
131152
close: function() {
132-
$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
153+
$(this).removeClass('ui-corner-top').addClass('ui-corner-all');
133154
}
134155
});
135156
}

‎examples/container/js/container.js

+35-16
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ $(function() {
55
*/
66
F2.init({
77

8-
afterAppRender: function (app, html) {
8+
afterAppRender: function(app, html) {
99
var el = $(app.root).append(html);
1010
F2.UI.hideMask(app.instanceId, el);
1111
return el;
@@ -20,7 +20,7 @@ $(function() {
2020
var gridWidth = app.minGridSize || 3;
2121

2222
var appRoot = $([
23-
'<section class="' + F2.Constants.Css.APP + ' span' + gridWidth + '">',
23+
'<section class="' + F2.Constants.Css.APP + ' span' + gridWidth + '" data-grid-width="' + gridWidth + '">',
2424
'<header class="clearfix">',
2525
'<h2 class="pull-left ', F2.Constants.Css.APP_TITLE, '">', app.name.toUpperCase(), '</h2>',
2626
'<div class="btn-group pull-right">',
@@ -37,7 +37,26 @@ $(function() {
3737
'</div>',
3838
'</header>',
3939
'</section>'
40-
].join('')).appendTo($('#mainContent div.row'));
40+
].join(''));
41+
42+
// find a row that can fit this app
43+
var row;
44+
$('#mainContent div.row').each(function(i, el) {
45+
var span = 0;
46+
$('.f2-app', el).each(function(j, app) {
47+
span += Number($(app).data('gridWidth'));
48+
});
49+
if (span <= (12 - gridWidth)) {
50+
row = el;
51+
return false;
52+
}
53+
});
54+
// create a new row if one wasn't found
55+
if (row === undefined) {
56+
row = $('<div class="row"></div>').appendTo('#mainContent');
57+
}
58+
// append app to row
59+
$(appRoot).appendTo(row);
4160

4261
// show loader
4362
F2.UI.showMask(app.instanceId, appRoot, true);
@@ -52,21 +71,21 @@ $(function() {
5271
},
5372

5473
supportedViews: [F2.Constants.Views.HOME, F2.Constants.Views.SETTINGS, F2.Constants.Views.REMOVE],
55-
secureAppPagePath: "secure.html" // this should go on a separate domain from index.html
74+
secureAppPagePath: 'secure.html' // this should go on a separate domain from index.html
5675
});
5776

5877
//listen for app symbol change events and re-broadcast
5978
F2.Events.on(
6079
F2.Constants.Events.APP_SYMBOL_CHANGE,
61-
function(data){
62-
F2.Events.emit(F2.Constants.Events.CONTAINER_SYMBOL_CHANGE, { symbol: data.symbol, name: data.name || "" });
80+
function(data) {
81+
F2.Events.emit(F2.Constants.Events.CONTAINER_SYMBOL_CHANGE, { symbol: data.symbol, name: data.name || '' });
6382
}
6483
);
6584

6685
/**
6786
* init symbol lookup in navbar
6887
*/
69-
$("#symbolLookup")
88+
$('#symbolLookup')
7089
.on('keypress', function(event) {
7190
if (event.keyCode == 13) {
7291
event.preventDefault();
@@ -75,30 +94,30 @@ $(function() {
7594
.autocomplete({
7695
autoFocus:true,
7796
minLength: 0,
78-
select: function (event, ui) {
97+
select: function(event, ui) {
7998
F2.Events.emit(F2.Constants.Events.CONTAINER_SYMBOL_CHANGE, { symbol: ui.item.value, name: ui.item.label });
8099
},
81-
source: function (request, response) {
100+
source: function(request, response) {
82101

83102
$.ajax({
84-
url: "http://dev.markitondemand.com/api/Lookup/jsonp",
85-
dataType: "jsonp",
103+
url: 'http://dev.markitondemand.com/api/Lookup/jsonp',
104+
dataType: 'jsonp',
86105
data: {
87106
input: request.term
88107
},
89-
success: function (data) {
108+
success: function(data) {
90109
response($.map(data, function (item) {
91110
return {
92-
label: item.Name + " (" + item.Exchange + ")",
111+
label: item.Name + ' (' + item.Exchange + ')',
93112
value: item.Symbol
94-
}
113+
};
95114
}));
96115
},
97116
open: function() {
98-
$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
117+
$(this).removeClass('ui-corner-all').addClass('ui-corner-top');
99118
},
100119
close: function() {
101-
$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
120+
$(this).removeClass('ui-corner-top').addClass('ui-corner-all');
102121
}
103122
});
104123
}

0 commit comments

Comments
 (0)