design-system-framework
Version:
Create and maintain web component libraries for websites
213 lines (167 loc) • 7.37 kB
JavaScript
(function(){
// https://gist.github.com/lipsumar/d99d5e79d530429887eaf9bc32b5f986
function $(n){var t=document.querySelector(n);return t&&(t.on=function(n,c){return t.addEventListener.call(t,n,function(n){c.call(t,n)})}),t}function $$(n){function t(n){[].forEach.call(this,n)}var c=n;return n&&"string"==typeof n&&(c=document.querySelectorAll(n)),{each:function(n,e){if(c instanceof NodeList)t.call(c,function(t){n.call(e||t)});else for(var l in c)c.hasOwnProperty(l)&&n.call(e||c[l],c[l],l,c)},on:function(n,e){t.call(c,function(t){t.addEventListener.call(t,n,e.bind(t))})}}}
function getScript(source, callback) {
var script = document.createElement('script');
var prior = document.getElementsByTagName('script')[0];
script.async = 1;
prior.parentNode.insertBefore(script, prior);
script.onload = script.onreadystatechange = function( _, isAbort ) {
if(isAbort || !script.readyState || /loaded|complete/.test(script.readyState) ) {
script.onload = script.onreadystatechange = null;
script = undefined;
if(!isAbort) { if(callback) callback(); }
}
};
script.src = source;
}
window.dsf = {
InspectorPlugins: {},
registerInspectorPlugin: function(pluginId, Plugin){
this.InspectorPlugins[pluginId] = Plugin;
}
};
function openQuickCreate(componentName){
componentName = componentName || '';
$('.quick-create').classList.add('show');
$('.quick-create__name').focus();
}
function closeQuickCreate(){
$('.quick-create').classList.remove('show');
}
$('.quick-create__name').on('keyup', function(e){
if(e.code === 'Enter'){
fetch('/plugin/dsf-ui/quick-create', {
method: 'POST',
headers: new Headers({
'Content-Type': 'application/json'
}),
body: JSON.stringify({
name: $('.quick-create__name').value.trim(),
html: $('.quick-create__source[placeholder="HTML"]').value.trim(),
css: $('.quick-create__source[placeholder="CSS"]').value.trim()
})
}).then(function(resp) {
return resp.json();
}).then(function(resp){
if(resp && resp.ok){
closeQuickCreate();
updateComponentList();
}else{
if(resp && resp.error === 'isdir'){
alert('That component exists already!');
}else{
alert('error :(');
}
}
});
}else{
var name = this.value.trim();
$$('.quick-create__sources textarea').each(function(){
name = name.split('/').pop();
this.value = this.getAttribute('data-name-transform').replace('$1', name.toLowerCase());
});
}
});
function renderComponentsList(components){
console.log('renderComponentsList',components);
if(components === 'still fetching components'){
setTimeout(fetchComponents, 300);
return;
}
var html = '<div class="group"><div class="group__title">Components <button class="open-quick-create">+</button></div>';
components.forEach(function(component){
if(component.id.split('/')[0]==='_plugin') return;
html+='<div class="item" data-component="'+component.id+'">'+component.id+'</div>';
});
html+= '</div>';
$('.js-insert-menu').innerHTML = html;
$$('.item').on('click', function(e){
var el = e.currentTarget,
componentId = el.getAttribute('data-component');
selectComponent(componentId);
});
$('.open-quick-create').on('click', openQuickCreate);
}
function selectComponent(componentId){
$('.item--active') && $('.item--active').classList.remove('item--active');
$('.item[data-component="'+componentId+'"]').classList.add('item--active');
$('iframe').src = 'build/' + componentId + '/';
$('.header').classList.remove('u-hide');
$('.header__title').innerHTML = componentId;
$('.component').classList.remove('u-hide');
if(inspectorPlugins.length > 0){
$('.inspector').classList.remove('u-hide');
$('.navigation-tabs__item[data-tab="'+currentInspectorPlugin.id+'"]').classList.add('navigation-tabs__item--active');
$('.tab-content[data-tab="'+currentInspectorPlugin.id+'"]').classList.add('tab-content--active');
currentInspectorPlugin.render(componentId);
}
}
function fetchComponents(callback){
fetch('components')
.then(function(resp){
return resp.json();
})
.then(callback);
}
function updateComponentList(){
fetchComponents(renderComponentsList);
}
updateComponentList();
var inspectorPlugins = [],
inspectorPluginsById = {},
currentInspectorPlugin;
function loadPlugins(plugins, callback){
console.log('loadPlugins',plugins);
if(plugins.inspector){
function next(i){
var inspectorPlugin = plugins.inspector[i];
if(!inspectorPlugin){
currentInspectorPlugin = inspectorPlugins[0];
if(callback){ callback(); }
return;
}
var tab = document.createElement('div');
tab.className = 'navigation-tabs__item';
tab.setAttribute('data-tab', inspectorPlugin.id);
tab.innerHTML = inspectorPlugin.name;
$('.js-insert-inspector-tabs').appendChild(tab);
var el = document.createElement('div');
el.className = 'tab-content';
el.setAttribute('data-tab', inspectorPlugin.id);
$('.js-insert-inspectors').appendChild(el);
getScript('build/_plugin/'+inspectorPlugin.id+'/js', function(){
var plugin = new window.dsf.InspectorPlugins[inspectorPlugin.id](inspectorPlugin);
plugin.id = inspectorPlugin.id;
plugin.config = inspectorPlugin;
plugin.el = el;
if(plugin.init){
plugin.init();
}
inspectorPluginsById[inspectorPlugin.id] = plugin
inspectorPlugins.push(plugin);
next(i+1);
})
}
next(0);
}
}
fetch('plugins')
.then(function(resp){
return resp.json();
})
.then(loadPlugins);
// init socket
var socket = io();
socket.on('rebuild', function(resp){
console.log('rebuild', resp);
selectComponent(resp.id);
});
socket.on('new', function(resp){
console.log('new', resp);
fetchComponents(renderComponentsList);
});
$('.fullscreen').on('click', function(){
document.body.classList.add('fullscreen');
});
}());