mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 14:05:37 +02:00
8f23fa99a5
The 'admin' module will be split off from 'framework', where 'framework' only provides (mostly) frontend-agnostic PHP classes. For example, HTMLEditorField.php has a TinyMCEConfig.php driver, but doesn't come with its own JS includes.
240 lines
8.2 KiB
JavaScript
Executable File
240 lines
8.2 KiB
JavaScript
Executable File
|
|
jQuery(function($){
|
|
// Create a new style element
|
|
var styleEl = document.createElement('style');
|
|
styleEl.setAttribute('type', 'text/css');
|
|
(document.head || document.getElementsByTagName('head')[0]).appendChild(styleEl);
|
|
|
|
var inspectorCSS = [
|
|
'#entwine-inspector { position: fixed; z-index: 1000001; left: 0; right: 0; height: 400px; background: white; -webkit-box-shadow: 0 5px 40px 0 black; -moz-box-shadow: 0 5px 40px 0 black; }',
|
|
'#entwine-inspector li { list-style: none; margin: 2px 0; padding: 2px 0; }',
|
|
'#entwine-inspector li:hover { background: #eee; }',
|
|
'#entwine-inspector li.selected { background: #ddd; }',
|
|
|
|
'#ei-columns { overflow: hidden; display: -webkit-box; display: -moz-box; width: 100%; height: 380px; }',
|
|
|
|
'.ei-column { height: 380px; width: 1px; -webkit-box-flex: 1; -moz-box-flex: 1; }',
|
|
'#entwine-inspector .ei-column h1 { display: block; margin: 0; padding: 5px 2px; height: 20px; text-align: center; background: #444; color: #eee; font-size: 14px; font-weight: bold; }',
|
|
'#entwine-inspector .ei-column ul { overflow-y: scroll; height: 350px; }',
|
|
|
|
'#ei-options { overflow: hidden; height: 20px; background: #444; color: #eee; }',
|
|
'#ei-options label { padding-right: 5px; border-right: 1px solid #eee; }',
|
|
|
|
'.ei-entwined:hover, .ei-selected { background: rgba(128,0,0,0.2); }',
|
|
'.ei-hovernode { position: absolute; z-index: 1000000; background: rgba(0,0,0,0.3); border: 1px solid white; outline: 1px solid white; }',
|
|
|
|
'#ei-selectors li { color: #aaa; display: none; }',
|
|
'#ei-selectors li.matching, #entwine-inspector.show-unmatched #ei-selectors li { display: block; }',
|
|
'#ei-selectors li.matching { color: black; }'
|
|
].join("\n");
|
|
|
|
// Set the style element to style up the inspector panel
|
|
if(styleEl.styleSheet){
|
|
styleEl.styleSheet.cssText = inspectorCSS;
|
|
}else{
|
|
styleEl.appendChild(document.createTextNode(inspectorCSS));
|
|
}
|
|
|
|
var inspectorPanel = $('<div id="entwine-inspector" class="show-unmatched"></div>').appendTo('body');
|
|
var columnHolder = $('<div id="ei-columns"></div>').appendTo(inspectorPanel);
|
|
var optionsHolder = $('<div id="ei-options"></div>').appendTo(inspectorPanel);
|
|
|
|
inspectorPanel.css({
|
|
top: -400,
|
|
visibility: 'hidden'
|
|
});
|
|
|
|
$('body').bind('keypress', function(e){
|
|
if (e.ctrlKey && e.which == 96) {
|
|
if (inspectorPanel.css('visibility') != 'visible') {
|
|
inspectorPanel.css({top: 0, visibility: 'visible'});
|
|
$('body').css({marginTop: 400});
|
|
initialise();
|
|
}
|
|
else {
|
|
inspectorPanel.css({top: -400, visibility: 'hidden'});
|
|
$('body').css({marginTop: 0});
|
|
reset();
|
|
}
|
|
|
|
return false;
|
|
}
|
|
});
|
|
|
|
var showUnmatching = $('<input id="ei-option-showunmatching" type="checkbox" checked="checked" />').appendTo(optionsHolder);
|
|
var showUnmatchingLabel = $('<label>Show selectors that dont match</label>').appendTo(optionsHolder);
|
|
|
|
showUnmatching.bind('click', function(){
|
|
inspectorPanel.toggleClass('show-unmatched', $(this).val());
|
|
});
|
|
|
|
var hovernode;
|
|
|
|
var reset = function() {
|
|
$('.ei-entwined').unbind('.entwine-inspector').removeClass('ei-entwined');
|
|
if (hovernode) hovernode.remove();
|
|
}
|
|
|
|
var initialise = function(){
|
|
reset();
|
|
|
|
$.each($.entwine.namespaces, function(name, namespace){
|
|
$.each(namespace.store, function(name, list){
|
|
$.each(list, function(i, rule){
|
|
var match = $(rule.selector.selector);
|
|
match.addClass('ei-entwined').bind('click.entwine-inspector', displaydetails);
|
|
})
|
|
});
|
|
});
|
|
};
|
|
|
|
var dumpElement = function(el) {
|
|
var frag = document.createDocumentFragment();
|
|
var div = document.createElement('div'); frag.appendChild(div);
|
|
|
|
var clone = el.cloneNode(false); $(clone).removeClass('ei-entwined').removeAttr('style');
|
|
|
|
var i = clone.attributes.length;
|
|
while (i--) {
|
|
var attr = clone.attributes.item(i);
|
|
if (attr.name != 'class' && attr.name != 'id' && attr.value.length > 20) attr.value = attr.value.substr(0, 18)+'..'+attr.value.substr(-2);
|
|
}
|
|
|
|
div.appendChild(clone);
|
|
return div.innerHTML;
|
|
};
|
|
|
|
var displaydetails = function(e){
|
|
e.preventDefault(); e.stopPropagation();
|
|
|
|
columnHolder.empty();
|
|
|
|
var columns = {};
|
|
$.each(['elements', 'namespaces', 'methods', 'selectors'], function(i, col){
|
|
columns[col] = $('<div id="ei-'+col+'" class="ei-column"><h1>'+col+'</h1></div>').appendTo(columnHolder);
|
|
})
|
|
|
|
var lists = {};
|
|
|
|
var ctr = 0;
|
|
|
|
lists.elements = $('<ul></ul>').appendTo(columns.elements);
|
|
|
|
var displayelement = function(){
|
|
var target = $(this);
|
|
|
|
var li = $('<li></li>');
|
|
li.text(dumpElement(this)).attr('data-id', ++ctr).data('el', target).prependTo(lists.elements);
|
|
|
|
var namespaces = $('<ul data-element="'+ctr+'"></ul>').appendTo(columns.namespaces);
|
|
|
|
$.each($.entwine.namespaces, function(name, namespace){
|
|
var methods = $('<ul data-namespace="'+ctr+'-'+name+'"></ul>');
|
|
|
|
$.each(namespace.store, function(method, list){
|
|
|
|
if (method == 'ctors') {
|
|
var matchselectors = $('<ul data-method="'+ctr+'-'+name+'-onmatch"></ul>');
|
|
var unmatchselectors = $('<ul data-method="'+ctr+'-'+name+'-onunmatch"></ul>');
|
|
|
|
$.each(list, function(i, rule){
|
|
var matchitem = $('<li>'+rule.selector.selector+'</li>').prependTo(matchselectors);
|
|
var unmatchitem = rule.onunmatch ? $('<li>'+rule.selector.selector+'</li>').prependTo(unmatchselectors) : null;
|
|
|
|
if (target.is(rule.selector.selector)) {
|
|
matchitem.addClass('matching'); unmatchitem && unmatchitem.addClass('matching');
|
|
|
|
if (!methods.parent().length) {
|
|
$('<li data-namespace="'+ctr+'-'+name+'">'+name+'</li>').prependTo(namespaces);
|
|
methods.appendTo(columns.methods);
|
|
}
|
|
|
|
if (!matchselectors.parent().length) {
|
|
$('<li data-method="'+ctr+'-'+name+'-onmatch">onmatch</li>').prependTo(methods);
|
|
matchselectors.appendTo(columns.selectors);
|
|
}
|
|
|
|
if (rule.onunmatch && !unmatchselectors.parent().length) {
|
|
$('<li data-method="'+ctr+'-'+name+'-onunmatch">onunmatch</li>').prependTo(methods);
|
|
unmatchselectors.appendTo(columns.selectors);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
else {
|
|
var selectors = $('<ul data-method="'+ctr+'-'+name+'-'+method+'"></ul>');
|
|
|
|
$.each(list, function(i, rule){
|
|
var ruleitem = $('<li>'+rule.selector.selector+'</li>').prependTo(selectors);
|
|
|
|
if (target.is(rule.selector.selector)){
|
|
ruleitem.addClass('matching');
|
|
|
|
if (!methods.parent().length) {
|
|
$('<li data-namespace="'+ctr+'-'+name+'">'+name+'</li>').prependTo(namespaces);
|
|
methods.appendTo(columns.methods);
|
|
}
|
|
|
|
if (!selectors.parent().length) {
|
|
$('<li data-method="'+ctr+'-'+name+'-'+method+'">'+method+'</li>').prependTo(methods);
|
|
selectors.appendTo(columns.selectors);
|
|
}
|
|
}
|
|
})
|
|
}
|
|
});
|
|
});
|
|
};
|
|
|
|
$.each($(e.target).parents().andSelf().filter('.ei-entwined'), displayelement);
|
|
$('#ei-elements > ul:first > li:first').click();
|
|
}
|
|
|
|
var activatelist = function(list) {
|
|
list = $(list);
|
|
|
|
list.siblings('ul').css('display', 'none');
|
|
|
|
list.css('display', 'block');
|
|
list.children().first().click();
|
|
}
|
|
|
|
$('#entwine-inspector').live('mouseleave', function(){
|
|
if (hovernode) hovernode.hide();
|
|
})
|
|
|
|
$('#entwine-inspector').live('mouseenter', function(){
|
|
if (hovernode) hovernode.show();
|
|
})
|
|
|
|
$('#ei-elements > ul > li').live('click', function(e){
|
|
var target = $(e.target), id = target.attr('data-id');
|
|
target.addClass('selected').siblings().removeClass('selected');
|
|
|
|
if (!hovernode) {
|
|
hovernode = $('<div class="ei-hovernode"></div>').appendTo('body');
|
|
}
|
|
|
|
var hover = target.data('el');
|
|
hovernode.css({width: hover.outerWidth()-2, height: hover.outerHeight()-2, top: hover.offset().top, left: hover.offset().left});
|
|
|
|
$('.ei-selected').removeClass('ei-selected');
|
|
|
|
activatelist('#ei-namespaces ul[data-element="'+id+'"]');
|
|
});
|
|
|
|
$('#ei-namespaces > ul > li').live('click', function(e){
|
|
var target = $(e.target), namespace = target.attr('data-namespace');
|
|
target.addClass('selected').siblings().removeClass('selected');
|
|
|
|
activatelist('#ei-methods ul[data-namespace="'+namespace+'"]');
|
|
});
|
|
|
|
$('#ei-methods > ul > li').live('click', function(e){
|
|
var target = $(e.target), method = target.attr('data-method');
|
|
target.addClass('selected').siblings().removeClass('selected');
|
|
|
|
activatelist('#ei-selectors ul[data-method="'+method+'"]');
|
|
});
|
|
|
|
}); |