Learning to use GitHub...

Author: acebal

js/almcss3/almcss.js

@@ -91,6 +91,8 @@ var ALMCSS = function() {
 			info = logger.info,
 			templates = ALMCSS.template.templates,
 			createTemplateElements = ALMCSS.template.dom.createTemplateElements,
+			positionedElements = ALMCSS.template.positionedElements,
+			moveElementsIntoSlots = ALMCSS.template.dom.moveElementsIntoSlots,
 			i;
 
 		info('Starting the main function of ALMCSS3...');
@@ -108,6 +110,7 @@ var ALMCSS = function() {
 			info('No templates were found');
 		}
 		createTemplateElements(templates);
+		moveElementsIntoSlots(positionedElements);
 	};
 
 	var loadModules = function() {

js/almcss3/parser.js

@@ -1648,9 +1648,12 @@ ALMCSS.parser = function() {
 				info('A template has been matched:\n' + template);
 
 			// Is it a `position` property with the name of a slot as a value?
-			} else if (property === 'position' && currentToken.isIdent()) {
+			} else if (property === 'position' && currentToken.isIdent() &&
+					!currentToken.isIdent('absolute') && !currentToken.isIdent('relative') &&
+					!currentToken.isIdent('static') && !currentToken.isIdent('fixed')) {
 				info("Found a 'position' property with a identifier " +
-					'as a value: assuming it is the name of a slot');
+					'as a value: assuming it is the name of a slot ' +
+					'(' + rule.selectorText + ' => at slot ' + currentToken.name + ')');
 				addPositionedElement(rule.selectorText, currentToken.name);
 			}
 

js/almcss3/template.js

@@ -313,7 +313,7 @@ ALMCSS.template = function() {
 				return templateId;
 			},
 			hasSlot: function(slotName) {
-				return slots.hasSlot(slotName);
+				return slots.contains(slotName);
 			},
 			getSlot: function(slotName) {
 				return slots.get(slotName);
@@ -495,6 +495,7 @@ ALMCSS.template = function() {
 
 	return {
 		templates: templates,
+		positionedElements: positionedElements,
 		TemplateError: TemplateError,
 		Slot: Slot,
 		Length: Length,

js/almcss3/template_dom.js

@@ -32,6 +32,7 @@ ALMCSS.template.dom = function() {
 			slotLabel.innerHTML = slot.slotId;
 			slotElement.appendChild(slotLabel);
 			template.htmlElement.appendChild(slotElement);
+			slot.htmlElement = slotElement;
 		}
 	};
 
@@ -48,7 +49,9 @@ ALMCSS.template.dom = function() {
 		// Currently, it is assumed that templates are defined using a single selector per CSS rule
 		var containerElement = document.querySelector(template.getSelectorText());
 		containerElement.appendChild(templateElement);
+		// The HtmlElement object of the DOM **is modified**
 		containerElement.isTemplate = true;
+		containerElement.template = template;
 		template.htmlElement = containerElement;
 		// Create the slots
 		createSlotElements(template);
@@ -61,8 +64,44 @@ ALMCSS.template.dom = function() {
 		}
 	};
 
+	var getTemplateAncestor = function(element, slotName) {
+		var template;
+		log("Looking for a template ancestor for the slot '" + slotName + "'...")
+		while (element.parentNode) {
+			element = element.parentNode;
+			if (element.isTemplate) {
+				template = element.template;
+				if (template.hasSlot(slotName)) {
+					info('A template ancestor was found');
+					log('The ancestor template is:\n' + template);
+					return template;
+				} else {
+					log("A template ancestor was found, but it did not contain a slot named '" +
+						slotName + "', so we continue traversing up the DOM tree...");
+				}
+			}
+		}
+		warn("No template ancestor with a slot '" + slotName + "' was found");
+	};
+
+	var moveElementsIntoSlots = function(positionedElements) {
+		var i, j, elements, slotName, templateAncestor, slotElement;
+		for (i = 0; i < positionedElements.length; i++) {
+			slotName = positionedElements[i].slotName;
+			elements = document.querySelectorAll(positionedElements[i].selectorText);
+			for (j = 0; j < elements.length; j++) {
+				templateAncestor = getTemplateAncestor(elements[j], slotName);
+				if (templateAncestor) {
+					slotElement = templateAncestor.getSlot(slotName).htmlElement;
+					slotElement.appendChild(elements[j].parentNode.removeChild(elements[j]));
+				}
+			}
+		}
+	};
+
 	return {
-		createTemplateElements: createTemplateElements
+		createTemplateElements: createTemplateElements,
+		moveElementsIntoSlots: moveElementsIntoSlots
 	};
 
 }();

js/almcss3/template_sizing.js

@@ -0,0 +1,5 @@
+var ALMCSS = ALMCSS || {};
+
+ALMCSS.template.dom = function() {
+
+}();

tests/template-000.css

@@ -4,6 +4,12 @@ body {
              "c";
 }
 
+#header     { position: c; }
+#content    { position: a; }
+#footer     { position: b; }
+
+ul          { position: c; }
+
 body {
     background: #fbf1cd;
     margin: 0;