Skip to content
Code-Schnipsel Gruppen Projekte
Commit e97fb004 erstellt von Henning Leutz's avatar Henning Leutz :martial_arts_uniform:
Dateien durchsuchen

slider editierbar gemacht

Übergeordneter aedf3670
No related branches found
No related tags found
Keine zugehörigen Merge Requests gefunden
Leerzeichenänderungen ausblenden
Inline Nebeneinander
bin/admin/ImageDataList.css
+ 43
− 1
Zeige Datei @ e97fb004
......@@ -36,11 +36,12 @@
.quiqqer-slider-imageDataList-entry-image {
float: left;
height: 40px;
text-align: center;
width: 80px;
}
.quiqqer-slider-imageDataList-entry-image img {
float: left;
max-width: 40px;
max-height: 40px;
}
......@@ -94,4 +95,45 @@
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
}
/** Image edit
======================================================== */
.imageDataList {
margin: 0 auto;
max-width: 340px;
}
.imageDataList-edit-preview {
background: #eee;
height: 150px;
margin: 0 0 20px;
padding: 10px;
text-align: center;
width: 100%;
}
.imageDataList-edit-preview img {
max-height: 100%;
max-width: 100%;
}
.imageDataList .qui-controls-project-site-input,
.imageDataList .qui-controls-project-media-input {
float: left;
}
.imageDataList-edit-entry {
clear: both;
float: left;
margin-bottom: 10px;
}
.imageDataList-edit-entry label {
float: left;
line-height: 30px;
width: 70px;
}
\ No newline at end of file
bin/admin/ImageDataList.js
+ 205
− 28
Zeige Datei @ e97fb004
/**
* Admin Slider image list
* Slider image list for the administration
*
* @author www.pcsg.de (Henning Leutz)
* @module package/quiqqer/slider/bin/admin/ImageDataList
*
* @require qui/QUI
* @require qui/controls/Control
* @require qui/controls/buttons/Button
* @require qui/controls/windows/Confirm
* @require controls/projects/project/media/Popup
* @require css!package/quiqqer/slider/bin/admin/ImageDataList.css
*/
define('package/quiqqer/slider/bin/admin/ImageDataList', [
......@@ -89,6 +96,7 @@ define('package/quiqqer/slider/bin/admin/ImageDataList', [
},
/**
* Set the project
*
* @param {Object|String} Project - classes/projects/Project | Project name
*/
......@@ -107,7 +115,7 @@ define('package/quiqqer/slider/bin/admin/ImageDataList', [
},
/**
*
* Add an image - opens the dialog
*/
openAddWindow : function()
{
......@@ -125,21 +133,33 @@ define('package/quiqqer/slider/bin/admin/ImageDataList', [
}).open();
},
/**
* Set the data to the input node
*/
$refreshData : function()
{
var data = [],
elements = this.$Container.getElements(
'.quiqqer-slider-imageDataList-entry'
);
for (var i = 0, len = elements.length; i < len; i++) {
data.push(this.$getDataFromEntry(elements[i]));
}
this.$Input.value = JSON.encode(data);
},
/**
* Add a new image
*
* @param {String} imageSrc
* @param {String} link
* @param {String} text
* @param {String} [link]
* @param {String} [text]
*/
addData : function(imageSrc, link, text)
{
return new Promise(function(resolve)
return new Promise(function(resolve, reject)
{
this.$Message.setStyle('display', 'none');
......@@ -151,22 +171,8 @@ define('package/quiqqer/slider/bin/admin/ImageDataList', [
'<div class="quiqqer-slider-imageDataList-entry-edit"></div>'
}).inject(this.$Container);
var Img = Entry.getElement('.quiqqer-slider-imageDataList-entry-image');
var Text = Entry.getElement('.quiqqer-slider-imageDataList-entry-text');
var Link = Entry.getElement('.quiqqer-slider-imageDataList-entry-link');
var Edit = Entry.getElement('.quiqqer-slider-imageDataList-entry-edit');
if (imageSrc.match('image.php')) {
imageSrc = imageSrc +'&quiadmin=1&maxwidth=40&maxheight=40';
}
new Element('img', {
src : URL_DIR + imageSrc
}).inject( Img );
Text.set('html', text || '&nbsp;');
Link.set('html', link || '&nbsp;');
new QUIButton({
icon : 'icon-edit',
events : {
......@@ -185,48 +191,155 @@ define('package/quiqqer/slider/bin/admin/ImageDataList', [
}
}).inject(Edit);
if (text || link) {
if (typeof text !== 'undefined')
{
this.$setData(Entry, {
image : imageSrc,
text : text,
link : link
});
this.$refreshData();
resolve();
return;
}
this.$editData(Entry);
require(['Ajax', 'qui/utils/String'], function(Ajax, QUIStringUtils)
{
var data = QUIStringUtils.getUrlParams( imageSrc );
if ( "project" in data && "id" in data ) {
Ajax.get('ajax_media_get', function(imageData)
{
if (!imageData) {
reject();
return;
}
this.$setData(Entry, {
image : imageSrc,
text : imageData.file.short,
link : link || ''
});
this.$refreshData();
resolve();
}.bind(this), {
fileid : data.id,
project : data.project,
onError : reject
});
return;
}
reject();
}.bind(this));
}.bind(this));
},
/**
* edit an image data entry
* opens the edit dialog
*
* @param {HTMLElement} Entry
*/
$editData : function(Entry)
{
new QUIConfirm({
title : 'Bildedaten bearbeiten',
title : 'Bilddaten bearbeiten',
maxWidth : 750,
maxHeight : 500,
autoclose : false,
events :
{
onOpen : function(Win)
{
Win.Loader.show();
var Content = Win.getContent();
}
require([
'text!package/quiqqer/slider/bin/admin/ImageDataListEdit.html',
'utils/Controls',
'qui/utils/Form'
], function(result, UtilsControls, QUIUtilsForm)
{
Content.set('html', result);
var data = this.$getDataFromEntry(Entry),
Preview = Content.getElement('.imageDataList-edit-preview');
QUIUtilsForm.setDataToForm(
data,
Content.getElement('form')
);
Preview.set({
html : '<img src="'+ URL_DIR + data.image +'&quiadmin=1&maxwidth=340&maxheight=150" />'
});
UtilsControls.parse(Content).then(function()
{
var Control = QUI.Controls.getById(
Content.getElement('.qui-controls-project-media-input')
.get('data-quiid')
);
Control.addEvent('onChange', function(Input, value) {
Preview.set({
html : '<img src="'+ URL_DIR + value +'&quiadmin=1&maxwidth=340&maxheight=150" />'
});
});
Win.Loader.hide();
});
}.bind(this));
}.bind(this),
onSubmit : function(Win)
{
Win.Loader.show();
require(['qui/utils/Form'], function(QUIUtilsForm)
{
var data = QUIUtilsForm.getFormData(
Win.getContent().getElement('form')
);
this.$setData(Entry, data);
this.$refreshData();
Win.close();
}.bind(this));
}.bind(this)
}
}).open();
},
/**
* Remove an image data node
*
* @param {HTMLElement} Entry
*/
$removeData : function(Entry)
{
console.log( Entry );
new QUIConfirm({
title : 'Möchten Sie wirklich das Bild entfernen?',
text : 'Wirklich das Bild entfernen?',
title : 'Möchten Sie wirklich das Bild entfernen?',
text : 'Wirklich das Bild entfernen?',
information : 'Das Bild wird nur aus dem Slider entfernt und wird nicht mehr im Slider angezeigt.<br />'+
'Auch die gesetzten Daten gehen verloren.',
maxWidth : 450,
......@@ -242,6 +355,60 @@ define('package/quiqqer/slider/bin/admin/ImageDataList', [
}).open();
},
/**
* Set the data for an image entry
*
* @param {HTMLElement} Entry
* @param {Object} data
*/
$setData : function(Entry, data)
{
var Img = Entry.getElement('.quiqqer-slider-imageDataList-entry-image');
var Text = Entry.getElement('.quiqqer-slider-imageDataList-entry-text');
var Link = Entry.getElement('.quiqqer-slider-imageDataList-entry-link');
// image
Img.set('html', '');
var imageSrc = data.image;
var originalSrc = imageSrc;
if (imageSrc.match('image.php')) {
imageSrc = imageSrc +'&quiadmin=1&maxwidth=40&maxheight=40';
}
new Element('img', {
src : URL_DIR + imageSrc,
'data-original' : originalSrc
}).inject( Img );
// text
Text.set('html', data.text || '&nbsp;');
// link
Link.set('html', data.link || '&nbsp;');
},
/**
* Return the data from an image entry
*
* @param Entry
* @returns {{image: *, text: *, link: *}}
*/
$getDataFromEntry : function(Entry)
{
var Text = Entry.getElement('.quiqqer-slider-imageDataList-entry-text');
var Link = Entry.getElement('.quiqqer-slider-imageDataList-entry-link');
return {
image : Entry.getElement('img').get('data-original'),
text : Text.get('html').trim(),
link : Link.get('html').trim()
};
},
/**
* event : on import
*/
......@@ -256,6 +423,16 @@ define('package/quiqqer/slider/bin/admin/ImageDataList', [
}
this.$Input.type = 'hidden';
var data = JSON.decode(this.$Input.value);
for (var i = 0, len = data.length; i < len; i++) {
this.addData(
data[i].image,
data[i].link,
data[i].text
);
}
},
/**
......
bin/admin/ImageDataListEdit.html 0 → 100644
+ 20
− 0
Zeige Datei @ e97fb004
<form name="imageDataList" class="imageDataList">
<div class="imageDataList-edit-preview"></div>
<div class="imageDataList-edit-entry">
<label for="imageDataList-edit-entry-image">Bild</label>
<input type="text" name="image" id="imageDataList-edit-entry-image" class="media-image" />
</div>
<div class="imageDataList-edit-entry">
<label for="imageDataList-edit-entry-text">Text</label>
<input type="text" name="text" id="imageDataList-edit-entry-text" />
</div>
<div class="imageDataList-edit-entry">
<label for="imageDataList-edit-entry-link">Link</label>
<input type="text" name="link" id="imageDataList-edit-entry-link" class="project-site" />
</div>
</form>
\ No newline at end of file
src/QUI/Slider/Controls/Slider.php
+ 18
− 8
Zeige Datei @ e97fb004
......@@ -24,6 +24,13 @@ class Slider extends QUI\Control
*/
protected $_data = array();
/**
* internal image parsing flag
*
* @var bool
*/
protected $_imagesParsing = false;
/**
* constructor
*
......@@ -48,12 +55,6 @@ public function __construct($attributes = array())
OPT_DIR.'quiqqer/gallery/lib/QUI/Gallery/Controls/Slider.css'
);
if ($this->getAttribute('images')) {
$images = $this->getAttribute('images');
QUI\System\Log::writeRecursive($images);
}
parent::setAttributes($attributes);
......@@ -92,10 +93,20 @@ public function getBody()
{
$Engine = QUI::getTemplateManager()->getEngine();
if (!$this->_imagesParsing && $this->getAttribute('images')) {
$images = json_decode($this->getAttribute('images'), true);
foreach ($images as $image) {
$this->addImage($image['image'], $image['link'], $image['text']);
}
}
$Engine->assign(array(
'this' => $this
));
return $Engine->fetch(dirname(__FILE__).'/Slider.html');
}
......@@ -118,8 +129,7 @@ public function addImage($imagePath, $link = false, $text = false)
return;
}
try
{
try {
$link = SiteUtils::rewriteSiteLink($link);
} catch (QUI\Exception $Exception) {
......
0% oder .
You are about to add 0 people to the discussion. Proceed with caution.
Bearbeitung dieser Nachricht zuerst beenden!
Bitte registrieren oder zum Kommentieren

PCSG & QUIQQER support and DEV System - GitLab