// ==UserScript==
// @name Sketchfab Editor Presets
// @namespace http://sketchfab.com/
// @version 0.29
// @updateURL https://raw.githubusercontent.com/PadreZippo/sketchfab-editor-presets/master/user.js
// @downloadURL https://raw.githubusercontent.com/PadreZippo/sketchfab-editor-presets/master/user.js
// @description Save/use presets in Sketchfab Editor
// @author Maurice Svay, James Green
// @match https://sketchfab.com/models/*/edit*
// @grant GM_setValue
// @grant GM_getValue
// @grant GM_deleteValue
// @grant GM_listValues
// @grant GM_info
// @grant unsafeWindow
// @require https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js
// @require https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js
// ==/UserScript==
(function() {
'use strict';
if (!areModelsAvailable()) {
console.error('Sketchfab Editor Presets: editorModels are not available in this version of Sketchfab.');
return;
}
var lightingGroupReady = false;
observeDOM( document.body, function () {
var lightingGroup = $('#LightsGroup .button-widget');
if ( lightingGroup.length ) {
if ( lightingGroupReady === false ) {
lightingGroupReady = true;
onReady();
}
}
} );
})();
function onReady() {
var presets = PresetStore.getAll();
var materials = MaterialStore.getAll();
renderContainerUI();
renderPresetsUI(presets);
renderMaterialsUI(materials);
test();
}
/**
* Container UI
******************************************************************************/
function renderContainerUI() {
var version = GM_info.script.version;
var containerUIState = {
expanded: GM_getValue( 'ui_expanded', true )
};
var tpl = `
`;
$('.editor-view').after(tpl);
function renderContainerState() {
if ( containerUIState.expanded ) {
$('.editor-view').addClass('right-panel-expanded');
$('.right-panel').addClass('right-panel-expanded');
$('.editor-presets').addClass('editor-presets-active');
} else {
$('.editor-view').removeClass('right-panel-expanded');
$('.right-panel').removeClass('right-panel-expanded');
$('.editor-presets').removeClass('editor-presets-active');
}
}
$('button[data-action="toggle-panel"]').on('click', function(){
containerUIState.expanded = !containerUIState.expanded;
GM_setValue( 'ui_expanded', containerUIState.expanded );
renderContainerState();
});
renderContainerState();
$('.editor-presets-tabs').on('click', '.editor-presets-tab', function(e) {
e.preventDefault();
$('.editor-presets-tab').removeClass('active');
$('.editor-presets-tabcontent').removeClass('active');
$(e.currentTarget).addClass('active');
var tabId = $(e.currentTarget).attr('href');
$(tabId).addClass('active');
});
}
/**
* Presets UI
******************************************************************************/
function renderPresetsUI( presets ) {
var tpl = `
`;
$('#presets-settings').html(tpl);
renderPresetList(presets);
$('[data-action="save-preset"]').on('click', function(e) {
e.preventDefault();
openPopup();
});
$('[data-action="refresh-presets"]').on('click', function(e){
e.preventDefault();
console.log('Refresh presets');
var presets = PresetStore.getAll();
console.log(presets);
renderPresetList(presets);
});
$( '#preset-input' ).on( 'change', function( e ) {
e.preventDefault();
var file = e.originalEvent.target.files[0];
var name = file.name.replace( '.json', '' );
$( '#preset-input' ).val( '' );
loadJson( file, function( err, json ){
if ( err ) {
alert( 'This file is not valid' );
return;
}
var isValid = json.hasOwnProperty( 'settings' ) && json.hasOwnProperty( 'name' );
if ( isValid ) {
PresetStore.saveAs( json.settings, json.name );
var updatedCollection = PresetStore.getAll();
renderPresetList( updatedCollection );
} else {
alert( 'This file is not valid' );
}
} );
} );
$( '.editor-presets-list' ).on( 'click', '.editor-presets-item', function( e ) {
var $target = $( e.currentTarget );
var name = $target.attr( 'data-name' );
var preset = PresetStore.getByName( name );
if ( preset ) {
// @FIXME the following code should be async
Scene.applyPreset( preset );
Scene.createBackup();
}
} );
// Live preview
$( '.editor-presets-list' ).on( 'mouseenter', function( e ) {
Scene.createBackup();
} );
$( '.editor-presets-list' ).on( 'mouseleave', function( e ) {
Scene.deleteBackup();
} );
$( '.editor-presets-list' ).on( 'mouseleave', '.editor-presets-item-preview', function(e) {
Scene.restoreBackup();
} );
$( '.editor-presets-list' ).on( 'mouseenter', '.editor-presets-item-preview', function( e ) {
var $target = $( e.currentTarget );
var name = $target.attr( 'data-name' );
var preset = PresetStore.getByName( name );
if ( preset ) {
Scene.previewPreset( preset );
}
} );
$( '.editor-presets-list' ).on( 'click', '.download-preset', function( e ) {
e.stopPropagation();
var $target = $( e.currentTarget );
var name = $target.attr( 'data-name' );
var preset = PresetStore.getByName( name );
downloadJson( preset, name );
} );
$( '.editor-presets-list' ).on( 'click', '.delete-preset', function( e ) {
e.stopPropagation();
var $target = $( e.currentTarget );
var name = $target.attr( 'data-name' );
PresetStore.deleteByName( name );
var updatedCollection = PresetStore.getAll();
renderPresetList( updatedCollection );
} );
}
function renderPresetList( presetCollection ) {
var items = presetCollection.map(function(preset){
return `
${preset.name}
`;
}).join('');
$('.editor-presets-list').html(items);
}
/**
* Materials tab
******************************************************************************/
function renderMaterialsUI( materials ) {
var tpl = `
`;
$( '#presets-materials' ).html( tpl );
renderMaterialsList( materials );
$( '.editor-presets [data-action="save-material"]' ).on( 'click', function( e ) {
e.preventDefault();
var currentMaterialName = Scene.getSelectedMaterialName();
Scene.getMaterialByName( currentMaterialName ).then(function( materialSettings ){
var newName = window.prompt( 'Save materials as', currentMaterialName );
if ( $.trim( newName ) !== '') {
MaterialStore.saveAs( materialSettings, newName );
renderMaterialsList( MaterialStore.getAll() );
}
});
} );
$('.editor-materials-list').on( 'click', '.editor-presets-item', function( e ) {
var $target = $( e.currentTarget );
var name = $target.attr( 'data-name' );
var material = MaterialStore.getByName( name );
if ( material ) {
var selectedMaterialName = Scene.getSelectedMaterialName();
console.log('Updating material', selectedMaterialName, material);
Scene.updateMaterialByName( selectedMaterialName, material );
}
} );
$( '.editor-materials-list' ).on( 'click', '.delete-material', function( e ) {
e.stopPropagation();
var $target = $( e.currentTarget );
var name = $target.attr( 'data-name' );
MaterialStore.deleteByName( name );
renderMaterialsList( MaterialStore.getAll() );
} );
}
function renderMaterialsList( materials ) {
var out = materials.map( function( material ) {
return `
${material.name}
`;
} ).join('');
$('.editor-materials-list').html( out );
}
/**
* Popup
******************************************************************************/
function openPopup() {
var $editor = $('.editor');
var $popupContainer = $('');
$editor.append($popupContainer);
var list = [];
function renderNode( node, depth ) {
if (typeof node === 'function') {
return;
} else {
list.push('');
}
}
renderNode(settings, 0);
var settingsList = list.join('');
var popupTpl = `