Author: gabriel.walt
Date: Fri May 1 09:10:32 2009
New Revision: 493
Added:
branches/electron/pages/media/pages/images/icons/insert.gif (contents,
props changed)
Removed:
branches/electron/pages/media/pages/images/icons/move_down.gif
branches/electron/pages/media/pages/images/icons/move_up.gif
Modified:
branches/electron/pages/media/pages/css/pages.css
branches/electron/pages/media/pages/images/icons/view.gif
branches/electron/pages/media/pages/javascript/pages.js
branches/electron/pages/media/pages/javascript/pages_form.js
branches/electron/pages/media/pages/javascript/pages_list.js
branches/electron/pages/models.py
branches/electron/pages/templates/admin/pages/page/change_list.html
branches/electron/pages/templates/admin/pages/page/menu.html
Log:
Cleaned and enhanced the JS of the page list
Modified: branches/electron/pages/media/pages/css/pages.css
==============================================================================
--- branches/electron/pages/media/pages/css/pages.css (original)
+++ branches/electron/pages/media/pages/css/pages.css Fri May 1 09:10:32
2009
@@ -240,28 +240,108 @@
/* change-list page =========================================== */
-.change-list tr {
+/* Table-wide */
+.change-list tbody tr:hover {
+ background: #f0f2f8;
}
-.change-list .move-target-container {
+.change-list tbody tr.highlighted {
+ background: #ffb;
+}
+
+/* Title cell */
+.change-list .title-cell {
+ position: relative;
+ text-align: left;
+ font-weight: bold;
+ height: 100%;
+}
+.change-list .title-cell .changelink {
+ float: left;
+ margin-left: 20px;
+ padding: 0 14px 0 0;
+ background: none;
+}
+.change-list .title-cell .changelink:hover {
+ background: url(../images/icons/edit.gif) right 0.2em no-repeat;
+}
+
+/* Expand-collapse link */
+.change-list .title-cell .expand-collapse span {
+ position: absolute;
+ left: 4px; top: 1px;
+ font-family: monospace;
+ font-size: 16px;
+}
+.change-list .title-cell .collapse,
+.change-list .title-cell .expanded .expand {
display: none;
- float: right;
}
-.change-list .table-selected .move-target-container {
+.change-list .title-cell .expand,
+.change-list .title-cell .expanded .collapse {
display: block;
}
-.change-list .table-selected .selected .move-target-container {
+
+/* Move links */
+.change-list .insert {
display: none;
+ position: absolute;
+ right: 4px; top: -4px;
+}
+.change-list .insertable .insert {
+ display: block;
}
-.change-list tr.selected {
+.change-list .insert a {
+ float: left;
+ width: 10px; height: 21px;
+ padding: 0 5px;
+ background: url(../images/icons/insert.gif) no-repeat;
+}
+.change-list .insert a.left { background-position: 5px 0; }
+.change-list .insert a.right { background-position: -10px 0; }
+.change-list .insert a.first-child { background-position: -25px 0;
width: 14px; }
+.change-list tr:hover .insert a.left,
+.change-list .insert a.left:hover { background-position: 5px
-21px; }
+.change-list tr:hover .insert a.right,
+.change-list .insert a.right:hover { background-position: -10px
-21px; }
+.change-list tr:hover .insert a.first-child,
+.change-list .insert a.first-child:hover { background-position: -25px
-21px; }
+.change-list .insert a span {
+ display: none;
+ position: absolute;
+ top: -24px;
+ padding: 2px;
+ border: 1px solid #888;
+ font-size: 12px;
+ font-weight: normal;
+ color: #333;
background: #ffb;
+ white-space: nowrap;
}
-.change-list table tr.target {
- background: white;
+.change-list .insert a:hover span {
+ display: block;
+}
+
+/* **** */
+
+.change-list .action-cell a.viewlink {
+ padding-left: 13px;
+ background: url(../images/icons/view.gif) no-repeat 0 0.25em;
+}
+.change-list .action-cell a.movelink {
+ padding-left: 13px;
+ background: url(../images/icons/move.gif) no-repeat 0 0.25em;
+}
+.change-list .action-cell a.addlink {
+ padding-left: 14px;
+ color: #28662C;
}
-.change-list table td input {
- margin-top: -1px;
- margin-bottom: 1px;
+.change-list .action-cell a.addlink:hover {
+ color: #091B0B;
}
+.change-list .action-cell a.deletelink {
+ padding-left: 13px;
+}
+
.change-list .publish-cell img {
width: 10px;
@@ -275,20 +355,3 @@
padding: 0 5px;
}
-.expand-collapse span {
- font-family: monospace;
- font-size: 16px;
- margin: 2px 4px;
-}
-.expand-collapse .collapse {
- display: none;
-}
-.expand-collapse .expand {
- display: inline;
-}
-.expanded .collapse {
- display: inline;
-}
-.expanded .expand {
- display: none;
-}
Added: branches/electron/pages/media/pages/images/icons/insert.gif
==============================================================================
Binary file. No diff available.
Modified: branches/electron/pages/media/pages/images/icons/view.gif
==============================================================================
Binary files. No diff available.
Modified: branches/electron/pages/media/pages/javascript/pages.js
==============================================================================
--- branches/electron/pages/media/pages/javascript/pages.js (original)
+++ branches/electron/pages/media/pages/javascript/pages.js Fri May 1
09:10:32 2009
@@ -2,20 +2,6 @@
var pages = {};
-pages.update_published_icon = function (url, select, img) {
- var opt = { 0: 'draft', 1: 'published', 3: 'hidden' };
- img.attr({
- 'src': img.attr('src').replace(/icons\/.*/, 'waiting.gif'),
- 'alt': 'Loading'
- });
- $.post(url+'change-status-'+opt[select.val()]+'/', {1:1},
function(val) {
- img.attr({
- 'src':
img.attr('src').replace('waiting.gif', 'icons/'+opt[val]+'.gif'),
- 'alt': opt[val]
- });
- });
-};
-
pages.cookie = function(name, value, options) {
if (typeof value != 'undefined') { // name and value given, set cookie
options = options || {};
@@ -56,4 +42,49 @@
}
return cookieValue;
}
+};
+
+pages.fade_color = function (elem, o) {
+ o = $.extend({
+ duration: 1000, // Time [ms] the animation should last
+ frame: 50, // Time [ms] a frame lasts
+ color1: 'FFFFBB', // Color to start the animation with
+ color2: 'FFFFFF', // Color to end the animation with
+ css: 'background-color', // What CSS property the color affects
+ keep: false // Should the CSS property be kept or removed on the
element once the animation is finished
+ }, o);
+
+ function c2d(c,i) { return parseInt(c.substr(i,2),16); } // Color
to decimal (RRGGBB => 255)
+ function d2c(d) { return d.toString(16); } // Decimal
to color (255 => FF)
+ function c2a(c) { return [c2d(c,0), c2d(c,2), c2d(c,4)]; } // Color
to array (RRGGBB => [255,255,255])
+ function a2c(c) { return d2c(c[0])+d2c(c[1])+d2c(c[2]); } // Array
to color ([255,255,255] => RRGGBB)
+
+ var c = [];
+ var c1 = c2a(o.color1);
+ var c2 = c2a(o.color2);
+ var elapsed = 0;
+ var interval = setInterval(function () {
+ if ((elapsed += o.frame) >= o.duration) {
+ clearInterval(interval);
+ elem.css(o.css, o.keep ? '#'+o.color2 : null);
+ } else {
+ for (var i = c1.length; i--;)
+ c[i] = Math.round(c1[i]+(c2[i]-c1[i])*elapsed/o.duration);
+ elem.css(o.css, '#'+a2c(c));
+ }
+ }, o.frame);
+};
+
+pages.update_published_icon = function (url, select, img) {
+ var opt = { 0: 'draft', 1: 'published', 3: 'hidden' };
+ img.attr({
+ 'src': img.attr('src').replace(/icons\/.*/, 'waiting.gif'),
+ 'alt': 'Loading'
+ });
+ $.post(url+'change-status-'+opt[select.val()]+'/', {1:1},
function(val) {
+ img.attr({
+ 'src':
img.attr('src').replace('waiting.gif', 'icons/'+opt[val]+'.gif'),
+ 'alt': opt[val]
+ });
+ });
};
Modified: branches/electron/pages/media/pages/javascript/pages_form.js
==============================================================================
--- branches/electron/pages/media/pages/javascript/pages_form.js
(original)
+++ branches/electron/pages/media/pages/javascript/pages_form.js Fri May
1
09:10:32 2009
@@ -32,8 +32,7 @@
$('#translation-helper-select').change(function() {
var index = this.selectedIndex;
if (index) {
- var array = window.location.href.split('?');
- $.get(array[0]+'traduction/'+this.options[index].value+'/',
function(html) {
+
$.get(window.location.href.split('?')[0]+'traduction/'+this.options[index].value+'/',
function(html) {
$('#translation-helper-content').html(html).show();
});
} else {
Modified: branches/electron/pages/media/pages/javascript/pages_list.js
==============================================================================
--- branches/electron/pages/media/pages/javascript/pages_list.js
(original)
+++ branches/electron/pages/media/pages/javascript/pages_list.js Fri May
1
09:10:32 2009
@@ -1,135 +1,147 @@
/* Initialization of the change_list page - this script is run once
everything is ready. */
-$(function() {
+$(function () {
+ var action = false;
+ var selected_page = false;
var submenu_cache = [];
- function save_expanded() {
- var col = [];
- $('a.expanded').each(function() {
- col.push(this.id.substring(1));
- });
- // expire in 12 days
- pages.cookie('tree_expanded', col.join(','), {'expires':12});
- }
-
- function remove_children(id) {
- $('.child-of-'+id).each(function() {
- remove_children(this.id.substring(9));
- $(this).remove();
- });
- }
-
+ // Get an array of the TR elements that are children of the given page
id
+ // The list argument should not be used (it is only used by the
recursion)
function get_children(id, list) {
+ list = list || [];
$('.child-of-'+id).each(function() {
list.push(this);
get_children(this.id.substring(9), list);
- return list
});
+ return list;
}
- var selected_page = false;
- var action = false;
-
- // let's start event delegation
- $('#changelist').click(function(e) {
- // I want a link to check the class
- if(e.target.tagName == 'IMG' || e.target.tagName == 'SPAN')
- var target = e.target.parentNode;
- else
- var target = e.target;
- var jtarget = $(target);
+ // Request and insert to the table the children of the given page id
+ function add_children(id) {
+ submenu_cache[id] ? add() : $.get(id+'/sub-menu/', add);
- if(jtarget.hasClass('move')) {
- var page_id = e.target.id.split('move-link-')[1];
- selected_page = page_id;
- action = 'move';
- $('#changelist table').removeClass('table-selected');
- $('tr').removeClass('selected').removeClass('target');
- $('#page-row-'+page_id).addClass('selected');
- var children = [];
- get_children(page_id, children);
- for(var i=0; i < children.length; i++) {
- $(children[i]).addClass('selected');
- }
- $('#changelist table').addClass('table-selected');
- return false;
+ function add(html) {
+ html && (submenu_cache[id] = html); // If a new request was
made, save the HTML to the cache
+ $('#page-row-'+id).after(submenu_cache[id]);
+ var expanded = get_expanded();
+ $('.child-of-'+id).each(function() {
+ var i = this.id.substring(9);
+ if ($.inArray(i, expanded) != -1) {
+ $('#c'+i).addClass('expanded');
+ add_children(i);
+ }
+ });
}
-
- if(jtarget.hasClass('addlink')) {
- $('tr').removeClass('target');
- $('#changelist table').removeClass('table-selected');
- var page_id = target.id.split('add-link-')[1];
- selected_page = page_id;
- action = 'add';
- $('tr').removeClass('selected');
- $('#page-row-'+page_id).addClass('selected');
- $('.move-target-container').hide();
- $('#move-target-'+page_id).show();
- return false;
+ }
+
+ // Remove the children of the given page id from the table
+ function rem_children(id) {
+ $('.child-of-'+id).each(function () {
+ rem_children(this.id.substring(9));
+ $(this).remove();
+ });
+ }
+
+ // Add a page id to the list of expanded pages
+ function add_expanded(id) {
+ var expanded = get_expanded();
+ if ($.inArray(id, expanded) == -1) {
+ expanded.push(id);
+ set_expanded(expanded);
}
-
- if(jtarget.hasClass('move-target')) {
- if(jtarget.hasClass('left'))
- var position = 'left';
- if(jtarget.hasClass('right'))
- var position = 'right';
- if(jtarget.hasClass('first-child'))
- var position = 'first-child';
- var target_id = target.parentNode.id.split('move-target-')[1];
- if(action=='move') {
- var msg = $('<span>Please wait...</span>');
- $($('#page-row-'+selected_page+' td')[0]).append(msg);
- $.post(selected_page+'/move-page/', {
- position:position,
- target:target_id
- },
- function(html) {
- $('#changelist').html(html);
- var msg = $('<span>Successfully moved</span>');
- var message_target = '#page-row-'+selected_page
- if(!$(message_target).length)
- message_target = '#page-row-'+target_id
- $(message_target).addClass('selected');
- $($(message_target+' td')[0]).append(msg);
- msg.fadeOut(5000);
- }
- );
- $('.move-target-container').hide();
- }
- if(action=='add') {
- var query = $.query.set('target',
target_id).set('position', position).toString();
- window.location.href += 'add/'+query;
- }
- return false;
+ }
+
+ // Remove a page id from the list of expanded pages
+ function rem_expanded(id) {
+ var expanded = get_expanded();
+ var index = $.inArray(id, expanded);
+ if (index != -1) {
+ // The following code is based on J. Resig's optimized array
remove
+ var rest = expanded.slice(index+1);
+ expanded.length = index;
+ expanded.push.apply(expanded, rest);
+ set_expanded(expanded);
}
-
- if(jtarget.hasClass('expand-collapse')) {
- var the_id = jtarget.attr('id').substring(1);
- jtarget.toggleClass('expanded');
- if(jtarget.hasClass('expanded')) {
- if (submenu_cache[the_id]){
- $('#page-row-'+the_id).after(submenu_cache[the_id]);
- } else {
- $.get(the_id+'/sub-menu/',
- function(html) {
- $('#page-row-'+the_id).after(html);
- submenu_cache[the_id] = html;
- /* TODO: recursively re-expand submenus
according to cookie */
+ }
+
+ // Get the list of expanded page ids from the cookie
+ function get_expanded() {
+ var cookie = pages.cookie('tree_expanded');
+ return cookie ? cookie.split(',') : [];
+ }
+
+ // Save the list of expanded page ids to the cookie
+ function set_expanded(array) {
+ pages.cookie('tree_expanded', array.join(','), { 'expires': 14 });
// expires after 12 days
+ }
+
+ // let's start event delegation
+ $('#changelist').click(function (e) {
+ var link = $(e.target).parents('a').andSelf().filter('a');
+ if (link.length) {
+ // Toggles a previous action to come back to the initial state
+ if (link.hasClass('selected')) {
+ selected_page = action = '';
+ link.removeClass('selected');
+ $('#changelist tr').removeClass('highlighted insertable');
+ return false;
+
+ // Ask where to move the page to
+ } else if (link.hasClass('movelink')) {
+ action = 'move';
+ $('#changelist a').removeClass('selected');
+ selected_page =
link.addClass('selected').attr('id').split('move-link-')[1];
+ $('#changelist tr').removeClass('highlighted insertable');
+
$('#page-row-'+selected_page).add(get_children(selected_page)).addClass('highlighted');
+ $('#changelist
tr:not(.highlighted)').addClass('insertable');
+ return false;
+
+ // Ask where to insert the new page
+ } else if (link.hasClass('addlink')) {
+ action = 'add';
+ selected_page =
link.addClass('selected').attr('id').split('add-link-')[1];
+ $('#changelist tr').removeClass('highlighted insertable');
+ $('#page-row-'+selected_page).addClass('highlighted
insertable');
+ return false;
+
+ // Move or add the page and come back to the initial state
+ } else if (link.hasClass('move-target')) {
+ var position = link.attr('class').match(/left|right|
first-child/)[0];
+ var id = link.parent().attr('id').split('move-target-')[1];
+
+ $('#changelist a').removeClass('selected');
+ $('#changelist tr').removeClass('insertable');
+ $('#page-row-'+selected_page+' th').append('<img
src="/media/pages/images/waiting.gif" alt="Loading" />');
+
+ if (action == 'move') {
+ $.post(selected_page+'/move-page/', { position:
position, target: id },
+ function (html) {
+ $('#changelist').html(html);
+
pages.fade_color($('#page-row-'+selected_page).add(get_children(selected_page)));
}
);
+ } else if (action == 'add') {
+ window.location.href += 'add/'+$.query.set('target',
id).set('position', position).toString();
+ }
+ return false;
+
+ // Expand or collapse pages
+ } else if (link.hasClass('expand-collapse')) {
+ var id = link.attr('id').substring(1);
+ if (link.toggleClass('expanded').hasClass('expanded')) {
+ add_expanded(id);
+ add_children(id);
+ } else {
+ rem_expanded(id);
+ rem_children(id);
}
- } else {
- remove_children(the_id);
+ return false;
}
- save_expanded();
- return false;
- };
-
- return true;
+ }
});
// Set the publication status
- $('#changelist').change(function(e) {
+ $('#changelist').change(function (e) {
var select = $(e.target);
if (select.is('select.publish-select')) {
var url = select.attr('name').split('status-')[1]+'/';
Modified: branches/electron/pages/models.py
==============================================================================
--- branches/electron/pages/models.py (original)
+++ branches/electron/pages/models.py Fri May 1 09:10:32 2009
@@ -230,11 +230,11 @@
level = ''
if self.level:
for n in range(0, self.level):
- level += ' '
+ level += ' '
return mark_safe(level + self.__unicode__())
def margin_level(self):
- return self.level * 4 + 1
+ return self.level * 2
def __unicode__(self):
slug = self.slug()
Modified:
branches/electron/pages/templates/admin/pages/page/change_list.html
==============================================================================
--- branches/electron/pages/templates/admin/pages/page/change_list.html
(original)
+++ branches/electron/pages/templates/admin/pages/page/change_list.html Fri
May 1 09:10:32 2009
@@ -23,7 +23,6 @@
<script type="text/javascript" src="{{ PAGES_MEDIA_URL
}}javascript/pages_list.js"></script>
{% endblock %}
-
{% block content %}
<div id="content-main">
Modified: branches/electron/pages/templates/admin/pages/page/menu.html
==============================================================================
--- branches/electron/pages/templates/admin/pages/page/menu.html
(original)
+++ branches/electron/pages/templates/admin/pages/page/menu.html Fri May
1
09:10:32 2009
@@ -2,27 +2,30 @@
{% if has_permission %}
<tr id="page-row-{{ page.id }}" class="child-of-{{ page.parent_id }}">
-<td style="text-align:left;padding-left:{{ page.margin_level }}em">
- <span id="move-target-{{ page.id }}" class="move-target-container">
- <a href="#" class="move-target left" title="{% trans "as left
sibling"%}"><img alt="" src="{%
admin_media_prefix %}img/admin/arrow-up.gif"/></a> |
- <a href="#" class="move-target right" title="{% trans "as right
sibling"%}"><img alt="" src="{%
admin_media_prefix %}img/admin/arrow-down.gif"/></a></a> |
- <a href="#" class="move-target first-child" title="{% trans "as
child"%}">↘</a>
- </span>
- {% if page.children.count %}
- <a href="#" class="expand-collapse {% if expanded %}expanded{%
endif %}" id="c{{ page.id }}">
- <span class="expand">+</span>
- <span class="collapse">-</span>
- </a>
- {% endif %}
- <a href="{{ url }}{{ page.id }}/" class="changelink"
style="margin-right:1em;">{% show_content page "slug" %}</a>
+<th>
+ <div class="title-cell" style="margin-left:{{ page.margin_level }}em">
+ {% if page.children.count %}
+ <a href="#" class="expand-collapse {% if expanded %}expanded{%
endif %}" id="c{{ page.id }}">
+ <span class="expand">+</span>
+ <span class="collapse">-</span>
+ </a>
+ {% endif %}
+ <a href="{{ url }}{{ page.id }}/" class="changelink">{%
show_content page "slug" %}</a>
+
+ <div id="move-target-{{ page.id }}" class="insert container">
+ <a href="#" class="move-target left"><span>{% trans "insert
above" %}</span></a>
+ <a href="#" class="move-target right"><span>{% trans "insert
below" %}</span></a>
+ <a href="#" class="move-target first-child"><span>{%
trans "insert as child" %}</span></a>
+ </div>
+ </div>
+</th>
+<td class="action-cell">
+ <a class="viewlink" href="{{ page.get_absolute_url }}"
target="_blank">{% trans "view" %}</a> |
+ <a class="movelink" id="move-link-{{ page.id }}" href="#">{%
trans "move" %}</a> |
+ <a class="addlink" id="add-link-{{ page.id }}" href="#">{%
trans "add" %}</a> |
+ <a class="deletelink" href="{{ page.id }}/delete/">{%
trans "delete" %}</a>
</td>
-<td>
- <a href="#" class="move" id="move-link-{{ page.id }}">{%
trans "move" %}</a> |
- <a href="#" class="addlink" id="add-link-{{ page.id }}">{%
trans "add" %}</a> |
- <a href="{{ page.get_absolute_url }}" class="selector-add">{%
trans "view" %}</a> |
- <a href="{{ page.id }}/delete/" class="deletelink">{%
trans "delete" %}</a>
-</td>
-<td>
+<td class="translation-cell">
{% for lang in page.get_languages %}
<a href="{{ url }}{{ page.id }}/?language={{ lang }}"
class="changelink">{{ lang }}</a>
<span style="font-weight:normal">{% if not forloop.last %}|{%
endif %}</span>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"pinax-updates" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/pinax-updates?hl=en
-~----------~----~----~----~------~----~------~--~---
