Skip to content

Commit

Permalink
v3.00-alpha-03
Browse files Browse the repository at this point in the history
  • Loading branch information
@chanan
chanan committed Apr 14, 2020
1 parent f72e49e commit 31013d5
Show file tree
Hide file tree
Showing 5 changed files with 248 additions and 10 deletions.
2 changes: 1 addition & 1 deletion src/BlazorStyled/BlazorStyled.csproj
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<LangVersion>8.0</LangVersion>
<AddRazorSupportForMvc>true</AddRazorSupportForMvc>
<PackageId>BlazorStyled</PackageId>
<Version>3.0.0-alpha-02</Version>
<Version>3.0.0-alpha-03</Version>
<Authors>Chanan Braunstein</Authors>
<Title>BlazorStyled</Title>
<Description>CSS in Blazor Components</Description>
Expand Down
240 changes: 239 additions & 1 deletion src/BlazorStyled/Internal/ScriptManager.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,244 @@ internal async Task ClearStyles(string stylesheetId, string stylesheetName)
}

//Script
private readonly string _script = @"window.BlazorStyled={insertClasses:function(n,t,i,r,u,f){for(var e=0;e<r.length;e++){const o=r[e];window.BlazorStyled.insertClass(n,t,i,o,u,f)}},insertClass:function(n,t,i,r,u,f){const e=window.BlazorStyled.initLogger(f),s=window.BlazorStyled.getOrCreateSheet(n,t,i,e),o=window.BlazorStyled.parseTheme(n,r,e);if(o)if(u)window.BlazorStyled.writeRule(s,o,e);else try{o.indexOf(':-moz')!==-1&&'MozBoxSizing'in document.body.style?window.BlazorStyled.insertRule(s.sheet,o,e):o.indexOf(':-moz')===-1?window.BlazorStyled.insertRule(s.sheet,o,e):e.warn('Mozilla rule not inserted: ',o)}catch(h){e.error('Failed to insert: ',o);e.error(h)}},updateRule:function(n,t,i,r,u,f,e,o){const s=window.BlazorStyled.initLogger(o),h=window.BlazorStyled.getOrCreateSheet(n,t,i,s),c=window.BlazorStyled.parseTheme(n,f,s);if(e)window.BlazorStyled.updateWrittenRule(h,u,c,s);else try{window.BlazorStyled.updatedInsertedRule(h.sheet,u,c,s)}catch(l){s.error('Failed to update: ',f);s.error(l)}},clearStyles:function(n,t,i){const u=window.BlazorStyled.initLogger(i),r=document.getElementById(n);r&&(document.head.removeChild(r),u.log('Cleared stylesheet: ',t))},setThemeValue:function(n,t,i,r,u,f,e){const o=window.BlazorStyled.initLogger(e);try{const h=window.BlazorStyled.getOrCreateTheme(n),c=h.values[r];h.values[r]=u;for(var s in h.rules){const u=h.rules[s];if(u.indexOf(r)!==-1)if(c){const h=u.substring(0,u.indexOf('{')),s=window.BlazorStyled.parseTheme(n,u.replace('['+r+']',c),o);s&&window.BlazorStyled.updateRule(n,t,i,h,s,u,f,e)}else window.BlazorStyled.insertClass(n,t,i,u,f,e)}}catch(h){o.error('Failed to update: ',rule);o.error(h)}},getThemeValues:function(n){const t=window.BlazorStyled.getOrCreateTheme(n);return t.values},setGlobalStyle:function(n,t,i){const r=window.BlazorStyled.getOrCreateTheme(n);r.globalStyles[t]=i},getGlobalStyles:function(n){const t=window.BlazorStyled.getOrCreateTheme(n);return t.globalStyles},parseTheme:function(n,t,i){if(t.indexOf('[')===-1)return t;const r=window.BlazorStyled.getOrCreateTheme(n);r.rules.find(n=>n===t)||r.rules.push(t);const u=t.substring(t.indexOf('[')+1,t.indexOf(']')),f=r.values[u];if(f===undefined)return undefined;const e=t.replace('['+u+']',f);return window.BlazorStyled.parseTheme(n,e,i)},getOrCreateTheme:function(n){return window.BlazorStyled.themes[n]===undefined&&(window.BlazorStyled.themes[n]={values:{},rules:[],globalStyles:{}}),window.BlazorStyled.themes[n]},initLogger:function(n){var t,i;if(this.debug={},n)for(t in console)typeof console[t]=='function'&&(this.debug[t]=console[t].bind(window.console));else for(i in console)typeof console[i]=='function'&&(this.debug[i]=function(){});return this.debug},getOrCreateSheet:function(n,t,i,r){const e='data-blazorstyled-priority',o=document.getElementById(n);if(o)return o;const f=document.createElement('style'),s=document.createAttribute('id');s.value=n;f.setAttributeNode(s);const h=document.createAttribute('data-blazorstyled-name');h.value=t;f.setAttributeNode(h);const c=document.createAttribute(e);c.value=i;f.setAttributeNode(c);const u=document.head;if(u.hasChildNodes()){let n=!1;for(let t=0;t<u.children.length;t++){const r=u.children[t];if(r.hasAttribute(e)){const o=r.getAttribute(e),s=parseInt(o,10);i>=s&&!n&&(n=!0,t!==u.children.length-1?u.insertBefore(f,u.children[t+1]):u.appendChild(f))}}n||u.insertBefore(f,u.firstChild)}else u.appendChild(f);return r.log('Inserted stylesheet: ',f),f},writeRule:function(n,t,i){n.innerText?n.innerText.indexOf(t)===-1&&(n.innerText=t.startsWith('@import')?t+n.innerText:n.innerText+t,i.log('Written: ',t)):(n.innerText=t,i.log('Written: ',t))},insertRule:function(n,t,i){const r=t.startsWith('@import')?0:n.cssRules.length;n.insertRule(t,r);i.log('Inserted at '+r+': ',t)},updateWrittenRule:function(n,t,i,r){n.innerText||(n.innerText=i);n.innerText=n.innerText.replace(t,i);r.log('Updated old rule: '+t+' to new rule: '+i)},updatedInsertedRule:function(n,t,i,r){const e=window.BlazorStyled.getOrCreateSheet('temp','temp',initLogger(!1));e.sheet.insertRule(t);const o=e.sheet.cssRules[0].cssText;document.head.removeChild(e);let u=-1;for(var f=0;f<n.cssRules.length;f++)n.cssRules[f].cssText===o&&(u=f);u!==-1&&(n.deleteRule(u),n.insertRule(i,u),r.log('Updated old rule at '+u+': '+t+' to new rule: '+i))},themes:{}};";
private readonly string _script = @"window.BlazorStyled = {
insertClasses: function (stylesheetId, stylesheetName, priority, rules, development, debug) {
//console.log('insertClasses');
//console.time('insertClasses');
for (var i = 0; i < rules.length; i++) {
const rule = rules[i];
window.BlazorStyled.insertClass(stylesheetId, stylesheetName, priority, rule, development, debug);
}
//console.timeEnd('insertClasses');
},
insertClass: function (stylesheetId, stylesheetName, priority, rule, development, debug) {
//console.log('insertClass');
const logger = window.BlazorStyled.initLogger(debug);
const sheet = window.BlazorStyled.getOrCreateSheet(stylesheetId, stylesheetName, priority, logger);
const updatedRule = window.BlazorStyled.parseTheme(stylesheetId, rule, logger);
//console.log('insertClass updatedRule: ', updatedRule);
if (updatedRule) {
if (development) {
window.BlazorStyled.writeRule(sheet, updatedRule, logger);
} else {
try {
if (updatedRule.indexOf(':-moz') !== -1 && 'MozBoxSizing' in document.body.style) {
window.BlazorStyled.insertRule(sheet.sheet, updatedRule, logger);
} else if (updatedRule.indexOf(':-moz') === -1) {
window.BlazorStyled.insertRule(sheet.sheet, updatedRule, logger);
} else {
logger.warn('Mozilla rule not inserted: ', updatedRule);
}
} catch (err) {
logger.error('Failed to insert: ', updatedRule);
logger.error(err);
}
}
}
},
updateRule: function (stylesheetId, stylesheetName, priority, selector, oldRule, rule, development, debug) {
//console.log('updateRule - rule: ', rule);
const logger = window.BlazorStyled.initLogger(debug);
const sheet = window.BlazorStyled.getOrCreateSheet(stylesheetId, stylesheetName, priority, logger);
const updatedRule = window.BlazorStyled.parseTheme(stylesheetId, rule, logger);
//console.log('updateRule updatedRule: ', updatedRule);
if (development) {
//console.log('here1');
window.BlazorStyled.updateWrittenRule(sheet, oldRule, updatedRule, logger);
//console.log('here2');
} else {
try {
window.BlazorStyled.updatedInsertedRule(sheet.sheet, oldRule, updatedRule, logger);
} catch (err) {
logger.error('Failed to update: ', rule);
logger.error(err);
}
}
},
clearStyles: function (stylesheetId, stylesheetName, debug) {
const logger = window.BlazorStyled.initLogger(debug);
const sheet = document.getElementById(stylesheetId);
if (sheet) {
document.head.removeChild(sheet);
logger.log('Cleared stylesheet: ', stylesheetName);
}
},
setThemeValue: function (stylesheetId, stylesheetName, priority, name, value, development, debug) {
const logger = window.BlazorStyled.initLogger(debug);
try {
const theme = window.BlazorStyled.getOrCreateTheme(stylesheetId);
const oldValue = theme.values[name];
//console.log('oldValue: ', oldValue);
theme.values[name] = value;
//console.log('theme: ', theme);
//console.log('updated: ', theme.values[name]);
for (var i in theme.rules) {
const rule = theme.rules[i];
if (rule.indexOf(name) !== -1) {
//console.log('found rule: ', rule);
if(oldValue) {
//console.log('update');
const selector = rule.substring(0, rule.indexOf('{'));
const oldRule = window.BlazorStyled.parseTheme(stylesheetId, rule.replace('[' + name + ']', oldValue), logger);
//console.log('oldRule: ', oldRule);
if(oldRule) {
window.BlazorStyled.updateRule(stylesheetId, stylesheetName, priority, selector, oldRule, rule, development, debug);
//console.log('end update');
}
} else {
//console.log('insert');
window.BlazorStyled.insertClass(stylesheetId, stylesheetName, priority, rule, development, debug);
}
}
}
} catch (err) {
logger.error('Failed to update: ', rule);
logger.error(err);
}
//console.log('end setThemeValue');
},
getThemeValues: function (stylesheetId) {
const theme = window.BlazorStyled.getOrCreateTheme(stylesheetId);
return theme.values;
},
setGlobalStyle: function (stylesheetId, name, value) {
const theme = window.BlazorStyled.getOrCreateTheme(stylesheetId);
theme.globalStyles[name] = value;
},
getGlobalStyles: function (stylesheetId) {
const theme = window.BlazorStyled.getOrCreateTheme(stylesheetId);
return theme.globalStyles;
},
parseTheme: function (stylesheetId, rule, logger) {
if (rule.indexOf('[') === -1) {
return rule;
}
const theme = window.BlazorStyled.getOrCreateTheme(stylesheetId);
if (!theme.rules.find((r) => r === rule)) {
theme.rules.push(rule);
}
const themeValueName = rule.substring(rule.indexOf('[') + 1, rule.indexOf(']'));
const themeValue = theme.values[themeValueName];
if (themeValue === undefined) {
return undefined;
}
const updated = rule.replace('[' + themeValueName + ']', themeValue);
return window.BlazorStyled.parseTheme(stylesheetId, updated, logger);
},
getOrCreateTheme: function (stylesheetId) {
if (window.BlazorStyled.themes[stylesheetId] === undefined) {
window.BlazorStyled.themes[stylesheetId] = {
values: {},
rules: [],
globalStyles: {},
};
}
return window.BlazorStyled.themes[stylesheetId];
},
initLogger: function (debug) {
this.debug = {};
if (debug) {
for (var m in console) {
if (typeof console[m] === 'function') {
this.debug[m] = console[m].bind(window.console);
}
}
} else {
for (var m2 in console) {
if (typeof console[m2] === 'function') {
this.debug[m2] = function () {};
}
}
}
return this.debug;
},
getOrCreateSheet: function (stylesheetId, stylesheetName, priority, logger) {
const DATA_PRIORITY = 'data-blazorstyled-priority';
const DATA_NAME = 'data-blazorstyled-name';
const sheet = document.getElementById(stylesheetId);
if (sheet) return sheet;
const styleEl = document.createElement('style');
const id = document.createAttribute('id');
id.value = stylesheetId;
styleEl.setAttributeNode(id);
const dataName = document.createAttribute(DATA_NAME);
dataName.value = stylesheetName;
styleEl.setAttributeNode(dataName);
const dataPriority = document.createAttribute(DATA_PRIORITY);
dataPriority.value = priority;
styleEl.setAttributeNode(dataPriority);
const head = document.head;
if (head.hasChildNodes()) {
let found = false;
for (let i = 0; i < head.children.length; i++) {
const node = head.children[i];
if (node.hasAttribute(DATA_PRIORITY)) {
const attr = node.getAttribute(DATA_PRIORITY);
const currentPriority = parseInt(attr, 10);
if (priority >= currentPriority && !found) {
found = true;
if (i !== head.children.length - 1) {
head.insertBefore(styleEl, head.children[i + 1]);
} else {
head.appendChild(styleEl);
}
}
}
}
if (!found) {
head.insertBefore(styleEl, head.firstChild);
}
} else {
head.appendChild(styleEl);
}
logger.log('Inserted stylesheet: ', styleEl);
return styleEl;
},
writeRule: function (sheet, rule, logger) {
if (!sheet.innerText) {
sheet.innerText = rule;
logger.log('Written: ', rule);
} else {
if (sheet.innerText.indexOf(rule) === -1) {
sheet.innerText = rule.startsWith('@import') ? rule + sheet.innerText : sheet.innerText + rule;
logger.log('Written: ', rule);
}
}
},
insertRule: function (sheet, rule, logger) {
const index = rule.startsWith('@import') ? 0 : sheet.cssRules.length;
sheet.insertRule(rule, index);
logger.log('Inserted at ' + index + ': ', rule);
},
updateWrittenRule: function (sheet, oldRule, rule, logger) {
//console.log('updateWrittenRule');
if (!sheet.innerText) {
sheet.innerText = rule;
}
//console.log('oldRule: ', oldRule);
//console.log('rule: ', rule);
//console.log('sheet.innerText.replace(oldRule, rule): ', sheet.innerText.replace(oldRule, rule));
sheet.innerText = sheet.innerText.replace(oldRule, rule);
logger.log('Updated old rule: ' + oldRule + ' to new rule: ' + rule);
},
updatedInsertedRule: function (sheet, oldRule, rule, logger) {
const temp = window.BlazorStyled.getOrCreateSheet('temp', 'temp', window.BlazorStyled.initLogger(false));
temp.sheet.insertRule(oldRule);
const oldCssText = temp.sheet.cssRules[0].cssText;
document.head.removeChild(temp);
let index = -1;
for (var i = 0; i < sheet.cssRules.length; i++) {
if (sheet.cssRules[i].cssText === oldCssText) {
index = i;
}
}
if (index !== -1) {
sheet.deleteRule(index);
sheet.insertRule(rule, index);
logger.log('Updated old rule at ' + index + ': ' + oldRule + ' to new rule: ' + rule);
}
},
themes: {},
};";
}
}
2 changes: 1 addition & 1 deletion src/BlazorStyled/Internal/Scripts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -217,7 +217,7 @@
logger.log('Updated old rule: ' + oldRule + ' to new rule: ' + rule);
},
updatedInsertedRule: function (sheet, oldRule, rule, logger) {
const temp = window.BlazorStyled.getOrCreateSheet('temp', 'temp', initLogger(false));
const temp = window.BlazorStyled.getOrCreateSheet('temp', 'temp', window.BlazorStyled.initLogger(false));
temp.sheet.insertRule(oldRule);
const oldCssText = temp.sheet.cssRules[0].cssText;
document.head.removeChild(temp);
Expand Down
12 changes: 6 additions & 6 deletions src/ClientSideSample/wwwroot/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,12 @@
z-index: 1000;
}

#blazor-error-ui .dismiss {
cursor: pointer;
position: absolute;
right: 0.75rem;
top: 0.5rem;
}
#blazor-error-ui .dismiss {
cursor: pointer;
position: absolute;
right: 0.75rem;
top: 0.5rem;
}
</style>
</head>

Expand Down
2 changes: 1 addition & 1 deletion src/ServerSideSample/Startup.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ public void ConfigureServices(IServiceCollection services)

//AddBlazorStyled is needed for BlazorStyled to work
IConfigurationSection section = Configuration.GetSection("BlazorStyled");
services.AddBlazorStyled(isDevelopment: section.GetValue<bool>("development"), isDebug: section.GetValue<bool>("debug"));
services.AddBlazorStyled(isDevelopment: false, isDebug: section.GetValue<bool>("debug"));

//The following is only used by the sample sites and is not required for BlazorStyled to work
services.AddServicesForSampleSites();
Expand Down

0 comments on commit 31013d5

Please sign in to comment.