/**
* Function that goes through all of the media query data and writes it to the
* style block in the iframe and also to the media-queries.css file.
*/
function refreshIFrameMediaQueries(writeToFile) {
// only update if the reference to the style element has been set
if (style) {
// Defining some vars we'll need.
var s = "",
sortedQueries = QueryManager.getSortedQueryMarks(),
i = sortedQueries.length,
query,
sel,
k;
// Loop through the queries and write them to the output string.
while (i--) {
// We need to sort the queries so the larger widths are written first
// in order for inheritance to work properly.
query = sortedQueries[i];
s += '@media only screen and (max-width:';
s += query.width;
s += 'px) {\n\n';
for (sel in query.selectors) {
if (query.selectors.hasOwnProperty(sel)) {
s += '\t' + sel + ' {\n';
for (k in query.selectors[sel].rules) {
if (query.selectors[sel].rules.hasOwnProperty(k)) {
s += '\t\t' + k + ": " + query.selectors[sel].rules[k] + '\n';
}
}
s += '\t}\n\n';
}
}
s += '}\n';
}
// Set the style block in the iframe using the output string.
style.textContent = s;
// Write the new text to the media-queries.css file.
if (writeToFile === undefined || writeToFile) {
FileUtils.writeText(mediaQueryDoc.file, s);
}
}
}
/**
* refreshes the contents of the inline widget, showing the css rules of the
* current css selector (from dropdown)
*
* @params cq : the current media query that has been selected from slider
* @params res : the css rules that were retrieved from the selected element in the
* main editor
* @params currentSelector : the current css selector. If not supplied it will default to
* first css selector for the current element
*/
function refreshCodeEditor(cq, res, currentSelector) {
currentSelector = currentSelector || res.selectors[0];
// Array to hold information about whether a rule has already been set by this or another query.
var existingEdits = [],
// indicates the current line number. setting for 1 as the first line (0) is the selector
lineNumber = 0,
// used in iterator for properties
prop,
index,
// Here we begin writing the string that we will use to populate the inline editor.
str = currentSelector + " {\n";
// Go through all of the returned CSS rules and write to the output string.
if (res.rules[currentSelector] !== null) {
for (prop in res.rules[currentSelector]) {
var pvalue = null;
lineNumber++;
// Here we loop through all of the defined media queries to see if this rule
// has already been set by one of them. This is used to show inheritance.
var queries = QueryManager.getSortedQueryMarks();
for (index in queries) {
var q = queries[index];
// If the media query (q) has a width greater than the currently selected
// query and has already set a value for this property, then the current
// query will inherit that value.
if (q !== cq && parseInt(q.width, 10) > parseInt(cq.width, 10) &&
q.selectors[currentSelector]) {
// Check if it has the property set and if so, add it to the existingEdits
// array so we can highlight it appropriately. Also stores the value.
if (q.selectors[currentSelector].rules[prop]) {
pvalue = q.selectors[currentSelector].rules[prop];
existingEdits.push({query: q, line: lineNumber});
pvalue = pvalue.replace(/;/, '');
break;
}
} else if (cq === q && q.selectors[currentSelector]) {
// Check if the currently selected query has this property already set.
// If so then we add it to the existingEdits array for highlighting purposes.
// It also stores the value 'pvalue' so we can use that in the output.
if (q.selectors[currentSelector].rules[prop]) {
pvalue = q.selectors[currentSelector].rules[prop];
existingEdits.push({query: q, line: lineNumber});
pvalue = pvalue.replace(/;/, '');
break;
}
}
}
// If this property hasn't been set by anyone, we use the original value returned.
if (!pvalue) {
pvalue = res.rules[currentSelector][prop];
}
// Finally we add the CSS rule to the output string.
str += "\t" + prop + ": " + pvalue.trim() + ";\n";
}
} else {
// no rules so create an empty line
str += "\t\n";
}
// Closing curly brace = we're done!
str += "}";
return { contents: str, existingEdits: existingEdits, numLines: lineNumber };
}