Issue 133: Add lazy loading for images support
Nathan Adams
parent
b8d6c17308
commit
57641e1661
|
|
@ -0,0 +1 @@
|
|||
.idea
|
||||
|
|
@ -32,7 +32,7 @@ Pluf::loadFunction('Pluf_Shortcuts_GetFormForModel');
|
|||
class IDF_Views_Project
|
||||
{
|
||||
/**
|
||||
* Home page of a project.
|
||||
* Logo of a project.
|
||||
*/
|
||||
public $logo_precond = array('IDF_Precondition::baseAccess');
|
||||
public function logo($request, $match)
|
||||
|
|
@ -52,6 +52,25 @@ class IDF_Views_Project
|
|||
$info[0]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Logo of a project.
|
||||
*/
|
||||
public $logo64_precond = array('IDF_Precondition::baseAccess');
|
||||
public function logo64($request, $match)
|
||||
{
|
||||
$prj = $request->project;
|
||||
|
||||
$logo = $prj->getConf()->getVal('logo');
|
||||
if (empty($logo)) {
|
||||
$file = "./media/idf/img/no_logo.png";
|
||||
$info = IDF_FileUtil::getMimeType($file);
|
||||
return new Pluf_HTTP_Response("data:" . $info[0] . ";base64," . base64_encode(file_get_contents($file)), "text/text");
|
||||
}
|
||||
|
||||
$info = IDF_FileUtil::getMimeType($logo);
|
||||
return new Pluf_HTTP_Response("data:" . $info[0] . ";base64," . base64_encode(file_get_contents(Pluf::f('upload_path') . '/' . $prj->shortname . $logo)), "text/text");
|
||||
}
|
||||
|
||||
/**
|
||||
* Home page of a project.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -97,11 +97,18 @@ $ctl[] = array('regex' => '#^/p/([\-\w]+)/$#',
|
|||
'model' => 'IDF_Views_Project',
|
||||
'method' => 'home');
|
||||
|
||||
$ctl[] = array('regex' => '#^/p/([\-\w]+)/logo64/$#',
|
||||
'base' => $base,
|
||||
'model' => 'IDF_Views_Project',
|
||||
'method' => 'logo64');
|
||||
|
||||
$ctl[] = array('regex' => '#^/p/([\-\w]+)/logo/$#',
|
||||
'base' => $base,
|
||||
'model' => 'IDF_Views_Project',
|
||||
'method' => 'logo');
|
||||
|
||||
|
||||
|
||||
$ctl[] = array('regex' => '#^/p/([\-\w]+)/timeline/(\w+)/$#',
|
||||
'base' => $base,
|
||||
'model' => 'IDF_Views_Project',
|
||||
|
|
|
|||
|
|
@ -32,12 +32,14 @@
|
|||
{block extraheader}{/block}
|
||||
<title>{block pagetitle}{$page_title|strip_tags}{/block}{if $project} - {$project.shortdesc}{/if}</title>
|
||||
<script type="text/javascript" src="{media '/idf/js/jquery-1.7.2.min.js'}"></script>
|
||||
<script type="text/javascript" src="{media '/idf/js/logo.cache.js'}"></script>
|
||||
|
||||
{appversion}
|
||||
</head>
|
||||
<body>
|
||||
<div id="{block docid}doc3{/block}">
|
||||
<div id="hd">
|
||||
{if $project}<h1 class="project-title">{$project}<img class="logo" src="{url 'IDF_Views_Project::logo', array($project.shortname)}" alt="{trans 'Project logo'}" />{if $project.private}<img class="lock" src="{media '/idf/img/lock.png'}" alt="{trans 'Private project'}" />{/if}{$p}{assign $url = $project.external_project_url}{if $url != ''}<a href="{$url}" target="_blank" class="external-link" title="{trans 'External link to project'}" /> </a>{/if}</h1>{/if}
|
||||
{if $project}<h1 class="project-title">{$project}<img class="logo" data-logo="{$project.logo}" data-original="{url 'IDF_Views_Project::logo', array($project.shortname)}" alt="{trans 'Project logo'}" />{if $project.private}<img class="lock" src="{media '/idf/img/lock.png'}" alt="{trans 'Private project'}" />{/if}{$p}{assign $url = $project.external_project_url}{if $url != ''}<a href="{$url}" target="_blank" class="external-link" title="{trans 'External link to project'}" /> </a>{/if}</h1>{/if}
|
||||
{include 'idf/main-menu.html'}
|
||||
<div id="header">
|
||||
<div id="main-tabs">
|
||||
|
|
|
|||
|
|
@ -32,6 +32,8 @@
|
|||
{block extraheader}{/block}
|
||||
<title>{block pagetitle}{$page_title|strip_tags}{/block}</title>
|
||||
<script type="text/javascript" src="{media '/idf/js/jquery-1.7.2.min.js'}"></script>
|
||||
<script type="text/javascript" src="{media '/idf/js/logo.cache.js'}"></script>
|
||||
|
||||
{appversion}
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@
|
|||
{block extraheader}{/block}
|
||||
<title>{block pagetitle}{$page_title|strip_tags}{/block}{if $project} - {$project.shortdesc}{/if}</title>
|
||||
<script type="text/javascript" src="{media '/idf/js/jquery-1.7.2.min.js'}"></script>
|
||||
<script type="text/javascript" src="{media '/idf/js/logo.cache.js'}"></script>
|
||||
<script type="text/javascript" src="{media '/idf/js/syntaxhighlight/shCore.js'}"></script>
|
||||
<script type="text/javascript" src="{media '/idf/js/syntaxhighlight/shAutoloader.js'}"></script>
|
||||
|
||||
|
|
@ -52,6 +53,8 @@
|
|||
|
||||
{literal}
|
||||
<script type="text/javascript">
|
||||
|
||||
|
||||
$.event.special.tripleclick = {
|
||||
|
||||
setup: function(data, namespaces) {
|
||||
|
|
@ -99,7 +102,7 @@
|
|||
<div id="{block docid}doc3{/block}" class="{block docclass}yui-t3{/block}">
|
||||
<div id="hd">
|
||||
{if $project}
|
||||
<h1 class="project-title">{$project}<img class="logo" src="{url 'IDF_Views_Project::logo', array($project.shortname)}" alt="{trans 'Project logo'}" />{if $project.private}<img class="lock" src="{media '/idf/img/lock.png'}" alt="{trans 'Private project'}" />{/if}{$p}{assign $url = $project.external_project_url}{if $url != ''}<a href="{$url}" target="_blank" class="external-link" title="{trans 'External link to project'}" /> </a>{/if}</h1>{/if}
|
||||
<h1 class="project-title">{$project}<img data-logo="{$project.logo}" class="logo" src="{url 'IDF_Views_Project::logo', array($project.shortname)}" alt="{trans 'Project logo'}" />{if $project.private}<img class="lock" src="{media '/idf/img/lock.png'}" alt="{trans 'Private project'}" />{/if}{$p}{assign $url = $project.external_project_url}{if $url != ''}<a href="{$url}" target="_blank" class="external-link" title="{trans 'External link to project'}" /> </a>{/if}</h1>{/if}
|
||||
{include 'idf/main-menu.html'}
|
||||
<div id="header">
|
||||
<div id="main-tabs">
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
<ul class="prjlistclass">
|
||||
<li id="searchkeep"><input size="15" type="text" id="prjname" name="prjname" placeholder="Project Name..." /></li>
|
||||
{foreach $allProjects as $p}
|
||||
<li class="projectitem"><a href="{url 'IDF_Views_Project::home', array($p.shortname)}"><img class="logo" src="{url 'IDF_Views_Project::logo', array($p.shortname)}" alt="{trans 'Project logo'}" />{if $p.private}<img class="lock" src="{media '/idf/img/lock.png'}" alt="{trans 'Private project'}" />{/if}{$p}</a></li>
|
||||
<li class="projectitem"><a href="{url 'IDF_Views_Project::home', array($p.shortname)}"><img src="{media '/idf/img/no_logo.png'}" data-logo="{$p.logo}" class="logo" data-src="{url 'IDF_Views_Project::logo64', array($p.shortname)}" alt="{trans 'Project logo'}" />{if $p.private}<img class="lock" src="{media '/idf/img/lock.png'}" alt="{trans 'Private project'}" />{/if}{$p}</a></li>
|
||||
{/foreach}</ul>
|
||||
{/if}</li>{if $isAdmin}<li><a href="{url 'IDF_Views_Admin::forge'}">{trans 'Forge Management'}</a></li>{/if}<li>
|
||||
<a href="{url 'IDF_Views::faq'}" title="{trans 'Help and accessibility features'}">{trans 'Help'}</a></li>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<div class="p-list-prj">
|
||||
<div class="logo">
|
||||
<a href="{url 'IDF_Views_Project::home', array($p.shortname)}">
|
||||
<img src="{url 'IDF_Views_Project::logo', array($p.shortname)}" alt="{trans 'Project logo'}" />
|
||||
<img src="{media '/idf/img/no_logo.png'}" data-logo="{$p.logo}" class="logo" data-src="{url 'IDF_Views_Project::logo', array($p.shortname)}" alt="{trans 'Project logo'}" />
|
||||
</a>
|
||||
{if $p.private}
|
||||
<div class="private">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,46 @@
|
|||
$(function () {
|
||||
var logoCache = {};
|
||||
var waiting = 0;
|
||||
function logoUpdate() {
|
||||
if (waiting == 0) {
|
||||
$(".logo").each(function () {
|
||||
var self = $(this);
|
||||
var logo = $(this).data("logo");
|
||||
if (logo == "") {
|
||||
logo = undefined;
|
||||
}
|
||||
self.attr("src", logoCache[logo]);
|
||||
});
|
||||
} else {
|
||||
waiting -= 1;
|
||||
}
|
||||
}
|
||||
$(".logo").each(function () {
|
||||
var logoSrc = $(this).data("src");
|
||||
var logo = $(this).data("logo");
|
||||
var self = $(this);
|
||||
if (!logoSrc) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (logo == "") {
|
||||
logo = undefined;
|
||||
}
|
||||
|
||||
if (!(logo in logoCache)) {
|
||||
logoCache[logo] = logoSrc;
|
||||
}
|
||||
});
|
||||
|
||||
waiting = Object.keys(logoCache).length - 1;
|
||||
$.each(logoCache, function (index, element) {
|
||||
$.ajax({
|
||||
url: logoCache[index],
|
||||
success: function(data) {
|
||||
logoCache[index] = data;
|
||||
logoUpdate();
|
||||
},
|
||||
async: true
|
||||
});
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue