mirror of
https://github.com/Lastorder-DC/rhymix.git
synced 2026-01-22 04:39:55 +09:00
1. Complete to write a script for the theme page
2. Add css files for korean and japanese 3. Modified some styles including theme setting page and language selector git-svn-id: http://xe-core.googlecode.com/svn/branches/1.5.0@8712 201d5d3c-b55e-5fd7-737f-ddc643e51545
This commit is contained in:
taggon
parent
a1a14d4b76
commit
b09bcabf20
6 changed files with 232 additions and 122 deletions
|
|
@ -23,25 +23,28 @@ jQuery(function($){
|
|||
$input_rc
|
||||
.change(function(){
|
||||
var name = $(this).attr('name');
|
||||
$input_rc
|
||||
.filter('[name="'+name+'"]:not(:checked)')
|
||||
.next('label').css('font-weight', 'normal').end()
|
||||
.end()
|
||||
.next('label').css('font-weight', 'bold').end();
|
||||
$input_rc.filter(function(){ return this.name == name })
|
||||
.next('label').css('font-weight', 'normal').end()
|
||||
.filter(':checked')
|
||||
.next('label').css('font-weight', 'bold').end();
|
||||
})
|
||||
.change();
|
||||
|
||||
// Toogle checkbox all
|
||||
$('.form th>:checkbox')
|
||||
$('.form th>input:checkbox')
|
||||
.change(function() {
|
||||
var $this = $(this), self = this, name;
|
||||
var $this = $(this), name = $this.data('name');
|
||||
|
||||
name = $this.data('target');
|
||||
$this.closest('table').find('input:checkbox')
|
||||
.filter(function(){ return (this.name == name) })
|
||||
.prop('checked', $this.prop('checked'))
|
||||
.filter(function(){ return (this.parentNode.nodeName != 'TH') })
|
||||
.change();
|
||||
$this.closest('table')
|
||||
.find('input:checkbox')
|
||||
.filter(function(){
|
||||
var $this = $(this);
|
||||
return ($this.attr('name') == name) || ($this.data('name') == name);
|
||||
})
|
||||
.prop('checked', $this.prop('checked'))
|
||||
.end()
|
||||
.end()
|
||||
.trigger('update.checkbox', name, this.checked);
|
||||
});
|
||||
|
||||
// Global Navigation Bar
|
||||
|
|
|
|||
|
|
@ -1,74 +1,161 @@
|
|||
jQuery(function($){
|
||||
|
||||
$('#theme,#skin')
|
||||
// 'show all' button
|
||||
.find('button.showAll')
|
||||
.text('Show All')
|
||||
.click(function(){
|
||||
var $this = $(this), $thumbarea = $('#skin').find('>.thumbPreview');
|
||||
|
||||
if($this.toggleClass('hideAll').hasClass('hideAll')) {
|
||||
$this.text('Hide All');
|
||||
$thumbarea.children('li')
|
||||
.addClass('active')
|
||||
.removeClass('highlight')
|
||||
.eq(0).addClass('highlight').end()
|
||||
.find('>ul.a:not(.selected)').show();
|
||||
} else {
|
||||
$this.text('Show All');
|
||||
$thumbarea.children('li')
|
||||
.removeClass('active highlight')
|
||||
.find('>ul.a:not(.selected)').hide();
|
||||
}
|
||||
})
|
||||
.end()
|
||||
// all thumbnail area
|
||||
.find('>.thumbPreview')
|
||||
.removeClass('jx')
|
||||
// thumbnail list
|
||||
.find('.a')
|
||||
.has('li.i:nth-child(2)')
|
||||
.after('<a href="#toggle-tp" class="prevToggle">Show</a>')
|
||||
.next('a.prevToggle')
|
||||
.click(function(){
|
||||
var $list = $(this).prev('.a');
|
||||
.find('ul.a')
|
||||
.hide()
|
||||
.before('<ul class="a selected"></ul>')
|
||||
.prev('ul.a')
|
||||
.each(function(){
|
||||
var $this = $(this);
|
||||
|
||||
if($list.parent().hasClass('active')) {
|
||||
$list.trigger('hide.tp');
|
||||
} else {
|
||||
$list.trigger('show.tp');
|
||||
$this
|
||||
.delegate('span.thumb', 'click', function(){
|
||||
$(this).closest('.a').nextAll('a.prevToggle:first').trigger('toggle.tp');
|
||||
return false;
|
||||
})
|
||||
.append($this.next('.a').find('>li.noDirection:first'));
|
||||
})
|
||||
.end()
|
||||
.after('<a href="#toggle-tp" class="prevToggle">Show</a>')
|
||||
.next('a.prevToggle')
|
||||
.bind('toggle.tp', function(){
|
||||
var $list = $(this).prev('.a'), $items, duration = 100;
|
||||
|
||||
$items = $list.closest('.thumbPreview').children('li').removeClass('highlight').end();
|
||||
|
||||
if($list.parent().toggleClass('active').hasClass('active')) {
|
||||
$list.slideDown(duration).closest('li').addClass('highlight');
|
||||
} else {
|
||||
$list.slideUp(duration);
|
||||
}
|
||||
})
|
||||
.click(function(){ $(this).trigger('toggle.tp'); return false; })
|
||||
.end()
|
||||
// thumbnail act as a label for a radio button
|
||||
.find('span.thumb')
|
||||
.attr('role', 'radio') // WAI-ARIA role
|
||||
.click(function(){
|
||||
$(this).next('input:radio').prop('checked', true).change();
|
||||
})
|
||||
.end()
|
||||
.find('input:radio')
|
||||
.bind('redraw', function(){
|
||||
var $this = $(this), $big = $this.closest('.a').prev('.a'), val = $this.val();
|
||||
|
||||
// skip following actions if this checkbox was selected just before
|
||||
if(val == $big.find('>li:eq(1)').data('value')) return;
|
||||
|
||||
$big.find('>li:not(.noDirection)').remove();
|
||||
|
||||
if(!val) { // select none
|
||||
$big.children('li.noDirection').show();
|
||||
} else {
|
||||
$this.closest('li').clone()
|
||||
.find('input:radio').remove().end()
|
||||
.find('label')
|
||||
.wrapInner('<strong>')
|
||||
.find('>strong').unwrap().end()
|
||||
.end()
|
||||
.appendTo($big);
|
||||
|
||||
$big.find('>li.noDirection').hide();
|
||||
}
|
||||
})
|
||||
.change(function(){
|
||||
var $this = $(this);
|
||||
|
||||
$this.trigger('redraw');
|
||||
|
||||
// reselect theme
|
||||
if($this.attr('name') != 'themeItem') {
|
||||
$('#theme').trigger('select-theme');
|
||||
}
|
||||
})
|
||||
.filter(':checked').change().end()
|
||||
.filter('[name="themeItem"]')
|
||||
.change(function(){
|
||||
var $this = $(this), themes, thm, $radios, name;
|
||||
|
||||
themes = $('#theme').data('themes') || {};
|
||||
thm = themes[$this.val()];
|
||||
|
||||
if(!thm) return;
|
||||
|
||||
$radios = $('#skin').find('.i > input:radio').filter('[value=""]').prop('checked', true).end();
|
||||
|
||||
for(var x in thm) {
|
||||
if(!thm.hasOwnProperty(x)) continue;
|
||||
|
||||
name = (x == 'layout')?x:x+'-skin';
|
||||
|
||||
if(thm[x]) $radios.filter('[name="'+name+'"][value="'+thm[x]+'"]').prop('checked', true);
|
||||
}
|
||||
|
||||
return false;
|
||||
$radios.filter(':checked').trigger('redraw');
|
||||
})
|
||||
.end()
|
||||
.end()
|
||||
.bind('show.tp', function(){
|
||||
$(this)
|
||||
.parent().addClass('active').end()
|
||||
.find('>.i:gt(0)')
|
||||
.slideDown(100, function(){
|
||||
var $this = $(this);
|
||||
|
||||
if(!$this.prev('.checked').length) return;
|
||||
});
|
||||
})
|
||||
.bind('hide.tp', function(){
|
||||
$(this)
|
||||
.parent().removeClass('active').end()
|
||||
.find('>.i:gt(0)')
|
||||
.slideUp(100, function(){
|
||||
var $this = $(this);
|
||||
$('#theme')
|
||||
.bind('select-theme', function(){
|
||||
var $this = $(this), themes, $radios, form, selection, sel_obj={}, sel_str, name;
|
||||
|
||||
if(!$this.prev('.checked').length) return;
|
||||
});
|
||||
})
|
||||
.end()
|
||||
.find('.i:not(:first-child)').hide().end()
|
||||
.bind('paint.pr', function(){
|
||||
$(this)
|
||||
.find('.i')
|
||||
.removeClass('checked')
|
||||
.find('.checkIcon').remove().end()
|
||||
.end()
|
||||
.find('.i:has(>input:checked)')
|
||||
.addClass('checked')
|
||||
.each(function(){
|
||||
var $this = $(this);
|
||||
$this.parent().prepend($this);
|
||||
})
|
||||
.end()
|
||||
.find('.i.checked').show();
|
||||
})
|
||||
.trigger('paint.pr')
|
||||
.find('span.thumb')
|
||||
.attr('role', 'radio') // WAI-ARIA role
|
||||
.click(function(){
|
||||
var $radio = $(this).next('input:radio');
|
||||
themes = $this.data('themes') || {};
|
||||
$radios = $('#skin').find('.i > input:radio');
|
||||
selection = $radios.filter(':checked[value!=""]').get();
|
||||
form = $radios.get(0).form;
|
||||
|
||||
for(var i=0,c=selection.length; i < c; i++) {
|
||||
name = selection[i].name.match(/^layout|(\w+)-skin$/);
|
||||
sel_obj[name[1]||name[0]] = selection[i].value;
|
||||
}
|
||||
|
||||
function obj2str(obj){
|
||||
var s = '';
|
||||
for(var x in obj) {
|
||||
if(!obj.hasOwnProperty(x)) continue;
|
||||
if(x != 'layout' && !form.elements[x+'-skin']) continue;
|
||||
s += x+'\t'+obj[x]+'\n';
|
||||
}
|
||||
return s;
|
||||
}
|
||||
|
||||
sel_str = obj2str(sel_obj);
|
||||
|
||||
// no matched theme => this theme is user-defined
|
||||
for(var thm in themes) {
|
||||
if(!themes.hasOwnProperty(thm)) continue;
|
||||
if(sel_str == obj2str(themes[thm])) {
|
||||
$this.find('input:radio[name="themeItem"][value="'+thm+'"]').prop('checked', true).change();
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
$this.find('input:radio[name="themeItem"][value="user_define"]').prop('checked', true).change();
|
||||
});
|
||||
|
||||
$radio.is(':checked')?
|
||||
$radio.closest('.a').trigger('show.tp') :
|
||||
$radio.prop('checked', true).change();
|
||||
})
|
||||
.next('input:radio').change(function(){ $(this).closest('.a').trigger('paint.pr') }).end()
|
||||
.end()
|
||||
.end()
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue