Icon Pages and Styles

[foxfirefey]

exor674 has been doing a lot of great work lately making it so that your icons page can be viewed in your journal style. I've asked her if I could share what's been done so far, and she agreed! So without further ado, let me give you all a rundown:

• This will make it so that instead of viewing your icons page in the site layout, it can display in your style, like the rest of your journal. You'll be able to turn it on in the Presentation area of Style Customization.
• You can decide whether you want the default sort order to go by keyword or upload order.
• There will probably be a max limit, but you'll also be able to decide how many icons go on each page.
• Once the main parts of this feature have been reviewed and committed, the styles team will work on enabling the icons page for each official style and theme.

For those of you who are more advanced users of styles and S2, I've cut out some of the relevant parts for you to review and make comments on--read under the cut for more! It's still a work in progress, so feel free to make suggestions.


If you want to play with it on your Dreamhack, the patch is uploaded to the appropriate bug ticket. Remember to set use_journalstyle_icons_page to true for any style you want to play with it in.

class Icon
"Represents a single userpicture"
{
    var readonly Image image "Information about the picture";
    var readonly string[] keywords "All keywords";
    var readonly string comment "Comment text";
    var readonly string description "Description text";
    var readonly string link_url "URL this image links to when clicked";

    var readonly bool default "If this picture is the default";
    var readonly bool active "If this picture is active";

    function print() "Prints the icon";
}


class IconsPage extends Page
"A detail page listing a user's icons."
{
    var readonly bool can_manage "Can the current user manage these icons.";
    var readonly Icon[] icons "List of the icons on the current page.";
    var readonly ItemRange pages "All pages";
    var readonly string sortorder "Current sort order. Can be 'upload' or 'keyword'.";

    var readonly string{} sort_urls "An associative array of link for various sort orders.";
    var readonly string[] sort_keyseq "A list of sort orders, indicated by key.";
}

property int num_items_icons {
    des = "Number of icons to show on the icons page, or 0 for no pagination";
    doc_flags = "[construct]";
}
set num_items_icons = 0;

property string icons_page_sort {
    des = "Default sort order for icons page";
    values="upload|Upload Order|keyword|Keyword Order";
}
set tags_page_type = "upload";

property bool use_journalstyle_icons_page  { des = "Show icons page in my journal style rather than the site layout"; }
set use_journalstyle_icons_page = false;

property string text_view_icons {
    des = "Text used to link to the Icons page";
    maxlength = 40;
    "size" = 15;
    example = "Icons";
}


property string text_icons_page_header {
    des = "Text for the header of the Icons page";
    example = "Current Icons";
}

property string text_icons_page_empty_header {
    des = "Text for the header of the Icons page when it is empty";
    example = "No Icons";
}

property string text_icons_keywords {
    des = "Text for the list of keywords";
    example = "Keywords:";
}

property string text_icons_comment {
    des = "Text for the icon comment";
    example = "Comment:";
}

property string text_icons_description {
    des = "Text for the icon description";
    example = "Description:";
}

property string text_icons_default {
    des = "Text for the default icon";
    example = "Default";
}

property string text_icons_inactive {
    des = "Text for inactive icons";
    example = "Inactive";
}

property string text_icons_keyword_sep {
    des = "Text to separate items in a list of keywords";
    example = ",";
}

property string text_icons_sort_upload {
    des = "Text for sort by upload order link";
    example = "Upload Order";
}

property string text_icons_sort_keyword {
    des = "Text for sort by keyword link";
    example = "Keyword Order";
}

set text_icons_page_header = "Current Icons";
set text_icons_page_empty_header = "No Icons";
set text_icons_keywords = "Keywords:";
set text_icons_comment = "Comment:";
set text_icons_description = "Description:";
set text_icons_keyword_sep = ",";
set text_icons_default = "Default";
set text_icons_inactive = "Inactive";
set text_icons_sort_upload = "Upload Order";
set text_icons_sort_keyword = "Keyword Order";

function lang_icon_sortorder_title(string which) [fixed] : string
    "Get a human-readable caption for an icons sort order key. Overriding this function is NOT RECOMMENDED. Overriding this function could prevent sitewide improvements to styles, accessibility, or other functionality from operating in your layout. Sets strings according to layer or wizard supplied string properties."
    {
        if ($which == "upload") {
            return $*text_icons_sort_upload;
        }
        elseif ($which == "keyword") {
            return $*text_icons_sort_keyword;
        }
        else {
            return $which;
        }
    }

### IconsPage functions

function IconsPage::print_body {
    print safe "<div class='icons-container'><h2>$*text_icons_page_header</h2><div class='inner'>";
    """<div><ul>""";
    var int sort_ct = 0;
    foreach var string k ($.sort_keyseq) {
        var string text = lang_icon_sortorder_title($k);
        if ( $k == $.sortorder ) {
            print safe """<li class='$k active'>$text""";
        } else {
            print safe """<li class='$k'><a href='$.sort_urls{$k}'>$text</a>""";
        }
        if ( (++$sort_ct) < size $.sort_keyseq) { print $*text_default_separator; }
        """</li>""";
    }
    """</ul></div>""";
    $.pages->print();
    foreach var Icon i ($.icons) {
        $i->print();
    }
    $.pages->print();
    print safe "</div></div>";
}

function Icon::print {
    var string default_class = $.default ? "icon-default" : "";
    var string inactive_class = $.active ? "" : "icon-inactive";

    """<div class="icon $default_class $inactive_class">""";
    """<a href="$.link_url">"""; $.image->print(); """</a>""";
    if ($.default) {
        print safe "<div class='default label'>$*text_icons_default</div>";
    }
    if (not $.active) {
        print safe "<div class='inactive label'>$*text_icons_inactive</div>";
    }
    if ($.keywords) {
        """<div class="keywords">""";
        var int keyword_count = 0;
        print safe "<span class='label'>$*text_icons_keywords</span> ";
        """<ul>""";
        foreach var string kw ($.keywords) {
            $keyword_count++;
            """<li>""";
            print safe $kw;
            if ($keyword_count < size $.keywords) { print $*text_icons_keyword_sep; }
            """</li>""";
        }
        """</ul></div>""";
    }
    if ($.comment) {
        print safe "<div class='comment'><span class='comment-text'>$*text_icons_comment</span> $.comment</div>";
    }
    if ($.description) {
        print safe "<div class='description'><span class='description-text'>$*text_icons_description</span> $.description</div>";
    }
    """</div>""";
}

Comments

[ninetydegrees]

Nice! The HTML still needs work but I guess that's for later, right?

[feathertail]

Cool. ^.^ Any way to get a Profile page to display in your style? And does this style hack display for everyone, or just you?