111 lines
2.9 KiB
HTML
111 lines
2.9 KiB
HTML
{% extends "univcloud/base.html" %}
|
||
{% load i18n %}
|
||
{% load url from future %}
|
||
|
||
{% block extrascripts %}
|
||
<script src="{{ STATIC_URL }}js/jquery.gridster.min.js"></script>
|
||
<script src="{{ STATIC_URL }}js/jquery.simpleWeather.js"></script>
|
||
<script src="{{ STATIC_URL }}js/jquery.zrssfeed.js"></script>
|
||
<script src="{{ STATIC_URL }}js/jquery.clock.js"></script>
|
||
<script src="{{ STATIC_URL }}js/jquery.simple-color.js"></script>
|
||
<script src="{{ STATIC_URL }}js/jquery-ui.js"></script>
|
||
<link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/jquery.gridster.css">
|
||
<link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/analog.css">
|
||
{% endblock %}
|
||
|
||
{% block page-title %}
|
||
Univcloud
|
||
{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="gridster">
|
||
<ul>
|
||
{% for app in apps %}
|
||
<li data-row="{{ app.row }}" data-col="{{ app.col }}"
|
||
data-sizex="{{ app.sizex }}" data-sizey="{{ app.sizey }}"
|
||
class="{% if app.scroll %}scroll {% endif %}"
|
||
{% if app.background_color %}style="background-color: {{app.background_color}}; border-color: {{app.background_color}};"{% endif %}>
|
||
<span class="color">o</span>
|
||
<span class="close">×</span>
|
||
{{ app.content }}
|
||
</li>
|
||
{% endfor %}
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
<div id="iframes">
|
||
</div>
|
||
|
||
<div id="dialog-color" title="Couleur" style="display: none">
|
||
<p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
|
||
<input class='simple_color' value='#cc3333'/>
|
||
</div>
|
||
|
||
|
||
|
||
<script>
|
||
$(function(){ //DOM Ready
|
||
var gridster = $(".gridster ul").gridster({
|
||
widget_margins: [10, 10],
|
||
widget_base_dimensions: [140, 140],
|
||
min_cols: 5,
|
||
serialize_params: function($w, wgd) {
|
||
return {
|
||
x: wgd.col,
|
||
y: wgd.row,
|
||
id: $($w).find('div').attr('id'),
|
||
};
|
||
},
|
||
draggable: {
|
||
stop: function(event, ui) {
|
||
oWidgets = this.serialize_changed();
|
||
$.ajax('dragstop', {
|
||
data: {'T': JSON.stringify(oWidgets)},
|
||
});
|
||
}
|
||
}
|
||
}).data('gridster');
|
||
|
||
$('#portal').click(function() {
|
||
$('div.gridster').show('blind', {duration: 800});
|
||
$('.iframe').hide();
|
||
$('#portal').hide('fade');
|
||
return false;
|
||
});
|
||
|
||
$('.close').click(function() {
|
||
window.location = window.location + 'remove/' + $(this).next().attr('id');
|
||
});
|
||
|
||
$('.simple_color').simpleColor();
|
||
|
||
$('.color').click(function() {
|
||
console.log('parent:', $(this).parent());
|
||
var app_id = $(this).next().next().attr('id');
|
||
var li = $(this).parent();
|
||
|
||
$('#dialog-color').dialog({
|
||
resizable: false,
|
||
height: 300,
|
||
width: 370,
|
||
modal: true,
|
||
buttons: {
|
||
"Sélectionner": function() {
|
||
$(li).css('background-color', $('.simple_color').val()).css('border-color', $('.simple_color').val());
|
||
$.ajax('color/' + app_id, {data: {'bg': $('.simple_color').val()}});
|
||
$( this ).dialog( "close" );
|
||
},
|
||
"Annuler": function() {
|
||
$( this ).dialog( "close" );
|
||
}
|
||
}
|
||
});
|
||
|
||
});
|
||
|
||
});
|
||
</script>
|
||
|
||
{% endblock %}
|