Updates to QR codes for individual page:

* Now a single include in indidvidual--foaf-person.ftl
  * Added QR icon and moved to tools area under individual image
  * Removed inline styles and refactored markup throughout
This commit is contained in:
cappadona 2011-05-12 20:07:34 +00:00
parent b14311e048
commit 8713552eb5
6 changed files with 164 additions and 154 deletions

View file

@ -0,0 +1,23 @@
/* $This file is distributed under the terms of the license in /doc/license.txt$ */
.qrCode {
float: left;
}
img.qrCode {
margin-bottom: 2em;
}
.vcard {
clear: left;
}
h2 em {
font-style: normal;
font-size: .7em;
}
section h4 {
margin-top: 2em;
padding-bottom: 0;
}
section textarea {
width: 600px;
height: 120px;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 194 B

View file

@ -2,37 +2,31 @@
<#-- Page providing options for disseminating QR codes -->
<#include "individual-qrCodeFoafPerson.ftl">
<#include "individual-qrCodeGenerator.ftl">
<#assign qrCodeWidth = "150">
<h2>Export QR Code</h2>
<div>
<div style="float:left">
<#assign thumbUrl = individual.thumbUrl! "${urls.images}/placeholders/person.thumbnail.jpg" >
<img src="${thumbUrl}" />
</div>
<div style="float:left">
<h3>${individual.nameStatement.value}</h3>
</div>
<div style="clear:both" />
</div>
<h2>Export QR Code <em>(<a href="${individual.qrData.aboutQrCodesUrl}" title="More info on QR codes">What is this?</a>)</em></h2>
<div style="border:1px solid #cccccc">
<h4 style="padding-left:5px">VCard</h4>
<#assign thumbUrl = individual.thumbUrl! "${urls.images}/placeholders/person.thumbnail.jpg" >
<img class="qrCode" src="${thumbUrl}" />
<h3 class="qrCode"><a href="${individual.profileUrl}" title="View this person's profile">${individual.nameStatement.value}</a></h3>
<section class="vcard">
<h4>VCard</h4>
<@qrCodeVCard qrCodeWidth="150" />
<textarea readonly="readonly" style="width:600px;height:120px">
<textarea name="qrCodeVCard" readonly>
&lt;img src="${getQrCodeUrlForVCard(qrCodeWidth)}" /&gt;<#t>
</textarea><#t>
</div>
</section>
<div style="border:1px solid #cccccc">
<h4 style="padding-left:5px">Hyperlink</h4>
<section>
<h4>Hyperlink</h4>
<@qrCodeLink qrCodeWidth="150" />
<textarea readonly="readonly" style="width:600px;height:120px">
<textarea name="qrCodeLink" readonly>
&lt;img src="${getQrCodeUrlForLink(qrCodeWidth)}" /&gt;<#t>
</textarea><#t>
</div>
</section>
${stylesheets.add('<link rel="stylesheet" href="${urls.base}/css/individual/individual-qr.css" />')}

View file

@ -4,8 +4,6 @@
<#include "individual-setup.ftl">
<#include "individual-qrCodeFoafPerson.ftl">
<section id="individual-intro" class="vcard person" role="region">
<section id="share-contact" role="region">
@ -34,6 +32,8 @@
<#if rdfUrl??>
<li role="listitem"><a title="View this individual in RDF format" class="icon-rdf" href="${rdfUrl}">RDF</a></li>
</#if>
<#include "individual-qrCodeFoafPerson.ftl">
</ul>
</nav>
@ -41,16 +41,6 @@
<#-- Links -->
<@p.vitroLinks propertyGroups namespaces editable "individual-urls-people" />
<#-- QR Codes -->
<#if hasValidVCard()>
<div style="border:1px solid #cccccc">
<span style="padding-left:5px">vCard QR <a style="font-size:smaller" href="${individual.qrData.aboutQrCodesUrl}">What is this?</a></span>
<a title="Export QR codes" href="${individual.qrData.exportQrCodeUrl}">
<@qrCodeVCard qrCodeWidth="150" />
</a>
</div>
</#if>
</section>
<section id="individual-info" ${infoClass!} role="region">

View file

@ -1,123 +1,7 @@
<#-- $This file is distributed under the terms of the license in /doc/license.txt$ -->
<#-- QR code -->
<#macro qrCodeVCard qrCodeWidth>
<#local qrCodeUrl = getQrCodeUrlForVCard(qrCodeWidth)>
<#if qrCodeUrl != "">
<img src="${qrCodeUrl}" />
</#if>
</#macro>
<#macro qrCodeLink qrCodeWidth>
<#local qrCodeUrl = getQrCodeUrlForLink(qrCodeWidth)>
<#if qrCodeUrl != "">
<img src="${qrCodeUrl}" />
</#if>
</#macro>
<#function getQrCodeUrlForVCard qrCodeWidth>
<#local qrData = individual.qrData >
<#local core = "http://vivoweb.org/ontology/core#">
<#local foaf = "http://xmlns.com/foaf/0.1/">
<#local rdfs = "http://www.w3.org/2000/01/rdf-schema#">
<#local firstName = qrData.firstName! >
<#local lastName = qrData.lastName! >
<#local org = "" >
<#local title = qrData.preferredTitle! >
<#local phoneNumber = qrData.phoneNumber! >
<#local email = qrData.email! >
<#local url = qrData.externalUrl! >
<#local photo = individual.thumbUrl! >
<#local rev = "" >
<#local qrCodeUrl = "">
<#if firstName != "" && lastName != "">
<#local vCard><#t>
BEGIN:VCARD<#lt>
VERSION:3.0<#lt>
N:${lastName};${firstName}<#lt>
FN:${firstName} ${lastName}<#lt>
<#if org != ""> ORG:${org}</#if><#lt>
<#if title != "">TITLE:${title}</#if><#lt>
<#if phoneNumber != "">TEL;TYPE=WORK,VOICE:${phoneNumber}</#if><#lt>
<#if email != "">EMAIL;TYPE=PREF,INTERNET:${email}</#if><#lt>
<#if url != "">URL:${url}</#if><#lt>
<#if photo != "">PHOTO;VALUE=URL;TYPE=JPG:${photo}</#if><#lt>
<#if rev != "">REV:${rev}</#if><#lt>
END:VCARD<#t>
</#local><#t>
<#local vCard = (removeBlankLines(vCard))?url>
<#local qrCodeUrl = "https://chart.googleapis.com/chart?cht=qr&amp;chs=${qrCodeWidth}x${qrCodeWidth}&amp;chl=${vCard}&amp;choe=UTF-8" >
</#if>
<#return qrCodeUrl>
</#function>
<#function getQrCodeUrlForLink qrCodeWidth>
<#local qrData = individual.qrData >
<#local url = qrData.externalUrl! >
<#local qrCodeUrl = "">
<#if url != "">
<#local qrCodeContent = url?url>
<#local qrCodeUrl = "https://chart.googleapis.com/chart?cht=qr&amp;chs=${qrCodeWidth}x${qrCodeWidth}&amp;chl=${qrCodeContent}&amp;choe=UTF-8" >
</#if>
<#return qrCodeUrl>
</#function>
<#function removeBlankLines input>
<#local test = "\n\n">
<#local replacement = "\n">
<#local output = input>
<#local maxLoop = 50>
<#list 1..maxLoop as i>
<#if output?contains(test)>
<#local output = output?replace(test, replacement)>
<#else>
<#break>
</#if>
</#list>
<#return output>
</#function>
<#function hasValidVCard>
<#local qrData = individual.qrData >
<#local firstName = qrData.firstName! >
<#local lastName = qrData.lastName! >
<#local validVCard = false>
<#if firstName != "" && lastName != "">
<#local validVCard = true>
</#if>
<#return validVCard>
</#function>
<#include "individual-qrCodeGenerator.ftl">
<#if hasValidVCard()>
<li role="listitem"><a title="Export QR codes" href="${individual.qrData.exportQrCodeUrl}"><img class="middle" src="${urls.images}/individual/qr_icon.png" alt="qr icon" /></a></li>
</#if>

View file

@ -0,0 +1,119 @@
<#-- $This file is distributed under the terms of the license in /doc/license.txt$ -->
<#-- QR code -->
<#macro qrCodeVCard qrCodeWidth>
<#local qrCodeUrl = getQrCodeUrlForVCard(qrCodeWidth)>
<#if qrCodeUrl != "">
<img src="${qrCodeUrl}" />
</#if>
</#macro>
<#macro qrCodeLink qrCodeWidth>
<#local qrCodeUrl = getQrCodeUrlForLink(qrCodeWidth)>
<#if qrCodeUrl != "">
<img src="${qrCodeUrl}" />
</#if>
</#macro>
<#function getQrCodeUrlForVCard qrCodeWidth>
<#local qrData = individual.qrData >
<#local core = "http://vivoweb.org/ontology/core#">
<#local foaf = "http://xmlns.com/foaf/0.1/">
<#local rdfs = "http://www.w3.org/2000/01/rdf-schema#">
<#local firstName = qrData.firstName! >
<#local lastName = qrData.lastName! >
<#local org = "" >
<#local title = qrData.preferredTitle! >
<#local phoneNumber = qrData.phoneNumber! >
<#local email = qrData.email! >
<#local url = qrData.externalUrl! >
<#local photo = individual.thumbUrl! >
<#local rev = "" >
<#local qrCodeUrl = "">
<#if firstName != "" && lastName != "">
<#local vCard><#t>
BEGIN:VCARD<#lt>
VERSION:3.0<#lt>
N:${lastName};${firstName}<#lt>
FN:${firstName} ${lastName}<#lt>
<#if org != ""> ORG:${org}</#if><#lt>
<#if title != "">TITLE:${title}</#if><#lt>
<#if phoneNumber != "">TEL;TYPE=WORK,VOICE:${phoneNumber}</#if><#lt>
<#if email != "">EMAIL;TYPE=PREF,INTERNET:${email}</#if><#lt>
<#if url != "">URL:${url}</#if><#lt>
<#if photo != "">PHOTO;VALUE=URL;TYPE=JPG:${photo}</#if><#lt>
<#if rev != "">REV:${rev}</#if><#lt>
END:VCARD<#t>
</#local><#t>
<#local vCard = (removeBlankLines(vCard))?url>
<#local qrCodeUrl = "https://chart.googleapis.com/chart?cht=qr&amp;chs=${qrCodeWidth}x${qrCodeWidth}&amp;chl=${vCard}&amp;choe=UTF-8" >
</#if>
<#return qrCodeUrl>
</#function>
<#function getQrCodeUrlForLink qrCodeWidth>
<#local qrData = individual.qrData >
<#local url = qrData.externalUrl! >
<#local qrCodeUrl = "">
<#if url != "">
<#local qrCodeContent = url?url>
<#local qrCodeUrl = "https://chart.googleapis.com/chart?cht=qr&amp;chs=${qrCodeWidth}x${qrCodeWidth}&amp;chl=${qrCodeContent}&amp;choe=UTF-8" >
</#if>
<#return qrCodeUrl>
</#function>
<#function removeBlankLines input>
<#local test = "\n\n">
<#local replacement = "\n">
<#local output = input>
<#local maxLoop = 50>
<#list 1..maxLoop as i>
<#if output?contains(test)>
<#local output = output?replace(test, replacement)>
<#else>
<#break>
</#if>
</#list>
<#return output>
</#function>
<#function hasValidVCard>
<#local qrData = individual.qrData >
<#local firstName = qrData.firstName! >
<#local lastName = qrData.lastName! >
<#local validVCard = false>
<#if firstName != "" && lastName != "">
<#local validVCard = true>
</#if>
<#return validVCard>
</#function>