Skip to content

Instantly share code, notes, and snippets.

@l34marr

l34marr/main_template.pt

Created October 26, 2012 04:36
Show Gist options
  • Save l34marr/3956847 to your computer and use it in GitHub Desktop.
Save l34marr/3956847 to your computer and use it in GitHub Desktop.
Download ZIP
Sunburst main_template Page Template
Raw
main_template.pt
<metal:page define-macro="master">
<tal:doctype tal:replace="structure string:&lt;!DOCTYPE html&gt;" />
<html xmlns="http://www.w3.org/1999/xhtml"
tal:define="portal_state context/@@plone_portal_state;
context_state context/@@plone_context_state;
plone_view context/@@plone;
lang portal_state/language;
view nocall:view | nocall: plone_view;
dummy python: plone_view.mark_view(view);
portal_url portal_state/portal_url;
checkPermission nocall: context/portal_membership/checkPermission;
site_properties context/portal_properties/site_properties;
ajax_load request/ajax_load | nothing;
ajax_include_head request/ajax_include_head | nothing;
dummy python:request.RESPONSE.setHeader('X-UA-Compatible', 'IE=edge,chrome=1');"
tal:attributes="lang lang;">
<metal:cache use-macro="context/global_cache_settings/macros/cacheheaders">
Get the global cache headers located in global_cache_settings.
</metal:cache>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<metal:baseslot define-slot="base">
<base tal:attributes="href plone_view/renderBase" /><!--[if lt IE 7]></base><![endif]-->
</metal:baseslot>
<tal:notajax tal:condition="python:not ajax_load or ajax_include_head">
<div tal:replace="structure provider:plone.htmlhead" />
<link tal:replace="structure provider:plone.htmlhead.links" />
<tal:comment replace="nothing">
Various slots where you can insert elements in the header from a template.
</tal:comment>
<metal:topslot define-slot="top_slot" />
<metal:headslot define-slot="head_slot" />
<metal:styleslot define-slot="style_slot" />
<metal:javascriptslot define-slot="javascript_head_slot" />
<meta name="viewport" content="width=device-width, initial-scale=0.6666, maximum-scale=1.0, minimum-scale=0.6666" />
<meta name="generator" content="Plone - http://plone.org" />
</tal:notajax>
</head>
<body tal:define="isRTL portal_state/is_rtl;
sl python:plone_view.have_portlets('plone.leftcolumn', view);
sr python:plone_view.have_portlets('plone.rightcolumn', view);
body_class python:plone_view.bodyClass(template, view);
sunburst_view python:context.restrictedTraverse('@@sunburstview')"
tal:attributes="class body_class;
dir python:isRTL and 'rtl' or 'ltr'">
<div id="visual-portal-wrapper">
<div id="portal-top"
class="row"
i18n:domain="plone"
tal:condition="not:ajax_load">
<div class="cell width-full position-0">
<div tal:replace="structure provider:plone.portaltop" />
</div>
</div>
<div id="portal-columns" class="row">
<div id="portal-column-content" class="cell" tal:attributes="class string:cell width-full position-0">
<div id="viewlet-above-content" tal:content="structure provider:plone.abovecontent" tal:condition="not:ajax_load" />
<metal:block define-slot="content">
<div metal:define-macro="content"
tal:define="show_border context/@@plone/showEditableBorder; show_border python:show_border and not ajax_load"
tal:attributes="class python:show_border and 'documentEditable' or ''">
<div id="edit-bar"
tal:condition="show_border">
<ul class="contentViews" id="content-views">
<li id="contentview-folderContents" class="selected"><a href="folder_contents">Contents</a></li>
</ul>
</div>
<div metal:use-macro="context/global_statusmessage/macros/portal_message">
Status message
</div>
<metal:slot define-slot="body">
<div id="content">
<metal:header define-slot="header" tal:content="nothing">
Visual Header
</metal:header>
<metal:bodytext define-slot="main">
<div id="viewlet-above-content-title" tal:content="structure provider:plone.abovecontenttitle" tal:condition="not:ajax_load" />
<metal:title define-slot="content-title">
<metal:comment tal:content="nothing">
If you write a custom title always use
<h1 class="documentFirstHeading"></h1> for it
</metal:comment>
<h1 class="documentFirstHeading" tal:content="template/title">
Generic KSS Title. Is rendered with class="documentFirstHeading".
</h1>
</metal:title>
<div id="viewlet-below-content-title" tal:content="structure provider:plone.belowcontenttitle" tal:condition="not:ajax_load" />
<metal:description define-slot="content-description">
<metal:comment tal:content="nothing">
If you write a custom description always use
<div class="documentDescription"></div> for it
</metal:comment>
<div metal:use-macro="context/kss_generic_macros/macros/generic_description_view">
Generic KSS Description. Is rendered with class="documentDescription".
</div>
</metal:description>
<section id="scontent">
<section id="options" class="clearfix">
<div class="option-combo">
<h2>Filter:</h2>
<ul id="filter" class="option-set clearfix" data-option-key="filter">
<li><a href="#show-all" data-option-value="*" class="selected">show all</a></li>
<li><a href="#elements" data-option-value=".element:not(.feature)">elements</a></li>
<li><a href="#features" data-option-value=".feature">features</a></li>
<li><a href="#links" data-option-value=".example">links</a></li>
</ul>
</div>
<div class="option-combo">
<h2>Sort:</h2>
<ul id="sort" class="option-set clearfix" data-option-key="sortBy">
<li><a href="#mixed" data-option-value="number" class="selected">mixed</a></li>
<li><a href="#original" data-option-value="original-order">original</a></li>
<li><a href="#alphabetical" data-option-value="alphabetical">alphabetical</a></li>
</ul>
</div>
<div class="option-combo">
<h2>Layout: </h2>
<ul id="layouts" class="option-set clearfix" data-option-key="layoutMode">
<li><a href="#masonry" data-option-value="masonry" class="selected">masonry</a></li>
<li><a href="#fitRows" data-option-value="fitRows">fitRows</a></li>
<li><a href="#straightDown" data-option-value="straightDown">straightDown</a></li>
</ul>
</div>
</section>
<div id="container" class="super-list variable-sizes clearfix">
<div class="element alkaline-earth metal " data-symbol="Mg" data-category="alkaline-earth">
<p class="number">12</p>
<h3 class="symbol">Mg</h3>
<h2 class="name">Magnesium</h2>
<p class="weight">24.305</p>
</div>
<div class="element actinoid metal inner-transition " data-symbol="Q" data-category="actinoid">
<p class="number">92</p>
<h3 class="symbol">Q</h3>
<h2 class="name">QGIS</h2>
<p class="weight">GIS</p>
</div>
<div class="element lanthanoid metal inner-transition " data-symbol="Gd" data-category="lanthanoid">
<p class="number">64</p>
<h3 class="symbol">Gd</h3>
<h2 class="name">Gadolinium</h2>
<p class="weight">157.25</p>
</div>
<div class="element transition metal " data-symbol="Dj" data-category="transition">
<p class="number">39</p>
<h3 class="symbol">Dj</h3>
<h2 class="name">Django</h2>
<p class="weight">Web</p>
</div>
<div class="element metalloid " data-symbol="Bl" data-category="metalloid">
<p class="number">5</p>
<h3 class="symbol">Bl</h3>
<h2 class="name">Blender</h2>
<p class="weight">Animation</p>
</div>
<div class="element transition metal " data-symbol="Fe" data-category="transition">
<p class="number">26</p>
<h3 class="symbol">Fe</h3>
<h2 class="name">Iron</h2>
<p class="weight">55.845</p>
</div>
<div class="element actinoid metal inner-transition " data-symbol="Arc" data-category="actinoid">
<p class="number">95</p>
<h3 class="symbol">Arc</h3>
<h2 class="name">ArcPy</h2>
<p class="weight">GIS</p>
</div>
<div class="element transition metal " data-symbol="Zn" data-category="transition">
<p class="number">30</p>
<h3 class="symbol">Zn</h3>
<h2 class="name">Zinc</h2>
<p class="weight">65.38</p>
</div>
<div class="element lanthanoid metal inner-transition " data-symbol="Nu" data-category="lanthanoid">
<p class="number">61</p>
<h3 class="symbol">Nu</h3>
<h2 class="name">NumPy</h2>
<p class="weight">Scientific</p>
</div>
<div class="element post-transition metal " data-symbol="Qt" data-category="post-transition">
<p class="number">49</p>
<h3 class="symbol">Qt</h3>
<h2 class="name">PyQt</h2>
<p class="weight">Toolkit</p>
</div>
<div class="element metalloid " data-symbol="As" data-category="metalloid">
<p class="number">33</p>
<h3 class="symbol">As</h3>
<h2 class="name">Arsenic</h2>
<p class="weight">74.9216</p>
</div>
<div class="element lanthanoid metal inner-transition " data-symbol="Er" data-category="lanthanoid">
<p class="number">68</p>
<h3 class="symbol">Er</h3>
<h2 class="name">Erbium</h2>
<p class="weight">167.259</p>
</div>
<div class="element other nonmetal " data-symbol="Se" data-category="other">
<p class="number">34</p>
<h3 class="symbol">Se</h3>
<h2 class="name">Selenium</h2>
<p class="weight">78.96</p>
</div>
<div class="element alkaline-earth metal " data-symbol="Sr" data-category="alkaline-earth">
<p class="number">38</p>
<h3 class="symbol">Sr</h3>
<h2 class="name">Strontium</h2>
<p class="weight">87.62</p>
</div>
<div class="element transition metal " data-symbol="Pr" data-category="transition">
<p class="number">40</p>
<h3 class="symbol">Pr</h3>
<h2 class="name">Pyramid</h2>
<p class="weight">Web</p>
</div>
<div class="element halogen nonmetal " data-symbol="At" data-category="halogen">
<p class="number">85</p>
<h3 class="symbol">At</h3>
<h2 class="name">Astatine</h2>
<p class="weight">(210)</p>
</div>
<div class="element transition metal " data-symbol="Pl" data-category="transition">
<p class="number">41</p>
<h3 class="symbol">Pl</h3>
<h2 class="name">Plone</h2>
<p class="weight">CMS</p>
</div>
<div class="element other nonmetal " data-symbol="O" data-category="other">
<p class="number">8</p>
<h3 class="symbol">O</h3>
<h2 class="name">Oxygen</h2>
<p class="weight">15.9994</p>
</div>
<div class="element actinoid metal inner-transition " data-symbol="Bk" data-category="actinoid">
<p class="number">97</p>
<h3 class="symbol">Bk</h3>
<h2 class="name">Berkelium</h2>
<p class="weight">(247)</p>
</div>
<div class="element halogen nonmetal " data-symbol="Fb" data-category="halogen">
<p class="number">9</p>
<h3 class="symbol">Fb</h3>
<h2 class="name">Fabric</h2>
<p class="weight">Deployment</p>
</div>
<div class="element actinoid metal inner-transition " data-symbol="Cf" data-category="actinoid">
<p class="number">98</p>
<h3 class="symbol">Cf</h3>
<h2 class="name">Californium</h2>
<p class="weight">(251)</p>
</div>
<div class="element noble-gas nonmetal " data-symbol="Ne" data-category="noble-gas">
<p class="number">10</p>
<h3 class="symbol">Ne</h3>
<h2 class="name">Neon</h2>
<p class="weight">20.1797</p>
</div>
<div class="element other nonmetal " data-symbol="P" data-category="other">
<p class="number">15</p>
<h3 class="symbol">P</h3>
<h2 class="name">Phosphorus</h2>
<p class="weight">30.973762</p>
</div>
<div class="element actinoid metal inner-transition " data-symbol="Wg" data-category="actinoid">
<p class="number">100</p>
<h3 class="symbol">Wg</h3>
<h2 class="name">Wingware</h2>
<p class="weight">IDE</p>
</div>
<div class="element other nonmetal " data-symbol="Sp" data-category="other">
<p class="number">16</p>
<h3 class="symbol">Sp</h3>
<h2 class="name">Sphnix</h2>
<p class="weight">Documentation</p>
</div>
<div class="element alkaline-earth metal " data-symbol="Ca" data-category="alkaline-earth">
<p class="number">20</p>
<h3 class="symbol">Ca</h3>
<h2 class="name">Calcium</h2>
<p class="weight">40.078</p>
</div>
<div class="element other nonmetal " data-symbol="Sy" data-category="other">
<p class="number">6</p>
<h3 class="symbol">Sy</h3>
<h2 class="name">StickyPy</h2>
<p class="weight">Animation</p>
</div>
<div class="element alkali metal " data-symbol="Rb" data-category="alkali">
<p class="number">37</p>
<h3 class="symbol">Rb</h3>
<h2 class="name">Rubidium</h2>
<p class="weight">85.4678</p>
</div>
<div class="element post-transition metal " data-symbol="Wx" data-category="post-transition">
<p class="number">115</p>
<h3 class="symbol">Wx</h3>
<h2 class="name">WxPython</h2>
<p class="weight">Toolkit</p>
</div>
<div class="element transition metal " data-symbol="Sc" data-category="transition">
<p class="number">21</p>
<h3 class="symbol">Sc</h3>
<h2 class="name">Scandium</h2>
<p class="weight">44.955912</p>
</div>
<div class="element feature alkali width2 height2">
<p class="number">1</p>
<h3 class="symbol">Py</h3>
<h2 class="name">from future import everything</h2>
</div>
<div class="element feature actinoid width2 height2">
<p class="number">31</p>
<h3 class="symbol">2013</h3>
<h2 class="name">The year community gets stronger than ever</h2>
</div>
<div class="element feature lanthanoid width2 height2">
<p class="number">27</p>
<h3 class="symbol">TW</h3>
<h2 class="name">Where revolution's quietly happening</h2>
</div>
<div class="element feature metalloid width2 height2">
<p class="number">61</p>
<h3 class="symbol">Pow</h3>
<h2 class="name">Powerful, agile, and batteries included</h2>
</div>
<div class="element feature alkaline-earth width2 height2">
<p class="number">11</p>
<h3 class="symbol">Con</h3>
<h2 class="name">We gather expertise, so you don't have to.</h2>
</div>
<div class="element feature transition width2 height2">
<p class="number">41</p>
<h3 class="symbol">Def</h3>
<h2 class="name">Definitely value for money</h2>
</div>
<div class="element feature halogen width2 height2">
<p class="number">71</p>
<h3 class="symbol">Pro</h3>
<h2 class="name">Productivity gain beyond imagination</h2>
</div>
<div class="element feature post-transition width2 height2">
<p class="number">51</p>
<h3 class="symbol">Pos</h3>
<h2 class="name">Impossible made possible, possible made simple</h2>
</div>
<div class="link" data-number="5"><a href="http://www.facebook.com/pycontw">PyConTW on Facebook</a></div>
<div class="link" data-number="13"><a href="http://tw.pycon.org/2013">Get Your Yearly Dose Of Python</a></div>
<div class="link away" data-number="35"><a href="http://tw.pycon.org/2013">Register PyConTW 2013 Now</a></div>
</div>
</section>
<div id="viewlet-above-content-body" tal:content="structure provider:plone.abovecontentbody" tal:condition="not:ajax_load" />
<div id="content-core">
<metal:text define-slot="content-core" tal:content="nothing">
Page body text
</metal:text>
</div>
<div id="viewlet-below-content-body" tal:content="structure provider:plone.belowcontentbody" tal:condition="not:ajax_load" />
</metal:bodytext>
</div>
</metal:slot>
<metal:sub define-slot="sub" tal:content="nothing">
This slot is here for backwards compatibility only.
Don't use it in your custom templates.
</metal:sub>
</div>
</metal:block>
<div id="viewlet-below-content" tal:content="structure provider:plone.belowcontent" tal:condition="not:ajax_load" />
</div>
<!--
<tal:notajax tal:condition="not:ajax_load">
<div id="portal-column-one"
class="cell width-1:4 position-0"
metal:define-slot="column_one_slot"
tal:condition="sl"
tal:attributes="class python:isRTL and 'cell width-1:4 position-3:4' or 'cell width-1:4 position-0'">
<metal:portlets define-slot="portlets_one_slot">
<tal:block replace="structure provider:plone.leftcolumn" />
</metal:portlets>
</div>
<div id="portal-column-two"
class="cell width-1:4 position-3:4"
metal:define-slot="column_two_slot"
tal:condition="sr"
tal:attributes="class python:isRTL and 'cell width-1:4 position-0' or 'cell width-1:4 position-3:4'">
<metal:portlets define-slot="portlets_two_slot">
<tal:block replace="structure provider:plone.rightcolumn" />
</metal:portlets>
</div>
</tal:notajax>
-->
</div>
<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.isotope.min.js"></script>
<script>
$(function(){
var $container = $('#container');
$container.isotope({
masonry: {
columnWidth: 120
},
sortBy: 'number',
getSortData: {
number: function( $elem ) {
var number = $elem.hasClass('element') ?
$elem.find('.number').text() :
$elem.attr('data-number');
return parseInt( number, 10 );
},
alphabetical: function( $elem ) {
var name = $elem.find('.name'),
itemText = name.length ? name : $elem;
return itemText.text();
}
}
});
var $optionSets = $('#options .option-set'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return false;
}
var $optionSet = $this.parents('.option-set');
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
// make option object dynamically, i.e. { filter: '.my-filter-class' }
var options = {},
key = $optionSet.attr('data-option-key'),
value = $this.attr('data-option-value');
// parse 'false' as false boolean
value = value === 'false' ? false : value;
options[ key ] = value;
if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
// changes in layout modes need extra logic
changeLayoutMode( $this, options )
} else {
// otherwise, apply new options
$container.isotope( options );
}
return false;
});
// Sites using Isotope markup
var $sites = $('#sites'),
$sitesTitle = $('<h2 class="loading"><img src="http://i.imgur.com/qkKy8.gif" />Loading sites using Isotope</h2>'),
$sitesList = $('<ul class="clearfix"></ul>');
$sites.append( $sitesTitle ).append( $sitesList );
$sitesList.isotope({
layoutMode: 'cellsByRow',
cellsByRow: {
columnWidth: 290,
rowHeight: 400
}
});
var ajaxError = function(){
$sitesTitle.removeClass('loading').addClass('error')
.text('Could not load sites using Isotope :(');
};
// dynamically load sites using Isotope from Zootool
$.getJSON('http://zootool.com/api/users/items/?username=pycontw' +
'&apikey=96bc78911af7278f6da0a4f3cfcc3ddc' +
'&tag=pycontw&callback=?')
.error( ajaxError )
.success(function( data ){
// proceed only if we have data
if ( !data || !data.length ) {
ajaxError();
return;
}
var items = [],
item, datum;
for ( var i=0, len = data.length; i < len; i++ ) {
datum = data[i];
item = '<li><a href="' + datum.url + '">'
+ '<img src="' + datum.image.replace('/l.', '/m.') + '" />'
+ '<b>' + datum.title + '</b>'
+ '</a></li>';
items.push( item );
}
var $items = $( items.join('') )
.addClass('example');
// set random number for each item
$items.each(function(){
$(this).attr('data-number', ~~( Math.random() * 100 + 15 ));
});
$items.imagesLoaded(function(){
$sitesTitle.removeClass('loading').text('Sites using Isotope');
$container.append( $items );
$items.each(function(){
var $this = $(this),
itemHeight = Math.ceil( $this.height() / 120 ) * 120 - 10;
$this.height( itemHeight );
});
$container.isotope( 'insert', $items );
});
});
});
</script>
<div id="portal-footer-wrapper"
class="row"
i18n:domain="plone"
tal:condition="not:ajax_load">
<div class="cell width-full position-0">
<div tal:replace="structure provider:plone.portalfooter" />
<div id="kss-spinner">
<img tal:attributes="src string:${portal_url}/spinner.gif" alt="" />
</div>
</div>
</div>
</div>
</body>
</html>
</metal:page>
@l34marr
Copy link
Author

l34marr commented Apr 14, 2014

Note that new version of plonetheme.sunburst (for example 1.4.5 for Plone 4.3.2) removes kss-spinner and changes sunburst_view variable.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment