Skip to content

Commit 3de6d19

Browse files
acebalacebal
committed
After implementing heights (without testing yet)...
1 parent ce59114 commit 3de6d19

4 files changed

Lines changed: 60 additions & 37 deletions

File tree

‎js/almcss3/almcss.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,7 @@ var ALMCSS = function() {
128128
moveElementsIntoSlots = ALMCSS.template.dom.moveElementsIntoSlots,
129129
computeWidths = ALMCSS.template.sizing.computeWidths,
130130
computeHeights = ALMCSS.template.sizing.computeHeights,
131+
paint = ALMCSS.template.dom.paint,
131132
i;
132133

133134
info('Starting the main function of ALMCSS3...');
@@ -144,10 +145,15 @@ var ALMCSS = function() {
144145
} else {
145146
info('No templates were found');
146147
}
148+
149+
// The Full Process
150+
// ----------------
151+
147152
createTemplateElements(templates);
148153
moveElementsIntoSlots(positionedElements);
149154
computeWidths(templates);
150155
computeHeights(templates);
156+
paint(templates);
151157
};
152158

153159
// Loading Modules

‎js/almcss3/template/dom.js‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -137,13 +137,17 @@ ALMCSS.template.dom = function() {
137137
};
138138

139139
var slot, htmlElement, slotsIterator = template.iterator();
140+
141+
template.htmlElement.style.width = template.computedWidth + 'px';
142+
template.htmlElement.style.height = template.computedHeight + 'px';
143+
140144
while (slotsIterator.hasNext()) {
141145
slot = slotsIterator.next();
142146
htmlElement = slot.htmlElement;
143-
htmlElement.style.left = getColumnOffset(slot.startColumn);
144-
htmlElement.style.top = getRowOffset(slot.startRow);
145-
htmlElement.style.width = slot.computedWidth;
146-
htmlElement.style.height = slot.computedHeight;
147+
htmlElement.style.left = getColumnOffset(slot.startColumn) + 'px';
148+
htmlElement.style.top = getRowOffset(slot.startRow) + 'px';
149+
htmlElement.style.width = slot.computedWidth + 'px';
150+
htmlElement.style.height = slot.computedHeight + 'px';
147151
htmlElement.style.position = 'absolute';
148152
}
149153

‎js/almcss3/template/sizing.js‎

Lines changed: 39 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -223,13 +223,14 @@ ALMCSS.template.sizing = function () {
223223
logger.groupEnd();
224224
};
225225

226-
var computeTemplateWidth = function (template) {
226+
var computeTemplateWidths = function (template) {
227227
var computedColumnWidths;
228228
logger.group('Computing widths of template %o...', template);
229229
computedColumnWidths = computeColumnWidths(template);
230230
computeSlotsWidths(template, computedColumnWidths);
231231
log('All widths (for columns and for every slot in the template) have been computed');
232232
logger.groupEnd();
233+
return computedColumnWidths;
233234
};
234235

235236
// This is the public method that will be called by the main function
@@ -248,8 +249,8 @@ ALMCSS.template.sizing = function () {
248249
};
249250

250251
return {
251-
computeTemplateWidth:computeTemplateWidth,
252-
computeWidths:computeWidths
252+
computeTemplateWidths: computeTemplateWidths,
253+
computeWidths: computeWidths
253254
};
254255

255256
}();
@@ -258,7 +259,8 @@ ALMCSS.template.sizing = function () {
258259

259260
var computeTemplateHeights = function (template) {
260261

261-
var rows = template.getRows();
262+
var rows = template.getRows(),
263+
i, templateHeight = 0;
262264

263265
// Step 1. Computing Single-Row Slots
264266
// ----------------------------------
@@ -281,7 +283,7 @@ ALMCSS.template.sizing = function () {
281283
var computeSingleRowSlots = function() {
282284
var i, j, slots, slotHeight;
283285

284-
log.group('Step 1: Computing single-row slots...');
286+
logger.group('Step 1: Computing single-row slots...');
285287

286288
// For each row in the template where `row.height` is auto or '*'
287289
for (i = 0; i < rows.length; i++) {
@@ -296,15 +298,15 @@ ALMCSS.template.sizing = function () {
296298
slotHeight = slots[j].getContentHeight();
297299
if (slotHeight > rows[i].computedHeight) {
298300
info('Computed height of row %d is set to %d pixels ' +
299-
'(the height of its single-row slot %s',
300-
i, slots[j].name);
301+
'(the height of its single-row slot %s)',
302+
i, slotHeight, slots[j].name);
301303
rows[i].computedHeight = slotHeight;
302304
}
303305
}
304306
}
305307
}
306308

307-
log.groupEnd();
309+
logger.groupEnd();
308310
};
309311

310312
// Step 2. Rows of Equal Height
@@ -321,7 +323,7 @@ ALMCSS.template.sizing = function () {
321323
var computeEqualHeightRows = function() {
322324
var i, largestHeight = 0;
323325

324-
log.group('Step 2: Computing equal-height rows...');
326+
logger.group('Step 2: Computing equal-height rows...');
325327

326328
// For each row in the template where `row.height` is '*'
327329
for (i = 0; i < rows.length; i++) {
@@ -340,10 +342,10 @@ ALMCSS.template.sizing = function () {
340342
}
341343
}
342344
info("The computed height of all '*' row has been set to the largest " +
343-
"of the heights of all the '*' rows computed in the step 1: ' +" +
345+
"of the heights of all the '*' rows computed in the step 1: " +
344346
"'%d pixels", largestHeight);
345347

346-
log.groupEnd();
348+
logger.groupEnd();
347349
};
348350

349351
// Step 3. Computing Multi-Row Slots
@@ -369,7 +371,7 @@ ALMCSS.template.sizing = function () {
369371
var sumComputedHeightOfRowspan = function (startRow, endRow) {
370372
var i, result = 0;
371373

372-
log.group('Computing the sum of the computed height of span of rows %d-%d...',
374+
logger.group('Computing the sum of the computed height of span of rows %d-%d...',
373375
startRow, endRow);
374376

375377
for (i = startRow; i < endRow + 1; i++) {
@@ -379,14 +381,14 @@ ALMCSS.template.sizing = function () {
379381
info('The sum of the computed heights of rows from %d to %d is %d pixels',
380382
startRow, endRow, result);
381383

382-
log.groupEnd();
384+
logger.groupEnd();
383385
return result;
384386
};
385387

386388
var sumComputedHeightOfAutoAndEqualRows = function (startRow, endRow) {
387389
var i, row, result = 0;
388390

389-
log.group("Getting the sum of the computed height of 'auto' " +
391+
logger.group("Getting the sum of the computed height of 'auto' " +
390392
"and '*' rows in %d-%d...", startRow, endRow);
391393

392394
for (i = startRow; i < endRow + 1; i++) {
@@ -404,15 +406,15 @@ ALMCSS.template.sizing = function () {
404406
info('There are not expandable rows in the range %d-%d', startRow, endRow);
405407
}
406408

407-
log.groupEnd();
409+
logger.groupEnd();
408410
return result;
409411
};
410412

411413

412414
var distributeExcessOfHeightAmongRows = function(excess, startRow, endRow) {
413415
var i, row, amount, totalHeight;
414416

415-
log.group("Distributing %d pixels among 'auto' and '*' rows in %d-%d...",
417+
logger.group("Distributing %d pixels among 'auto' and '*' rows in %d-%d...",
416418
excess, startRow, endRow);
417419

418420
totalHeight = sumComputedHeightOfAutoAndEqualRows(startRow, endRow);
@@ -432,14 +434,14 @@ ALMCSS.template.sizing = function () {
432434
}
433435
}
434436

435-
log.groupEnd();
437+
logger.groupEnd();
436438
};
437439

438440
var computeMultiRowSlots = function() {
439441
var slot, slotHeight, sumOfComputedHeightOfRows,
440442
excessOfHeight, slotsIterator = template.iterator();
441443

442-
log.group('Step 3: Computing the height of multi-row slots...');
444+
logger.group('Step 3: Computing the height of multi-row slots...');
443445

444446
while (slotsIterator.hasNext()) {
445447
slot = slotsIterator.next();
@@ -507,7 +509,7 @@ ALMCSS.template.sizing = function () {
507509

508510
}
509511

510-
log.groupEnd();
512+
logger.groupEnd();
511513

512514
};
513515

@@ -521,35 +523,41 @@ ALMCSS.template.sizing = function () {
521523
// The Height Algorithm
522524
// --------------------
523525

524-
var computeHeights = function (template) {
526+
logger.group('Computing the heights of template %d...', template.getId());
525527

526-
log.group('Computing the heights of template %d...', template.getId());
528+
computeSingleRowSlots();
529+
computeEqualHeightRows();
530+
computeMultiRowSlots();
531+
computeSingleRowSlots();
527532

528-
computeSingleRowSlots();
529-
computeEqualHeightRows();
530-
computeMultiRowSlots();
531-
computeSingleRowSlots();
532-
533-
log.groupEnd();
533+
for (i = 0; i < rows.length; i++) {
534+
templateHeight = templateHeight + rows[i].computedHeight;
535+
}
536+
template.computedHeight = templateHeight;
534537

535-
};
538+
logger.groupEnd();
536539

537540
};
538541

539542
var computeHeights = function (templates) {
540543

541-
log.groupCollapsed('Computing heights...');
544+
logger.group('Computing heights...');
542545

543546
for (var i = 0; i < templates.length; i++) {
544547
computeTemplateHeights(templates[i]);
545548
}
546549

547-
log.groupEnd();
550+
logger.groupEnd();
548551
};
549552

550-
};
553+
return {
554+
computeHeights: computeHeights
555+
};
556+
557+
}();
551558

552559
return {
560+
computeTemplateWidths: WidthAlgorithm.computeTemplateWidths,
553561
computeWidths: WidthAlgorithm.computeWidths,
554562
computeTemplateWidth: WidthAlgorithm.computeTemplateWidth,
555563
computeHeights: HeightAlgorithm.computeHeights

‎js/almcss3/template/template.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -648,8 +648,13 @@ ALMCSS.template = function() {
648648
createColumns(this.htmlElement);
649649
log('OK, they have been created:\n' + columns);
650650
log('Now, computing the widths...');
651-
this.computedWidths = sizing.computeTemplateWidth(this);
652-
651+
this.computedWidths = sizing.computeTemplateWidths(this);
652+
// TODO: Review and refactor this code (it probably shouldn't be here)
653+
var templateWidth = 0, i;
654+
for (i = 0; i < this.computedWidths.length; i++) {
655+
templateWidth = templateWidth + this.computedWidths[i];
656+
}
657+
this.computedWidth = templateWidth;
653658
}
654659
};
655660

0 commit comments

Comments
 (0)