|
|
| (11 intermediate revisions by 3 users not shown) |
| Line 1: |
Line 1: |
| | {{#eval:html| | | {{#eval:html| |
| − | <div class="kultura-switcher"> | + | <link href="https://www.culture.si/static/projects/eu_projects.css" rel="stylesheet"> |
| | + | |
| | + | <div class="kultura-content"> |
| | + | <div class="tagline">20 years ● {{#data:selectfield|count(distinct EUProject.Producer)}} organisations ● {{#data:selectfield|count(EUProject.#)}} projects</div> |
| | + | <div class="kultura-switcher"> |
| | Show projects by: <a href="#" class="projekti">field</a><a href="#" class="status">public/private status</a><a href="#" class="role">role in the project</a> | | Show projects by: <a href="#" class="projekti">field</a><a href="#" class="status">public/private status</a><a href="#" class="role">role in the project</a> |
| | </div> | | </div> |
| | | | |
| − | <style> | + | <div class="graph"></div> |
| − | /* mediawiki modifications */
| + | {{MediaWiki:QSpinner}} |
| − | div#bodyContent { width: 826px; }
| + | <ul class="kultura-legend status"> |
| − | div#catlinks { display: none; }
| + | <strong>Organisations by status</strong> |
| − | h1#firstHeading { width: 811px; }
| + | <li class="javna"><span></span>Public</li> |
| − | div#ibr-contribute { display: none; }
| + | <li class="zasebna"><span></span>Private</li> |
| | + | </ul> |
| | | | |
| − | .graph {
| + | <ul class="kultura-legend projects"> |
| − | display: block;
| + | <strong>Projects by field</strong> |
| − | xfloat: left;
| + | <li class="filmski_in_avdiovizualni_projekti selected"><span></span>film and audiovisual projects</li> |
| − | margin-bottom: 15px;
| + | <li class="interdisciplinarni_projekti selected"><span></span>interdisciplinary projects</li> |
| − | width:100%;
| + | <li class="intermedijske_umetnosti_in_nove_tehnologije selected"><span></span>multimedia and new technologies</li> |
| − | }
| + | <li class="knjiga_branje_prevajanje selected"><span></span>books and reading / literary translation</li> |
| − | .kultura-content:after,
| + | <li class="kulturna_dediscina selected"><span></span>cultural heritage</li> |
| − | .graph:after {
| + | <li class="oblikovanje_arhitektura_in_uporabne_umetnosti selected"><span></span>architecture, design and applied arts</li> |
| − | content:"";
| + | <li class="uprizoritvene_umetnosti selected"><span></span>performing arts (theatre, dance, music)</li> |
| − | display:block;
| + | <li class="vizualne_umetnosti selected"><span></span>visual arts</li> |
| − | clear:both;
| + | </ul> |
| − | }
| |
| | | | |
| − | .kultura-year-row {
| + | <ul class="kultura-legend role"> |
| − | width: 100%;
| + | <strong>Organisation's role in the project</strong> |
| − | display: block;
| + | <li class="vodja"><span></span>beneficiary</li> |
| − | clear: both;
| + | <li class="partner"><span></span>co-beneficiary</li> |
| − | }
| + | </ul> |
| − | | + | <div class="kultura-details"> |
| − | .kultura-year-label {
| + | </div> |
| − | color: white;
| + | </div> |
| − | background-color: #AB2530;
| |
| − | display: inline-block;
| |
| − | line-height: 20px;
| |
| − | padding: 0 6px;
| |
| − | float: left;
| |
| − | margin: 0 1px 2px 0;
| |
| − | /*clear: left;*/
| |
| − | width: 3.2em;
| |
| − | text-align: center;
| |
| − | }
| |
| − | | |
| − | .circle {
| |
| − | float: left;
| |
| − | width: 8px;
| |
| − | height: 20px;
| |
| − | /*background-color: white;*/
| |
| − | display: inline-block;
| |
| − | margin-right: 1px;
| |
| − | margin-bottom: 2px;
| |
| − | cursor:pointer;
| |
| − | }
| |
| − | | |
| − | .kultura-legend li.hidden {
| |
| − | text-decoration:line-through
| |
| − | }
| |
| − | | |
| − | | |
| − | ul.kultura-legend { | |
| − | display: none;
| |
| − | list-style: none;
| |
| − | padding-left: 0 !important;
| |
| − | margin-left: 0;
| |
| − | width: 40%;
| |
| − | float: left;
| |
| − | min-height: 190px;
| |
| − | }
| |
| − | | |
| − | .kultura-legend li > span {
| |
| − | height: 20px;
| |
| − | display: inline-block;
| |
| − | margin-right: 6px;
| |
| − | width: 9px;
| |
| − | vertical-align: top;
| |
| − | }
| |
| − | .circle.selected {
| |
| − | border-radius: 4px;
| |
| − | background-color: black !important;
| |
| − | | |
| − | }
| |
| − | | |
| − | span.circle {
| |
| − | display: none;
| |
| − | }
| |
| − | .partner .partner,
| |
| − | .vodja .vodja,
| |
| − | .javna .javna,
| |
| − | .zasebna .zasebna,
| |
| − | .vizualne_umetnosti .vizualne_umetnosti,
| |
| − | .uprizoritvene_umetnosti .uprizoritvene_umetnosti,
| |
| − | .oblikovanje_arhitektura_in_uporabne_umetnosti .oblikovanje_arhitektura_in_uporabne_umetnosti,
| |
| − | .kulturna_dediscina .kulturna_dediscina,
| |
| − | .knjiga_branje_prevajanje .knjiga_branje_prevajanje,
| |
| − | .intermedijske_umetnosti_in_nove_tehnologije .intermedijske_umetnosti_in_nove_tehnologije,
| |
| − | .interdisciplinarni_projekti .interdisciplinarni_projekti,
| |
| − | .filmski_in_avdiovizualni_projekti .filmski_in_avdiovizualni_projekti {
| |
| − | display:inline-block;
| |
| − | }
| |
| − | | |
| − | .circle.filmski_in_avdiovizualni_projekti,
| |
| − | .kultura-content .filmski_in_avdiovizualni_projekti > span
| |
| − | { background-color: #5F7BAF; }
| |
| − | | |
| − | .circle.interdisciplinarni_projekti,
| |
| − | .kultura-content .interdisciplinarni_projekti > span
| |
| − | { background-color: #E7B859; }
| |
| − | | |
| − | .circle.intermedijske_umetnosti_in_nove_tehnologije,
| |
| − | .kultura-content .intermedijske_umetnosti_in_nove_tehnologije > span
| |
| − | { background-color: #B1BFD8; }
| |
| − | | |
| − | .circle.knjiga_branje_prevajanje,
| |
| − | .kultura-content .knjiga_branje_prevajanje > span
| |
| − | { background-color: #E7805C; }
| |
| − | | |
| − | .circle.kulturna_dediscina,
| |
| − | .kultura-content .kulturna_dediscina > span
| |
| − | { background-color: #69B758; }
| |
| − | | |
| − | .circle.oblikovanje_arhitektura_in_uporabne_umetnosti,
| |
| − | .kultura-content .oblikovanje_arhitektura_in_uporabne_umetnosti > span
| |
| − | { background-color: #E0578D; }
| |
| − | | |
| − | .circle.uprizoritvene_umetnosti,
| |
| − | .kultura-content .uprizoritvene_umetnosti > span
| |
| − | { background-color: #C5D862; }
| |
| − | | |
| − | .circle.vizualne_umetnosti,
| |
| − | .kultura-content .vizualne_umetnosti > span
| |
| − | { background-color: #846FA5; }
| |
| − | | |
| − | .circle.zasebna,
| |
| − | .kultura-content .zasebna > span
| |
| − | { background-color: #D59987; }
| |
| − | | |
| − | .circle.javna,
| |
| − | .kultura-content .javna > span
| |
| − | { background-color: #C57161; }
| |
| − | | |
| − | .circle.vodja,
| |
| − | .kultura-content .vodja > span
| |
| − | { background-color: #E7805C; }
| |
| − | | |
| − | .circle.partner,
| |
| − | .kultura-content .partner > span
| |
| − | { background-color: #E7AE5C; }
| |
| − | | |
| − | .kultura-details {
| |
| − | width: 60%;
| |
| − | float: left;
| |
| − | }
| |
| − | | |
| − | .kultura-details h2 {
| |
| − | margin-top: 0 !important;
| |
| − | font-size:16px !important;
| |
| − | }
| |
| − | | |
| − | .tagline {
| |
| − | color: #76b82a;
| |
| − | font-size: 20px;
| |
| − | line-height: 20px;
| |
| − | margin-bottom: 10px;
| |
| − | }
| |
| − | | |
| − | .kultura-switcher {
| |
| − | padding-bottom: 10px;
| |
| − | }
| |
| − | | |
| − | .kultura-switcher a {
| |
| − | color: black;
| |
| − | border: 1px solid #ccc;
| |
| − | padding: 4px 8px;
| |
| − | }
| |
| − | | |
| − | .kultura-switcher a.active {
| |
| − | background: #ccc;
| |
| − | }
| |
| − | </style>
| |
| − | | |
| − | <script src="http://cdn.rawgit.com/shawnbot/aight/master/aight.min.js"></script>
| |
| − | <!-- <script>aight.browser.ie8 = true;</script> --> | |
| − | <script src="http://d3js.org/d3.v3.min.js"></script> | |
| − | <script src="http://cdn.rawgit.com/shawnbot/aight/v1.2.5/aight.d3.js"></script> | |
| − | | |
| − | <script type="text/javascript">
| |
| − | | |
| − | var data_projects,
| |
| − | data_status;
| |
| − | | |
| − | /* function(d) {
| |
| − | return {
| |
| − | "org_name": d["IME ENOTE / IZVAJALCA PROJEKTA (slovenščina)"],
| |
| − | "org_status": d["STATUS organizacije (javna/zasebna)"],
| |
| − | "project_name": d["IME PROJEKTA"],
| |
| − | "year": d["LETO razpisa (ko se pridobi podpora EU)"],
| |
| − | "f_area": d["Področje projekta (F)"],
| |
| − | "link": d["CULTURE.SI POVEZAVA - ENOTA / IZVAJALEC PROJEKTA"],
| |
| − | "eu_project": d["Ime programa EU"],
| |
| − | "role": d["STATUS organizacije/producenta V PROJEKTU (Vodja / Partner)"]
| |
| − | }
| |
| − | },*/
| |
| − | | |
| − | d3.json('http://www.culture.si/en/Culture.si:EUProjects/JSON?action=raw'+String.fromCharCode(38)+'templates=expand', function(err, rows){
| |
| − | console.log(rows.length,err);
| |
| − | console.log(rows);
| |
| − | data_projects = d3.nest()
| |
| − | .key(function(d) { return d.year; })
| |
| − | .sortKeys(d3.descending)
| |
| − | .entries(rows);
| |
| − | | |
| − | /* remove 2013 data */
| |
| − | data_projects.splice(0,1);
| |
| − | | |
| − | displayProjects();
| |
| − | // displayStatus();
| |
| − | // displayRole();
| |
| − | $('#qspinner').hide();
| |
| − | $('#qcontainer').slideDown();
| |
| − | | |
| − | });
| |
| − | | |
| − | | |
| − | var areas={
| |
| − | 'filmski in avdiovizualni projekti':'film and audiovisual projects',
| |
| − | 'interdisciplinarni projekti':'interdisciplinary projects',
| |
| − | 'knjiga, branje, prevajanje':'books and reading / literary translation',
| |
| − | 'kulturna dediščina':'cultural heritage',
| |
| − | 'uprizoritvene umetnosti':'performing arts (theatre, dance, music)',
| |
| − | 'vizualne umetnosti':'visual arts',
| |
| − | 'intermedijske umetnosti in nove tehnologije':'multimedia and new technologies',
| |
| − | 'oblikovanje, arhitektura in uporabne umetnosti':'architecture, design and applied arts',
| |
| − | };
| |
| − | | |
| − | var openDetail = function(d) {
| |
| − | if(d.link) {
| |
| − | window.location=d.link;
| |
| − | }
| |
| − | }
| |
| − | | |
| − | var showDetails = function(d) {
| |
| − | var html = '<h2><a href="'+d.link+'">'+d.org_name.replace(/_/g,' ')+"</a></h2><ul>"+
| |
| − | "<li><strong>Project:</strong> "+d.project_name+"</li>"+
| |
| − | "<li><strong>Field:</strong> "+areas[d.f_area]+"</li>"+
| |
| − | "<li><strong>EU programme:</strong> "+d.eu_project.replace('Kultura','Culture')+"</li>"+
| |
| − | "</ul>";
| |
| − | $('.kultura-details').html(html);
| |
| − | d3.select('.circle.selected').classed('selected',false);
| |
| − | d3.select(this).classed('selected',true);
| |
| − | }
| |
| − | | |
| − | var setupDisplay = function(cls) {
| |
| − | d3.select('.graph').html('');
| |
| − | $('.graph')[0].className = 'graph '+ cls.join(' ');
| |
| − | $('li.hidden').removeClass('hidden');
| |
| − | | |
| − | d3.selectAll('.kultura-legend')
| |
| − | .style('display', 'none'); | |
| − | | |
| − | d3.selectAll('.kultura-switcher a')
| |
| − | .classed('active', false)
| |
| − | | |
| − | var years = d3.select('.graph')
| |
| − | .selectAll('.kultura-year-row')
| |
| − | .data(data_projects)
| |
| − | .enter()
| |
| − | .append('span')
| |
| − | .attr('class', 'kultura-year-row')
| |
| − | | |
| − | var labels = years.selectAll('.kultura-year-label')
| |
| − | .data(function(d,i){ return [d.key]; })
| |
| − | .enter()
| |
| − | .append('span')
| |
| − | .attr('class', 'kultura-year-label')
| |
| − | .text(function(d) { return d; } )
| |
| − | | |
| − | return years;
| |
| − | }
| |
| − | | |
| − | function displayProjects() {
| |
| − | var years = setupDisplay(['filmski_in_avdiovizualni_projekti','interdisciplinarni_projekti','intermedijske_umetnosti_in_nove_tehnologije','knjiga_branje_prevajanje','kulturna_dediscina','oblikovanje_arhitektura_in_uporabne_umetnosti','uprizoritvene_umetnosti','vizualne_umetnosti']);
| |
| − | | |
| − | d3.select('.kultura-legend.projects')
| |
| − | .style('display', 'block'); | |
| − | d3.select('.kultura-switcher .projekti') | |
| − | .classed('active', true)
| |
| − | | |
| − | var circles = years.selectAll('.circle')
| |
| − | .data(function(d,i){
| |
| − | return d.values.sort(function(a,b){
| |
| − | return a.f_area.localeCompare(b.f_area);
| |
| − | });
| |
| − | })
| |
| − | .enter()
| |
| − | .append('span')
| |
| − | .attr('class', function(d){ return 'circle ' + d.f_area.replace(/ /g, '_').replace(/\,/g,'').replace('šč', 'sc'); })
| |
| − | .on('click', openDetail)
| |
| − | .on('mouseover', showDetails)
| |
| − | | |
| − | | |
| − | return false;
| |
| − | }
| |
| − | | |
| − | function displayStatus() {
| |
| − | var years = setupDisplay(['javna','zasebna']);
| |
| − | | |
| − | d3.select('.kultura-legend.status')
| |
| − | .style('display', 'block')
| |
| − | d3.select('.kultura-switcher .status')
| |
| − | .classed('active', true)
| |
| − | | |
| − | var circles = years.selectAll('.circle')
| |
| − | .data(function(d,i){
| |
| − | return d.values.sort(function(a,b){
| |
| − | return a.org_status.localeCompare(b.org_status);
| |
| − | });
| |
| − | })
| |
| − | .enter()
| |
| − | .append('span')
| |
| − | .attr('class', function(d){ return 'circle ' + d.org_status })
| |
| − | .on('click', openDetail)
| |
| − | .on('mouseover', showDetails)
| |
| − | | |
| − | return false;
| |
| − | }
| |
| − | | |
| − | function displayRole() {
| |
| − | var years = setupDisplay(['vodja','partner']);
| |
| − | | |
| − | d3.select('.kultura-legend.role')
| |
| − | .style('display', 'block')
| |
| − | d3.select('.kultura-switcher .role')
| |
| − | .classed('active', true)
| |
| − |
| |
| − | var circles = years.selectAll('.circle')
| |
| − | .data(function(d,i){
| |
| − | return d.values.sort(function(a,b){
| |
| − | return b.role.localeCompare(a.role);
| |
| − | });
| |
| − | })
| |
| − | .enter()
| |
| − | .append('span')
| |
| − | .attr('class', function(d){
| |
| − | var role = 'partner';
| |
| − | if ( d.role === 'V' ) { role = 'vodja'; }
| |
| − | return 'circle ' + role;
| |
| − | })
| |
| − | .on('click', openDetail)
| |
| − | .on('mouseover', showDetails)
| |
| − | | |
| − | return false;
| |
| − | | |
| − | }
| |
| − | | |
| − | jQuery(document).ready(function($) {
| |
| − | d3.select('.kultura-switcher .projekti')
| |
| − | .on('click', displayProjects)
| |
| − | | |
| − | d3.select('.kultura-switcher a.status')
| |
| − | .on('click', displayStatus)
| |
| − | | |
| − | d3.select('.kultura-switcher a.role')
| |
| − | .on('click', displayRole)
| |
| | | | |
| − | $('.kultura-legend').on('click','li',function(e) {
| |
| − | $('.graph').toggleClass(e.target.className);
| |
| − | $(e.target).toggleClass('hidden');
| |
| − | });
| |
| | | | |
| − | });
| + | <script src="https://d3js.org/d3.v3.min.js"></script> |
| | + | <script> window._eu_projects_language='en'; </script> |
| | + | <script type="text/javascript" src="https://www.culture.si/static/projects/eu_projects.js" defer> |
| | </script> | | </script> |
| | }} | | }} |
