sydney/IPB
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Version 3.4.5

Browse Source
This commit is contained in:
Neo committed 2025-12-19 00:38:12 -08:00
1 parent fb6b5baabc
commit e4478369d8
1360 files changed
+228921 -179445
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

upload/public/js/ips.skin_gen.js
+112 -56
View File
@@ -30,11 +30,12 @@ var skingen = {
// Initialize
//------------------------------------------
boot: function(){
if( !this.checkDB() ){
alert("You need to use a browser that supports localStorage, until we add support for Gears");
alert("Вы должны использовать браузер, поддерживающий локальное хранилище, пока мы не добавили поддержку Gears");
return;
}
/* Fix image */
$('logo').down('img').writeAttribute('src', ipb.vars['img_url'] + "/logo_transparent.png" );
@@ -168,12 +169,29 @@ var skingen = {
this.showPane( current );
// Make draggable
new Draggable( 'skingen_editor', { handle: $('skingen_editor').down('h1'), onEnd: this.updateDragPos.bind(this) } );
new Draggable( 'skingen_editor', { handle: $('skingen_editor').down('h1'), onEnd: this.updateDragPos.bind(this), onStart: this.hidePickers.bind(this) } );
// Add Events
this.setUpEditorEvents();
},
//------------------------------------------
// Hides all open color pickers (used when window is dragged)
//------------------------------------------
hidePickers: function(e){
this.skinClasses.each( function(item){
if( Object.isUndefined( this.pickers[ item.key ] ) ){
return;
}
$H( item.value[3] ).each( function(style){
if( !Object.isUndefined( this.pickers[ item.key ][ style.key ] ) ){
this.pickers[ item.key ][ style.key ].hidePicker();
}
}.bind(this));
}.bind(this));
},
//------------------------------------------
// Builds a simple array of classnames from our
// customizable list. Used for matching.
@@ -294,7 +312,7 @@ var skingen = {
{
/* Fix form */
$('skingen_buildskin_save').writeAttribute('disabled', 'true' );
$('skingen_buildskin_save').update( 'Saving...' );
$('skingen_buildskin_save').update( 'Сохранение...' );
var css = [];
@@ -308,6 +326,9 @@ var skingen = {
var width = ( Object.isUndefined( settings['width_value'] ) ) ? '87' : settings['width_value'];
var px_pc = ( Object.isUndefined( settings['width_type'] ) ) ? '%' : settings['width_type'];
// I dislike the following parts immensly for being terrible hacks,
// but right now, it's the most effective way of ensuring some parts of
// our CSS do not get overwritten by VSE styles.
output += '#content, .main_width { width: ' + width + px_pc + ' !important; }';
output += ".topic_buttons li.non_button a {\
@@ -323,6 +344,14 @@ var skingen = {
font-weight: normal;\
}";
output += ".moderated, body .moderated td, .moderated td.altrow, .post_block.moderated,\
body td.moderated, body td.moderated {\
background-color: #f8f1f3 !important;\
}\
.post_block.moderated { border-color: #e9d2d7 !important; }\
.moderated .row2 { background-color: #f0e0e3 !important; }\
.moderated, .moderated a { color: #6f3642 !important; }";
Debug.write( $H( this.db.load("storedClasses") ).toJSON() );
var params = { 'storedClasses' : JSON.stringify( this.db.load("storedClasses") ),
'storedSettings': JSON.stringify( this.db.load("storedSettings") ),
@@ -360,7 +389,7 @@ var skingen = {
// and drops the database
//------------------------------------------
revertSkin: function(e){
if( confirm("Are you sure you want to scrap ALL of the changes you've made?") ){
if( confirm("Вы действительно хотите отменить все внесенные изменения?") ){
this.dropStoredValues();
this.dropStoredImages();
document.location.reload();
@@ -865,7 +894,11 @@ var skingen = {
}
$H(storedValues).each( function(item){
this.skinClasses.get( item.key )[3] = item.value;
var itemObj = this.skinClasses.get( item.key );
if( !Object.isUndefined( itemObj ) ){
this.skinClasses.get( item.key )[3] = item.value;
}
}.bind(this));
},
@@ -928,7 +961,7 @@ var skingen = {
var elements = $$( this.skinClasses.get( this.currentClass )[0] );
if( !elements.size() ){
alert("This item doesn't exist on this page. Try another page!");
alert("Данный элемент отсутсвует на этой странице! Попробуйте поискать его на другой странице");
return;
}
@@ -1174,7 +1207,7 @@ var skingen = {
//------------------------------------------
toggleImageEditor: function(e){
if( typeof FileReader === 'undefined' ){
alert("Sorry, your browser can't support the image editor");
alert("Ваш браузер не поддерживает работу с редактированием изображений");
return;
}
@@ -1205,7 +1238,7 @@ var skingen = {
// Make draggable
new Draggable( 'skingen_images_editor', { handle: "#skingen_images_editor h1" } );
},
//------------------------------------------
// Event handler for uploading an image
//------------------------------------------
@@ -1220,7 +1253,7 @@ var skingen = {
var file = uploader.files[0];
if( !(/image/i).test( file.type ) ){
alert("This isn't a valid image file. Please select another!");
alert("Этот файл не является файлом изображения, поробуйте другой!");
return;
}
@@ -1397,6 +1430,14 @@ var skingen = {
color: #777777;\
font-weight: normal;\
}";
output += ".moderated, body .moderated td, .moderated td.altrow, .post_block.moderated,\
body td.moderated, body td.moderated {\
background-color: #f8f1f3 !important;\
}\
.post_block.moderated { border-color: #e9d2d7 !important; }\
.moderated .row2 { background-color: #f0e0e3 !important; }\
.moderated, .moderated a { color: #6f3642 !important; }";
Debug.write(output);
var stylesheet = new Element("style", { id: 'injected_stylesheet' }).update( output );
@@ -1513,6 +1554,8 @@ var skingen = {
// to the clicked element
//------------------------------------------
findMatchingSelectors: function( item ){
//Debug.write( this._parent.classList );
// Get ancestors and add item itself to it
var ancestors = $(item).ancestors();
ancestors.unshift( item );
@@ -1524,13 +1567,20 @@ var skingen = {
// Double loop - go through ancestors, checking each class for a match
var matching = ancestors.find( function(n){
return this._parent.classList.find( function(m){
// Bug fix: prototype .match cannot handle psuedo classes
// We don't need to check them here anyway
if( m.match(/\:hover/gi) ){
return false;
}
matchedClass = m;
return $(n).match( m );
}.bind(this));
}.bind(this));
if ( ! matchedClass ) {
alert("Couldn't find any matching styles for this item.");
alert("Не найдено ни одного стиля удовлетворяющего элементу.");
}
/* Look for any parents */
@@ -1538,24 +1588,24 @@ var skingen = {
{
var gotIt = this._parent.classList.find( function(m)
{
className = m;
if ( matchedClass == className )
{
// Bug fix: prototype.match cannot handle psuedo classes
if( m.match(/\:hover/gi) ){
return false;
}
else
{
className = m;
if( matchedClass == className ){
return false;
} else {
return $(n).match( m );
}
}.bind(this) );
if ( gotIt && className )
{
this._parent.skinClasses.find( function(c)
{
if ( c.value[0] == className )
{
this._parent.skinClasses.find( function(c){
if ( c.value[0] == className ){
others.push( c.key );
}
}.bind(this) );
@@ -1660,13 +1710,19 @@ var skingen = {
// Double loop - go through ancestors, checking each class for a match
var matching = ancestors.find( function(n){
return this._parent.classList.find( function(m){
// Bug fix: prototype.match cannot handle psuedo classes
if( m.match(/\:hover/gi) ){
return false;
}
matchedClass = m;
return $(n).match( m );
}.bind(this));
}.bind(this));
if( !matchedClass ){
alert("Couldn't find any matching styles for this item.");
alert("Не найдено ни одного стиля удовлетворяющего элементу.");
}
// So we know the real classname
@@ -1704,86 +1760,86 @@ var skingen = {
//============================================================
templates: {
editor: new Template("<div id='skingen_editor' class='skingen_editor'> \
<h1>Visual Skin Editor</h1> \
<h1>Визуальный редактор стиля</h1> \
<div id='skingen_content' class='skingen_content'> \
<div id='skingen_toolbar'> \
<!--<a href='#' id='skingen_images'>Edit Images</a>&nbsp;&nbsp;--> \
<a href='#' id='skingen_settings'><img src='" + skingen_imgs + "/settings.png' />&nbsp; Skin Settings</a>&nbsp;&nbsp; \
<a href='#' id='skingen_colorize'><img src='" + skingen_imgs + "/colorize.png' />&nbsp; Colorizer</a>&nbsp;&nbsp; \
<a href='#' id='skingen_revert'><img src='" + skingen_imgs + "/delete.png' />&nbsp; Revert</a>&nbsp;&nbsp; \
<a href='#' id='skingen_save'><img src='" + skingen_imgs + "/build.png' />&nbsp; Build Skin</a>&nbsp;&nbsp; \
<a href='#' id='skingen_locate' class='right' title='Show where this style is used on this page'><img src='" + skingen_imgs + "/show_locations.png' /></a>&nbsp;&nbsp;\
<a href='#' id='skingen_select' class='right' title='Select an element to style by clicking on it'><img src='" + skingen_imgs + "/select_element.png' /></a>\
<!--<a href='#' id='skingen_images'>Редактирование изображений</a>&nbsp;&nbsp;--> \
<a href='#' id='skingen_settings'><img src='" + skingen_imgs + "/settings.png' />&nbsp; Настройки стиля</a>&nbsp;&nbsp; \
<a href='#' id='skingen_colorize'><img src='" + skingen_imgs + "/colorize.png' />&nbsp; Колорайзер</a>&nbsp;&nbsp; \
<a href='#' id='skingen_revert'><img src='" + skingen_imgs + "/delete.png' />&nbsp; Сброс</a>&nbsp;&nbsp; \
<a href='#' id='skingen_save'><img src='" + skingen_imgs + "/build.png' />&nbsp; Создать стиль</a>&nbsp;&nbsp; \
<a href='#' id='skingen_locate' class='right' title='Найти элементы, использующие выбранный стиль на этой странице'><img src='" + skingen_imgs + "/show_locations.png' /></a>&nbsp;&nbsp;\
<a href='#' id='skingen_select' class='right' title='Выбор стиля, путем выбора элемента на странице'><img src='" + skingen_imgs + "/select_element.png' /></a>\
</div> \
<div id='skingen_sections' class='skingen_sections'>#{sections}</div> \
<div id='skingen_panes'></div> \
</div> \
</div>"),
otherClassesGroup: new Template("<h3 class='open'>Related Classes</h3><ul>#{content}</ul>"),
otherClassesGroup: new Template("<h3 class='open'>Связанные классы</h3><ul>#{content}</ul>"),
sectionGroup: new Template("<h3 class='open' data-group='#{id}'><a href='#' class='skingen_toggle_group'>&nbsp;</a> #{title}</h3><ul id='skingen_group_#{id}' data-group='#{id}'>#{content}</ul>"),
sectionItem: new Template("<li id='section_#{id}' class='clearfix'><span style='#{style}' class='color'></span>#{name}</li>"),
paneWrap: new Template("<div id='skingen_pane_#{id}' class='skingen_pane'><p class='right skingen_selector' title='This is the selector used to style this element in the CSS file'><span>#{selector}</span></p><h2>#{name}</h2><p>#{description}</p><div class='skingen_pane_contents'>#{content}</div><div id='skingen_pane_#{id}_others' class='skingen_sections otherClasses' style='display:none'></div></div>"),
sectionColors: new Template("<fieldset class='colors'><span class='legend'>Colors</span>#{content}</fieldset>"),
sectionBorders: new Template("<fieldset class='border'><span class='legend'>Borders</span>#{content}</fieldset>"),
widgetBackground: new Template("<span class='control' title='Background color'><img src='" + skingen_imgs + "/background.png' /> <input type='text' class='' id='background_#{id}' data-type='background' /><span id='background_preview_#{id}' class='skingen_preview'></span> <a href='#' class='sg_dropper' title='Color picker' id='background_dropper_#{id}'><img src='" + skingen_imgs + "/color-picker.png' /></a></span>"),
widgetForeground: new Template("<span class='control' title='Text color'><img src='" + skingen_imgs + "/color.png' /> <input type='text' class='' id='color_#{id}' data-type='color' /><span id='color_preview_#{id}' class='skingen_preview'></span> <a href='#' class='sg_dropper' title='Color picker' id='color_dropper_#{id}'><img src='" + skingen_imgs + "/color-picker.png' /></a></span>"),
widgetBorder: new Template("<span class='control' title='Border style'><img src='" + skingen_imgs + "/border-color.png' /> <input type='text' class='' id='border_#{id}' data-type='border' /><span id='border_preview_#{id}' class='skingen_preview'></span> <a href='#' class='sg_dropper' title='Color picker' id='border_dropper_#{id}'><img src='" + skingen_imgs + "/color-picker.png' /></a></span>"),
widgetBoxShadow: new Template("<span class='control' title='Box Shadow'><img src='" + skingen_imgs + "/box-shadow.png' /> <input type='text' class='' id='boxshadow_#{id}' data-type='boxshadow' /><span id='boxshadow_preview_#{id}' class='skingen_preview'></span> <a href='#' class='sg_dropper' title='Color picker' id='boxshadow_dropper_#{id}'><img src='" + skingen_imgs + "/color-picker.png' /></a></span>"),
paneWrap: new Template("<div id='skingen_pane_#{id}' class='skingen_pane'><p class='right skingen_selector' title='Данный селектор используется для стилизации элемента в CSS'><span>#{selector}</span></p><h2>#{name}</h2><p>#{description}</p><div class='skingen_pane_contents'>#{content}</div><div id='skingen_pane_#{id}_others' class='skingen_sections otherClasses' style='display:none'></div></div>"),
sectionColors: new Template("<fieldset class='colors'><span class='legend'>Цвета</span>#{content}</fieldset>"),
sectionBorders: new Template("<fieldset class='border'><span class='legend'>Рамка</span>#{content}</fieldset>"),
widgetBackground: new Template("<span class='control' title='Цвет фона'><img src='" + skingen_imgs + "/background.png' /> <input type='text' class='' id='background_#{id}' data-type='background' /><span id='background_preview_#{id}' class='skingen_preview'></span> <a href='#' class='sg_dropper' title='Пипетка' id='background_dropper_#{id}'><img src='" + skingen_imgs + "/color-picker.png' /></a></span>"),
widgetForeground: new Template("<span class='control' title='Цвет текста'><img src='" + skingen_imgs + "/color.png' /> <input type='text' class='' id='color_#{id}' data-type='color' /><span id='color_preview_#{id}' class='skingen_preview'></span> <a href='#' class='sg_dropper' title='Пипетка' id='color_dropper_#{id}'><img src='" + skingen_imgs + "/color-picker.png' /></a></span>"),
widgetBorder: new Template("<span class='control' title='Цвет рамки'><img src='" + skingen_imgs + "/border-color.png' /> <input type='text' class='' id='border_#{id}' data-type='border' /><span id='border_preview_#{id}' class='skingen_preview'></span> <a href='#' class='sg_dropper' title='Пипетка' id='border_dropper_#{id}'><img src='" + skingen_imgs + "/color-picker.png' /></a></span>"),
widgetBoxShadow: new Template("<span class='control' title='Цвет тени'><img src='" + skingen_imgs + "/box-shadow.png' /> <input type='text' class='' id='boxshadow_#{id}' data-type='boxshadow' /><span id='boxshadow_preview_#{id}' class='skingen_preview'></span> <a href='#' class='sg_dropper' title='Пипетка' id='boxshadow_dropper_#{id}'><img src='" + skingen_imgs + "/color-picker.png' /></a></span>"),
settingsEditor: new Template("<div id='skingen_settings_editor' class='skingen_editor'> \
<h1>Skin Settings</h1> \
<h1>Настройки стиля</h1> \
<div id='skingen_settings_content' class='skingen_content'> \
<p class='skingen_desc'>Configure settings for your skin.</p> \
<p class='skingen_desc'>Основные настройки вашего стиля.</p> \
<br /> \
<table style='margin: 10px auto; width: 80%'> \
<tr> \
<td>Main width</td> \
<td>Основная Ширина</td> \
<td><input type='text' id='skingen_setting_width' value='#{width}' /> <select id='skingen_setting_widthunit'><option value='px'>pixels</option><option value='percent'>%</option></select> \
</td> \
</tr> \
</table> \
<br /> \
<p class='skingen_buttons'> \
<a href='#' id='skingen_settings_cancel'>Cancel</a>&nbsp;&nbsp;&nbsp;<a href='#' id='skingen_settings_save'>Save Changes</a>\
<a href='#' id='skingen_settings_cancel'>Отменить</a>&nbsp;&nbsp;&nbsp;<a href='#' id='skingen_settings_save'>Сохранить</a>\
</p> \
</div> \
</div>"),
buildSkin: new Template("<div id='skingen_buildskin_editor' class='skingen_editor'> \
<h1>Build Skin</h1> \
<h1>Создание стиля</h1> \
<div id='skingen_buildskin_content' class='skingen_content'> \
<p class='skingen_desc'>Save and build the skin.</p> \
<p class='skingen_desc'>Сохранение изменений и создание стиля.</p> \
<br /> \
<table style='margin: 10px auto; width: 80%'> \
<tr> \
<td><p>This will save the skin edits and close the skin editor box</p> </td> \
<td><p>Все изменения будут внесены в стиль. Редактор будет закрыт.</p> </td> \
</tr> \
</table> \
<br /> \
<p class='skingen_buttons'> \
<a href='#' id='skingen_buildskin_cancel'>Cancel</a>&nbsp;&nbsp;&nbsp;<a href='#' id='skingen_buildskin_save'>Build</a>\
<a href='#' id='skingen_buildskin_cancel'>Отмена</a>&nbsp;&nbsp;&nbsp;<a href='#' id='skingen_buildskin_save'>Создать</a>\
</p> \
</div> \
</div>"),
colorizeEditor: new Template("<div id='skingen_colorize_editor' class='skingen_editor' style='display: none'> \
<h1>Colorize Your Skin</h1> \
<h1>Раскраска стиля</h1> \
<div id='skingen_colorize_content' class='skingen_content'> \
<p class='skingen_desc'>Use this tool to change the hue (color) of all relevant styles in one go. You can then edit individual styles using the main editor. Be aware that this will overwrite any styles you have already customized.</p> \
<p class='skingen_desc'>Используйте инструмент для изменения оттенка (цвета) всех соответствующих стилей в один прием. Затем можно редактировать отдельные стили, используя главный редактор. ВНИМАНИЕ: использование инструмента приведет к перезаписи любых изменений в стилях, которые вы уже настрили.</p> \
<table style='margin: 10px 0'> \
<tr> \
<td style='width: 50%'><p id='skingen_colorize_base' class='color' data-type='base'></p><br />Base Color</td>\
<td style='width: 50%'><p id='skingen_colorize_secondary' class='color' data-type='secondary'></p><br />Secondary Color</td>\
<td style='width: 50%'><p id='skingen_colorize_base' class='color' data-type='base'></p><br />Первичный цвет</td>\
<td style='width: 50%'><p id='skingen_colorize_secondary' class='color' data-type='secondary'></p><br />Вторичный цвет</td>\
</tr> \
<tr> \
<td><p id='skingen_colorize_tertiary' class='color' data-type='tertiary'></p><br />Tertiary Color</td>\
<td><p id='skingen_colorize_text' class='color' data-type='text'></p><br />Text Color</td>\
<td><p id='skingen_colorize_tertiary' class='color' data-type='tertiary'></p><br />Третичный Color</td>\
<td><p id='skingen_colorize_text' class='color' data-type='text'></p><br />Цвет текста</td>\
</tr> \
</table> \
<br /> \
<p class='skingen_buttons'> \
<a href='#' id='skingen_colorize_cancel'>Cancel</a>&nbsp;&nbsp;&nbsp;<a href='#' id='skingen_colorize_save'>Save Changes</a> \
<a href='#' id='skingen_colorize_cancel'>Отменить</a>&nbsp;&nbsp;&nbsp;<a href='#' id='skingen_colorize_save'>Применить</a> \
</p> \
</div> \
</div>"),
imageEditor: new Template("<div id='skingen_images_editor' class='skingen_editor'><h1>Image Editor</h1><div id='skingen_images_content' class='skingen_content'>#{content}</div></div>"),
imageEditor: new Template("<div id='skingen_images_editor' class='skingen_editor'><h1>Редактор изображений</h1><div id='skingen_images_content' class='skingen_content'>#{content}</div></div>"),
imageEditorItem: new Template("<div id='image_#{id}' class='skingen_image_item clearfix'>#{img}<p class='right'>#{upload}</p></div>")
},
@@ -1809,13 +1865,13 @@ var skingen = {
logo: [ 'logo.png', // Filename
'#logo', // Scope to find image in (default: *)
'/', // Path to find this image in the skin folder
'The main community logo' // Description
'Логотип сообщества' // Description
],
defaultPhoto: [ 'default_large.png',
'',
'/profile/',
'Default user photo'
'Фотография по умолчанию'
]
})
};