mirror of
https://github.com/alchemy-fr/Phraseanet.git
synced 2025-10-09 19:13:26 +00:00
Refactor admin javascript to backbone application
This commit is contained in:
Nicolas Le Goff
@@ -8,7 +8,7 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block stylesheet %}
|
||||
<link type="text/css" rel="stylesheet" href="{{ path('minifier', { 'f' : 'include/jslibs/jquery-treeview/jquery.treeview.css,include/jslibs/jquery.contextmenu.css,skins/common/main.css,skins/admin/css/Main.css,skins/admin/css/Bases.css,skins/admin/css/Tables.css,skins/admin/css/fields.css,skins/geonames/geonames.css,assets/jquery-file-upload/jquery.fileupload-ui.css' }) }}" />
|
||||
<link type="text/css" rel="stylesheet" href="{{ path('minifier', { 'f' : 'assets/jquery.treeview/jquery.treeview.css,include/jslibs/jquery.contextmenu.css,skins/common/main.css,skins/admin/css/Main.css,skins/admin/css/Bases.css,skins/admin/css/Tables.css,skins/admin/css/fields.css,skins/geonames/geonames.css,assets/jquery-file-upload/jquery.fileupload-ui.css' }) }}" />
|
||||
{% endblock %}
|
||||
|
||||
|
||||
@@ -20,8 +20,14 @@
|
||||
<script type="text/javascript">
|
||||
var p4 = p4 || {};
|
||||
p4.users = {sel:[]};
|
||||
|
||||
var bodySize = {x:0,y:0};
|
||||
|
||||
var resize = function() {
|
||||
bodySize.y = $(window).height() - $('#mainMenu').outerHeight();
|
||||
bodySize.x = $(window).width();
|
||||
}
|
||||
|
||||
var language = {
|
||||
serverName: '{{ app['conf'].get('servername') | e('js') }}',
|
||||
serverError: '{{ 'phraseanet::erreur: Une erreur est survenue, si ce probleme persiste, contactez le support technique' | trans | e('js') }}',
|
||||
@@ -45,162 +51,18 @@
|
||||
reset_template_ask_choice: '{{ 'Would you like to reset rights before applying the template?' | trans | e('js') }}'
|
||||
};
|
||||
|
||||
function sessionactive(){
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "/session/update/",
|
||||
dataType: 'json',
|
||||
data: {
|
||||
module : 3,
|
||||
usr : {{ app['authentication'].getUser().getId() }}
|
||||
},
|
||||
error: function(){
|
||||
window.setTimeout("sessionactive();", 10000);
|
||||
},
|
||||
timeout: function(){
|
||||
window.setTimeout("sessionactive();", 10000);
|
||||
},
|
||||
success: function(data){
|
||||
if(data)
|
||||
manageSession(data);
|
||||
var t = 120000;
|
||||
if(data.apps && parseInt(data.apps)>1)
|
||||
t = Math.round((Math.sqrt(parseInt(data.apps)-1) * 1.3 * 120000));
|
||||
window.setTimeout("sessionactive();", t);
|
||||
|
||||
return;
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
function enableForms(forms) {
|
||||
forms.bind('submit', function(event){
|
||||
var method = $(this).attr('method');
|
||||
var url = $(this).attr('action');
|
||||
var datas = $(this).serializeArray();
|
||||
|
||||
if(!method) {
|
||||
method = 'GET';
|
||||
}
|
||||
$('#right-ajax').empty().addClass('loading');
|
||||
if(url) {
|
||||
$.ajax({
|
||||
type: method,
|
||||
url: url,
|
||||
data: datas,
|
||||
success: enableFormsCallback
|
||||
});
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function enableFormsCallback(datas)
|
||||
{
|
||||
$('#right-ajax').removeClass('loading').html(datas);
|
||||
enableForms($('#right-ajax form:not(.no-ajax)'));
|
||||
|
||||
$.each($('#right-ajax a:not(.no-ajax)'),function(i, el){
|
||||
enableLink($(el));
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
function enableLink(link) {
|
||||
$(link).bind('click',function(event){
|
||||
var dest = link.attr('href');
|
||||
var method = link.attr("method");
|
||||
|
||||
if(dest && dest.indexOf('#') !== 0) {
|
||||
loadRightAjax(dest, method || "GET");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function loadRightAjax(url, method)
|
||||
{
|
||||
$('#right-ajax').empty().addClass('loading').parent().show();
|
||||
|
||||
$.ajax({
|
||||
type: method,
|
||||
url: url,
|
||||
success: function(data) {
|
||||
enableFormsCallback(data);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function activeTree(click)
|
||||
{
|
||||
$('#FNDR').treeview({
|
||||
collapsed: true,
|
||||
animated: "medium"
|
||||
});
|
||||
|
||||
$.each($('#tree a[target=right]'),function(){
|
||||
var dest = $(this).attr('href');
|
||||
|
||||
$(this).bind('click',function(){
|
||||
|
||||
loadRightAjax(dest);
|
||||
$('#tree .selected').removeClass('selected');
|
||||
$(this).parent().addClass('selected');
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
$(this).removeAttr('target');
|
||||
});
|
||||
if(click === true)
|
||||
{
|
||||
if($('#tree .selected').length > 0)
|
||||
$('#tree .selected a').trigger('click');
|
||||
else
|
||||
$('.zone_online_users').trigger('click');
|
||||
}
|
||||
}
|
||||
|
||||
$(document).ready(
|
||||
function(){
|
||||
resize();
|
||||
setTimeout('sessionactive();',15000);
|
||||
activeTree(true);
|
||||
}
|
||||
);
|
||||
|
||||
function resize()
|
||||
{
|
||||
bodySize.y = $(window).height() - $('#mainMenu').outerHeight();
|
||||
bodySize.x = $(window).width();
|
||||
}
|
||||
|
||||
$(document).ready(function(){
|
||||
$(window).bind('resize',function(){resize();});
|
||||
|
||||
function reloadTree(position, click){
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: "/admin/tree/",
|
||||
data: {
|
||||
position : position
|
||||
},
|
||||
success: function(datas){
|
||||
$('#FNDR').empty().append(datas);
|
||||
activeTree(click);
|
||||
|
||||
return;
|
||||
}
|
||||
resize();
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
<script type="text/javascript" src="{{ path('minifier', { 'f' : '/assets/requirejs/require.js' }) }}"></script>
|
||||
<script type="text/javascript" src="{{ path('minifier', { 'f' : '/scripts/apps/admin/main/main.js' }) }}"></script>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
{% block content %}
|
||||
<div id="left" class="PNB" style="width:250px;right:auto;" data-websocket="{{ "ws://" ~ app["conf"].get(["main" ,"websocket-server", "host"]) ~ "/" ~ app["conf"].get(["main" ,"websocket-server", "port"]) }}">
|
||||
<div id="admin-app" data-usr="{{ app['authentication'].getUser().getId() }}">
|
||||
<div id="left" class="PNB left-view" style="width:250px;right:auto;" data-websocket="{{ "ws://" ~ app["conf"].get(["main" ,"websocket-server", "host"]) ~ ":" ~ app["conf"].get(["main" ,"websocket-server", "port"]) ~ "/websockets" }}">
|
||||
<div class="PNB10" style="right:0">
|
||||
<div id="FNDR">
|
||||
{% include 'admin/tree.html.twig' %}
|
||||
@@ -217,7 +79,7 @@
|
||||
{% endif %}
|
||||
|
||||
<div class="right PNB" style="left:250px;overflow:auto;">
|
||||
<div id="right-ajax" class="PNB10"></div>
|
||||
<div id="right-ajax" class="PNB10 right-view"></div>
|
||||
</div>
|
||||
<div id="quotas_dialog"></div>
|
||||
<div id="masks_dialog"></div>
|
||||
@@ -245,4 +107,5 @@
|
||||
</form>
|
||||
</div>
|
||||
<div id="DIALOG" style="color:white;"></div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
81
www/scripts/apps/admin/main/app.js
Normal file
81
www/scripts/apps/admin/main/app.js
Normal file
@@ -0,0 +1,81 @@
|
||||
/*
|
||||
* This file is part of Phraseanet
|
||||
*
|
||||
* (c) 2005-2014 Alchemy
|
||||
*
|
||||
* For the full copyright and license information, please view the LICENSE
|
||||
* file that was distributed with this source code.
|
||||
*/
|
||||
|
||||
define([
|
||||
"jquery",
|
||||
"underscore",
|
||||
"backbone",
|
||||
"common/websockets/connection",
|
||||
"apps/admin/main/views/leftPanel",
|
||||
"apps/admin/main/views/rightPanel"
|
||||
], function ($, _, Backbone, WSConnection, LeftPanel, RightPanel) {
|
||||
window.AdminApp = {
|
||||
$scope: $("#admin-app"),
|
||||
$leftView : $(".left-view", this.$scope),
|
||||
$rightView : $(".right-view", this.$scope),
|
||||
eventManager: _.extend({}, Backbone.Events)
|
||||
};
|
||||
|
||||
var sessionActive = function() {
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "/session/update/",
|
||||
dataType: 'json',
|
||||
data: {
|
||||
module : 3,
|
||||
usr : AdminApp.$scope.data("usr")
|
||||
},
|
||||
error: function(){
|
||||
window.setTimeout(function() {sessionActive();}, 10000);
|
||||
},
|
||||
timeout: function(){
|
||||
window.setTimeout(function() {sessionActive();}, 10000);
|
||||
},
|
||||
success: function(data){
|
||||
if(data) {
|
||||
manageSession(data);
|
||||
var t = 120000;
|
||||
if(data.apps && parseInt(data.apps)>1) {
|
||||
t = Math.round((Math.sqrt(parseInt(data.apps)-1) * 1.3 * 120000));
|
||||
}
|
||||
window.setTimeout(function() {sessionActive();}, t);
|
||||
}
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
var initialize = function (options) {
|
||||
if (false === "wsurl" in options) {
|
||||
throw "You must define a websocket url";
|
||||
}
|
||||
|
||||
if (false === WSConnection.hasSession()) {
|
||||
WSConnection.connect(options.wsurl);
|
||||
}
|
||||
|
||||
AdminApp.LeftView = new LeftPanel({
|
||||
el: AdminApp.$leftView,
|
||||
eventManager: AdminApp.eventManager
|
||||
});
|
||||
|
||||
AdminApp.RightView = new RightPanel({
|
||||
el: AdminApp.$rightView,
|
||||
eventManager: AdminApp.eventManager
|
||||
});
|
||||
|
||||
AdminApp.LeftView.activeTree();
|
||||
AdminApp.LeftView.clickSelected();
|
||||
|
||||
window.setTimeout(function() {sessionActive();}, 15000);
|
||||
};
|
||||
|
||||
return {
|
||||
initialize: initialize
|
||||
};
|
||||
});
|
||||
56
www/scripts/apps/admin/main/main.js
Normal file
56
www/scripts/apps/admin/main/main.js
Normal file
@@ -0,0 +1,56 @@
|
||||
/*
|
||||
* This file is part of Phraseanet
|
||||
*
|
||||
* (c) 2005-2014 Alchemy
|
||||
*
|
||||
* For the full copyright and license information, please view the LICENSE
|
||||
* file that was distributed with this source code.
|
||||
*/
|
||||
|
||||
// configure AMD loading
|
||||
require.config({
|
||||
baseUrl: "/scripts",
|
||||
paths: {
|
||||
jquery: "../assets/jquery/jquery",
|
||||
"jquery.ui": "../assets/jquery.ui/jquery-ui",
|
||||
underscore: "../assets/underscore-amd/underscore",
|
||||
backbone: "../assets/backbone-amd/backbone",
|
||||
"jquery.ui.widget": "../assets/jquery-file-upload/jquery.ui.widget",
|
||||
"jquery.cookie": "../assets/jquery.cookie/jquery.cookie",
|
||||
"jquery.treeview": "../assets/jquery.treeview/jquery.treeview",
|
||||
"jquery.tooltip": "../assets/jquery.tooltip/jquery.tooltip",
|
||||
"blueimp.loadimage" : "../assets/blueimp-load-image/load-image",
|
||||
"jfu.iframe-transport": "../assets/jquery-file-upload/jquery.iframe-transport",
|
||||
"jfu.fileupload": "../assets/jquery-file-upload/jquery.fileupload"
|
||||
},
|
||||
shim: {
|
||||
"jquery.treeview": {
|
||||
deps: ['jquery', 'jquery.cookie'],
|
||||
exports: '$.fn.treeview'
|
||||
},
|
||||
"jquery.cookie": {
|
||||
deps: ["jquery"],
|
||||
exports: '$.fn.cookie'
|
||||
},
|
||||
"jquery.tooltip": {
|
||||
deps: ["jquery"],
|
||||
exports: '$.fn.tooltip'
|
||||
},
|
||||
"jquery.ui": {
|
||||
deps: ["jquery"]
|
||||
},
|
||||
"jquery.ui.widget": {
|
||||
deps: ["jquery"]
|
||||
},
|
||||
"jfu.fileupload": {
|
||||
deps: ["jquery.ui.widget"]
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// launch application
|
||||
require(["jquery", "apps/admin/main/app"], function ($, App) {
|
||||
App.initialize({
|
||||
"wsurl": $("#left").data("websocket")
|
||||
});
|
||||
});
|
||||
106
www/scripts/apps/admin/main/views/leftPanel.js
Normal file
106
www/scripts/apps/admin/main/views/leftPanel.js
Normal file
@@ -0,0 +1,106 @@
|
||||
/*
|
||||
* This file is part of Phraseanet
|
||||
*
|
||||
* (c) 2005-2014 Alchemy
|
||||
*
|
||||
* For the full copyright and license information, please view the LICENSE
|
||||
* file that was distributed with this source code.
|
||||
*/
|
||||
|
||||
define([
|
||||
"jquery",
|
||||
"underscore",
|
||||
"backbone",
|
||||
"common/websockets/subscriberManager",
|
||||
"jquery.treeview"
|
||||
], function ($, _, Backbone, SubscriberManager) {
|
||||
var LeftPanelView = Backbone.View.extend({
|
||||
initialize: function (options) {
|
||||
if (false === "eventManager" in options) {
|
||||
throw "You must set en event manager";
|
||||
}
|
||||
this.delegateEvents(this.events);
|
||||
this.eventManager = options.eventManager;
|
||||
this.$treeview = $("#FNDR", this.$el);
|
||||
|
||||
var $this = this;
|
||||
this.eventManager.on("panel:left:success", function(data, click) {
|
||||
$this.render.append(data);
|
||||
$this.activeTree();
|
||||
if (click) {
|
||||
$this.clickSelected();
|
||||
}
|
||||
})
|
||||
},
|
||||
render : function(data) {
|
||||
this.$treeview.empty().append(data);
|
||||
},
|
||||
events: {
|
||||
"click a[target=right]": "clickAction"
|
||||
},
|
||||
activeTree: function() {
|
||||
// tree view jquery module is not loaded as a module
|
||||
this.$treeview.treeview({
|
||||
collapsed: true,
|
||||
animated: "medium"
|
||||
});
|
||||
},
|
||||
clickSelected: function () {
|
||||
if($('.selected', this.$el).length > 0) {
|
||||
$('.selected a', this.$el).trigger('click');
|
||||
} else {
|
||||
$('.zone_online_users', this.$el).trigger('click');
|
||||
}
|
||||
},
|
||||
reloadTree: function (position, click) {
|
||||
var $this = this;
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: "/admin/tree/",
|
||||
data: {position : position},
|
||||
success: function(data){
|
||||
$this.eventManager.trigger('panel:left:success', data , click)
|
||||
},
|
||||
beforeSend: function(){
|
||||
$this.eventManager.trigger('panel:left:beforeSend');
|
||||
},
|
||||
complete: function(){
|
||||
$this.eventManager.trigger('panel:left:complete');
|
||||
}
|
||||
});
|
||||
},
|
||||
clickAction: function(event) {
|
||||
event.preventDefault();
|
||||
var $this = this;
|
||||
var link = $(event.currentTarget);
|
||||
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: link.attr('href'),
|
||||
success: function(data) {
|
||||
$this.eventManager.trigger('panel:right:success', data);
|
||||
},
|
||||
beforeSend: function(){
|
||||
$this.eventManager.trigger('panel:right:beforeSend');
|
||||
},
|
||||
complete: function(){
|
||||
$this.eventManager.trigger('panel:right:complete');
|
||||
}
|
||||
});
|
||||
|
||||
if ("undefined" !== typeof link.data("ws-topic")) {
|
||||
console.log(link.data("ws-topic"));
|
||||
SubscriberManager.register(link.data("ws-topic"));
|
||||
}
|
||||
|
||||
$this.selectLink(link);
|
||||
link.removeAttr('target');
|
||||
},
|
||||
selectLink: function(link) {
|
||||
$('.selected', this.$el).removeClass('selected');
|
||||
link.parent().addClass('selected');
|
||||
}
|
||||
});
|
||||
|
||||
return LeftPanelView;
|
||||
});
|
||||
104
www/scripts/apps/admin/main/views/rightPanel.js
Normal file
104
www/scripts/apps/admin/main/views/rightPanel.js
Normal file
@@ -0,0 +1,104 @@
|
||||
/*
|
||||
* This file is part of Phraseanet
|
||||
*
|
||||
* (c) 2005-2014 Alchemy
|
||||
*
|
||||
* For the full copyright and license information, please view the LICENSE
|
||||
* file that was distributed with this source code.
|
||||
*/
|
||||
|
||||
define([
|
||||
"jquery",
|
||||
"underscore",
|
||||
"backbone",
|
||||
"jquery.tooltip",
|
||||
"blueimp.loadimage",
|
||||
"jfu.iframe-transport",
|
||||
"jfu.fileupload",
|
||||
"jquery.ui"
|
||||
], function ($, _, Backbone) {
|
||||
var RightPanelView = Backbone.View.extend({
|
||||
initialize: function (options) {
|
||||
if (false === "eventManager" in options) {
|
||||
throw "You must set en event manager";
|
||||
}
|
||||
this.delegateEvents(this.events);
|
||||
this.eventManager = options.eventManager;
|
||||
|
||||
var $this = this;
|
||||
this.eventManager.on("panel:right:beforeSend", function() {
|
||||
$this.$el.empty();
|
||||
$this.loadingState(true);
|
||||
});
|
||||
this.eventManager.on("panel:right:complete", function() {
|
||||
$this.loadingState(false);
|
||||
});
|
||||
this.eventManager.on("panel:right:success", function(data) {
|
||||
$this.render(data);
|
||||
})
|
||||
},
|
||||
events: {
|
||||
"submit form:not(.no-ajax)": "submitAction",
|
||||
"click a:not(.no-ajax)": "clickAction"
|
||||
},
|
||||
render: function (data) {
|
||||
this.$el.html(data);
|
||||
|
||||
return this;
|
||||
},
|
||||
clickAction: function(event) {
|
||||
event.preventDefault();
|
||||
var $this = this;
|
||||
var link = $(event.currentTarget);
|
||||
var url = link.attr('href');
|
||||
|
||||
if(url && url.indexOf('#') !== 0) {
|
||||
$.ajax({
|
||||
type: link.attr("method") || "GET",
|
||||
url: url,
|
||||
success: function(data) {
|
||||
$this.eventManager.trigger('panel:right:success', data);
|
||||
},
|
||||
beforeSend: function(){
|
||||
$this.eventManager.trigger('panel:right:beforeSend');
|
||||
},
|
||||
complete: function(){
|
||||
$this.eventManager.trigger('panel:right:complete');
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
submitAction: function(event) {
|
||||
event.preventDefault();
|
||||
var $this = this;
|
||||
var link = $(event.currentTarget);
|
||||
var url = link.attr('action') || 'GET';
|
||||
|
||||
if(url) {
|
||||
$.ajax({
|
||||
type: link.attr('method'),
|
||||
url: url,
|
||||
data: link.serializeArray(),
|
||||
success: function (data) {
|
||||
$this.eventManager.trigger("panel:right:success", data);
|
||||
},
|
||||
beforeSend: function(){
|
||||
$this.eventManager.trigger('panel:right:beforeSend');
|
||||
},
|
||||
complete: function(){
|
||||
$this.eventManager.trigger('panel:right:complete');
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
loadingState: function(state) {
|
||||
if (state) {
|
||||
this.$el.addClass("loading");
|
||||
} else {
|
||||
this.$el.removeClass("loading");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return RightPanelView;
|
||||
});
|
||||
Reference in New Issue
Block a user