mirror of
https://github.com/Yetangitu/ampache
synced 2025-10-05 19:41:55 +02:00
Starting review of editing object through dialog box.
This commit is contained in:
SUTJael
parent
73d9b3c523
commit
727e8ea9b6
7 changed files with 273 additions and 68 deletions
|
|
@ -208,7 +208,14 @@ if (session_id()) {
|
|||
|
||||
/* Add in some variables for ajax done here because we need the user */
|
||||
Config::set('ajax_url', Config::get('web_path') . '/server/ajax.server.php', true);
|
||||
?>
|
||||
|
||||
<script type="text/javascript">
|
||||
// Using the following work-around to set ajex.server.php path available from any javascript script.
|
||||
var jsAjaxUrl = "<?php echo Config::get('ajax_url') ?>";
|
||||
</script>
|
||||
|
||||
<?php
|
||||
// Load gettext mojo
|
||||
load_gettext();
|
||||
|
||||
|
|
|
|||
|
|
@ -103,41 +103,3 @@ function check_inline_song_edit(type, song) {
|
|||
}
|
||||
}
|
||||
|
||||
function showAddTagSlideout(elm) {
|
||||
$(elm).show('slide', 500);
|
||||
}
|
||||
|
||||
function closeAddTagSlideout(elm) {
|
||||
$(elm).hide('slide', 500);
|
||||
}
|
||||
|
||||
function saveTag(id, type, path) {
|
||||
var tagName = $('#dialog_tag_item_tag_name_'+id).val();
|
||||
if (tagName != null || tagName != '') {
|
||||
ajaxPut(path + '/server/ajax.server.php?page=tag&action=add_tag_by_name&type=' + type + '&object_id=' + id + '&tag_name=' + tagName);
|
||||
}
|
||||
$('#dialog_tag_item_tag_name').val('');
|
||||
$('#dialog_tag_item_' + id).hide('slide', 500);
|
||||
$('#np_song_tags_' + id).append('<a href="javascript:void(0);" class="hover-remove tag_size2">' + tagName + '</a>')
|
||||
}
|
||||
|
||||
function showAddTagDialog(id, type, path) {
|
||||
$('#dialog_tag_item').dialog({
|
||||
modal: true,
|
||||
buttons: [
|
||||
{
|
||||
title: "Tag",
|
||||
text: 'ok',
|
||||
click: function () {
|
||||
var tagName = $('#dialog_tag_item_tag_name').val();
|
||||
if (tagName != null || tagName != '') {
|
||||
ajaxPut(path + '/server/ajax.server.php?page=tag&action=add_tag_by_name&type=' + type + '&object_id=' + id + '&tag_name=' + tagName);
|
||||
}
|
||||
$('#dialog_tag_item_tag_name').val('');
|
||||
$(this).dialog('close');
|
||||
}
|
||||
}
|
||||
]
|
||||
}).show();
|
||||
}
|
||||
|
||||
|
|
|
|||
101
lib/javascript/edit-dialog.js
Normal file
101
lib/javascript/edit-dialog.js
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
// vim:set softtabstop=4 shiftwidth=4 expandtab:
|
||||
//
|
||||
// Copyright 2001 - 2013 Ampache.org
|
||||
// All rights reserved.
|
||||
//
|
||||
// This program is free software; you can redistribute it and/or
|
||||
// modify it under the terms of the GNU General Public License v2
|
||||
// as published by the Free Software Foundation.
|
||||
//
|
||||
//
|
||||
// This program 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 this program; if not, write to the Free Software
|
||||
// Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA.
|
||||
//
|
||||
|
||||
function showEditDialog(edit_type, edit_id, edit_form_id, edit_title, save_title, cancel_title) {
|
||||
var contentUrl = jsAjaxUrl + '?action=show_edit_object&id=' + edit_id + '&type=' + edit_type;
|
||||
var saveUrl = jsAjaxUrl + '?action=edit_object&id=' + edit_id + '&type=' + edit_type;
|
||||
var cancelUrl = jsAjaxUrl + '?action=cancel_edit_object&id=' + edit_id + '&type=' + edit_type; //No useful I think
|
||||
var editDialogId = '<div id="editdialog"></div>';
|
||||
var parent = this;
|
||||
|
||||
var dialog_buttons = {};
|
||||
dialog_buttons[save_title] = function() {
|
||||
$(parent.edit_form_id).submit();
|
||||
ajaxPut(parent.saveUrl);
|
||||
$("#editdialog").dialog("close");
|
||||
}
|
||||
dialog_buttons[cancel_title] = function() {
|
||||
$("#editdialog").dialog("close");
|
||||
}
|
||||
|
||||
$(editDialogId).dialog({
|
||||
title: edit_title,
|
||||
modal: true,
|
||||
dialogClass: 'editdialogstyle',
|
||||
resizable: false,
|
||||
width: 600,
|
||||
autoOpen: false,
|
||||
open: function () {
|
||||
$(this).load(contentUrl, function() {
|
||||
$(this).dialog('option', 'position', 'center');
|
||||
});
|
||||
},
|
||||
close: function (e) {
|
||||
$(this).empty();
|
||||
$(this).dialog("destroy");
|
||||
},
|
||||
buttons: dialog_buttons
|
||||
});
|
||||
|
||||
$("#editdialog").dialog("open");
|
||||
}
|
||||
|
||||
$(window).resize(function() {
|
||||
$("#editdialog").dialog("option", "position", ['center', 'center']);
|
||||
});
|
||||
|
||||
function showAddTagSlideout(elm) {
|
||||
$(elm).show('slide', 500);
|
||||
}
|
||||
|
||||
function closeAddTagSlideout(elm) {
|
||||
$(elm).hide('slide', 500);
|
||||
}
|
||||
|
||||
function saveTag(id, type, path) {
|
||||
var tagName = $('#dialog_tag_item_tag_name_'+id).val();
|
||||
if (tagName != null || tagName != '') {
|
||||
ajaxPut(path + '/server/ajax.server.php?page=tag&action=add_tag_by_name&type=' + type + '&object_id=' + id + '&tag_name=' + tagName);
|
||||
}
|
||||
$('#dialog_tag_item_tag_name').val('');
|
||||
$('#dialog_tag_item_' + id).hide('slide', 500);
|
||||
$('#np_song_tags_' + id).append('<a href="javascript:void(0);" class="hover-remove tag_size2">' + tagName + '</a>')
|
||||
}
|
||||
|
||||
function showAddTagDialog(id, type, path) {
|
||||
$('#dialog_tag_item').dialog({
|
||||
modal: true,
|
||||
buttons: [
|
||||
{
|
||||
title: "Tag",
|
||||
text: 'ok',
|
||||
click: function () {
|
||||
var tagName = $('#dialog_tag_item_tag_name').val();
|
||||
if (tagName != null || tagName != '') {
|
||||
ajaxPut(path + '/server/ajax.server.php?page=tag&action=add_tag_by_name&type=' + type + '&object_id=' + id + '&tag_name=' + tagName);
|
||||
}
|
||||
$('#dialog_tag_item_tag_name').val('');
|
||||
$(this).dialog('close');
|
||||
}
|
||||
}
|
||||
]
|
||||
}).show();
|
||||
}
|
||||
|
||||
|
|
@ -45,6 +45,7 @@ if (Config::get('use_rss')) { ?>
|
|||
<script src="<?php echo $web_path; ?>/modules/jquery/jquery-ui.min.js" language="javascript" type="text/javascript"></script>
|
||||
<script src="<?php echo $web_path; ?>/modules/prettyPhoto/js/jquery.prettyPhoto.js" language="javascript" type="text/javascript"></script>
|
||||
<script src="<?php echo $web_path; ?>/lib/javascript/base.js" language="javascript" type="text/javascript"></script>
|
||||
<script src="<?php echo $web_path; ?>/lib/javascript/edit-dialog.js" language="javascript" type="text/javascript"></script>
|
||||
<script src="<?php echo $web_path; ?>/lib/javascript/ajax.js" language="javascript" type="text/javascript"></script>
|
||||
<?php
|
||||
// If iframes, we check in javascript that parent container exist, otherwise we redirect to index. Otherwise HTML5 iframed Player will look broken.
|
||||
|
|
|
|||
|
|
@ -20,33 +20,27 @@
|
|||
*
|
||||
*/
|
||||
?>
|
||||
<td colspan="8">
|
||||
<form method="post" id="edit_song_<?php echo $song->id; ?>">
|
||||
<table class="inline-edit" cellpadding="3" cellspacing="0">
|
||||
<div>
|
||||
<form method="post" id="edit_song_<?php echo $song->id; ?>" class="edit_dialog_content">
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<input type="text" name="title" value="<?php echo scrub_out($song->title); ?>" />
|
||||
</td>
|
||||
<td>
|
||||
<?php show_artist_select('artist',$song->artist,true,$song->id); ?>
|
||||
<div id="artist_select_song_<?php echo $song->id ?>"></div>
|
||||
<?php echo Ajax::observe('artist_select_'.$song->id,'change','check_inline_song_edit("artist", '.$song->id.')'); ?>
|
||||
</td>
|
||||
<td>
|
||||
<?php show_album_select('album',$song->album,true,$song->id); ?>
|
||||
<div id="album_select_song_<?php echo $song->id ?>"></div>
|
||||
<?php echo Ajax::observe('album_select_'.$song->id,'change','check_inline_song_edit("album", '.$song->id.')'); ?>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" name="track" size="3" value="<?php echo scrub_out($song->track); ?>" />
|
||||
</td>
|
||||
<td>
|
||||
<input type="hidden" name="id" value="<?php echo $song->id; ?>" />
|
||||
<input type="hidden" name="type" value="song_row" />
|
||||
<?php echo Ajax::button('?action=edit_object&id=' . $song->id . '&type=song_row','download', T_('Save Changes'),'save_song_' . $song->id,'edit_song_' . $song->id); ?>
|
||||
<?php echo Ajax::button('?action=cancel_edit_object&id=' . $song->id . '&type=song_row','cancel', T_('Cancel Changes'),'cancel_song_' . $song->id,'edit_song_' . $song->id); ?>
|
||||
</td>
|
||||
<td class="edit_dialog_content_header"><?php echo T_('Title') ?></td>
|
||||
<td><input type="text" name="title" value="<?php echo scrub_out($song->title); ?>" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="edit_dialog_content_header"><?php echo T_('Artist') ?></td>
|
||||
<td><?php show_artist_select('artist', $song->artist, true, $song->id); ?></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="edit_dialog_content_header"><?php echo T_('Album') ?></td>
|
||||
<td><?php show_album_select('album',$song->album,true,$song->id); ?></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="edit_dialog_content_header"><?php echo T_('Track') ?></td>
|
||||
<td><input type="text" name="track" size="3" value="<?php echo scrub_out($song->track); ?>" /></td>
|
||||
</tr>
|
||||
</table>
|
||||
<input type="hidden" name="id" value="<?php echo $song->id; ?>" />
|
||||
<input type="hidden" name="type" value="song_row" />
|
||||
</form>
|
||||
</td>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -58,7 +58,13 @@
|
|||
<?php if (Access::check_function('download')) { ?>
|
||||
<a href="<?php echo Config::get('web_path'); ?>/stream.php?action=download&song_id=<?php echo $song->id; ?>"><?php echo UI::get_icon('download', T_('Download')); ?></a><?php } ?>
|
||||
<?php if (Access::check('interface','75')) { ?>
|
||||
<?php echo Ajax::button('?action=show_edit_object&type=song_row&id=' . $song->id,'edit', T_('Edit'),'edit_song_' . $song->id); ?>
|
||||
|
||||
<span id="<?php echo 'edit_song_'.$song->id ?>" onclick="showEditDialog('song_row', '<?php echo $song->id ?>', '<?php echo 'edit_song_'.$song->id ?>', '<?php echo T_('Song edit') ?>', '<?php echo T_('Save') ?>', '<?php echo T_('Cancel') ?>')">
|
||||
<?php echo UI::get_icon('edit', T_('Edit')); ?>
|
||||
</span>
|
||||
|
||||
<?php /*echo Ajax::button('?action=show_edit_object&type=song_row&id=' . $song->id,'edit', T_('Edit'),'edit_song_' . $song->id);*/ ?>
|
||||
|
||||
<?php $icon = $song->enabled ? 'disable' : 'enable'; ?>
|
||||
<?php $button_flip_state_id = 'button_flip_state_' . $song_id; ?>
|
||||
<span id="<?php echo($button_flip_state_id); ?>">
|
||||
|
|
|
|||
|
|
@ -189,6 +189,143 @@ input[type=button]:focus:active, input[type=submit]:focus:active {
|
|||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/***********************************************
|
||||
jQuery edit dialog
|
||||
***********************************************/
|
||||
.editdialogstyle.ui-dialog {
|
||||
background-image: url('../images/background.png');
|
||||
background-repeat: repeat;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
font-family: "DejaVuSansCondensed",Helvetica,Arial,sans-serif;
|
||||
font-weight: normal;
|
||||
font-size: 16px;
|
||||
line-height: 1.5em;
|
||||
background-color: #222;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.editdialogstyle.ui-dialog .ui-dialog-titlebar {
|
||||
background: none;
|
||||
background-color: rgba(255,255,255,0.1);
|
||||
-webkit-border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
border-color: #1d1d1d;
|
||||
border: 2px solid rgba(0,0,0,0.15);
|
||||
-webkit-box-shadow: 0 0 5px rgba(255,255,255,0.05);
|
||||
-moz-box-shadow: 0 0 5px rgba(255,255,255,0.05);
|
||||
box-shadow: 0 0 5px rgba(255,255,255,0.05);
|
||||
padding: 7px;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.editdialogstyle.ui-dialog .ui-dialog-title {
|
||||
}
|
||||
|
||||
.editdialogstyle.ui-dialog .ui-dialog-content {
|
||||
color: #999;
|
||||
border: 0;
|
||||
margin: 20px auto 20px auto;
|
||||
}
|
||||
|
||||
.editdialogstyle.ui-dialog .ui-dialog-buttonpane {
|
||||
background: none;
|
||||
background-color: rgba(255,255,255,0.1);
|
||||
height: 40px;
|
||||
border: 0;
|
||||
-webkit-border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
border-color: #1d1d1d;
|
||||
border: 2px solid rgba(0,0,0,0.15);
|
||||
-webkit-box-shadow: 0 0 5px rgba(255,255,255,0.05);
|
||||
-moz-box-shadow: 0 0 5px rgba(255,255,255,0.05);
|
||||
box-shadow: 0 0 5px rgba(255,255,255,0.05);
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.editdialogstyle.ui-dialog .ui-dialog-buttonset button {
|
||||
background: none;
|
||||
background-image: -moz-linear-gradient(top,#ff9d00,#cc6200);
|
||||
background-image: -ms-linear-gradient(top,#ff9d00,#cc6200);
|
||||
background-image: -webkit-gradient(linear,0 0,0 100%,from(#ff9d00),to(#cc6200));
|
||||
background-image: -webkit-linear-gradient(top,#ff9d00,#cc6200);
|
||||
background-image: -o-linear-gradient(top,#ff9d00,#cc6200);
|
||||
background-image: linear-gradient(top,#ff9d00,#cc6200);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
|
||||
position: relative;
|
||||
line-height: normal;
|
||||
border: 0;
|
||||
-webkit-border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.2);
|
||||
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.2);
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.2);
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
min-width: 100px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.editdialogstyle.ui-dialog .ui-dialog-buttonset button:hover {
|
||||
background-position: 0 -10px;
|
||||
background-color: #cc6200;
|
||||
-webkit-transition: background-position .1s linear;
|
||||
-moz-transition: background-position .1s linear;
|
||||
-ms-transition: background-position .1s linear;
|
||||
-o-transition: background-position .1s linear;
|
||||
transition: background-position .1s linear;
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.editdialogstyle.ui-dialog .ui-dialog-buttonset button:focus:active {
|
||||
-webkit-box-shadow:inset 0 0 3px #000,0 1px 0 rgba(255,255,255,0.1);
|
||||
-moz-box-shadow:inset 0 0 3px #000,0 1px 0 rgba(255,255,255,0.1);
|
||||
box-shadow:inset 0 0 3px #000,0 1px 0 rgba(255,255,255,0.1);
|
||||
-webkit-transition: background-position .1s linear;
|
||||
-moz-transition: background-position .1s linear;
|
||||
-ms-transition: background-position .1s linear;
|
||||
-o-transition: background-position .1s linear;
|
||||
transition: background-position .1s linear;
|
||||
}
|
||||
|
||||
.edit_dialog_content {
|
||||
min-height: 29px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.edit_dialog_content td {
|
||||
min-width: 100px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.edit_dialog_content input, .edit_dialog_content select {
|
||||
width: 450px;
|
||||
height: 30px;
|
||||
color: #fff;
|
||||
background: #333;
|
||||
background: rgba(255,255,255,0.2);
|
||||
border-color: #222;
|
||||
border-color: rgba(0,0,0,0.7);
|
||||
}
|
||||
|
||||
.edit_dialog_content input:focus, .edit_dialog_content select:focus {
|
||||
color: #555;
|
||||
background: #fff;
|
||||
background: rgba(255,255,255,0.9);
|
||||
border: 2px solid #ffc763;
|
||||
}
|
||||
|
||||
/***********************************************
|
||||
Main
|
||||
***********************************************/
|
||||
|
|
@ -1068,9 +1205,6 @@ span.fatalerror {
|
|||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);
|
||||
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);
|
||||
-webkit-border-top-left-radius: 2px;
|
||||
-moz-border-radius-topleft: 2px;
|
||||
border-top-left-radius: 2px;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue