Page MenuHomec4science
Files F110613772

webaccount_index.html
No OneTemporary
Actions

File Metadata

Created
Sun, Apr 27, 04:03

webaccount_index.html
View Options

{#
## This file is part of Invenio.
## Copyright (C) 2012 CERN.
##
## Invenio is free software; you can redistribute it and/or
## modify it under the terms of the GNU General Public License as
## published by the Free Software Foundation; either version 2 of the
## License, or (at your option) any later version.
##
## Invenio is distributed in the hope that it will be useful, but
## WITHOUT ANY WARRANTY; without even the implied warranty of
## MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
## General Public License for more details.
##
## You should have received a copy of the GNU General Public License
## along with Invenio; if not, write to the Free Software Foundation, Inc.,
## 59 Temple Place, Suite 330, Boston, MA 02111-1307, USA.
#}
{% from "_formhelpers.html" import render_field with context %}
{% from "webaccount_widget.html" import display_widget %}
{% extends "page.html" %}
{% set title = _('Your Account') %}
{% block title %}
<div class="page-header">
<h1>{{ title }}
<small class="clearfix pull-right">
<input placeholder="{{ _('Filter widgets') }}"
type="text"
name="widget"
autofocus />
</small>
</h1>
</div>
{% endblock %}
{% block body %}
{% css "img/jquery-ui/themes/redmond/jquery-ui.css" %}
{% js "js/jquery-ui.min.js" %}
<div class="container">
<div class="row">
<div class="span12">
<ul id="widgets" class="thumbnails">
<li id="leftColumn" class="widgetColumn">
<ul id="widgetsLeft" class="connectedWidgets">
{%- for p in plugins[0] -%}
{{display_widget(p)}}
{%- endfor -%}
</ul>
</li>
<li id="middleColumn" class="widgetColumn">
<ul id="widgetsMiddle" class="connectedWidgets">
{%- for p in plugins[1] -%}
{{display_widget(p)}}
{%- endfor -%}
</ul>
</li>
<li id="rightColumn" class="widgetColumn">
<ul id="widgetsRight" class="connectedWidgets">
{%- for p in plugins[2] -%}
{{display_widget(p)}}
{%- endfor -%}
</ul>
</li>
</ul>
</div>
</div>
<hr/>
<div class="row">
<div class="span12" id="closed-list-bar">
<h5>{{ _('Closed Widgets') }} <small>{{ _('can be re-opened by clicking on folloing button(s)') }}</small></h5>
<ul id="closed-list">
{%- for p in closed_plugins -%}
<li id="{{ p.name}}" class="btn display-widget">{{p.title}} <i class="icon-plus"></i></li>
{%- endfor -%}
</ul>
</div>
</div>
</div>
<style>
#widgets li .thumbnail {
background: white;
}
.widget {
margin-bottom: 10px;
margin-left: -20px;
}
.thumbnail {
cursor: move;
}
.thumbnails > li {
float: left;
width: 30%;
}
.thumbnails li {
list-style-type: none;
}
.connectedWidgets {
min-height: 100px;
}
.placeholder {
border: 2px dashed #999;
margin-left: -20px;
margin-bottom: 10px;
border-radius: 5px;
display: block;
visibility: visible!important;
float: left;
}
.widgetColumn {
visibility: visible!important;
display: block!important;
}
#closed-list {
margin: 0px;
}
#closed-list li {
margin-right: 10px;
}
</style>
{% endblock %}
{% block javascript %}
<script>
function saveWidgets() {
var newOrderLeft = $("#widgetsLeft").sortable('toArray');
var newOrderMiddle = $("#widgetsMiddle").sortable('toArray');
var newOrderRight= $("#widgetsRight").sortable('toArray');
$.ajax({
url: '{{ url_for('webaccount.edit', name='DashboardSettings') }}'
, type: 'POST'
, data: $.param({
orderLeft: newOrderLeft,
orderMiddle: newOrderMiddle,
orderRight: newOrderRight
}, true)
});
}
function addToClosedList(title, id) {
$("#closed-list").append("<li id='" + id +
"' class='btn display-widget'>" +
title + "<i class='icon-plus'></i></li>");
bindDisplayWidgetEvents();
}
function displayWidget(widgetName) {
$.ajax({
url: '{{ url_for('webaccount.view') }}',
type: 'GET',
data: $.param({
name: widgetName
}, true),
dataType: "html",
success: function(r) {
$("#" + widgetName).remove();
// Find widgetColumn with least children
var $lists = $('.widgetColumn > ul').toArray()
, elem = $lists[
$lists.map(function(item, idx) {
return [$(item).children().length, idx]
}).reduce(function(pv, cv) {
return cv[0] < pv[0] ? cv : pv;
})[1]];
$(elem).append(r);
saveWidgets();
bindWidgetEvents();
}
});
}
function bindDisplayWidgetEvents() {
$(".display-widget").die();
$(".display-widget").live("click", function() {
displayWidget(this.id);
});
}
function bindWidgetEvents() {
$(".widget").die();
$(".widget").live('mouseenter', function() {
$(this).find(".close.hide").removeClass("hide");
});
$(".widget").live('mouseleave', function() {
$(this).find(".close").addClass("hide");
});
$(".close").die();
$(".close").live('click', function() {
var title = $(this).closest("h4").text().replace("×", " ").trim();
var id = $(this).closest(".widget").attr("id");
addToClosedList(title, id);
$(this).closest("li").remove();
saveWidgets();
});
}
$(function() {
$('input[name=widget]').keyup(function(e) {
var filter = $(this).val()
if (filter.length > 0 && e.keyCode === 13) {
var l = $('#widgets li:visible').find('a.edit').first().attr('href')
if (l.length > 0) {
window.location.href = l
}
return false
}
$('#widgets li').each(function(i, li) {
if ($(li).find('.caption').text().indexOf(filter) > -1 || filter == '') {
$(this).show()
} else {
$(this).hide()
}
})
})
$("#widgets li").each(function() {
var $e = $(this)
$e.find('.close').on('click', function() {
$e.hide()
})
})
$( "#widgetsLeft, #widgetsMiddle, #widgetsRight" ).sortable({
connectWith: ".connectedWidgets",
cursor: "move",
placeholder: "placeholder",
forcePlaceholderSize: true,
forceHelperSize : true,
stop: function(event, ui) {
saveWidgets();
}
}).disableSelection();
bindDisplayWidgetEvents();
bindWidgetEvents();
});
</script>
{% endblock %}

Event Timeline

c4science · Help