Skip to content

Commit 4603838

Browse files
acebalacebal
committed
Resizing the window working.
1 parent 21bda0d commit 4603838

9 files changed

Lines changed: 179 additions & 38 deletions

File tree

‎js/almcss3/almcss.js‎

Lines changed: 43 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -113,22 +113,40 @@ var ALMCSS = function() {
113113

114114
}(basePath);
115115

116+
117+
// The Full Layout Process
118+
// -----------------------
119+
120+
var doLayout = function() {
121+
122+
var templates = ALMCSS.template.templates,
123+
computeWidths = ALMCSS.template.layout.computeWidths,
124+
computeHeights = ALMCSS.template.layout.computeHeights,
125+
paint = ALMCSS.template.dom.paint,
126+
LoggerLevel = ALMCSS.debug.LoggerLevel,
127+
logger = ALMCSS.debug.getLogger('Layout', LoggerLevel.all);
128+
129+
logger.group('Starting layout...');
130+
computeWidths(templates);
131+
computeHeights(templates);
132+
paint(templates);
133+
logger.groupEnd();
134+
135+
};
136+
116137
// Main Function
117138
// -------------
118139
var init = function() {
119140

120-
var LoggerLevel = ALMCSS.debug.LoggerLevel,
141+
var templates = ALMCSS.template.templates,
142+
createTemplateElements = ALMCSS.template.dom.createTemplateElements,
143+
positionedElements = ALMCSS.template.positionedElements,
144+
moveElementsIntoSlots = ALMCSS.template.dom.moveElementsIntoSlots,
145+
LoggerLevel = ALMCSS.debug.LoggerLevel,
121146
logger = ALMCSS.debug.getLogger('ALMCSS3 Main Function', LoggerLevel.all),
122147
parser = ALMCSS.stylesheet.parser.Parser,
123148
log = logger.log,
124149
info = logger.info,
125-
templates = ALMCSS.template.templates,
126-
createTemplateElements = ALMCSS.template.dom.createTemplateElements,
127-
positionedElements = ALMCSS.template.positionedElements,
128-
moveElementsIntoSlots = ALMCSS.template.dom.moveElementsIntoSlots,
129-
computeWidths = ALMCSS.template.layout.computeWidths,
130-
computeHeights = ALMCSS.template.layout.computeHeights,
131-
paint = ALMCSS.template.dom.paint,
132150
i;
133151

134152
info('Starting the main function of ALMCSS3...');
@@ -146,14 +164,9 @@ var ALMCSS = function() {
146164
info('No templates were found');
147165
}
148166

149-
// The Full Process
150-
// ----------------
151-
152167
createTemplateElements(templates);
153168
moveElementsIntoSlots(positionedElements);
154-
computeWidths(templates);
155-
computeHeights(templates);
156-
paint(templates);
169+
doLayout();
157170
};
158171

159172
// Loading Modules
@@ -183,18 +196,27 @@ var ALMCSS = function() {
183196
], init);
184197
};
185198

186-
var setOnloadEvent = function(start) {
187-
var obj = window, event = 'load';
199+
200+
// Events
201+
// ------
202+
203+
var addEvent = function(obj, event, whenDone) {
188204
if (obj && obj.addEventListener) { // W3C
189-
obj.addEventListener(event, start, false);
205+
obj.addEventListener(event, whenDone, false);
190206
} else if (obj && obj.attachEvent) { // Older IE
191-
obj.attachEvent("on" + event, start);
192-
} else {
193-
throw new AlmcssError('The load event could not be added');
207+
obj.attachEvent("on" + event, whenDone);
194208
}
195209
};
196210

197-
setOnloadEvent(loadModules);
211+
var resizeTimer;
212+
213+
var whenResize = function() {
214+
clearTimeout(resizeTimer);
215+
resizeTimer = setTimeout(doLayout, 30);
216+
};
217+
218+
addEvent(window, 'load', loadModules);
219+
addEvent(window, 'resize', whenResize);
198220

199221
return {
200222
AlmcssError: AlmcssError,

‎js/almcss3/domUtils.js‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,19 @@ ALMCSS.domUtils = function() {
135135

136136

137137

138+
// Add Event
139+
// ---------
140+
141+
var addEvent = function(obj, event, whenDone) {
142+
if (obj && obj.addEventListener) { // W3C
143+
obj.addEventListener(event, whenDone, false);
144+
} else if (obj && obj.attachEvent) { // Older IE
145+
obj.attachEvent("on" + event, whenDone);
146+
}
147+
};
148+
149+
150+
138151
// Public Functions Exported by This Module
139152
// ----------------------------------------
140153

@@ -144,7 +157,8 @@ ALMCSS.domUtils = function() {
144157
lengthToPixels: lengthToPixels,
145158
computeIntrinsicPreferredWidth: computeIntrinsicPreferredWidth,
146159
computeIntrinsicMinimumWidth: computeIntrinsicMinimumWidth,
147-
computeContentHeight: computeContentHeight
160+
computeContentHeight: computeContentHeight,
161+
addEvent: addEvent
148162
};
149163

150164
}();

‎js/almcss3/template/dom.js‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ ALMCSS.template.dom = function() {
4343
}
4444
};
4545

46+
/*
4647
var createTemplateElement = function(template) {
4748
var templateElement, templateLabel;
4849
// __Currently, it is assumed that templates are defined using a single selector per CSS rule.__
@@ -65,8 +66,23 @@ ALMCSS.template.dom = function() {
6566
// Create the slots.
6667
createSlotElements(template);
6768
};
69+
*/
70+
71+
var reset = function(template) {
72+
var slotsIterator, slot;
73+
slotsIterator = template.iterator();
74+
while (slotsIterator.hasNext()) {
75+
slot = slotsIterator.next();
76+
slot.htmlElement.style.left = 'auto';
77+
slot.htmlElement.style.top = 'auto';
78+
slot.htmlElement.style.position = 'static';
79+
slot.htmlElement.style.width = 'auto';
80+
slot.htmlElement.style.height = 'auto';
81+
}
82+
template.htmlElement.style.width = 'auto';
83+
template.htmlElement.style.height = 'auto';
84+
};
6885

69-
/*
7086
var createTemplateElement = function(template) {
7187
var templateElement, templateLabel;
7288
templateElement = document.createElement('div');
@@ -87,11 +103,10 @@ ALMCSS.template.dom = function() {
87103
// The DOM HTMLElement also stores a reference to the template it belongs.
88104
containerElement.template = template;
89105
// And, of course, the template stores a reference to the HTMLElement created.
90-
template.htmlElement = htmlElement;
106+
template.htmlElement = templateElement;
91107
// Create the slots.
92108
createSlotElements(template);
93109
};
94-
*/
95110

96111
var createTemplateElements = function(templates) {
97112
var i;
@@ -190,7 +205,8 @@ ALMCSS.template.dom = function() {
190205
return {
191206
createTemplateElements: createTemplateElements,
192207
moveElementsIntoSlots: moveElementsIntoSlots,
193-
paint: paint
208+
paint: paint,
209+
reset: reset
194210
};
195211

196212
}();

‎js/almcss3/template/layout.js‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -274,7 +274,7 @@ ALMCSS.template.layout = function () {
274274
info('(Currently, all templates are computed as is they had an a-priori width)');
275275

276276
var columns, element, elementWidth, sumOfIntrinsicMinimumWidths,
277-
computedWidths = [], i;
277+
sumOfCurrentComputedWidths, computedWidths = [], i;
278278

279279
assert(template.getColumns(), 'Columns must have been created before computing the width');
280280

@@ -474,8 +474,8 @@ ALMCSS.template.layout = function () {
474474
}
475475
info('Computed height of row %d has been set to %d ' +
476476
'(the height of its taller single-row slot: %s)',
477-
i, slotHeight, largestSlot.name);
478-
rows[i].computedHeight = slotHeight;
477+
i, rowHeight, largestSlot.name);
478+
rows[i].computedHeight = rowHeight;
479479

480480
// Once the row has been set a computed height equal to
481481
// the content height of its tallest slot that spans
@@ -568,7 +568,7 @@ ALMCSS.template.layout = function () {
568568
startRow, endRow);
569569

570570
for (i = startRow; i < endRow + 1; i++) {
571-
log('Computed height of row %d is %d pixels', rows[i].computedHeight);
571+
log('Computed height of row %d is %d pixels', i, rows[i].computedHeight);
572572
result = result + rows[i].computedHeight;
573573
}
574574

@@ -649,7 +649,7 @@ ALMCSS.template.layout = function () {
649649
var slot, slotHeight, sumOfComputedHeightOfRows,
650650
excessOfHeight, slotsIterator = template.iterator();
651651

652-
logger.group('Step 3: Computing the height of multi-row slots...');
652+
logger.group('Computing the height of multi-row slots...');
653653

654654
while (slotsIterator.hasNext()) {
655655
slot = slotsIterator.next();
@@ -766,11 +766,12 @@ ALMCSS.template.layout = function () {
766766
// ----------------------------------------------
767767

768768
var computeTemplateHeight = function() {
769-
info('Computing the height of the template itself...');
769+
logger.group('Computing the height of the template itself...');
770770
for (var i = 0; i < rows.length; i++) {
771771
templateHeight = templateHeight + rows[i].computedHeight;
772772
}
773773
info('The template has been set a height of %d pixels', templateHeight);
774+
logger.groupEnd();
774775
template.computedHeight = templateHeight;
775776
};
776777

@@ -789,6 +790,7 @@ ALMCSS.template.layout = function () {
789790
computeSingleRowSlots();
790791
computeTemplateHeight();
791792

793+
log('Template %d finished', template.getId());
792794
logger.groupEnd();
793795

794796
};

‎js/almcss3/template/template.js‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -659,18 +659,26 @@ ALMCSS.template = function() {
659659
computeWidths: function() {
660660
assert(this.htmlElement, 'computeWidths can not be called before ' +
661661
'having created the associated DOM elements for the template');
662-
info('Computing widths for template ' + templateId);
663-
log('First, column objects must be created for this template...');
664-
createColumns(this.htmlElement);
665-
log('OK, they have been created:\n' + columns);
666-
log('Now, computing the widths...');
662+
info('Computing widths for template ' + templateId);
663+
if (!columns.length) {
664+
log('First, column objects must be created for this template...');
665+
createColumns(this.htmlElement);
666+
log('OK, they have been created:\n' + columns);
667+
log('Now, compute the widths...');
668+
} else {
669+
warn('htmlElement: ', this.htmlElement);
670+
ALMCSS.template.dom.reset(this);
671+
}
667672
this.computedWidths = sizing.computeTemplateWidths(this);
668673
// TODO: Review and refactor this code (it probably shouldn't be here)
669674
var templateWidth = 0, i;
670675
for (i = 0; i < this.computedWidths.length; i++) {
671676
templateWidth = templateWidth + this.computedWidths[i];
672677
}
678+
warn('htmlElement: ', this.htmlElement);
673679
this.computedWidth = templateWidth;
680+
warn('htmlElement: ', this.htmlElement);
681+
warn('computedWidth: ', this.computedWidth);
674682
}
675683
};
676684

‎tests/css/base.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
body {
2+
font-family: Helvetica, Arial, sans-serif;
3+
font-size: 1.6em;
4+
line-height: 1.4;
5+
color: #404040;
6+
}
7+

‎tests/template-001.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>ALMCSS Test</title>
5+
<meta charset=utf-8 />
6+
<link rel="stylesheet" type="text/css" href="css/almcss-debug.css"></link>
7+
<link rel="stylesheet" type="text/css" href="css/base.css"></link>
8+
<style>
9+
10+
body {
11+
display: "abc";
12+
}
13+
14+
#one { position: a; }
15+
#two { position: b; }
16+
#three { position: c; }
17+
18+
</style>
19+
<script type="text/javascript" src="../js/almcss3/almcss.js"></script>
20+
</head>
21+
<body>
22+
<h1>ALMcss3</h1>
23+
<div id="one">
24+
<h2>One</h2>
25+
</div>
26+
<div id="two">
27+
<h2>Two</h2>
28+
</div>
29+
<div id="three">
30+
<h2>Three</h2>
31+
</div>
32+
33+
</body>
34+
</html>

‎tests/template-002.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>ALMCSS Test</title>
5+
<meta charset=utf-8 />
6+
<link rel="stylesheet" type="text/css" href="css/almcss-debug.css"></link>
7+
<link rel="stylesheet" type="text/css" href="css/base.css"></link>
8+
<style>
9+
10+
body {
11+
display: "aaa"
12+
"bbc"
13+
"ddc";
14+
}
15+
16+
#one { position: b; }
17+
#two { position: c; }
18+
#three { position: d; }
19+
20+
h1 { position: a; }
21+
22+
</style>
23+
<script type="text/javascript" src="../js/almcss3/almcss.js"></script>
24+
</head>
25+
<body>
26+
<h1>ALMcss3</h1>
27+
<div id="one">
28+
<h2>One</h2>
29+
</div>
30+
<div id="two">
31+
<h2>Two</h2>
32+
</div>
33+
<div id="three">
34+
<h2>Three</h2>
35+
</div>
36+
37+
</body>
38+
</html>

‎tests/width-algorithm-template.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121

2222
#container {
2323
display: "abc"
24-
600px fit-content 800px;
24+
max-content fit-content 800px;
2525
}
2626

2727
#one { position: a; }

0 commit comments

Comments
 (0)