natalie/srchub
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Issue 133: Add lazy loading for images support

Browse Source
This commit is contained in:
Nathan Adams 2016-03-05 21:32:34 -06:00
parent b8d6c17308
commit 57641e1661
9 changed files with 85 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
.idea

21
indefero/src/IDF/Views/Project.php
View File

@ -32,7 +32,7 @@ Pluf::loadFunction('Pluf_Shortcuts_GetFormForModel');
class IDF_Views_Project class IDF_Views_Project
{ {
/** /**
* Home page of a project. * Logo of a project.
*/ */
public $logo_precond = array('IDF_Precondition::baseAccess'); public $logo_precond = array('IDF_Precondition::baseAccess');
public function logo($request, $match) public function logo($request, $match)
@ -52,6 +52,25 @@ class IDF_Views_Project
$info[0]); $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. * Home page of a project.
*/ */

7
indefero/src/IDF/conf/urls.php
View File

@ -97,11 +97,18 @@ $ctl[] = array('regex' => '#^/p/([\-\w]+)/$#',
'model' => 'IDF_Views_Project', 'model' => 'IDF_Views_Project',
'method' => 'home'); 'method' => 'home');
$ctl[] = array('regex' => '#^/p/([\-\w]+)/logo64/$#',
'base' => $base,
'model' => 'IDF_Views_Project',
'method' => 'logo64');
$ctl[] = array('regex' => '#^/p/([\-\w]+)/logo/$#', $ctl[] = array('regex' => '#^/p/([\-\w]+)/logo/$#',
'base' => $base, 'base' => $base,
'model' => 'IDF_Views_Project', 'model' => 'IDF_Views_Project',
'method' => 'logo'); 'method' => 'logo');
$ctl[] = array('regex' => '#^/p/([\-\w]+)/timeline/(\w+)/$#', $ctl[] = array('regex' => '#^/p/([\-\w]+)/timeline/(\w+)/$#',
'base' => $base, 'base' => $base,
'model' => 'IDF_Views_Project', 'model' => 'IDF_Views_Project',

4
indefero/src/IDF/templates/idf/base-full.html
View File

@ -32,12 +32,14 @@
{block extraheader}{/block} {block extraheader}{/block}
<title>{block pagetitle}{$page_title|strip_tags}{/block}{if $project} - {$project.shortdesc}{/if}</title> <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/jquery-1.7.2.min.js'}"></script>
<script type="text/javascript" src="{media '/idf/js/logo.cache.js'}"></script>
{appversion} {appversion}
</head> </head>
<body> <body>
<div id="{block docid}doc3{/block}"> <div id="{block docid}doc3{/block}">
<div id="hd"> <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'}" />&nbsp;</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'}" />&nbsp;</a>{/if}</h1>{/if}
{include 'idf/main-menu.html'} {include 'idf/main-menu.html'}
<div id="header"> <div id="header">
<div id="main-tabs"> <div id="main-tabs">

2
indefero/src/IDF/templates/idf/base-simple.html
View File

@ -32,6 +32,8 @@
{block extraheader}{/block} {block extraheader}{/block}
<title>{block pagetitle}{$page_title|strip_tags}{/block}</title> <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/jquery-1.7.2.min.js'}"></script>
<script type="text/javascript" src="{media '/idf/js/logo.cache.js'}"></script>
{appversion} {appversion}
</head> </head>
<body> <body>

5
indefero/src/IDF/templates/idf/base.html
View File

@ -36,6 +36,7 @@
{block extraheader}{/block} {block extraheader}{/block}
<title>{block pagetitle}{$page_title|strip_tags}{/block}{if $project} - {$project.shortdesc}{/if}</title> <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/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/shCore.js'}"></script>
<script type="text/javascript" src="{media '/idf/js/syntaxhighlight/shAutoloader.js'}"></script> <script type="text/javascript" src="{media '/idf/js/syntaxhighlight/shAutoloader.js'}"></script>
@ -52,6 +53,8 @@
{literal} {literal}
<script type="text/javascript"> <script type="text/javascript">
$.event.special.tripleclick = { $.event.special.tripleclick = {
setup: function(data, namespaces) { setup: function(data, namespaces) {
@ -99,7 +102,7 @@
<div id="{block docid}doc3{/block}" class="{block docclass}yui-t3{/block}"> <div id="{block docid}doc3{/block}" class="{block docclass}yui-t3{/block}">
<div id="hd"> <div id="hd">
{if $project} {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'}" />&nbsp;</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'}" />&nbsp;</a>{/if}</h1>{/if}
{include 'idf/main-menu.html'} {include 'idf/main-menu.html'}
<div id="header"> <div id="header">
<div id="main-tabs"> <div id="main-tabs">

2
indefero/src/IDF/templates/idf/main-menu.html
View File

@ -15,7 +15,7 @@
<ul class="prjlistclass"> <ul class="prjlistclass">
<li id="searchkeep"><input size="15" type="text" id="prjname" name="prjname" placeholder="Project Name..." /></li> <li id="searchkeep"><input size="15" type="text" id="prjname" name="prjname" placeholder="Project Name..." /></li>
{foreach $allProjects as $p} {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> {/foreach}</ul>
{/if}</li>{if $isAdmin}<li><a href="{url 'IDF_Views_Admin::forge'}">{trans 'Forge Management'}</a></li>{/if}<li> {/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> <a href="{url 'IDF_Views::faq'}" title="{trans 'Help and accessibility features'}">{trans 'Help'}</a></li>

2
indefero/src/IDF/templates/idf/project-list.html
View File

@ -3,7 +3,7 @@
<div class="p-list-prj"> <div class="p-list-prj">
<div class="logo"> <div class="logo">
<a href="{url 'IDF_Views_Project::home', array($p.shortname)}"> <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> </a>
{if $p.private} {if $p.private}
<div class="private"> <div class="private">

46
indefero/www/media/idf/js/logo.cache.js Normal file
View File

@ -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
});
});
});