|
|
|
/*
|
|
* Modernizr v1.6
|
|
* http://www.modernizr.com
|
|
*
|
|
* Developed by:
|
|
* - Faruk Ates http://farukat.es/
|
|
* - Paul Irish http://paulirish.com/
|
|
*
|
|
* Copyright (c) 2009-2010
|
|
* Dual-licensed under the BSD or MIT licenses.
|
|
* http://www.modernizr.com/license/
|
|
*/
|
|
window.Modernizr=function(i,e,u){function s(a,b){return(""+a).indexOf(b)!==-1}function D(a,b){for(var c in a)if(j[a[c]]!==u&&(!b||b(a[c],E)))return true}function n(a,b){var c=a.charAt(0).toUpperCase()+a.substr(1);c=(a+" "+F.join(c+" ")+c).split(" ");return!!D(c,b)}function S(){f.input=function(a){for(var b=0,c=a.length;b<c;b++)L[a[b]]=!!(a[b]in h);return L}("autocomplete autofocus list placeholder max min multiple pattern required step".split(" "));f.inputtypes=function(a){for(var b=0,c,k=a.length;b<
|
|
k;b++){h.setAttribute("type",a[b]);if(c=h.type!=="text"){h.value=M;if(/^range$/.test(h.type)&&h.style.WebkitAppearance!==u){l.appendChild(h);c=e.defaultView;c=c.getComputedStyle&&c.getComputedStyle(h,null).WebkitAppearance!=="textfield"&&h.offsetHeight!==0;l.removeChild(h)}else/^(search|tel)$/.test(h.type)||(c=/^(url|email)$/.test(h.type)?h.checkValidity&&h.checkValidity()===false:h.value!=M)}N[a[b]]=!!c}return N}("search tel url email datetime date month week time datetime-local number range color".split(" "))}
|
|
var f={},l=e.documentElement,E=e.createElement("modernizr"),j=E.style,h=e.createElement("input"),M=":)",O=Object.prototype.toString,q=" -webkit- -moz- -o- -ms- -khtml- ".split(" "),F="Webkit Moz O ms Khtml".split(" "),v={svg:"http://www.w3.org/2000/svg"},d={},N={},L={},P=[],w,Q=function(a){var b=document.createElement("style"),c=e.createElement("div");b.textContent=a+"{#modernizr{height:3px}}";(e.head||e.getElementsByTagName("head")[0]).appendChild(b);c.id="modernizr";l.appendChild(c);a=c.offsetHeight===
|
|
3;b.parentNode.removeChild(b);c.parentNode.removeChild(c);return!!a},o=function(){var a={select:"input",change:"input",submit:"form",reset:"form",error:"img",load:"img",abort:"img"};return function(b,c){c=c||document.createElement(a[b]||"div");b="on"+b;var k=b in c;if(!k){c.setAttribute||(c=document.createElement("div"));if(c.setAttribute&&c.removeAttribute){c.setAttribute(b,"");k=typeof c[b]=="function";if(typeof c[b]!="undefined")c[b]=u;c.removeAttribute(b)}}return k}}(),G={}.hasOwnProperty,R;R=
|
|
typeof G!=="undefined"&&typeof G.call!=="undefined"?function(a,b){return G.call(a,b)}:function(a,b){return b in a&&typeof a.constructor.prototype[b]==="undefined"};d.flexbox=function(){var a=e.createElement("div"),b=e.createElement("div");(function(k,g,r,x){g+=":";k.style.cssText=(g+q.join(r+";"+g)).slice(0,-g.length)+(x||"")})(a,"display","box","width:42px;padding:0;");b.style.cssText=q.join("box-flex:1;")+"width:10px;";a.appendChild(b);l.appendChild(a);var c=b.offsetWidth===42;a.removeChild(b);
|
|
l.removeChild(a);return c};d.canvas=function(){var a=e.createElement("canvas");return!!(a.getContext&&a.getContext("2d"))};d.canvastext=function(){return!!(f.canvas&&typeof e.createElement("canvas").getContext("2d").fillText=="function")};d.webgl=function(){var a=e.createElement("canvas");try{if(a.getContext("webgl"))return true}catch(b){}try{if(a.getContext("experimental-webgl"))return true}catch(c){}return false};d.touch=function(){return"ontouchstart"in i||Q("@media ("+q.join("touch-enabled),(")+
|
|
"modernizr)")};d.geolocation=function(){return!!navigator.geolocation};d.postmessage=function(){return!!i.postMessage};d.websqldatabase=function(){return!!i.openDatabase};d.indexedDB=function(){for(var a=-1,b=F.length;++a<b;){var c=F[a].toLowerCase();if(i[c+"_indexedDB"]||i[c+"IndexedDB"])return true}return false};d.hashchange=function(){return o("hashchange",i)&&(document.documentMode===u||document.documentMode>7)};d.history=function(){return!!(i.history&&history.pushState)};d.draganddrop=function(){return o("drag")&&
|
|
o("dragstart")&&o("dragenter")&&o("dragover")&&o("dragleave")&&o("dragend")&&o("drop")};d.websockets=function(){return"WebSocket"in i};d.rgba=function(){j.cssText="background-color:rgba(150,255,150,.5)";return s(j.backgroundColor,"rgba")};d.hsla=function(){j.cssText="background-color:hsla(120,40%,100%,.5)";return s(j.backgroundColor,"rgba")||s(j.backgroundColor,"hsla")};d.multiplebgs=function(){j.cssText="background:url(//:),url(//:),red url(//:)";return/(url\s*\(.*?){3}/.test(j.background)};d.backgroundsize=
|
|
function(){return n("backgroundSize")};d.borderimage=function(){return n("borderImage")};d.borderradius=function(){return n("borderRadius","",function(a){return s(a,"orderRadius")})};d.boxshadow=function(){return n("boxShadow")};d.textshadow=function(){return e.createElement("div").style.textShadow===""};d.opacity=function(){var a=q.join("opacity:.5;")+"";j.cssText=a;return s(j.opacity,"0.5")};d.cssanimations=function(){return n("animationName")};d.csscolumns=function(){return n("columnCount")};d.cssgradients=
|
|
function(){var a=("background-image:"+q.join("gradient(linear,left top,right bottom,from(#9f9),to(white));background-image:")+q.join("linear-gradient(left top,#9f9, white);background-image:")).slice(0,-17);j.cssText=a;return s(j.backgroundImage,"gradient")};d.cssreflections=function(){return n("boxReflect")};d.csstransforms=function(){return!!D(["transformProperty","WebkitTransform","MozTransform","OTransform","msTransform"])};d.csstransforms3d=function(){var a=!!D(["perspectiveProperty","WebkitPerspective",
|
|
"MozPerspective","OPerspective","msPerspective"]);if(a)a=Q("@media ("+q.join("transform-3d),(")+"modernizr)");return a};d.csstransitions=function(){return n("transitionProperty")};d.fontface=function(){var a,b=e.head||e.getElementsByTagName("head")[0]||l,c=e.createElement("style"),k=e.implementation||{hasFeature:function(){return false}};c.type="text/css";b.insertBefore(c,b.firstChild);a=c.sheet||c.styleSheet;b=k.hasFeature("CSS2","")?function(g){if(!(a&&g))return false;var r=false;try{a.insertRule(g,
|
|
0);r=!/unknown/i.test(a.cssRules[0].cssText);a.deleteRule(a.cssRules.length-1)}catch(x){}return r}:function(g){if(!(a&&g))return false;a.cssText=g;return a.cssText.length!==0&&!/unknown/i.test(a.cssText)&&a.cssText.replace(/\r+|\n+/g,"").indexOf(g.split(" ")[0])===0};f._fontfaceready=function(g){g(f.fontface)};return b('@font-face { font-family: "font"; src: "font.ttf"; }')};d.video=function(){var a=e.createElement("video"),b=!!a.canPlayType;if(b){b=new Boolean(b);b.ogg=a.canPlayType('video/ogg; codecs="theora"');
|
|
b.h264=a.canPlayType('video/mp4; codecs="avc1.42E01E"')||a.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');b.webm=a.canPlayType('video/webm; codecs="vp8, vorbis"')}return b};d.audio=function(){var a=e.createElement("audio"),b=!!a.canPlayType;if(b){b=new Boolean(b);b.ogg=a.canPlayType('audio/ogg; codecs="vorbis"');b.mp3=a.canPlayType("audio/mpeg;");b.wav=a.canPlayType('audio/wav; codecs="1"');b.m4a=a.canPlayType("audio/x-m4a;")||a.canPlayType("audio/aac;")}return b};d.localstorage=function(){try{return"localStorage"in
|
|
i&&i.localStorage!==null}catch(a){return false}};d.sessionstorage=function(){try{return"sessionStorage"in i&&i.sessionStorage!==null}catch(a){return false}};d.webWorkers=function(){return!!i.Worker};d.applicationcache=function(){return!!i.applicationCache};d.svg=function(){return!!e.createElementNS&&!!e.createElementNS(v.svg,"svg").createSVGRect};d.inlinesvg=function(){var a=document.createElement("div");a.innerHTML="<svg/>";return(a.firstChild&&a.firstChild.namespaceURI)==v.svg};d.smil=function(){return!!e.createElementNS&&
|
|
/SVG/.test(O.call(e.createElementNS(v.svg,"animate")))};d.svgclippaths=function(){return!!e.createElementNS&&/SVG/.test(O.call(e.createElementNS(v.svg,"clipPath")))};for(var H in d)if(R(d,H)){w=H.toLowerCase();f[w]=d[H]();P.push((f[w]?"":"no-")+w)}f.input||S();f.crosswindowmessaging=f.postmessage;f.historymanagement=f.history;f.addTest=function(a,b){a=a.toLowerCase();if(!f[a]){b=!!b();l.className+=" "+(b?"":"no-")+a;f[a]=b;return f}};j.cssText="";E=h=null;i.attachEvent&&function(){var a=e.createElement("div");
|
|
a.innerHTML="<elem></elem>";return a.childNodes.length!==1}()&&function(a,b){function c(p){for(var m=-1;++m<r;)p.createElement(g[m])}function k(p,m){for(var I=p.length,t=-1,y,J=[];++t<I;){y=p[t];m=y.media||m;J.push(k(y.imports,m));J.push(y.cssText)}return J.join("")}var g="abbr|article|aside|audio|canvas|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video".split("|"),r=g.length,x=RegExp("<(/*)(abbr|article|aside|audio|canvas|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video)",
|
|
"gi"),T=RegExp("\\b(abbr|article|aside|audio|canvas|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video)\\b(?!.*[;}])","gi"),z=b.createDocumentFragment(),A=b.documentElement,K=A.firstChild,B=b.createElement("style"),C=b.createElement("body");B.media="all";c(b);c(z);a.attachEvent("onbeforeprint",function(){for(var p=-1;++p<r;)for(var m=b.getElementsByTagName(g[p]),I=m.length,t=-1;++t<I;)if(m[t].className.indexOf("iepp_")<0)m[t].className+=" iepp_"+
|
|
g[p];K.insertBefore(B,K.firstChild);B.styleSheet.cssText=k(b.styleSheets,"all").replace(T,".iepp_$1");z.appendChild(b.body);A.appendChild(C);C.innerHTML=z.firstChild.innerHTML.replace(x,"<$1bdo")});a.attachEvent("onafterprint",function(){C.innerHTML="";A.removeChild(C);K.removeChild(B);A.appendChild(z.firstChild)})}(this,document);f._enableHTML5=true;f._version="1.6";l.className=l.className.replace(/\bno-js\b/,"")+" js";l.className+=" "+P.join(" ");return f}(this,this.document);
|
|
/***************************************************************
|
|
* Copyright notice
|
|
*
|
|
* (c) 2008-2011 Jeff Segars <jeff@webempoweredchurch.org>
|
|
* All rights reserved
|
|
*
|
|
* This script is part of the TYPO3 project. The TYPO3 project 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.
|
|
*
|
|
* The GNU General Public License can be found at
|
|
* http://www.gnu.org/copyleft/gpl.html.
|
|
* A copy is found in the textfile GPL.txt and important notices to the license
|
|
* from the author is found in LICENSE.txt distributed with these scripts.
|
|
*
|
|
*
|
|
* This script 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.
|
|
*
|
|
* This copyright notice MUST APPEAR in all copies of the script!
|
|
***************************************************************/
|
|
|
|
|
|
Element.addMethods({
|
|
pngHack: function(element) {
|
|
element = $(element);
|
|
var transparentGifPath = 'clear.gif';
|
|
|
|
// If there is valid element, it is an image and the image file ends with png:
|
|
if (Object.isElement(element) && element.tagName === 'IMG' && element.src.endsWith('.png')) {
|
|
var alphaImgSrc = element.src;
|
|
var sizingMethod = 'scale';
|
|
element.src = transparentGifPath;
|
|
}
|
|
|
|
if (alphaImgSrc) {
|
|
element.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="#{alphaImgSrc}",sizingMethod="#{sizingMethod}")'.interpolate(
|
|
{
|
|
alphaImgSrc: alphaImgSrc,
|
|
sizingMethod: sizingMethod
|
|
});
|
|
}
|
|
|
|
return element;
|
|
}
|
|
});
|
|
|
|
var IECompatibility = Class.create({
|
|
|
|
/**
|
|
* initializes the compatibility class
|
|
*/
|
|
initialize: function() {
|
|
Event.observe(document, 'dom:loaded', function() {
|
|
$$('input[type="checkbox"]').invoke('addClassName', 'checkbox');
|
|
}.bind(this));
|
|
|
|
Event.observe(window, 'load', function() {
|
|
if (Prototype.Browser.IE) {
|
|
var version = parseFloat(navigator.appVersion.split(';')[1].strip().split(' ')[1]);
|
|
if (version === 6) {
|
|
$$('img').each(function(img) {
|
|
img.pngHack();
|
|
});
|
|
$$('#typo3-menu li ul li').each(function(li) {
|
|
li.setStyle({height: '21px'});
|
|
});
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
if (Prototype.Browser.IE) {
|
|
var TYPO3IECompatibilty = new IECompatibility();
|
|
}
|
|
|
|
/**
|
|
* Initialize
|
|
*
|
|
* Adds a listener to be notified when the document is ready
|
|
* (before onload and before images are loaded).
|
|
* Shorthand of Ext.EventManager.onDocumentReady.
|
|
*
|
|
* @param {Function} fn The method the event invokes.
|
|
* @param {Object} scope (optional) The scope (this reference) in which the handler function executes. Defaults to the browser window.
|
|
* @param {boolean} options (optional) Options object as passed to {@link Ext.Element#addListener}. It is recommended that the options
|
|
* {single: true} be used so that the handler is removed on first invocation.
|
|
*
|
|
* @return void
|
|
*/
|
|
Ext.onReady(function() {
|
|
// Initialize QuickTips (Can be used anywhere)
|
|
Ext.QuickTips.init();
|
|
// Instantiate new viewport
|
|
var viewport = new TYPO3.Form.Wizard.Viewport({});
|
|
// When the window is resized, the viewport has to be resized as well
|
|
Ext.EventManager.onWindowResize(viewport.doLayout, viewport);
|
|
});
|
|
Ext.apply(Ext, {
|
|
merge: function(o, c) {
|
|
if (o && c && typeof c == 'object') {
|
|
for (var p in c){
|
|
if ((typeof o[p] == 'object') && (typeof c[p] == 'object')) {
|
|
Ext.merge(o[p], c[p]);
|
|
} else {
|
|
o[p] = c[p];
|
|
}
|
|
}
|
|
}
|
|
return o;
|
|
},
|
|
mergeIf: function(o, c) {
|
|
if (o && c && typeof c == 'object') {
|
|
for (var p in c){
|
|
if ((typeof o[p] == 'object') && (typeof c[p] == 'object')) {
|
|
Ext.mergeIf(o[p], c[p]);
|
|
} else if (typeof o[p] == 'undefined') {
|
|
o[p] = c[p];
|
|
}
|
|
}
|
|
}
|
|
return o;
|
|
}
|
|
});
|
|
Ext.apply(Ext, {
|
|
isEmptyObject: function(o) {
|
|
for(var p in o) {
|
|
return false;
|
|
};
|
|
return true;
|
|
}
|
|
});
|
|
/*!
|
|
* Ext JS Library 3.3.1
|
|
* Copyright(c) 2006-2010 Sencha Inc.
|
|
* licensing@sencha.com
|
|
* http://www.sencha.com/license
|
|
*/
|
|
/**
|
|
* @class Ext.ux.Spinner
|
|
* @extends Ext.util.Observable
|
|
* Creates a Spinner control utilized by Ext.ux.form.SpinnerField
|
|
*/
|
|
Ext.ux.Spinner = Ext.extend(Ext.util.Observable, {
|
|
incrementValue: 1,
|
|
alternateIncrementValue: 5,
|
|
triggerClass: 'x-form-spinner-trigger',
|
|
splitterClass: 'x-form-spinner-splitter',
|
|
alternateKey: Ext.EventObject.shiftKey,
|
|
defaultValue: 0,
|
|
accelerate: false,
|
|
|
|
constructor: function(config){
|
|
Ext.ux.Spinner.superclass.constructor.call(this, config);
|
|
Ext.apply(this, config);
|
|
this.mimicing = false;
|
|
},
|
|
|
|
init: function(field){
|
|
this.field = field;
|
|
|
|
field.afterMethod('onRender', this.doRender, this);
|
|
field.afterMethod('onEnable', this.doEnable, this);
|
|
field.afterMethod('onDisable', this.doDisable, this);
|
|
field.afterMethod('afterRender', this.doAfterRender, this);
|
|
field.afterMethod('onResize', this.doResize, this);
|
|
field.afterMethod('onFocus', this.doFocus, this);
|
|
field.beforeMethod('onDestroy', this.doDestroy, this);
|
|
},
|
|
|
|
doRender: function(ct, position){
|
|
var el = this.el = this.field.getEl();
|
|
var f = this.field;
|
|
|
|
if (!f.wrap) {
|
|
f.wrap = this.wrap = el.wrap({
|
|
cls: "x-form-field-wrap"
|
|
});
|
|
}
|
|
else {
|
|
this.wrap = f.wrap.addClass('x-form-field-wrap');
|
|
}
|
|
|
|
this.trigger = this.wrap.createChild({
|
|
tag: "img",
|
|
src: Ext.BLANK_IMAGE_URL,
|
|
cls: "x-form-trigger " + this.triggerClass
|
|
});
|
|
|
|
if (!f.width) {
|
|
this.wrap.setWidth(el.getWidth() + this.trigger.getWidth());
|
|
}
|
|
|
|
this.splitter = this.wrap.createChild({
|
|
tag: 'div',
|
|
cls: this.splitterClass,
|
|
style: 'width:13px; height:2px;'
|
|
});
|
|
this.splitter.setRight((Ext.isIE) ? 1 : 2).setTop(10).show();
|
|
|
|
this.proxy = this.trigger.createProxy('', this.splitter, true);
|
|
this.proxy.addClass("x-form-spinner-proxy");
|
|
this.proxy.setStyle('left', '0px');
|
|
this.proxy.setSize(14, 1);
|
|
this.proxy.hide();
|
|
this.dd = new Ext.dd.DDProxy(this.splitter.dom.id, "SpinnerDrag", {
|
|
dragElId: this.proxy.id
|
|
});
|
|
|
|
this.initTrigger();
|
|
this.initSpinner();
|
|
},
|
|
|
|
doAfterRender: function(){
|
|
var y;
|
|
if (Ext.isIE && this.el.getY() != (y = this.trigger.getY())) {
|
|
this.el.position();
|
|
this.el.setY(y);
|
|
}
|
|
},
|
|
|
|
doEnable: function(){
|
|
if (this.wrap) {
|
|
this.disabled = false;
|
|
this.wrap.removeClass(this.field.disabledClass);
|
|
}
|
|
},
|
|
|
|
doDisable: function(){
|
|
if (this.wrap) {
|
|
this.disabled = true;
|
|
this.wrap.addClass(this.field.disabledClass);
|
|
this.el.removeClass(this.field.disabledClass);
|
|
}
|
|
},
|
|
|
|
doResize: function(w, h){
|
|
if (typeof w == 'number') {
|
|
this.el.setWidth(w - this.trigger.getWidth());
|
|
}
|
|
this.wrap.setWidth(this.el.getWidth() + this.trigger.getWidth());
|
|
},
|
|
|
|
doFocus: function(){
|
|
if (!this.mimicing) {
|
|
this.wrap.addClass('x-trigger-wrap-focus');
|
|
this.mimicing = true;
|
|
Ext.get(Ext.isIE ? document.body : document).on("mousedown", this.mimicBlur, this, {
|
|
delay: 10
|
|
});
|
|
this.el.on('keydown', this.checkTab, this);
|
|
}
|
|
},
|
|
|
|
// private
|
|
checkTab: function(e){
|
|
if (e.getKey() == e.TAB) {
|
|
this.triggerBlur();
|
|
}
|
|
},
|
|
|
|
// private
|
|
mimicBlur: function(e){
|
|
if (!this.wrap.contains(e.target) && this.field.validateBlur(e)) {
|
|
this.triggerBlur();
|
|
}
|
|
},
|
|
|
|
// private
|
|
triggerBlur: function(){
|
|
this.mimicing = false;
|
|
Ext.get(Ext.isIE ? document.body : document).un("mousedown", this.mimicBlur, this);
|
|
this.el.un("keydown", this.checkTab, this);
|
|
this.field.beforeBlur();
|
|
this.wrap.removeClass('x-trigger-wrap-focus');
|
|
this.field.onBlur.call(this.field);
|
|
},
|
|
|
|
initTrigger: function(){
|
|
this.trigger.addClassOnOver('x-form-trigger-over');
|
|
this.trigger.addClassOnClick('x-form-trigger-click');
|
|
},
|
|
|
|
initSpinner: function(){
|
|
this.field.addEvents({
|
|
'spin': true,
|
|
'spinup': true,
|
|
'spindown': true
|
|
});
|
|
|
|
this.keyNav = new Ext.KeyNav(this.el, {
|
|
"up": function(e){
|
|
e.preventDefault();
|
|
this.onSpinUp();
|
|
},
|
|
|
|
"down": function(e){
|
|
e.preventDefault();
|
|
this.onSpinDown();
|
|
},
|
|
|
|
"pageUp": function(e){
|
|
e.preventDefault();
|
|
this.onSpinUpAlternate();
|
|
},
|
|
|
|
"pageDown": function(e){
|
|
e.preventDefault();
|
|
this.onSpinDownAlternate();
|
|
},
|
|
|
|
scope: this
|
|
});
|
|
|
|
this.repeater = new Ext.util.ClickRepeater(this.trigger, {
|
|
accelerate: this.accelerate
|
|
});
|
|
this.field.mon(this.repeater, "click", this.onTriggerClick, this, {
|
|
preventDefault: true
|
|
});
|
|
|
|
this.field.mon(this.trigger, {
|
|
mouseover: this.onMouseOver,
|
|
mouseout: this.onMouseOut,
|
|
mousemove: this.onMouseMove,
|
|
mousedown: this.onMouseDown,
|
|
mouseup: this.onMouseUp,
|
|
scope: this,
|
|
preventDefault: true
|
|
});
|
|
|
|
this.field.mon(this.wrap, "mousewheel", this.handleMouseWheel, this);
|
|
|
|
this.dd.setXConstraint(0, 0, 10);
|
|
this.dd.setYConstraint(1500, 1500, 10);
|
|
this.dd.endDrag = this.endDrag.createDelegate(this);
|
|
this.dd.startDrag = this.startDrag.createDelegate(this);
|
|
this.dd.onDrag = this.onDrag.createDelegate(this);
|
|
},
|
|
|
|
onMouseOver: function(){
|
|
if (this.disabled) {
|
|
return;
|
|
}
|
|
var middle = this.getMiddle();
|
|
this.tmpHoverClass = (Ext.EventObject.getPageY() < middle) ? 'x-form-spinner-overup' : 'x-form-spinner-overdown';
|
|
this.trigger.addClass(this.tmpHoverClass);
|
|
},
|
|
|
|
//private
|
|
onMouseOut: function(){
|
|
this.trigger.removeClass(this.tmpHoverClass);
|
|
},
|
|
|
|
//private
|
|
onMouseMove: function(){
|
|
if (this.disabled) {
|
|
return;
|
|
}
|
|
var middle = this.getMiddle();
|
|
if (((Ext.EventObject.getPageY() > middle) && this.tmpHoverClass == "x-form-spinner-overup") ||
|
|
((Ext.EventObject.getPageY() < middle) && this.tmpHoverClass == "x-form-spinner-overdown")) {
|
|
}
|
|
},
|
|
|
|
//private
|
|
onMouseDown: function(){
|
|
if (this.disabled) {
|
|
return;
|
|
}
|
|
var middle = this.getMiddle();
|
|
this.tmpClickClass = (Ext.EventObject.getPageY() < middle) ? 'x-form-spinner-clickup' : 'x-form-spinner-clickdown';
|
|
this.trigger.addClass(this.tmpClickClass);
|
|
},
|
|
|
|
//private
|
|
onMouseUp: function(){
|
|
this.trigger.removeClass(this.tmpClickClass);
|
|
},
|
|
|
|
//private
|
|
onTriggerClick: function(){
|
|
if (this.disabled || this.el.dom.readOnly) {
|
|
return;
|
|
}
|
|
var middle = this.getMiddle();
|
|
var ud = (Ext.EventObject.getPageY() < middle) ? 'Up' : 'Down';
|
|
this['onSpin' + ud]();
|
|
},
|
|
|
|
//private
|
|
getMiddle: function(){
|
|
var t = this.trigger.getTop();
|
|
var h = this.trigger.getHeight();
|
|
var middle = t + (h / 2);
|
|
return middle;
|
|
},
|
|
|
|
//private
|
|
//checks if control is allowed to spin
|
|
isSpinnable: function(){
|
|
if (this.disabled || this.el.dom.readOnly) {
|
|
Ext.EventObject.preventDefault(); //prevent scrolling when disabled/readonly
|
|
return false;
|
|
}
|
|
return true;
|
|
},
|
|
|
|
handleMouseWheel: function(e){
|
|
//disable scrolling when not focused
|
|
if (this.wrap.hasClass('x-trigger-wrap-focus') == false) {
|
|
return;
|
|
}
|
|
|
|
var delta = e.getWheelDelta();
|
|
if (delta > 0) {
|
|
this.onSpinUp();
|
|
e.stopEvent();
|
|
}
|
|
else
|
|
if (delta < 0) {
|
|
this.onSpinDown();
|
|
e.stopEvent();
|
|
}
|
|
},
|
|
|
|
//private
|
|
startDrag: function(){
|
|
this.proxy.show();
|
|
this._previousY = Ext.fly(this.dd.getDragEl()).getTop();
|
|
},
|
|
|
|
//private
|
|
endDrag: function(){
|
|
this.proxy.hide();
|
|
},
|
|
|
|
//private
|
|
onDrag: function(){
|
|
if (this.disabled) {
|
|
return;
|
|
}
|
|
var y = Ext.fly(this.dd.getDragEl()).getTop();
|
|
var ud = '';
|
|
|
|
if (this._previousY > y) {
|
|
ud = 'Up';
|
|
} //up
|
|
if (this._previousY < y) {
|
|
ud = 'Down';
|
|
} //down
|
|
if (ud != '') {
|
|
this['onSpin' + ud]();
|
|
}
|
|
|
|
this._previousY = y;
|
|
},
|
|
|
|
//private
|
|
onSpinUp: function(){
|
|
if (this.isSpinnable() == false) {
|
|
return;
|
|
}
|
|
if (Ext.EventObject.shiftKey == true) {
|
|
this.onSpinUpAlternate();
|
|
return;
|
|
}
|
|
else {
|
|
this.spin(false, false);
|
|
}
|
|
this.field.fireEvent("spin", this.field);
|
|
this.field.fireEvent("spinup", this.field);
|
|
},
|
|
|
|
//private
|
|
onSpinDown: function(){
|
|
if (this.isSpinnable() == false) {
|
|
return;
|
|
}
|
|
if (Ext.EventObject.shiftKey == true) {
|
|
this.onSpinDownAlternate();
|
|
return;
|
|
}
|
|
else {
|
|
this.spin(true, false);
|
|
}
|
|
this.field.fireEvent("spin", this.field);
|
|
this.field.fireEvent("spindown", this.field);
|
|
},
|
|
|
|
//private
|
|
onSpinUpAlternate: function(){
|
|
if (this.isSpinnable() == false) {
|
|
return;
|
|
}
|
|
this.spin(false, true);
|
|
this.field.fireEvent("spin", this);
|
|
this.field.fireEvent("spinup", this);
|
|
},
|
|
|
|
//private
|
|
onSpinDownAlternate: function(){
|
|
if (this.isSpinnable() == false) {
|
|
return;
|
|
}
|
|
this.spin(true, true);
|
|
this.field.fireEvent("spin", this);
|
|
this.field.fireEvent("spindown", this);
|
|
},
|
|
|
|
spin: function(down, alternate){
|
|
var v = parseFloat(this.field.getValue());
|
|
var incr = (alternate == true) ? this.alternateIncrementValue : this.incrementValue;
|
|
(down == true) ? v -= incr : v += incr;
|
|
|
|
v = (isNaN(v)) ? this.defaultValue : v;
|
|
v = this.fixBoundries(v);
|
|
this.field.setRawValue(v);
|
|
},
|
|
|
|
fixBoundries: function(value){
|
|
var v = value;
|
|
|
|
if (this.field.minValue != undefined && v < this.field.minValue) {
|
|
v = this.field.minValue;
|
|
}
|
|
if (this.field.maxValue != undefined && v > this.field.maxValue) {
|
|
v = this.field.maxValue;
|
|
}
|
|
|
|
return this.fixPrecision(v);
|
|
},
|
|
|
|
// private
|
|
fixPrecision: function(value){
|
|
var nan = isNaN(value);
|
|
if (!this.field.allowDecimals || this.field.decimalPrecision == -1 || nan || !value) {
|
|
return nan ? '' : value;
|
|
}
|
|
return parseFloat(parseFloat(value).toFixed(this.field.decimalPrecision));
|
|
},
|
|
|
|
doDestroy: function(){
|
|
if (this.trigger) {
|
|
this.trigger.remove();
|
|
}
|
|
if (this.wrap) {
|
|
this.wrap.remove();
|
|
delete this.field.wrap;
|
|
}
|
|
|
|
if (this.splitter) {
|
|
this.splitter.remove();
|
|
}
|
|
|
|
if (this.dd) {
|
|
this.dd.unreg();
|
|
this.dd = null;
|
|
}
|
|
|
|
if (this.proxy) {
|
|
this.proxy.remove();
|
|
}
|
|
|
|
if (this.repeater) {
|
|
this.repeater.purgeListeners();
|
|
}
|
|
if (this.mimicing){
|
|
Ext.get(Ext.isIE ? document.body : document).un("mousedown", this.mimicBlur, this);
|
|
}
|
|
}
|
|
});
|
|
|
|
//backwards compat
|
|
Ext.form.Spinner = Ext.ux.Spinner;
|
|
/*!
|
|
* Ext JS Library 3.3.1
|
|
* Copyright(c) 2006-2010 Sencha Inc.
|
|
* licensing@sencha.com
|
|
* http://www.sencha.com/license
|
|
*/
|
|
Ext.ns('Ext.ux.form');
|
|
|
|
/**
|
|
* @class Ext.ux.form.SpinnerField
|
|
* @extends Ext.form.NumberField
|
|
* Creates a field utilizing Ext.ux.Spinner
|
|
* @xtype spinnerfield
|
|
*/
|
|
Ext.ux.form.SpinnerField = Ext.extend(Ext.form.NumberField, {
|
|
actionMode: 'wrap',
|
|
deferHeight: true,
|
|
autoSize: Ext.emptyFn,
|
|
onBlur: Ext.emptyFn,
|
|
adjustSize: Ext.BoxComponent.prototype.adjustSize,
|
|
|
|
constructor: function(config) {
|
|
var spinnerConfig = Ext.copyTo({}, config, 'incrementValue,alternateIncrementValue,accelerate,defaultValue,triggerClass,splitterClass');
|
|
|
|
var spl = this.spinner = new Ext.ux.Spinner(spinnerConfig);
|
|
|
|
var plugins = config.plugins
|
|
? (Ext.isArray(config.plugins)
|
|
? config.plugins.push(spl)
|
|
: [config.plugins, spl])
|
|
: spl;
|
|
|
|
Ext.ux.form.SpinnerField.superclass.constructor.call(this, Ext.apply(config, {plugins: plugins}));
|
|
},
|
|
|
|
// private
|
|
getResizeEl: function(){
|
|
return this.wrap;
|
|
},
|
|
|
|
// private
|
|
getPositionEl: function(){
|
|
return this.wrap;
|
|
},
|
|
|
|
// private
|
|
alignErrorIcon: function(){
|
|
if (this.wrap) {
|
|
this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
|
|
}
|
|
},
|
|
|
|
validateBlur: function(){
|
|
return true;
|
|
}
|
|
});
|
|
|
|
Ext.reg('spinnerfield', Ext.ux.form.SpinnerField);
|
|
|
|
//backwards compat
|
|
Ext.form.SpinnerField = Ext.ux.form.SpinnerField;
|
|
|
|
/*!
|
|
* Ext JS Library 3.3.1
|
|
* Copyright(c) 2006-2010 Sencha Inc.
|
|
* licensing@sencha.com
|
|
* http://www.sencha.com/license
|
|
*/
|
|
Ext.ns('Ext.ux.form');
|
|
|
|
/**
|
|
* @class Ext.ux.form.TextFieldSubmit
|
|
* @extends Ext.form.TriggerField
|
|
* Creates a text field with a submit trigger button
|
|
* @xtype textfieldsubmit
|
|
*/
|
|
Ext.ux.form.TextFieldSubmit = Ext.extend(Ext.form.TriggerField, {
|
|
hideTrigger: true,
|
|
|
|
triggerClass: 'x-form-submit-trigger',
|
|
|
|
enableKeyEvents: true,
|
|
|
|
onTriggerClick: function() {
|
|
this.setHideTrigger(true);
|
|
if (this.isValid()) {
|
|
this.fireEvent('triggerclick', this);
|
|
} else {
|
|
this.setValue(this.startValue);
|
|
}
|
|
},
|
|
|
|
initEvents: function() {
|
|
Ext.ux.form.TextFieldSubmit.superclass.initEvents.call(this);
|
|
this.on('keyup', function(field, event) {
|
|
if (event.getKey() != event.ENTER && this.isValid()) {
|
|
this.setHideTrigger(false);
|
|
} else {
|
|
this.setHideTrigger(true);
|
|
}
|
|
});
|
|
this.on('keypress', function(field, event) {
|
|
if (event.getKey() == event.ENTER) {
|
|
event.stopEvent();
|
|
this.onTriggerClick();
|
|
}
|
|
}, this);
|
|
}
|
|
});
|
|
|
|
Ext.reg('textfieldsubmit', Ext.ux.form.TextFieldSubmit);
|
|
|
|
//backwards compat
|
|
Ext.form.TextFieldSubmit = Ext.ux.form.TextFieldSubmit;
|
|
|
|
/*!
|
|
* Ext JS Library 3.1.1
|
|
* Copyright(c) 2006-2010 Ext JS, LLC
|
|
* licensing@extjs.com
|
|
* http://www.extjs.com/license
|
|
*/
|
|
Ext.ns('Ext.ux.grid');
|
|
|
|
/**
|
|
* @class Ext.ux.grid.CheckColumn
|
|
* @extends Object
|
|
* GridPanel plugin to add a column with check boxes to a grid.
|
|
* <p>Example usage:</p>
|
|
* <pre><code>
|
|
// create the column
|
|
var checkColumn = new Ext.grid.CheckColumn({
|
|
header: 'Indoor?',
|
|
dataIndex: 'indoor',
|
|
id: 'check',
|
|
width: 55
|
|
});
|
|
|
|
// add the column to the column model
|
|
var cm = new Ext.grid.ColumnModel([{
|
|
header: 'Foo',
|
|
...
|
|
},
|
|
checkColumn
|
|
]);
|
|
|
|
// create the grid
|
|
var grid = new Ext.grid.EditorGridPanel({
|
|
...
|
|
cm: cm,
|
|
plugins: [checkColumn], // include plugin
|
|
...
|
|
});
|
|
* </code></pre>
|
|
* In addition to storing a Boolean value within the record data, this
|
|
* class toggles a css class between <tt>'x-grid3-check-col'</tt> and
|
|
* <tt>'x-grid3-check-col-on'</tt> to alter the background image used for
|
|
* a column.
|
|
*/
|
|
Ext.ux.grid.CheckColumn = function(config){
|
|
Ext.apply(this, config);
|
|
if(!this.id){
|
|
this.id = Ext.id();
|
|
}
|
|
this.renderer = this.renderer.createDelegate(this);
|
|
};
|
|
|
|
Ext.ux.grid.CheckColumn.prototype ={
|
|
init : function(grid){
|
|
this.grid = grid;
|
|
this.grid.on('render', function(){
|
|
var view = this.grid.getView();
|
|
view.mainBody.on('mousedown', this.onMouseDown, this);
|
|
}, this);
|
|
},
|
|
|
|
onMouseDown : function(e, t){
|
|
if(Ext.fly(t).hasClass(this.createId())){
|
|
e.stopEvent();
|
|
var index = this.grid.getView().findRowIndex(t);
|
|
var record = this.grid.store.getAt(index);
|
|
record.set(this.dataIndex, !record.data[this.dataIndex]);
|
|
}
|
|
},
|
|
|
|
renderer : function(v, p, record){
|
|
p.css += ' x-grid3-check-col-td';
|
|
return String.format('<div class="x-grid3-check-col{0} {1}"> </div>', v ? '-on' : '', this.createId());
|
|
},
|
|
|
|
createId : function(){
|
|
return 'x-grid3-cc-' + this.id;
|
|
}
|
|
};
|
|
|
|
// register ptype
|
|
Ext.preg('checkcolumn', Ext.ux.grid.CheckColumn);
|
|
|
|
// backwards compat
|
|
Ext.grid.CheckColumn = Ext.ux.grid.CheckColumn;
|
|
Ext.ux.grid.SingleSelectCheckColumn = Ext.extend(Ext.ux.grid.CheckColumn, {
|
|
onMouseDown : function(e, t){
|
|
if(Ext.fly(t).hasClass('x-grid3-cc-'+this.id)){
|
|
e.stopEvent();
|
|
var index = this.grid.getView().findRowIndex(t),
|
|
dataIndex = this.dataIndex;
|
|
this.grid.store.each(function(record, i){
|
|
var value = (i == index && record.get(dataIndex) != true);
|
|
if(value != record.get(dataIndex)){
|
|
record.set(dataIndex, value);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
/**
|
|
* @author schiesser
|
|
*/
|
|
Ext.ns('Ext.ux.grid');
|
|
|
|
Ext.ux.grid.ItemDeleter = Ext.extend(Ext.grid.RowSelectionModel, {
|
|
width: 25,
|
|
sortable: false,
|
|
dataIndex: 0, // this is needed, otherwise there will be an error
|
|
|
|
menuDisabled: true,
|
|
fixed: true,
|
|
id: 'deleter',
|
|
|
|
initEvents: function(){
|
|
Ext.ux.grid.ItemDeleter.superclass.initEvents.call(this);
|
|
this.grid.on('cellclick', function(grid, rowIndex, columnIndex, e){
|
|
if(columnIndex==grid.getColumnModel().getIndexById('deleter')) {
|
|
var record = grid.getStore().getAt(rowIndex);
|
|
grid.getStore().remove(record);
|
|
grid.getView().refresh();
|
|
}
|
|
});
|
|
},
|
|
|
|
renderer: function(v, p, record, rowIndex){
|
|
return '<div class="remove"> </div>';
|
|
}
|
|
});
|
|
|
|
Ext.namespace('TYPO3.Form.Wizard.Helpers');
|
|
|
|
TYPO3.Form.Wizard.Helpers.History = Ext.extend(Ext.util.Observable, {
|
|
/**
|
|
* @cfg {Integer} maximum
|
|
* Maximum steps to go back or forward in history
|
|
*/
|
|
maximum: 20,
|
|
|
|
/**
|
|
* @cfg {Integer} marker
|
|
* The current step in the history
|
|
*/
|
|
marker: 0,
|
|
|
|
/**
|
|
* @cfg {Array} history
|
|
* Holds the configuration for each step in history
|
|
*/
|
|
history: [],
|
|
|
|
/**
|
|
* #cfg {String} undoButtonId
|
|
* The id of the undo button
|
|
*/
|
|
undoButtonId: 'formwizard-history-undo',
|
|
|
|
/**
|
|
* #cfg {String} redoButtonId
|
|
* The id of the redo button
|
|
*/
|
|
redoButtonId: 'formwizard-history-redo',
|
|
|
|
/**
|
|
* Constructor
|
|
*
|
|
* @param config
|
|
*/
|
|
constructor: function(config){
|
|
// Call our superclass constructor to complete construction process.
|
|
TYPO3.Form.Wizard.Helpers.History.superclass.constructor.call(this, config);
|
|
},
|
|
|
|
/**
|
|
* Called when a component is added to a container or there was a change in
|
|
* one of the form components
|
|
*
|
|
* Gets the configuration of all (nested) components, starting at
|
|
* viewport-right, and adds this configuration to the history
|
|
*
|
|
* @returns {void}
|
|
*/
|
|
setHistory: function() {
|
|
var configuration = Ext.getCmp('formwizard-right').getConfiguration();
|
|
this.addToHistory(configuration);
|
|
},
|
|
|
|
/**
|
|
* Add a snapshot to the history
|
|
*
|
|
* @param {Object} configuration The form configuration snapshot
|
|
* @return {void}
|
|
*/
|
|
addToHistory: function(configuration) {
|
|
while (this.history.length > this.marker) {
|
|
this.history.pop();
|
|
}
|
|
this.history.push(Ext.encode(configuration));
|
|
while (this.history.length > this.maximum) {
|
|
this.history.shift();
|
|
}
|
|
this.marker = this.history.length;
|
|
this.buttons();
|
|
},
|
|
|
|
/**
|
|
* Get the current snapshot from the history
|
|
*
|
|
* @return {Object} The current snapshot
|
|
*/
|
|
refresh: function() {
|
|
var refreshObject = Ext.decode(this.history[this.marker-1]);
|
|
Ext.getCmp('formwizard-right').loadConfiguration(refreshObject);
|
|
},
|
|
|
|
/**
|
|
* Get the previous snapshot from the history if available
|
|
*
|
|
* Unsets the active element, because this element will not be available anymore
|
|
*
|
|
* @return {Object} The previous snapshot
|
|
*/
|
|
undo: function() {
|
|
if (this.marker >= 1) {
|
|
this.marker--;
|
|
var undoObject = Ext.decode(this.history[this.marker-1]);
|
|
this.buttons();
|
|
Ext.getCmp('formwizard-right').loadConfiguration(undoObject);
|
|
TYPO3.Form.Wizard.Helpers.Element.unsetActive();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Get the next snapshot from the history if available
|
|
*
|
|
* Unsets the active element, because this element will not be available anymore
|
|
*
|
|
* @return {Object} The next snapshot
|
|
*/
|
|
redo: function() {
|
|
if (this.history.length > this.marker) {
|
|
this.marker++;
|
|
var redoObject = Ext.decode(this.history[this.marker-1]);
|
|
this.buttons();
|
|
Ext.getCmp('formwizard-right').loadConfiguration(redoObject);
|
|
TYPO3.Form.Wizard.Helpers.Element.unsetActive();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Turn the undo/redo buttons on or off
|
|
* according to marker in the history
|
|
*
|
|
* @return {void}
|
|
*/
|
|
buttons: function() {
|
|
var undoButton = Ext.get(this.undoButtonId);
|
|
var redoButton = Ext.get(this.redoButtonId);
|
|
if (this.marker > 1) {
|
|
undoButton.show();
|
|
} else {
|
|
undoButton.hide();
|
|
}
|
|
if (this.history.length > this.marker) {
|
|
redoButton.show();
|
|
} else {
|
|
redoButton.hide();
|
|
}
|
|
}
|
|
});
|
|
|
|
TYPO3.Form.Wizard.Helpers.History = new TYPO3.Form.Wizard.Helpers.History();
|
|
Ext.namespace('TYPO3.Form.Wizard.Helpers');
|
|
|
|
TYPO3.Form.Wizard.Helpers.Element = Ext.extend(Ext.util.Observable, {
|
|
/**
|
|
* @cfg {Object} active
|
|
* The current active form element
|
|
*/
|
|
active: null,
|
|
|
|
/**
|
|
* Constructor
|
|
*
|
|
* @param config
|
|
*/
|
|
constructor: function(config){
|
|
// Adds the specified events to the list of events which this Observable may fire.
|
|
this.addEvents({
|
|
'setactive': true
|
|
});
|
|
|
|
// Call our superclass constructor to complete construction process.
|
|
TYPO3.Form.Wizard.Helpers.Element.superclass.constructor.call(this, config);
|
|
},
|
|
|
|
/**
|
|
* Fires the setactive event when a component is set as active
|
|
*
|
|
* @param component
|
|
*/
|
|
setActive: function(component) {
|
|
var optionsTabIsValid = Ext.getCmp('formwizard-left-options').tabIsValid();
|
|
|
|
if (optionsTabIsValid) {
|
|
if (component == this.active) {
|
|
this.active = null;
|
|
} else {
|
|
this.active = component;
|
|
}
|
|
this.fireEvent('setactive', this.active);
|
|
} else {
|
|
Ext.MessageBox.show({
|
|
title: TYPO3.l10n.localize('options_error'),
|
|
msg: TYPO3.l10n.localize('options_error_message'),
|
|
icon: Ext.MessageBox.ERROR,
|
|
buttons: Ext.MessageBox.OK
|
|
});
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Fires the setactive event when a component is unset.
|
|
*
|
|
* This means when the element is destroyed or when the form is reloaded
|
|
* using undo or redo
|
|
*
|
|
* @param component
|
|
*/
|
|
unsetActive: function(component) {
|
|
if (
|
|
this.active && (
|
|
(component && component.getId() == this.active.getId()) ||
|
|
!component
|
|
)
|
|
){
|
|
this.active = null;
|
|
this.fireEvent('setactive');
|
|
}
|
|
}
|
|
});
|
|
|
|
TYPO3.Form.Wizard.Helpers.Element = new TYPO3.Form.Wizard.Helpers.Element();
|
|
Ext.namespace('TYPO3.Form.Wizard');
|
|
|
|
/**
|
|
* Button group to show on top of the form elements
|
|
*
|
|
* Most elements contain buttons to delete or edit the item. These buttons are
|
|
* grouped in this component
|
|
*
|
|
* @class TYPO3.Form.Wizard.ButtonGroup
|
|
* @extends Ext.Container
|
|
*/
|
|
TYPO3.Form.Wizard.ButtonGroup = Ext.extend(Ext.Container, {
|
|
/**
|
|
* @cfg {String} cls
|
|
* An optional extra CSS class that will be added to this component's
|
|
* Element (defaults to ''). This can be useful for adding customized styles
|
|
* to the component or any of its children using standard CSS rules.
|
|
*/
|
|
cls: 'buttongroup',
|
|
|
|
/**
|
|
* @cfg {Object|Function} defaults
|
|
* This option is a means of applying default settings to all added items
|
|
* whether added through the items config or via the add or insert methods.
|
|
*/
|
|
defaults: {
|
|
xtype: 'button',
|
|
template: new Ext.Template(
|
|
'<span id="{4}"><button type="{0}" class="{3}"></button></span>'
|
|
),
|
|
tooltipType: 'title'
|
|
},
|
|
|
|
/** @cfg {Boolean} forceLayout
|
|
* If true the container will force a layout initially even if hidden or
|
|
* collapsed. This option is useful for forcing forms to render in collapsed
|
|
* or hidden containers. (defaults to false).
|
|
*/
|
|
forceLayout: true,
|
|
|
|
/**
|
|
* Constructor
|
|
*/
|
|
initComponent: function() {
|
|
var config = {
|
|
items: [
|
|
{
|
|
iconCls: 't3-icon t3-icon-actions t3-icon-actions-edit t3-icon-edit-delete',
|
|
tooltip: TYPO3.l10n.localize('elements_button_delete'),
|
|
handler: this.removeElement,
|
|
scope: this
|
|
}, {
|
|
iconCls: 't3-icon t3-icon-actions t3-icon-actions-document t3-icon-document-open',
|
|
tooltip: TYPO3.l10n.localize('elements_button_edit'),
|
|
handler: this.setActive,
|
|
scope: this
|
|
}
|
|
]
|
|
};
|
|
|
|
// apply config
|
|
Ext.apply(this, Ext.apply(this.initialConfig, config));
|
|
|
|
// call parent
|
|
TYPO3.Form.Wizard.ButtonGroup.superclass.initComponent.apply(this, arguments);
|
|
},
|
|
|
|
/**
|
|
* Called by the click event of the remove button
|
|
*
|
|
* When clicking the remove button a confirmation will be asked by the
|
|
* container this button group is in.
|
|
*/
|
|
removeElement: function(button, event) {
|
|
event.stopPropagation();
|
|
this.ownerCt.confirmDeleteElement();
|
|
},
|
|
|
|
/**
|
|
* Called by the click event of the edit button
|
|
*
|
|
* Tells the element helper that this component is set as the active one
|
|
*/
|
|
setActive: function(button, event) {
|
|
this.ownerCt.setActive(event, event.getTarget());
|
|
}
|
|
});
|
|
|
|
Ext.reg('typo3-form-wizard-buttongroup', TYPO3.Form.Wizard.ButtonGroup);
|
|
Ext.namespace('TYPO3.Form.Wizard');
|
|
|
|
/**
|
|
* Container abstract
|
|
*
|
|
* There are only two containers in a form, the form itself and fieldsets.
|
|
*
|
|
* @class TYPO3.Form.Wizard.Elements.Container
|
|
* @extends Ext.Container
|
|
*/
|
|
TYPO3.Form.Wizard.Container = Ext.extend(Ext.Container, {
|
|
/**
|
|
* @cfg {Mixed} autoEl
|
|
* A tag name or DomHelper spec used to create the Element which will
|
|
* encapsulate this Component.
|
|
*/
|
|
autoEl: 'ol',
|
|
|
|
/**
|
|
* @cfg {String} cls
|
|
* An optional extra CSS class that will be added to this component's
|
|
* Element (defaults to ''). This can be useful for adding customized styles
|
|
* to the component or any of its children using standard CSS rules.
|
|
*/
|
|
cls: 'formwizard-container',
|
|
|
|
/**
|
|
* @cfg {Object|Function} defaults
|
|
* This option is a means of applying default settings to all added items
|
|
* whether added through the items config or via the add or insert methods.
|
|
*/
|
|
defaults: {
|
|
autoHeight: true
|
|
},
|
|
|
|
/**
|
|
* Constructor
|
|
*
|
|
* Add the dummy to the container
|
|
*/
|
|
constructor: function(config) {
|
|
Ext.apply(this, {
|
|
items: [
|
|
{
|
|
xtype: 'typo3-form-wizard-elements-dummy'
|
|
}
|
|
]
|
|
});
|
|
TYPO3.Form.Wizard.Container.superclass.constructor.apply(this, arguments);
|
|
},
|
|
|
|
|
|
/**
|
|
* Constructor
|
|
*/
|
|
initComponent: function() {
|
|
var config = {};
|
|
|
|
// apply config
|
|
Ext.apply(this, Ext.apply(this.initialConfig, config));
|
|
|
|
// call parent
|
|
TYPO3.Form.Wizard.Container.superclass.initComponent.apply(this, arguments);
|
|
|
|
// Initialize the drag and drop zone after rendering
|
|
if (this.hasDragAndDrop) {
|
|
this.on('render', this.initializeDragAndDrop, this);
|
|
}
|
|
|
|
this.on('render', this.checkOnEmpty, this);
|
|
|
|
// Initialize the remove event, which will be fired when a component is removed from this container
|
|
this.on('remove', this.checkOnEmpty, this);
|
|
},
|
|
|
|
/**
|
|
* Initialize the drag and drop zones
|
|
*
|
|
* @param container
|
|
*/
|
|
initializeDragAndDrop: function(container) {
|
|
/**
|
|
* Initialize the drag zone
|
|
*
|
|
* A container can contain elements which can be moved within this and
|
|
* other (nested) containers.
|
|
*/
|
|
container.dragZone = new Ext.dd.DragZone(container.getEl(), {
|
|
/**
|
|
* Called when a mousedown occurs in this container. Looks in Ext.dd.Registry
|
|
* for a valid target to drag based on the mouse down. Override this method
|
|
* to provide your own lookup logic (e.g. finding a child by class name). Make sure your returned
|
|
* object has a "ddel" attribute (with an HTML Element) for other functions to work.
|
|
* @param {EventObject} element The mouse down event element
|
|
* @return {Object} The dragData
|
|
*/
|
|
getDragData: function(element) {
|
|
var sourceElement = element.getTarget('.formwizard-element');
|
|
var sourceComponent = Ext.getCmp(sourceElement.id);
|
|
if (sourceElement && sourceComponent.isEditable) {
|
|
clonedElement = sourceElement.cloneNode(true);
|
|
clonedElement.id = Ext.id();
|
|
return container.dragData = {
|
|
sourceEl: sourceElement,
|
|
repairXY: Ext.fly(sourceElement).getXY(),
|
|
ddel: clonedElement
|
|
};
|
|
}
|
|
},
|
|
|
|
onStartDrag: function(x, y) {
|
|
Ext.getCmp('formwizard').addClass('hover-move');
|
|
},
|
|
|
|
endDrag: function(event) {
|
|
Ext.getCmp('formwizard').removeClass('hover-move');
|
|
},
|
|
|
|
/**
|
|
* Called before a repair of an invalid drop to get the XY to animate to.
|
|
* By default returns the XY of this.dragData.ddel
|
|
* @param {EventObject} e The mouse up event
|
|
* @return {Array} The xy location (e.g. [100, 200])
|
|
*/
|
|
getRepairXY: function(e) {
|
|
return container.dragData.repairXY;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Initialize the drop zone
|
|
*
|
|
* A container can receive other form elements or other (nested) containers.
|
|
*/
|
|
container.dropZone = new Ext.dd.DropZone(container.getEl(), {
|
|
/**
|
|
* Returns a custom data object associated with the DOM node that is the target of the event. By default
|
|
* this looks up the event target in the Ext.dd.Registry, although you can override this method to
|
|
* provide your own custom lookup.
|
|
*
|
|
* The override has been done here to define if we are having this event on the container or a form element.
|
|
*
|
|
* @param {Event} e The event
|
|
* @return {Object} data The custom data
|
|
*/
|
|
getTargetFromEvent: function(event) {
|
|
|
|
var containerElement = container.getEl();
|
|
var formElementTarget = event.getTarget('.formwizard-element', 10, true);
|
|
var formContainerTarget = event.getTarget('.formwizard-container', 10, true);
|
|
var placeholderTarget = event.getTarget('#element-placeholder', 10, false);
|
|
|
|
if (placeholderTarget) {
|
|
formElementTarget = Ext.DomQuery.selectNode('.target-hover');
|
|
}
|
|
|
|
if (
|
|
container.hasDragAndDrop &&
|
|
formContainerTarget &&
|
|
formElementTarget &&
|
|
formContainerTarget.findParentNode('li', 10, true) == formElementTarget &&
|
|
formContainerTarget == containerElement
|
|
) {
|
|
return null;
|
|
// We are having this event on a form element
|
|
} else if (
|
|
container.hasDragAndDrop &&
|
|
formElementTarget
|
|
) {
|
|
if (placeholderTarget) {
|
|
return formElementTarget;
|
|
}
|
|
return event.getTarget('.formwizard-element');
|
|
// We are having this event on a container
|
|
} else {
|
|
return null;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Called while the DropZone determines that a Ext.dd.DragSource is being dragged over it,
|
|
* but not over any of its registered drop nodes. The default implementation returns this.dropNotAllowed, so
|
|
* it should be overridden to provide the proper feedback if necessary.
|
|
*
|
|
* And so we did ;-) We are not using containers which can receive different elements, so we always return
|
|
* Ext.dd.DropZone.prototype.dropAllowed CSS class.
|
|
*
|
|
* @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
|
|
* @param {Event} e The event
|
|
* @param {Object} data An object containing arbitrary data supplied by the drag source
|
|
* @return {String} status The CSS class that communicates the drop status back to the source so that the
|
|
* underlying Ext.dd.StatusProxy can be updated
|
|
*/
|
|
onContainerOver: function(dd, e, data) {
|
|
if (Ext.get('element-placeholder')) {
|
|
Ext.get('element-placeholder').remove();
|
|
}
|
|
return Ext.dd.DropZone.prototype.dropAllowed;
|
|
},
|
|
|
|
/**
|
|
* Called when the DropZone determines that a Ext.dd.DragSource has been dropped on it,
|
|
* but not on any of its registered drop nodes. The default implementation returns false, so it should be
|
|
* overridden to provide the appropriate processing of the drop event if you need the drop zone itself to
|
|
* be able to accept drops. It should return true when valid so that the drag source's repair action does not run.
|
|
*
|
|
* This is a tricky part. Because we are using multiple dropzones which are on top of each other, the event will
|
|
* be called multiple times, for each group one time. We cannot prevent this by disabling event bubbling and we
|
|
* dont't want to override the core of ExtJS. To prevent multiple creation of the same object, we add the variable
|
|
* 'processed' to the 'data' object. If it has been processed on drop, it will not be done a second time.
|
|
*
|
|
* @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
|
|
* @param {Event} e The event
|
|
* @param {Object} data An object containing arbitrary data supplied by the drag source
|
|
* @return {Boolean} True if the drop was valid, else false
|
|
*/
|
|
onContainerDrop: function(dd, e, data) {
|
|
if (
|
|
container.hasDragAndDrop &&
|
|
!data.processed
|
|
) {
|
|
var dropComponent = Ext.getCmp(data.sourceEl.id);
|
|
container.dropElement(dropComponent, 'container');
|
|
data.processed = true;
|
|
}
|
|
return true;
|
|
},
|
|
|
|
/**
|
|
* Called when the DropZone determines that a Ext.dd.DragSource has entered a drop node
|
|
* that has either been registered or detected by a configured implementation of getTargetFromEvent.
|
|
* This method has no default implementation and should be overridden to provide
|
|
* node-specific processing if necessary.
|
|
*
|
|
* Our implementation adds a dummy placeholder before or after the element the user is hovering over.
|
|
* This placeholder will show the user where the dragged element will be dropped in the form.
|
|
*
|
|
* @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
|
|
* getTargetFromEvent for this node)
|
|
* @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
|
|
* @param {Event} e The event
|
|
* @param {Object} data An object containing arbitrary data supplied by the drag source
|
|
*/
|
|
onNodeEnter : function(target, dd, e, data) {
|
|
if (
|
|
Ext.get(data.sourceEl).hasClass('formwizard-element') &&
|
|
target.id != data.sourceEl.id
|
|
) {
|
|
var dropPosition = this.getDropPosition(target, dd);
|
|
if (dropPosition == 'above') {
|
|
Ext.DomHelper.insertBefore(target, {
|
|
tag: 'li',
|
|
id: 'element-placeholder',
|
|
html: ' '
|
|
});
|
|
} else {
|
|
Ext.DomHelper.insertAfter(target, {
|
|
tag: 'li',
|
|
id: 'element-placeholder',
|
|
html: ' '
|
|
});
|
|
}
|
|
Ext.fly(target).addClass('target-hover');
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Called when the DropZone determines that a Ext.dd.DragSource has been dragged out of
|
|
* the drop node without dropping. This method has no default implementation and should be overridden to provide
|
|
* node-specific processing if necessary.
|
|
*
|
|
* Removes the temporary placeholder and the hover class from the element
|
|
*
|
|
* @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
|
|
* getTargetFromEvent for this node)
|
|
* @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
|
|
* @param {Event} e The event
|
|
* @param {Object} data An object containing arbitrary data supplied by the drag source
|
|
*/
|
|
onNodeOut : function(target, dd, e, data) {
|
|
if (
|
|
Ext.get(data.sourceEl).hasClass('formwizard-element') &&
|
|
target.id != data.sourceEl.id
|
|
) {
|
|
if (e.type != 'mouseup') {
|
|
if (Ext.get('element-placeholder')) {
|
|
Ext.get('element-placeholder').remove();
|
|
}
|
|
Ext.fly(target).removeClass('target-hover');
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Called while the DropZone determines that a Ext.dd.DragSource is over a drop node
|
|
* that has either been registered or detected by a configured implementation of getTargetFromEvent.
|
|
* The default implementation returns this.dropNotAllowed, so it should be
|
|
* overridden to provide the proper feedback.
|
|
*
|
|
* Based on the cursor position on the node we are hovering over, the temporary placeholder will be put
|
|
* above or below this node. If the position changes, the placeholder will be removed and put at the
|
|
* right spot.
|
|
*
|
|
* @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
|
|
* getTargetFromEvent for this node)
|
|
* @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
|
|
* @param {Event} e The event
|
|
* @param {Object} data An object containing arbitrary data supplied by the drag source
|
|
* @return {String} status The CSS class that communicates the drop status back to the source so that the
|
|
* underlying Ext.dd.StatusProxy can be updated
|
|
*/
|
|
onNodeOver: function(target, dd, e, data) {
|
|
if (
|
|
Ext.get(data.sourceEl).hasClass('formwizard-element') &&
|
|
target.id != data.sourceEl.id
|
|
) {
|
|
var dropPosition = this.getDropPosition(target, dd);
|
|
// The position of the target moved to the top
|
|
if (
|
|
dropPosition == 'above' &&
|
|
target.nextElementSibling &&
|
|
target.nextElementSibling.id == 'element-placeholder'
|
|
) {
|
|
Ext.get('element-placeholder').remove();
|
|
Ext.DomHelper.insertBefore(target, {
|
|
tag: 'li',
|
|
id: 'element-placeholder',
|
|
html: ' '
|
|
});
|
|
} else if (
|
|
dropPosition == 'below' &&
|
|
target.previousElementSibling &&
|
|
target.previousElementSibling.id == 'element-placeholder'
|
|
) {
|
|
Ext.get('element-placeholder').remove();
|
|
Ext.DomHelper.insertAfter(target, {
|
|
tag: 'li',
|
|
id: 'element-placeholder',
|
|
html: ' '
|
|
});
|
|
}
|
|
return Ext.dd.DropZone.prototype.dropAllowed;
|
|
} else {
|
|
return Ext.dd.DropZone.prototype.dropNotAllowed;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Called when the DropZone determines that a Ext.dd.DragSource has been dropped onto
|
|
* the drop node. The default implementation returns false, so it should be overridden to provide the
|
|
* appropriate processing of the drop event and return true so that the drag source's repair action does not run.
|
|
*
|
|
* Like onContainerDrop this is a tricky part. Because we are using multiple dropzones which are on top of each other, the event will
|
|
* be called multiple times, for each group one time. We cannot prevent this by disabling event bubbling and we
|
|
* dont't want to override the core of ExtJS. To prevent multiple creation of the same object, we add the variable
|
|
* 'processed' to the 'data' object. If it has been processed on drop, it will not be done a second time.
|
|
*
|
|
*
|
|
* @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
|
|
* getTargetFromEvent for this node)
|
|
* @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
|
|
* @param {Event} e The event
|
|
* @param {Object} data An object containing arbitrary data supplied by the drag source
|
|
* @return {Boolean} True if the drop was valid, else false
|
|
*/
|
|
onNodeDrop : function(target, dd, e, data) {
|
|
if (
|
|
Ext.get(data.sourceEl).hasClass('formwizard-element') &&
|
|
target.id != data.sourceEl.id &&
|
|
!data.processed
|
|
) {
|
|
|
|
var dropPosition = this.getDropPosition(target, dd);
|
|
var dropComponent = Ext.getCmp(data.sourceEl.id);
|
|
container.dropElement(dropComponent, dropPosition, target);
|
|
data.processed = true;
|
|
return true;
|
|
}
|
|
},
|
|
/**
|
|
* Defines whether we are hovering at the top or bottom half of a node
|
|
*
|
|
* @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
|
|
* getTargetFromEvent for this node)
|
|
* @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
|
|
* @return {String} above when hovering over the top half, below if at the bottom half.
|
|
*/
|
|
getDropPosition: function(target, dd) {
|
|
var top = Ext.lib.Dom.getY(target);
|
|
var bottom = top + target.offsetHeight;
|
|
var center = ((bottom - top) / 2) + top;
|
|
var yPosition = dd.lastPageY + dd.deltaY;
|
|
if (yPosition < center) {
|
|
return 'above';
|
|
} else if (yPosition >= center) {
|
|
return 'below';
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Called by the dropzones onContainerDrop or onNodeDrop.
|
|
* Adds the component to the container.
|
|
*
|
|
* This function will look if it is a new element from the left buttons, if
|
|
* it is an existing element which is moved within this or from another
|
|
* container. It also decides if it is dropped within an empty container or
|
|
* if it needs a position within the existing elements of this container.
|
|
*
|
|
* @param component
|
|
* @param position
|
|
* @param target
|
|
*/
|
|
dropElement: function(component, position, target) {
|
|
// Check if there are errors in the current active element
|
|
var optionsTabIsValid = Ext.getCmp('formwizard-left-options').tabIsValid();
|
|
|
|
var id = component.id;
|
|
var droppedElement = {};
|
|
|
|
if (Ext.get('element-placeholder')) {
|
|
Ext.get('element-placeholder').remove();
|
|
}
|
|
// Only add or move an element when there is no error in the current active element
|
|
if (optionsTabIsValid) {
|
|
// New element in container
|
|
if (position == 'container') {
|
|
// Check if the dummy is present, which means there are no elements
|
|
var dummy = this.findById('dummy');
|
|
if (dummy) {
|
|
this.remove(dummy, true);
|
|
}
|
|
// Add the new element to the container
|
|
if (component.xtype != 'button') {
|
|
droppedElement = this.add(
|
|
component
|
|
);
|
|
} else {
|
|
droppedElement = this.add({
|
|
xtype: 'typo3-form-wizard-elements-' + id
|
|
});
|
|
}
|
|
|
|
// Moved an element within this container
|
|
} else if (this.findById(id)) {
|
|
droppedElement = this.findById(id);
|
|
var movedElementIndex = 0;
|
|
var targetIndex = this.items.findIndex('id', target.id);
|
|
|
|
if (position == 'above') {
|
|
movedElementIndex = targetIndex;
|
|
} else {
|
|
movedElementIndex = targetIndex + 1;
|
|
}
|
|
|
|
// Tricky part, because this.remove does not remove the DOM element
|
|
// See http://www.sencha.com/forum/showthread.php?102190
|
|
// 1. remove component from container w/o destroying (2nd argument false)
|
|
// 2. remove component's element from container and append it to body
|
|
// 3. add/insert the component to the correct place back in the container
|
|
// 4. call doLayout() on the container
|
|
this.remove(droppedElement, false);
|
|
var element = Ext.get(droppedElement.id);
|
|
element.appendTo(Ext.getBody());
|
|
|
|
this.insert(
|
|
movedElementIndex,
|
|
droppedElement
|
|
);
|
|
|
|
// New element for this container coming from another one
|
|
} else {
|
|
var index = 0;
|
|
var targetIndex = this.items.findIndex('id', target.id);
|
|
|
|
if (position == 'above') {
|
|
index = targetIndex;
|
|
} else {
|
|
index = targetIndex + 1;
|
|
}
|
|
|
|
// Element moved
|
|
if (component.xtype != 'button') {
|
|
droppedElement = this.insert(
|
|
index,
|
|
component
|
|
);
|
|
// Coming from buttons
|
|
} else {
|
|
droppedElement = this.insert(
|
|
index,
|
|
{
|
|
xtype: 'typo3-form-wizard-elements-' + id
|
|
}
|
|
);
|
|
}
|
|
}
|
|
this.doLayout();
|
|
TYPO3.Form.Wizard.Helpers.History.setHistory();
|
|
TYPO3.Form.Wizard.Helpers.Element.setActive(droppedElement);
|
|
|
|
// The current active element has errors, show it!
|
|
} else {
|
|
Ext.MessageBox.show({
|
|
title: TYPO3.l10n.localize('options_error'),
|
|
msg: TYPO3.l10n.localize('options_error_message'),
|
|
icon: Ext.MessageBox.ERROR,
|
|
buttons: Ext.MessageBox.OK
|
|
});
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Remove the element from this container
|
|
*
|
|
* @param element
|
|
*/
|
|
removeElement: function(element) {
|
|
this.remove(element);
|
|
TYPO3.Form.Wizard.Helpers.History.setHistory();
|
|
},
|
|
|
|
/**
|
|
* Called by the 'remove' event of this container.
|
|
*
|
|
* If an item has been removed from this container, except for the dummy
|
|
* element, it will look if there are other items existing. If not, it will
|
|
* put the dummy in this container to tell the user the container needs items.
|
|
*
|
|
* @param container
|
|
* @param component
|
|
*/
|
|
checkOnEmpty: function(container, component) {
|
|
if (component && component.id != 'dummy' || !component) {
|
|
if (this.items.getCount() == 0) {
|
|
this.add({
|
|
xtype: 'typo3-form-wizard-elements-dummy'
|
|
});
|
|
this.doLayout();
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Called by the parent of this component when a change has been made in the
|
|
* form.
|
|
*
|
|
* Constructs an array out of this component and the children to add it to
|
|
* the history or to use when saving the form
|
|
*
|
|
* @returns {Array}
|
|
*/
|
|
getConfiguration: function() {
|
|
var historyConfiguration = {
|
|
hasDragAndDrop: this.hasDragAndDrop
|
|
};
|
|
|
|
if (this.items) {
|
|
historyConfiguration.items = [];
|
|
this.items.each(function(item, index, length) {
|
|
historyConfiguration.items.push(item.getConfiguration());
|
|
}, this);
|
|
}
|
|
return historyConfiguration;
|
|
}
|
|
});
|
|
|
|
Ext.reg('typo3-form-wizard-container', TYPO3.Form.Wizard.Container);
|
|
Ext.namespace('TYPO3.Form.Wizard.Elements');
|
|
|
|
/**
|
|
* Elements abstract
|
|
*
|
|
* @class TYPO3.Form.Wizard.Elements
|
|
* @extends Ext.Container
|
|
*/
|
|
TYPO3.Form.Wizard.Elements = Ext.extend(Ext.Container, {
|
|
/**
|
|
* @cfg {Mixed} autoEl
|
|
* A tag name or DomHelper spec used to create the Element which will
|
|
* encapsulate this Component.
|
|
*/
|
|
autoEl: 'li',
|
|
|
|
/**
|
|
* @cfg {String} cls
|
|
* An optional extra CSS class that will be added to this component's
|
|
* Element (defaults to ''). This can be useful for adding customized styles
|
|
* to the component or any of its children using standard CSS rules.
|
|
*/
|
|
cls: 'formwizard-element',
|
|
|
|
/**
|
|
* @cfg {Object} buttonGroup
|
|
* Reference to the button group
|
|
*/
|
|
buttonGroup: null,
|
|
|
|
/**
|
|
* @cfg {Boolean} isEditable
|
|
* Defines whether the element is editable. If the item is editable,
|
|
* a button group with remove and edit buttons will be added to this element
|
|
* and when the the element is clicked, an event is triggered to edit the
|
|
* element. Some elements, like the dummy, don't need this.
|
|
*/
|
|
isEditable: true,
|
|
|
|
/**
|
|
* @cfg {Object} configuration
|
|
* The configuration of this element.
|
|
* This object contains the configuration of this component. It will be
|
|
* copied to the 'data' variable before rendering. 'data' is deleted after
|
|
* rendering the xtemplate, so we need a copy.
|
|
*/
|
|
configuration: {},
|
|
|
|
/**
|
|
* Constructor
|
|
*/
|
|
initComponent: function() {
|
|
this.addEvents({
|
|
'configurationChange': true
|
|
});
|
|
|
|
var config = {};
|
|
|
|
// apply config
|
|
Ext.apply(this, Ext.apply(this.initialConfig, config));
|
|
|
|
// call parent
|
|
TYPO3.Form.Wizard.Elements.superclass.initComponent.apply(this, arguments);
|
|
|
|
// Add the elementClass to the component
|
|
this.addClass(this.elementClass);
|
|
|
|
// Add the listener setactive for the element helper
|
|
TYPO3.Form.Wizard.Helpers.Element.on('setactive', this.toggleActive, this);
|
|
|
|
// Set the data before rendering
|
|
this.on('beforerender', this.beforeRender, this);
|
|
|
|
// Initialize events after rendering
|
|
this.on('afterrender', this.makeEditable, this);
|
|
|
|
// Remove event listeners after the detruction of this component
|
|
this.on('destroy', this.onDestroy, this);
|
|
},
|
|
|
|
/**
|
|
* Copy this.configuration to this.data before rendering
|
|
*
|
|
* When using tpl together with data, the data variable will be deleted
|
|
* after rendering the component. We do not want to lose this data, so we
|
|
* store it in a different variable 'configuration' which will be copied to
|
|
* data just before rendering
|
|
*
|
|
* All strings within the configuration object are HTML encoded first before
|
|
* displaying
|
|
*
|
|
* @param component This component
|
|
*/
|
|
beforeRender: function(component) {
|
|
this.data = this.encodeConfiguration(this.configuration);
|
|
},
|
|
|
|
/**
|
|
* Html encode all strings in the configuration of an element
|
|
*
|
|
* @param unencodedData The configuration object
|
|
* @returns {Object}
|
|
*/
|
|
encodeConfiguration: function(unencodedData) {
|
|
var encodedData = {};
|
|
|
|
Ext.iterate(unencodedData, function (key, value, object) {
|
|
if (Ext.isString(value)) {
|
|
encodedData[key] = Ext.util.Format.htmlEncode(value);
|
|
} else if (Ext.isObject(value)) {
|
|
encodedData[key] = this.encodeConfiguration(value);
|
|
} else {
|
|
encodedData[key] = value;
|
|
}
|
|
}, this);
|
|
|
|
return encodedData;
|
|
},
|
|
|
|
/**
|
|
* Add the buttongroup and a click event listener to this component when the
|
|
* component is editable.
|
|
*/
|
|
makeEditable: function() {
|
|
if (this.isEditable) {
|
|
if (!this.buttonGroup) {
|
|
this.add({
|
|
xtype: 'typo3-form-wizard-buttongroup',
|
|
ref: 'buttonGroup'
|
|
});
|
|
}
|
|
this.el.un('click', this.setActive, this);
|
|
this.el.on('click', this.setActive, this);
|
|
// Add hover class. Normally this would be done with overCls,
|
|
// but this does not take bubbling (propagation) into account
|
|
this.el.hover(
|
|
function(){
|
|
Ext.fly(this).addClass('hover');
|
|
},
|
|
function(){
|
|
Ext.fly(this).removeClass('hover');
|
|
},
|
|
this.el,
|
|
{
|
|
stopPropagation: true
|
|
}
|
|
);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Called on a click event of this component or when the element is added
|
|
*
|
|
* Tells the element helper that this component is set as the active one and
|
|
* swallows the click event to prevent bubbling
|
|
*
|
|
* @param event
|
|
* @param target
|
|
* @param object
|
|
*/
|
|
setActive: function(event, target, object) {
|
|
TYPO3.Form.Wizard.Helpers.Element.setActive(this);
|
|
event.stopPropagation();
|
|
},
|
|
|
|
/**
|
|
* Called when the element helper is firing the setactive event
|
|
*
|
|
* Adds an extra class 'active' to the element when the current component is
|
|
* the active one, otherwise removes the class 'active' when this component
|
|
* has this class
|
|
* @param component
|
|
*/
|
|
toggleActive: function(component) {
|
|
if (this.isEditable) {
|
|
var element = this.getEl();
|
|
|
|
if (component && component.getId() == this.getId()) {
|
|
if (!element.hasClass('active')) {
|
|
element.addClass('active');
|
|
}
|
|
} else if (element.hasClass('active')) {
|
|
element.removeClass('active');
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Display a confirmation box when the delete button has been pressed.
|
|
*
|
|
* @param event
|
|
* @param target
|
|
* @param object
|
|
*/
|
|
confirmDeleteElement: function(event, target, object) {
|
|
Ext.MessageBox.confirm(
|
|
TYPO3.l10n.localize('elements_confirm_delete_title'),
|
|
TYPO3.l10n.localize('elements_confirm_delete_description'),
|
|
this.deleteElement,
|
|
this
|
|
);
|
|
},
|
|
|
|
/**
|
|
* Delete the component when the yes button of the confirmation box has been
|
|
* pressed.
|
|
*
|
|
* @param button The button which has been pressed (yes / no)
|
|
*/
|
|
deleteElement: function(button) {
|
|
if (button == 'yes') {
|
|
this.ownerCt.removeElement(this);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Called by the parent of this component when a change has been made in the
|
|
* form.
|
|
*
|
|
* Constructs an array out of this component and the children to add it to
|
|
* the history or to use when saving the form
|
|
*
|
|
* @returns {Array}
|
|
*/
|
|
getConfiguration: function() {
|
|
var historyConfiguration = {
|
|
configuration: this.configuration,
|
|
isEditable: this.isEditable,
|
|
xtype: this.xtype
|
|
};
|
|
|
|
if (this.containerComponent) {
|
|
historyConfiguration.elementContainer = this.containerComponent.getConfiguration();
|
|
}
|
|
return historyConfiguration;
|
|
},
|
|
|
|
/**
|
|
* Called when a configuration property has changed in the options tab
|
|
*
|
|
* Overwrites the configuration with the configuration from the form,
|
|
* adds a new snapshot to the history and renders this component again.
|
|
* @param formConfiguration
|
|
*/
|
|
setConfigurationValue: function(formConfiguration) {
|
|
Ext.merge(this.configuration, formConfiguration);
|
|
TYPO3.Form.Wizard.Helpers.History.setHistory();
|
|
this.rendered = false;
|
|
this.render();
|
|
this.doLayout();
|
|
this.fireEvent('configurationChange', this);
|
|
},
|
|
|
|
/**
|
|
* Remove a validation rule from this element
|
|
*
|
|
* @param type
|
|
*/
|
|
removeValidationRule: function(type) {
|
|
if (this.configuration.validation[type]) {
|
|
delete this.configuration.validation[type];
|
|
TYPO3.Form.Wizard.Helpers.History.setHistory();
|
|
if (this.xtype != 'typo3-form-wizard-elements-basic-form') {
|
|
this.rendered = false;
|
|
this.render();
|
|
this.doLayout();
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Remove a filter from this element
|
|
*
|
|
* @param type
|
|
*/
|
|
removeFilter: function(type) {
|
|
if (this.configuration.filters[type]) {
|
|
delete this.configuration.filters[type];
|
|
TYPO3.Form.Wizard.Helpers.History.setHistory();
|
|
if (this.xtype != 'typo3-form-wizard-elements-basic-form') {
|
|
this.rendered = false;
|
|
this.render();
|
|
this.doLayout();
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Fires after the component is destroyed.
|
|
*
|
|
* Removes the listener for the 'setactive' event of the element helper.
|
|
* Tells the element helper this element is destroyed and if set active,
|
|
* it should be unset as active.
|
|
*/
|
|
onDestroy: function() {
|
|
TYPO3.Form.Wizard.Helpers.Element.un('setactive', this.toggleActive, this);
|
|
TYPO3.Form.Wizard.Helpers.Element.unsetActive(this);
|
|
}
|
|
});
|
|
|
|
Ext.reg('typo3-form-wizard-elements',TYPO3.Form.Wizard.Elements);
|
|
Ext.namespace('TYPO3.Form.Wizard.Elements');
|
|
|
|
/**
|
|
* The dummy element
|
|
*
|
|
* This type will be shown when there is no element in a container which will be
|
|
* form or fieldset and will be removed when there is an element added.
|
|
*
|
|
* @class TYPO3.Form.Wizard.Elements.Dummy
|
|
* @extends TYPO3.Form.Wizard.Elements
|
|
*/
|
|
TYPO3.Form.Wizard.Elements.Dummy = Ext.extend(TYPO3.Form.Wizard.Elements, {
|
|
/**
|
|
* @cfg {String} id
|
|
* The unique id of this component (defaults to an auto-assigned id).
|
|
* You should assign an id if you need to be able to access the component
|
|
* later and you do not have an object reference available
|
|
* (e.g., using Ext.getCmp).
|
|
*
|
|
* Note that this id will also be used as the element id for the containing
|
|
* HTML element that is rendered to the page for this component.
|
|
* This allows you to write id-based CSS rules to style the specific
|
|
* instance of this component uniquely, and also to select sub-elements
|
|
* using this component's id as the parent.
|
|
*/
|
|
id: 'dummy',
|
|
|
|
/**
|
|
* @cfg {String} cls
|
|
* An optional extra CSS class that will be added to this component's
|
|
* Element (defaults to ''). This can be useful for adding customized styles
|
|
* to the component or any of its children using standard CSS rules.
|
|
*/
|
|
cls: 'dummy typo3-message message-information',
|
|
|
|
/**
|
|
* @cfg {Object} configuration
|
|
* The configuration of this element.
|
|
* This object contains the configuration of this component. It will be
|
|
* copied to the 'data' variable before rendering. 'data' is deleted after
|
|
* rendering the xtemplate, so we need a copy.
|
|
*/
|
|
configuration: {
|
|
title: TYPO3.l10n.localize('elements_dummy_title'),
|
|
description: TYPO3.l10n.localize('elements_dummy_description')
|
|
},
|
|
|
|
/**
|
|
* @cfg {Mixed} tpl
|
|
* An Ext.Template, Ext.XTemplate or an array of strings to form an
|
|
* Ext.XTemplate. Used in conjunction with the data and tplWriteMode
|
|
* configurations.
|
|
*/
|
|
tpl: new Ext.XTemplate(
|
|
'<p><strong>{title}</strong></p>',
|
|
'<p>{description}</p>'
|
|
),
|
|
|
|
/**
|
|
* @cfg {Boolean} isEditable
|
|
* Defines whether the element is editable. If the item is editable,
|
|
* a button group with remove and edit buttons will be added to this element
|
|
* and when the the element is clicked, an event is triggered to edit the
|
|
* element. Some elements, like the dummy, don't need this.
|
|
*/
|
|
isEditable: false
|
|
});
|
|
|
|
Ext.reg('typo3-form-wizard-elements-dummy', TYPO3.Form.Wizard.Elements.Dummy);
|
|
Ext.namespace('TYPO3.Form.Wizard.Elements.Basic');
|
|
|
|
/**
|
|
* The BUTTON element
|
|
*
|
|
* @class TYPO3.Form.Wizard.Elements.Basic.Button
|
|
* @extends TYPO3.Form.Wizard.Elements
|
|
*/
|
|
TYPO3.Form.Wizard.Elements.Basic.Button = Ext.extend(TYPO3.Form.Wizard.Elements, {
|
|
/**
|
|
* @cfg {String} elementClass
|
|
* An extra CSS class that will be added to this component's Element
|
|
*/
|
|
elementClass: 'button',
|
|
|
|
/**
|
|
* @cfg {Mixed} tpl
|
|
* An Ext.Template, Ext.XTemplate or an array of strings to form an
|
|
* Ext.XTemplate. Used in conjunction with the data and tplWriteMode
|
|
* configurations.
|
|
*/
|
|
tpl: new Ext.XTemplate(
|
|
'<div class="overflow-hidden">',
|
|
'<tpl for="label">',
|
|
'<tpl if="value && parent.layout == \'front\'">',
|
|
'<label for="">{value}{[this.getMessage(parent.validation)]}</label>',
|
|
'</tpl>',
|
|
'</tpl>',
|
|
'<input {[this.getAttributes(values.attributes)]} />',
|
|
'<tpl for="label">',
|
|
'<tpl if="value && parent.layout == \'back\'">',
|
|
'<label for="">{value}{[this.getMessage(parent.validation)]}</label>',
|
|
'</tpl>',
|
|
'</tpl>',
|
|
'</div>',
|
|
{
|
|
compiled: true,
|
|
getMessage: function(rules) {
|
|
var messageHtml = '';
|
|
var messages = [];
|
|
Ext.iterate(rules, function(rule, configuration) {
|
|
if (configuration.showMessage) {
|
|
messages.push(configuration.message);
|
|
}
|
|
}, this);
|
|
|
|
messageHtml = ' <em>' + messages.join(', ') + '</em>';
|
|
return messageHtml;
|
|
|
|
},
|
|
getAttributes: function(attributes) {
|
|
var attributesHtml = '';
|
|
Ext.iterate(attributes, function(key, value) {
|
|
if (value) {
|
|
attributesHtml += key + '="' + value + '" ';
|
|
}
|
|
}, this);
|
|
return attributesHtml;
|
|
}
|
|
}
|
|
),
|
|
|
|
/**
|
|
* Constructor
|
|
*
|
|
* Add the configuration object to this component
|
|
* @param config
|
|
*/
|
|
constructor: function(config) {
|
|
Ext.apply(this, {
|
|
configuration: {
|
|
attributes: {
|
|
accesskey: '',
|
|
alt: '',
|
|
class: '',
|
|
dir: '',
|
|
disabled: '',
|
|
id: '',
|
|
lang: '',
|
|
name: '',
|
|
style: '',
|
|
tabindex: '',
|
|
title: '',
|
|
type: 'button',
|
|
value: TYPO3.l10n.localize('tx_form_domain_model_element_button.value')
|
|
},
|
|
filters: {},
|
|
label: {
|
|
value: ''
|
|
},
|
|
layout: 'front',
|
|
validation: {}
|
|
}
|
|
});
|
|
TYPO3.Form.Wizard.Elements.Basic.Button.superclass.constructor.apply(this, arguments);
|
|
}
|
|
});
|
|
|
|
Ext.reg('typo3-form-wizard-elements-basic-button', TYPO3.Form.Wizard.Elements.Basic.Button);
|
|
Ext.namespace('TYPO3.Form.Wizard.Elements.Basic');
|
|
|
|
/**
|
|
* The CHECKBOX element
|
|
*
|
|
* @class TYPO3.Form.Wizard.Elements.Basic.Checkbox
|
|
* @extends TYPO3.Form.Wizard.Elements
|
|
*/
|
|
TYPO3.Form.Wizard.Elements.Basic.Checkbox = Ext.extend(TYPO3.Form.Wizard.Elements, {
|
|
/**
|
|
* @cfg {String} elementClass
|
|
* An extra CSS class that will be added to this component's Element
|
|
*/
|
|
elementClass: 'x-checkbox',
|
|
|
|
/**
|
|
* @cfg {Mixed} tpl
|
|
* An Ext.Template, Ext.XTemplate or an array of strings to form an
|
|
* Ext.XTemplate. Used in conjunction with the data and tplWriteMode
|
|
* configurations.
|
|
*/
|
|
tpl: new Ext.XTemplate(
|
|
'<div class="overflow-hidden">',
|
|
'<tpl for="label">',
|
|
'<tpl if="value && parent.layout == \'front\'">',
|
|
'<label for="">{value}{[this.getMessage(parent.validation)]}</label>',
|
|
'</tpl>',
|
|
'</tpl>',
|
|
'<input {[this.getAttributes(values.attributes)]} />',
|
|
'<tpl for="label">',
|
|
'<tpl if="value && parent.layout == \'back\'">',
|
|
'<label for="">{value}{[this.getMessage(parent.validation)]}</label>',
|
|
'</tpl>',
|
|
'</tpl>',
|
|
'</div>',
|
|
{
|
|
compiled: true,
|
|
getMessage: function(rules) {
|
|
var messageHtml = '';
|
|
var messages = [];
|
|
Ext.iterate(rules, function(rule, configuration) {
|
|
if (configuration.showMessage) {
|
|
messages.push(configuration.message);
|
|
}
|
|
}, this);
|
|
|
|
messageHtml = ' <em>' + messages.join(', ') + '</em>';
|
|
return messageHtml;
|
|
|
|
},
|
|
getAttributes: function(attributes) {
|
|
var attributesHtml = '';
|
|
Ext.iterate(attributes, function(key, value) {
|
|
if (value) {
|
|
attributesHtml += key + '="' + value + '" ';
|
|
}
|
|
}, this);
|
|
return attributesHtml;
|
|
}
|
|
}
|
|
),
|
|
|
|
/**
|
|
* Constructor
|
|
*
|
|
* Add the configuration object to this component
|
|
* @param config
|
|
*/
|
|
constructor: function(config) {
|
|
Ext.apply(this, {
|
|
configuration: {
|
|
attributes: {
|
|
accesskey: '',
|
|
alt: '',
|
|
class: '',
|
|
dir: '',
|
|
disabled: '',
|
|
id: '',
|
|
lang: '',
|
|
name: '',
|
|
style: '',
|
|
tabindex: '',
|
|
title: '',
|
|
type: 'checkbox',
|
|
value: ''
|
|
},
|
|
filters: {},
|
|
label: {
|
|
value: TYPO3.l10n.localize('elements_label')
|
|
},
|
|
layout: 'back',
|
|
validation: {}
|
|
}
|
|
});
|
|
TYPO3.Form.Wizard.Elements.Basic.Checkbox.superclass.constructor.apply(this, arguments);
|
|
}
|
|
});
|
|
|
|
Ext.reg('typo3-form-wizard-elements-basic-checkbox', TYPO3.Form.Wizard.Elements.Basic.Checkbox);
|
|
Ext.namespace('TYPO3.Form.Wizard.Elements.Basic');
|
|
|
|
/**
|
|
* The FIELDSET element
|
|
*
|
|
* @class TYPO3.Form.Wizard.Elements.Basic.Fieldset
|
|
* @extends TYPO3.Form.Wizard.Elements
|
|
*/
|
|
TYPO3.Form.Wizard.Elements.Basic.Fieldset = Ext.extend(TYPO3.Form.Wizard.Elements, {
|
|
/**
|
|
* @cfg {String} elementClass
|
|
* An extra CSS class that will be added to this component's Element
|
|
*/
|
|
elementClass: 'fieldset',
|
|
|
|
/**
|
|
* @cfg {Mixed} tpl
|
|
* An Ext.Template, Ext.XTemplate or an array of strings to form an
|
|
* Ext.XTemplate. Used in conjunction with the data and tplWriteMode
|
|
* configurations.
|
|
*/
|
|
tpl: new Ext.XTemplate(
|
|
'<div>',
|
|
'<fieldset {[this.getAttributes(values.attributes)]}>',
|
|
'<tpl for="legend">',
|
|
'<tpl if="value">',
|
|
'<legend>{value}</legend>',
|
|
'</tpl>',
|
|
'</tpl>',
|
|
'<ol></ol>',
|
|
'</fieldset>',
|
|
'</div>',
|
|
{
|
|
compiled: true,
|
|
getAttributes: function(attributes) {
|
|
var attributesHtml = '';
|
|
Ext.iterate(attributes, function(key, value) {
|
|
if (value) {
|
|
attributesHtml += key + '="' + value + '" ';
|
|
}
|
|
}, this);
|
|
return attributesHtml;
|
|
}
|
|
}
|
|
),
|
|
|
|
/**
|
|
* @cfg {Array} elementContainer
|
|
* Configuration for the containerComponent
|
|
*/
|
|
elementContainer: {
|
|
hasDragAndDrop: true
|
|
},
|
|
|
|
/**
|
|
* Constructor
|
|
*
|
|
* Add the configuration object to this component
|
|
* @param config
|
|
*/
|
|
constructor: function(config) {
|
|
Ext.apply(this, {
|
|
configuration: {
|
|
attributes: {
|
|
class: '',
|
|
dir: '',
|
|
id: '',
|
|
lang: '',
|
|
style: ''
|
|
},
|
|
legend: {
|
|
value: TYPO3.l10n.localize('elements_legend')
|
|
}
|
|
}
|
|
});
|
|
|
|
TYPO3.Form.Wizard.Elements.Basic.Fieldset.superclass.constructor.apply(this, arguments);
|
|
},
|
|
|
|
/**
|
|
* Constructor
|
|
*/
|
|
initComponent: function() {
|
|
var config = {};
|
|
|
|
// apply config
|
|
Ext.apply(this, Ext.apply(this.initialConfig, config));
|
|
|
|
// Initialize the container component
|
|
this.containerComponent = new TYPO3.Form.Wizard.Container(this.elementContainer);
|
|
|
|
// call parent
|
|
TYPO3.Form.Wizard.Elements.Basic.Fieldset.superclass.initComponent.apply(this, arguments);
|
|
|
|
// Initialize events after rendering
|
|
this.on('afterrender', this.afterRender, this);
|
|
},
|
|
|
|
/**
|
|
* Called by the 'afterrender' event.
|
|
*
|
|
* Add the container component to this component
|
|
*/
|
|
afterRender: function() {
|
|
this.addContainerAfterRender();
|
|
|
|
// Call parent
|
|
TYPO3.Form.Wizard.Elements.Basic.Form.superclass.afterRender.call(this);
|
|
},
|
|
|
|
/**
|
|
* Add the container component to this component
|
|
*
|
|
* Because we are using a XTemplate for rendering this component, we can
|
|
* only add the container after rendering, because the <ol> tag needs to be
|
|
* replaced with this container.
|
|
*
|
|
* The container needs to be rerendered when a configuration parameter
|
|
* (legend or attributes) of the ownerCt, for instance fieldset, has changed
|
|
* otherwise it will not show up
|
|
*/
|
|
addContainerAfterRender: function() {
|
|
this.containerComponent.applyToMarkup(this.getEl().child('ol'));
|
|
this.containerComponent.rendered = false;
|
|
this.containerComponent.render();
|
|
this.containerComponent.doLayout();
|
|
}
|
|
});
|
|
|
|
Ext.reg('typo3-form-wizard-elements-basic-fieldset', TYPO3.Form.Wizard.Elements.Basic.Fieldset);
|
|
Ext.namespace('TYPO3.Form.Wizard.Elements.Basic');
|
|
|
|
/**
|
|
* The FILEUPLOAD element
|
|
*
|
|
* @class TYPO3.Form.Wizard.Elements.Basic.Fileupload
|
|
* @extends TYPO3.Form.Wizard.Elements
|
|
*/
|
|
TYPO3.Form.Wizard.Elements.Basic.Fileupload = Ext.extend(TYPO3.Form.Wizard.Elements, {
|
|
/**
|
|
* @cfg {String} elementClass
|
|
* An extra CSS class that will be added to this component's Element
|
|
*/
|
|
elementClass: 'fileupload',
|
|
|
|
/**
|
|
* @cfg {Mixed} tpl
|
|
* An Ext.Template, Ext.XTemplate or an array of strings to form an
|
|
* Ext.XTemplate. Used in conjunction with the data and tplWriteMode
|
|
* configurations.
|
|
*/
|
|
tpl: new Ext.XTemplate(
|
|
'<div class="overflow-hidden">',
|
|
'<tpl for="label">',
|
|
'<tpl if="value && parent.layout == \'front\'">',
|
|
'<label for="">{value}{[this.getMessage(parent.validation)]}</label>',
|
|
'</tpl>',
|
|
'</tpl>',
|
|
'<input {[this.getAttributes(values.attributes)]} />',
|
|
'<tpl for="label">',
|
|
'<tpl if="value && parent.layout == \'back\'">',
|
|
'<label for="">{value}{[this.getMessage(parent.validation)]}</label>',
|
|
'</tpl>',
|
|
'</tpl>',
|
|
'</div>',
|
|
{
|
|
compiled: true,
|
|
getMessage: function(rules) {
|
|
var messageHtml = '';
|
|
var messages = [];
|
|
Ext.iterate(rules, function(rule, configuration) {
|
|
if (configuration.showMessage) {
|
|
messages.push(configuration.message);
|
|
}
|
|
}, this);
|
|
|
|
messageHtml = ' <em>' + messages.join(', ') + '</em>';
|
|
return messageHtml;
|
|
|
|
},
|
|
getAttributes: function(attributes) {
|
|
var attributesHtml = '';
|
|
Ext.iterate(attributes, function(key, value) {
|
|
if (value) {
|
|
attributesHtml += key + '="' + value + '" ';
|
|
}
|
|
}, this);
|
|
return attributesHtml;
|
|
}
|
|
}
|
|
),
|
|
|
|
/**
|
|
* Constructor
|
|
*
|
|
* Add the configuration object to this component
|
|
* @param config
|
|
*/
|
|
constructor: function(config) {
|
|
Ext.apply(this, {
|
|
configuration: {
|
|
attributes: {
|
|
accesskey: '',
|
|
alt: '',
|
|
class: '',
|
|
dir: '',
|
|
disabled: '',
|
|
id: '',
|
|
lang: '',
|
|
name: '',
|
|
size: '',
|
|
style: '',
|
|
tabindex: '',
|
|
title: '',
|
|
type: 'file'
|
|
},
|
|
filters: {},
|
|
label: {
|
|
value: TYPO3.l10n.localize('elements_label')
|
|
},
|
|
layout: 'front',
|
|
validation: {}
|
|
}
|
|
});
|
|
TYPO3.Form.Wizard.Elements.Basic.Fileupload.superclass.constructor.apply(this, arguments);
|
|
}
|
|
});
|
|
|
|
Ext.reg('typo3-form-wizard-elements-basic-fileupload', TYPO3.Form.Wizard.Elements.Basic.Fileupload);
|
|
Ext.namespace('TYPO3.Form.Wizard.Elements.Basic');
|
|
|
|
/**
|
|
* The FORM element
|
|
*
|
|
* @class TYPO3.Form.Wizard.Elements.Basic.Form
|
|
* @extends TYPO3.Form.Wizard.Elements
|
|
*/
|
|
TYPO3.Form.Wizard.Elements.Basic.Form = Ext.extend(TYPO3.Form.Wizard.Elements, {
|
|
/**
|
|
* @cfg {Mixed} autoEl
|
|
* A tag name or DomHelper spec used to create the Element which will
|
|
* encapsulate this Component.
|
|
*/
|
|
autoEl: 'li',
|
|
|
|
/**
|
|
* @cfg {String} elementClass
|
|
* An extra CSS class that will be added to this component's Element
|
|
*/
|
|
elementClass: 'form',
|
|
|
|
/**
|
|
* @cfg {Mixed} tpl
|
|
* An Ext.Template, Ext.XTemplate or an array of strings to form an
|
|
* Ext.XTemplate. Used in conjunction with the data and tplWriteMode
|
|
* configurations.
|
|
*/
|
|
tpl: new Ext.XTemplate(
|
|
'<form {[this.getAttributes(values.attributes)]}>',
|
|
'<ol></ol>',
|
|
'</form>',
|
|
{
|
|
compiled: true,
|
|
getAttributes: function(attributes) {
|
|
var attributesHtml = '';
|
|
Ext.iterate(attributes, function(key, value) {
|
|
if (value) {
|
|
attributesHtml += key + '="' + value + '" ';
|
|
}
|
|
}, this);
|
|
return attributesHtml;
|
|
}
|
|
}
|
|
),
|
|
|
|
/**
|
|
* @cfg {Boolean} isEditable
|
|
* Defines whether the element is editable. If the item is editable,
|
|
* a button group with remove and edit buttons will be added to this element
|
|
* and when the the element is clicked, an event is triggered to edit the
|
|
* element. Some elements, like the dummy, don't need this.
|
|
*/
|
|
isEditable: false,
|
|
|
|
/**
|
|
* @cfg {Array} elementContainer
|
|
* Configuration for the containerComponent
|
|
*/
|
|
elementContainer: {
|
|
hasDragAndDrop: true
|
|
},
|
|
|
|
/**
|
|
* Constructor
|
|
*
|
|
* Add the configuration object to this component
|
|
* @param config
|
|
*/
|
|
constructor: function(config) {
|
|
Ext.apply(this, {
|
|
configuration: {
|
|
attributes: {
|
|
accept: '',
|
|
acceptcharset: '',
|
|
action: '',
|
|
class: '',
|
|
dir: '',
|
|
enctype: 'application/x-www-form-urlencoded',
|
|
id: '',
|
|
lang: '',
|
|
method: 'post',
|
|
style: '',
|
|
title: ''
|
|
},
|
|
prefix: 'tx_form',
|
|
confirmation: true,
|
|
postProcessor: {
|
|
mail: {
|
|
recipientEmail: '',
|
|
senderEmail: ''
|
|
}
|
|
}
|
|
}
|
|
});
|
|
TYPO3.Form.Wizard.Elements.Basic.Form.superclass.constructor.apply(this, arguments);
|
|
},
|
|
|
|
/**
|
|
* Constructor
|
|
*/
|
|
initComponent: function() {
|
|
var config = {};
|
|
|
|
// apply config
|
|
Ext.apply(this, Ext.apply(this.initialConfig, config));
|
|
|
|
// Initialize the container component
|
|
this.containerComponent = new TYPO3.Form.Wizard.Container(this.elementContainer);
|
|
|
|
// Call parent
|
|
TYPO3.Form.Wizard.Elements.Basic.Form.superclass.initComponent.apply(this, arguments);
|
|
|
|
// Initialize events after rendering
|
|
this.on('afterrender', this.afterRender, this);
|
|
},
|
|
|
|
/**
|
|
* Called by the 'afterrender' event.
|
|
*
|
|
* Add the container component to this component
|
|
* Stop the submit event of the form, because this form does not need to be
|
|
* submitted
|
|
*/
|
|
afterRender: function() {
|
|
this.addContainerAfterRender();
|
|
|
|
this.getEl().child('form').on(
|
|
'submit',
|
|
function(eventObject, htmlElement, object) {
|
|
eventObject.stopEvent();
|
|
}
|
|
);
|
|
|
|
// Call parent
|
|
TYPO3.Form.Wizard.Elements.Basic.Form.superclass.afterRender.call(this);
|
|
},
|
|
|
|
/**
|
|
* Add the container component to this component
|
|
*
|
|
* Because we are using a XTemplate for rendering this component, we can
|
|
* only add the container after rendering, because the <ol> tag needs to be
|
|
* replaced with this container.
|
|
*/
|
|
addContainerAfterRender: function() {
|
|
this.containerComponent.applyToMarkup(this.getEl().child('ol'));
|
|
this.containerComponent.rendered = false;
|
|
this.containerComponent.render();
|
|
this.containerComponent.doLayout();
|
|
},
|
|
|
|
/**
|
|
* Remove a post processor from this element
|
|
*
|
|
* @param type
|
|
*/
|
|
removePostProcessor: function(type) {
|
|
if (this.configuration.postProcessor[type]) {
|
|
delete this.configuration.postProcessor[type];
|
|
TYPO3.Form.Wizard.Helpers.History.setHistory();
|
|
}
|
|
}
|
|
});
|
|
|
|
Ext.reg('typo3-form-wizard-elements-basic-form', TYPO3.Form.Wizard.Elements.Basic.Form);
|
|
Ext.namespace('TYPO3.Form.Wizard.Elements.Basic');
|
|
|
|
/**
|
|
* The HIDDEN element
|
|
*
|
|
* @class TYPO3.Form.Wizard.Elements.Basic.Hidden
|
|
* @extends TYPO3.Form.Wizard.Elements
|
|
*/
|
|
TYPO3.Form.Wizard.Elements.Basic.Hidden = Ext.extend(TYPO3.Form.Wizard.Elements, {
|
|
/**
|
|
* @cfg {String} elementClass
|
|
* An extra CSS class that will be added to this component's Element
|
|
*/
|
|
elementClass: 'hidden',
|
|
|
|
/**
|
|
* @cfg {Mixed} tpl
|
|
* An Ext.Template, Ext.XTemplate or an array of strings to form an
|
|
* Ext.XTemplate. Used in conjunction with the data and tplWriteMode
|
|
* configurations.
|
|
*/
|
|
tpl: new Ext.XTemplate(
|
|
'<div class="overflow-hidden">',
|
|
'<input {[this.getAttributes(values.attributes)]} />',
|
|
'</div>',
|
|
{
|
|
compiled: true,
|
|
getAttributes: function(attributes) {
|
|
var attributesHtml = '';
|
|
Ext.iterate(attributes, function(key, value) {
|
|
if (value) {
|
|
attributesHtml += key + '="' + value + '" ';
|
|
}
|
|
}, this);
|
|
return attributesHtml;
|
|
}
|
|
}
|
|
),
|
|
|
|
/**
|
|
* Constructor
|
|
*
|
|
* Add the configuration object to this component
|
|
* @param config
|
|
*/
|
|
constructor: function(config) {
|
|
Ext.apply(this, {
|
|
configuration: {
|
|
attributes: {
|
|
class: '',
|
|
id: '',
|
|
lang: '',
|
|
name: '',
|
|
style: '',
|
|
type: 'hidden',
|
|
value: ''
|
|
},
|
|
filters: {},
|
|
validation: {}
|
|
}
|
|
});
|
|
TYPO3.Form.Wizard.Elements.Basic.Hidden.superclass.constructor.apply(this, arguments);
|
|
}
|
|
});
|
|
|
|
Ext.reg('typo3-form-wizard-elements-basic-hidden', TYPO3.Form.Wizard.Elements.Basic.Hidden);
|
|
Ext.namespace('TYPO3.Form.Wizard.Elements.Basic');
|
|
|
|
/**
|
|
* The PASSWORD element
|
|
*
|
|
* @class TYPO3.Form.Wizard.Elements.Basic.Password
|
|
* @extends TYPO3.Form.Wizard.Elements
|
|
*/
|
|
TYPO3.Form.Wizard.Elements.Basic.Password = Ext.extend(TYPO3.Form.Wizard.Elements, {
|
|
/**
|
|
* @cfg {String} elementClass
|
|
* An extra CSS class that will be added to this component's Element
|
|
*/
|
|
elementClass: 'password',
|
|
|
|
/**
|
|
* @cfg {Mixed} tpl
|
|
* An Ext.Template, Ext.XTemplate or an array of strings to form an
|
|
* Ext.XTemplate. Used in conjunction with the data and tplWriteMode
|
|
* configurations.
|
|
*/
|
|
tpl: new Ext.XTemplate(
|
|
'<div class="overflow-hidden">',
|
|
'<tpl for="label">',
|
|
'<tpl if="value && parent.layout == \'front\'">',
|
|
'<label for="">{value}{[this.getMessage(parent.validation)]}</label>',
|
|
'</tpl>',
|
|
'</tpl>',
|
|
'<input {[this.getAttributes(values.attributes)]} />',
|
|
'<tpl for="label">',
|
|
'<tpl if="value && parent.layout == \'back\'">',
|
|
'<label for="">{value}{[this.getMessage(parent.validation)]}</label>',
|
|
'</tpl>',
|
|
'</tpl>',
|
|
'</div>',
|
|
{
|
|
compiled: true,
|
|
getMessage: function(rules) {
|
|
var messageHtml = '';
|
|
var messages = [];
|
|
Ext.iterate(rules, function(rule, configuration) {
|
|
if (configuration.showMessage) {
|
|
messages.push(configuration.message);
|
|
}
|
|
}, this);
|
|
|
|
messageHtml = ' <em>' + messages.join(', ') + '</em>';
|
|
return messageHtml;
|
|
|
|
},
|
|
getAttributes: function(attributes) {
|
|
var attributesHtml = '';
|
|
Ext.iterate(attributes, function(key, value) {
|
|
if (value) {
|
|
attributesHtml += key + '="' + value + '" ';
|
|
}
|
|
}, this);
|
|
return attributesHtml;
|
|
}
|
|
}
|
|
),
|
|
|
|
/**
|
|
* Constructor
|
|
*
|
|
* Add the configuration object to this component
|
|
* @param config
|
|
*/
|
|
constructor: function(config) {
|
|
Ext.apply(this, {
|
|
configuration: {
|
|
attributes: {
|
|
accesskey: '',
|
|
alt: '',
|
|
class: '',
|
|
dir: '',
|
|
disabled: '',
|
|
id: '',
|
|
lang: '',
|
|
maxlength: '',
|
|
name: '',
|
|
readonly: '',
|
|
size: '',
|
|
style: '',
|
|
tabindex: '',
|
|
title: '',
|
|
type: 'password',
|
|
value: ''
|
|
},
|
|
filters: {},
|
|
label: {
|
|
value: TYPO3.l10n.localize('elements_label')
|
|
},
|
|
layout: 'front',
|
|
validation: {}
|
|
}
|
|
});
|
|
TYPO3.Form.Wizard.Elements.Basic.Password.superclass.constructor.apply(this, arguments);
|
|
}
|
|
});
|
|
|
|
Ext.reg('typo3-form-wizard-elements-basic-password', TYPO3.Form.Wizard.Elements.Basic.Password);
|
|
Ext.namespace('TYPO3.Form.Wizard.Elements.Basic');
|
|
|
|
/**
|
|
* The RADIO element
|
|
*
|
|
* @class TYPO3.Form.Wizard.Elements.Basic.Radio
|
|
* @extends TYPO3.Form.Wizard.Elements
|
|
*/
|
|
TYPO3.Form.Wizard.Elements.Basic.Radio = Ext.extend(TYPO3.Form.Wizard.Elements, {
|
|
/**
|
|
* @cfg {String} elementClass
|
|
* An extra CSS class that will be added to this component's Element
|
|
*/
|
|
elementClass: 'x-radio',
|
|
|
|
/**
|
|
* @cfg {Mixed} tpl
|
|
* An Ext.Template, Ext.XTemplate or an array of strings to form an
|
|
* Ext.XTemplate. Used in conjunction with the data and tplWriteMode
|
|
* configurations.
|
|
*/
|
|
tpl: new Ext.XTemplate(
|
|
'<div class="overflow-hidden">',
|
|
'<tpl for="label">',
|
|
'<tpl if="value && parent.layout == \'front\'">',
|
|
'<label for="">{value}{[this.getMessage(parent.validation)]}</label>',
|
|
'</tpl>',
|
|
'</tpl>',
|
|
'<input {[this.getAttributes(values.attributes)]} />',
|
|
'<tpl for="label">',
|
|
'<tpl if="value && parent.layout == \'back\'">',
|
|
'<label for="">{value}{[this.getMessage(parent.validation)]}</label>',
|
|
'</tpl>',
|
|
'</tpl>',
|
|
'</div>',
|
|
{
|
|
compiled: true,
|
|
getMessage: function(rules) {
|
|
var messageHtml = '';
|
|
var messages = [];
|
|
Ext.iterate(rules, function(rule, configuration) {
|
|
if (configuration.showMessage) {
|
|
messages.push(configuration.message);
|
|
}
|
|
}, this);
|
|
|
|
messageHtml = ' <em>' + messages.join(', ') + '</em>';
|
|
return messageHtml;
|
|
|
|
},
|
|
getAttributes: function(attributes) {
|
|
var attributesHtml = '';
|
|
Ext.iterate(attributes, function(key, value) {
|
|
if (value) {
|
|
attributesHtml += key + '="' + value + '" ';
|
|
}
|
|
}, this);
|
|
return attributesHtml;
|
|
}
|
|
}
|
|
),
|
|
|
|
/**
|
|
* Constructor
|
|
*
|
|
* Add the configuration object to this component
|
|
* @param config
|
|
*/
|
|
constructor: function(config) {
|
|
Ext.apply(this, {
|
|
configuration: {
|
|
attributes: {
|
|
accesskey: '',
|
|
alt: '',
|
|
class: '',
|
|
dir: '',
|
|
disabled: '',
|
|
id: '',
|
|
lang: '',
|
|
name: '',
|
|
style: '',
|
|
tabindex: '',
|
|
title: '',
|
|
type: 'radio',
|
|
value: ''
|
|
},
|
|
filters: {},
|
|
label: {
|
|
value: TYPO3.l10n.localize('elements_label')
|
|
},
|
|
layout: 'back',
|
|
validation: {}
|
|
}
|
|
});
|
|
TYPO3.Form.Wizard.Elements.Basic.Radio.superclass.constructor.apply(this, arguments);
|
|
}
|
|
});
|
|
|
|
Ext.reg('typo3-form-wizard-elements-basic-radio', TYPO3.Form.Wizard.Elements.Basic.Radio);
|
|
Ext.namespace('TYPO3.Form.Wizard.Elements.Basic');
|
|
|
|
/**
|
|
* The RESET element
|
|
*
|
|
* @class TYPO3.Form.Wizard.Elements.Basic.Reset
|
|
* @extends TYPO3.Form.Wizard.Elements
|
|
*/
|
|
TYPO3.Form.Wizard.Elements.Basic.Reset = Ext.extend(TYPO3.Form.Wizard.Elements, {
|
|
/**
|
|
* @cfg {String} elementClass
|
|
* An extra CSS class that will be added to this component's Element
|
|
*/
|
|
elementClass: 'reset',
|
|
|
|
/**
|
|
* @cfg {Mixed} tpl
|
|
* An Ext.Template, Ext.XTemplate or an array of strings to form an
|
|
* Ext.XTemplate. Used in conjunction with the data and tplWriteMode
|
|
* configurations.
|
|
*/
|
|
tpl: new Ext.XTemplate(
|
|
'<div class="overflow-hidden">',
|
|
'<tpl for="label">',
|
|
'<tpl if="value && parent.layout == \'front\'">',
|
|
'<label for="">{value}{[this.getMessage(parent.validation)]}</label>',
|
|
'</tpl>',
|
|
'</tpl>',
|
|
'<input {[this.getAttributes(values.attributes)]} />',
|
|
'<tpl for="label">',
|
|
'<tpl if="value && parent.layout == \'back\'">',
|
|
'<label for="">{value}{[this.getMessage(parent.validation)]}</label>',
|
|
'</tpl>',
|
|
'</tpl>',
|
|
'</div>',
|
|
{
|
|
compiled: true,
|
|
getMessage: function(rules) {
|
|
var messageHtml = '';
|
|
var messages = [];
|
|
Ext.iterate(rules, function(rule, configuration) {
|
|
if (configuration.showMessage) {
|
|
messages.push(configuration.message);
|
|
}
|
|
}, this);
|
|
|
|
messageHtml = ' <em>' + messages.join(', ') + '</em>';
|
|
return messageHtml;
|
|
|
|
},
|
|
getAttributes: function(attributes) {
|
|
var attributesHtml = '';
|
|
Ext.iterate(attributes, function(key, value) {
|
|
if (value) {
|
|
attributesHtml += key + '="' + value + '" ';
|
|
}
|
|
}, this);
|
|
return attributesHtml;
|
|
}
|
|
}
|
|
),
|
|
|
|
/**
|
|
* Constructor
|
|
*
|
|
* Add the configuration object to this component
|
|
* @param config
|
|
*/
|
|
constructor: function(config) {
|
|
Ext.apply(this, {
|
|
configuration: {
|
|
attributes: {
|
|
accesskey: '',
|
|
alt: '',
|
|
class: '',
|
|
dir: '',
|
|
disabled: '',
|
|
id: '',
|
|
lang: '',
|
|
name: '',
|
|
style: '',
|
|
tabindex: '',
|
|
title: '',
|
|
type: 'reset',
|
|
value: TYPO3.l10n.localize('tx_form_domain_model_element_reset.value')
|
|
},
|
|
filters: {},
|
|
label: {
|
|
value: ''
|
|
},
|
|
layout: 'front',
|
|
validation: {}
|
|
}
|
|
});
|
|
TYPO3.Form.Wizard.Elements.Basic.Reset.superclass.constructor.apply(this, arguments);
|
|
}
|
|
});
|
|
|
|
Ext.reg('typo3-form-wizard-elements-basic-reset', TYPO3.Form.Wizard.Elements.Basic.Reset);
|
|
Ext.namespace('TYPO3.Form.Wizard.Elements.Basic');
|
|
|
|
/**
|
|
* The SELECT element
|
|
*
|
|
* @class TYPO3.Form.Wizard.Elements.Basic.Select
|
|
* @extends TYPO3.Form.Wizard.Elements
|
|
*/
|
|
TYPO3.Form.Wizard.Elements.Basic.Select = Ext.extend(TYPO3.Form.Wizard.Elements, {
|
|
/**
|
|
* @cfg {String} elementClass
|
|
* An extra CSS class that will be added to this component's Element
|
|
*/
|
|
elementClass: 'select',
|
|
|
|
/**
|
|
* @cfg {Mixed} tpl
|
|
* An Ext.Template, Ext.XTemplate or an array of strings to form an
|
|
* Ext.XTemplate. Used in conjunction with the data and tplWriteMode
|
|
* configurations.
|
|
*/
|
|
tpl: new Ext.XTemplate(
|
|
'<div class="overflow-hidden">',
|
|
'<tpl for="label">',
|
|
'<tpl if="value && parent.layout == \'front\'">',
|
|
'<label for="">{value}{[this.getMessage(parent.validation)]}</label>',
|
|
'</tpl>',
|
|
'</tpl>',
|
|
'<select {[this.getAttributes(values.attributes)]}>',
|
|
'<tpl for="options">',
|
|
'<option {[this.getAttributes(values.attributes)]}>{data}</option>',
|
|
'</tpl>',
|
|
'</select>',
|
|
'<tpl for="label">',
|
|
'<tpl if="value && parent.layout == \'back\'">',
|
|
'<label for="">{value}{[this.getMessage(parent.validation)]}</label>',
|
|
'</tpl>',
|
|
'</tpl>',
|
|
'</div>',
|
|
{
|
|
compiled: true,
|
|
getMessage: function(rules) {
|
|
var messageHtml = '';
|
|
var messages = [];
|
|
Ext.iterate(rules, function(rule, configuration) {
|
|
if (configuration.showMessage) {
|
|
messages.push(configuration.message);
|
|
}
|
|
}, this);
|
|
|
|
messageHtml = ' <em>' + messages.join(', ') + '</em>';
|
|
return messageHtml;
|
|
|
|
},
|
|
getAttributes: function(attributes) {
|
|
var attributesHtml = '';
|
|
Ext.iterate(attributes, function(key, value) {
|
|
if (value) {
|
|
attributesHtml += key + '="' + value + '" ';
|
|
}
|
|
}, this);
|
|
return attributesHtml;
|
|
}
|
|
}
|
|
),
|
|
|
|
/**
|
|
* Constructor
|
|
*
|
|
* Add the configuration object to this component
|
|
* @param config
|
|
*/
|
|
constructor: function(config) {
|
|
Ext.apply(this, {
|
|
configuration: {
|
|
attributes: {
|
|
class: '',
|
|
disabled: '',
|
|
id: '',
|
|
lang: '',
|
|
multiple: '',
|
|
name: '',
|
|
size: '',
|
|
style: '',
|
|
tabindex: '',
|
|
title: ''
|
|
},
|
|
filters: {},
|
|
label: {
|
|
value: TYPO3.l10n.localize('elements_label')
|
|
},
|
|
options: [
|
|
{
|
|
data: TYPO3.l10n.localize('elements_option_1')
|
|
}, {
|
|
data: TYPO3.l10n.localize('elements_option_2')
|
|
}, {
|
|
data: TYPO3.l10n.localize('elements_option_3')
|
|
}
|
|
],
|
|
layout: 'front',
|
|
validation: {}
|
|
}
|
|
});
|
|
TYPO3.Form.Wizard.Elements.Basic.Select.superclass.constructor.apply(this, arguments);
|
|
}
|
|
});
|
|
|
|
Ext.reg('typo3-form-wizard-elements-basic-select', TYPO3.Form.Wizard.Elements.Basic.Select);
|
|
Ext.namespace('TYPO3.Form.Wizard.Elements.Basic');
|
|
|
|
/**
|
|
* The SUBMIT element
|
|
*
|
|
* @class TYPO3.Form.Wizard.Elements.Basic.Submit
|
|
* @extends TYPO3.Form.Wizard.Elements
|
|
*/
|
|
TYPO3.Form.Wizard.Elements.Basic.Submit = Ext.extend(TYPO3.Form.Wizard.Elements, {
|
|
/**
|
|
* @cfg {String} elementClass
|
|
* An extra CSS class that will be added to this component's Element
|
|
*/
|
|
elementClass: 'submit',
|
|
|
|
/**
|
|
* @cfg {Mixed} tpl
|
|
* An Ext.Template, Ext.XTemplate or an array of strings to form an
|
|
* Ext.XTemplate. Used in conjunction with the data and tplWriteMode
|
|
* configurations.
|
|
*/
|
|
tpl: new Ext.XTemplate(
|
|
'<div class="overflow-hidden">',
|
|
'<tpl for="label">',
|
|
'<tpl if="value && parent.layout == \'front\'">',
|
|
'<label for="">{value}{[this.getMessage(parent.validation)]}</label>',
|
|
'</tpl>',
|
|
'</tpl>',
|
|
'<input {[this.getAttributes(values.attributes)]} />',
|
|
'<tpl for="label">',
|
|
'<tpl if="value && parent.layout == \'back\'">',
|
|
'<label for="">{value}{[this.getMessage(parent.validation)]}</label>',
|
|
'</tpl>',
|
|
'</tpl>',
|
|
'</div>',
|
|
{
|
|
compiled: true,
|
|
getMessage: function(rules) {
|
|
var messageHtml = '';
|
|
var messages = [];
|
|
Ext.iterate(rules, function(rule, configuration) {
|
|
if (configuration.showMessage) {
|
|
messages.push(configuration.message);
|
|
}
|
|
}, this);
|
|
|
|
messageHtml = ' <em>' + messages.join(', ') + '</em>';
|
|
return messageHtml;
|
|
|
|
},
|
|
getAttributes: function(attributes) {
|
|
var attributesHtml = '';
|
|
Ext.iterate(attributes, function(key, value) {
|
|
if (value) {
|
|
attributesHtml += key + '="' + value + '" ';
|
|
}
|
|
}, this);
|
|
return attributesHtml;
|
|
}
|
|
}
|
|
),
|
|
|
|
/**
|
|
* Constructor
|
|
*
|
|
* Add the configuration object to this component
|
|
* @param config
|
|
*/
|
|
constructor: function(config) {
|
|
Ext.apply(this, {
|
|
configuration: {
|
|
attributes: {
|
|
accesskey: '',
|
|
alt: '',
|
|
class: '',
|
|
dir: '',
|
|
disabled: '',
|
|
id: '',
|
|
lang: '',
|
|
name: '',
|
|
style: '',
|
|
tabindex: '',
|
|
title: '',
|
|
type: 'submit',
|
|
value: TYPO3.l10n.localize('tx_form_domain_model_element_submit.value')
|
|
},
|
|
filters: {},
|
|
label: {
|
|
value: ''
|
|
},
|
|
layout: 'front',
|
|
validation: {}
|
|
}
|
|
});
|
|
TYPO3.Form.Wizard.Elements.Basic.Submit.superclass.constructor.apply(this, arguments);
|
|
}
|
|
});
|
|
|
|
Ext.reg('typo3-form-wizard-elements-basic-submit', TYPO3.Form.Wizard.Elements.Basic.Submit);
|
|
Ext.namespace('TYPO3.Form.Wizard.Elements.Basic');
|
|
|
|
/**
|
|
* The TEXTAREA element
|
|
*
|
|
* @class TYPO3.Form.Wizard.Elements.Basic.Textarea
|
|
* @extends TYPO3.Form.Wizard.Elements
|
|
*/
|
|
TYPO3.Form.Wizard.Elements.Basic.Textarea = Ext.extend(TYPO3.Form.Wizard.Elements, {
|
|
/**
|
|
* @cfg {String} elementClass
|
|
* An extra CSS class that will be added to this component's Element
|
|
*/
|
|
elementClass: 'textarea',
|
|
|
|
/**
|
|
* @cfg {Mixed} tpl
|
|
* An Ext.Template, Ext.XTemplate or an array of strings to form an
|
|
* Ext.XTemplate. Used in conjunction with the data and tplWriteMode
|
|
* configurations.
|
|
*/
|
|
tpl: new Ext.XTemplate(
|
|
'<div class="overflow-hidden">',
|
|
'<tpl for="label">',
|
|
'<tpl if="value && parent.layout == \'front\'">',
|
|
'<label for="">{value}{[this.getMessage(parent.validation)]}</label>',
|
|
'</tpl>',
|
|
'</tpl>',
|
|
'<textarea {[this.getAttributes(values.attributes)]}>{data}</textarea>',
|
|
'<tpl for="label">',
|
|
'<tpl if="value && parent.layout == \'back\'">',
|
|
'<label for="">{value}{[this.getMessage(parent.validation)]}</label>',
|
|
'</tpl>',
|
|
'</tpl>',
|
|
'</div>',
|
|
{
|
|
compiled: true,
|
|
getMessage: function(rules) {
|
|
var messageHtml = '';
|
|
var messages = [];
|
|
Ext.iterate(rules, function(rule, configuration) {
|
|
if (configuration.showMessage) {
|
|
messages.push(configuration.message);
|
|
}
|
|
}, this);
|
|
|
|
messageHtml = ' <em>' + messages.join(', ') + '</em>';
|
|
return messageHtml;
|
|
|
|
},
|
|
getAttributes: function(attributes) {
|
|
var attributesHtml = '';
|
|
Ext.iterate(attributes, function(key, value) {
|
|
if (value) {
|
|
attributesHtml += key + '="' + value + '" ';
|
|
}
|
|
}, this);
|
|
return attributesHtml;
|
|
}
|
|
}
|
|
),
|
|
|
|
/**
|
|
* Constructor
|
|
*
|
|
* Add the configuration object to this component
|
|
* @param config
|
|
*/
|
|
constructor: function(config) {
|
|
Ext.apply(this, {
|
|
configuration: {
|
|
attributes: {
|
|
accesskey: '',
|
|
class: '',
|
|
cols: '40',
|
|
dir: '',
|
|
disabled: '',
|
|
id: '',
|
|
lang: '',
|
|
name: '',
|
|
readonly: '',
|
|
rows: '5',
|
|
style: '',
|
|
tabindex: '',
|
|
title: ''
|
|
},
|
|
data: '',
|
|
filters: {},
|
|
label: {
|
|
value: TYPO3.l10n.localize('elements_label')
|
|
},
|
|
layout: 'front',
|
|
validation: {}
|
|
}
|
|
});
|
|
TYPO3.Form.Wizard.Elements.Basic.Textarea.superclass.constructor.apply(this, arguments);
|
|
}
|
|
});
|
|
|
|
Ext.reg('typo3-form-wizard-elements-basic-textarea', TYPO3.Form.Wizard.Elements.Basic.Textarea);
|
|
Ext.namespace('TYPO3.Form.Wizard.Elements.Basic');
|
|
|
|
/**
|
|
* The TEXTLINE element
|
|
*
|
|
* @class TYPO3.Form.Wizard.Elements.Basic.Textline
|
|
* @extends TYPO3.Form.Wizard.Elements
|
|
*/
|
|
TYPO3.Form.Wizard.Elements.Basic.Textline = Ext.extend(TYPO3.Form.Wizard.Elements, {
|
|
/**
|
|
* @cfg {String} elementClass
|
|
* An extra CSS class that will be added to this component's Element
|
|
*/
|
|
elementClass: 'textline',
|
|
|
|
/**
|
|
* @cfg {Mixed} tpl
|
|
* An Ext.Template, Ext.XTemplate or an array of strings to form an
|
|
* Ext.XTemplate. Used in conjunction with the data and tplWriteMode
|
|
* configurations.
|
|
*/
|
|
tpl: new Ext.XTemplate(
|
|
'<div class="overflow-hidden">',
|
|
'<tpl for="label">',
|
|
'<tpl if="value && parent.layout == \'front\'">',
|
|
'<label for="">{value}{[this.getMessage(parent.validation)]}</label>',
|
|
'</tpl>',
|
|
'</tpl>',
|
|
'<input {[this.getAttributes(values.attributes)]} />',
|
|
'<tpl for="label">',
|
|
'<tpl if="value && parent.layout == \'back\'">',
|
|
'<label for="">{value}{[this.getMessage(parent.validation)]}</label>',
|
|
'</tpl>',
|
|
'</tpl>',
|
|
'</div>',
|
|
{
|
|
compiled: true,
|
|
getMessage: function(rules) {
|
|
var messageHtml = '';
|
|
var messages = [];
|
|
Ext.iterate(rules, function(rule, configuration) {
|
|
if (configuration.showMessage) {
|
|
messages.push(configuration.message);
|
|
}
|
|
}, this);
|
|
|
|
messageHtml = ' <em>' + messages.join(', ') + '</em>';
|
|
return messageHtml;
|
|
|
|
},
|
|
getAttributes: function(attributes) {
|
|
var attributesHtml = '';
|
|
Ext.iterate(attributes, function(key, value) {
|
|
if (value) {
|
|
attributesHtml += key + '="' + value + '" ';
|
|
}
|
|
}, this);
|
|
return attributesHtml;
|
|
}
|
|
}
|
|
),
|
|
|
|
/**
|
|
* Constructor
|
|
*
|
|
* Add the configuration object to this component
|
|
* @param config
|
|
*/
|
|
constructor: function(config) {
|
|
Ext.apply(this, {
|
|
configuration: {
|
|
attributes: {
|
|
accesskey: '',
|
|
alt: '',
|
|
class: '',
|
|
dir: '',
|
|
disabled: '',
|
|
id: '',
|
|
lang: '',
|
|
maxlength: '',
|
|
name: '',
|
|
readonly: '',
|
|
size: '',
|
|
style: '',
|
|
tabindex: '',
|
|
title: '',
|
|
type: 'text',
|
|
value: ''
|
|
},
|
|
filters: {},
|
|
label: {
|
|
value: TYPO3.l10n.localize('elements_label')
|
|
},
|
|
layout: 'front',
|
|
validation: {}
|
|
}
|
|
});
|
|
TYPO3.Form.Wizard.Elements.Basic.Textline.superclass.constructor.apply(this, arguments);
|
|
}
|
|
});
|
|
|
|
Ext.reg('typo3-form-wizard-elements-basic-textline', TYPO3.Form.Wizard.Elements.Basic.Textline);
|
|
Ext.namespace('TYPO3.Form.Wizard.Elements.Predefined');
|
|
|
|
/**
|
|
* The predefined EMAIL element
|
|
*
|
|
* @class TYPO3.Form.Wizard.Elements.Predefined.Email
|
|
* @extends TYPO3.Form.Wizard.Elements.Basic.Textline
|
|
*/
|
|
TYPO3.Form.Wizard.Elements.Predefined.Email = Ext.extend(TYPO3.Form.Wizard.Elements.Basic.Textline, {
|
|
/**
|
|
* Initialize the component
|
|
*/
|
|
initComponent: function() {
|
|
var config = {
|
|
configuration: {
|
|
attributes: {
|
|
name: 'email'
|
|
},
|
|
label: {
|
|
value: TYPO3.l10n.localize('elements_label_email')
|
|
},
|
|
validation: {
|
|
required: {
|
|
breakOnError: 0,
|
|
showMessage: 1,
|
|
message: TYPO3.l10n.localize('tx_form_system_validate_required.message'),
|
|
error: TYPO3.l10n.localize('tx_form_system_validate_required.error')
|
|
},
|
|
email: {
|
|
breakOnError: 0,
|
|
showMessage: 1,
|
|
message: TYPO3.l10n.localize('tx_form_system_validate_email.message'),
|
|
error: TYPO3.l10n.localize('tx_form_system_validate_email.error')
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
// MERGE config
|
|
Ext.merge(this, config);
|
|
|
|
// call parent
|
|
TYPO3.Form.Wizard.Elements.Predefined.Email.superclass.initComponent.apply(this, arguments);
|
|
}
|
|
});
|
|
|
|
Ext.reg('typo3-form-wizard-elements-predefined-email', TYPO3.Form.Wizard.Elements.Predefined.Email);
|
|
Ext.namespace('TYPO3.Form.Wizard.Elements.Predefined');
|
|
|
|
/**
|
|
* The predefined CHECKBOX GROUP element
|
|
*
|
|
* @class TYPO3.Form.Wizard.Elements.Predefined.CheckboxGroup
|
|
* @extends TYPO3.Form.Wizard.Elements.Basic.Fieldset
|
|
*/
|
|
TYPO3.Form.Wizard.Elements.Predefined.CheckboxGroup = Ext.extend(TYPO3.Form.Wizard.Elements.Basic.Fieldset, {
|
|
/**
|
|
* @cfg {Mixed} tpl
|
|
* An Ext.Template, Ext.XTemplate or an array of strings to form an
|
|
* Ext.XTemplate. Used in conjunction with the data and tplWriteMode
|
|
* configurations.
|
|
*/
|
|
tpl: new Ext.XTemplate(
|
|
'<div class="overflow-hidden">',
|
|
'<fieldset {[this.getAttributes(values.attributes)]}>',
|
|
'<tpl for="legend">',
|
|
'<tpl if="value">',
|
|
'<legend>{value}{[this.getMessage(parent.validation)]}</legend>',
|
|
'</tpl>',
|
|
'</tpl>',
|
|
'<ol></ol>',
|
|
'</fieldset>',
|
|
'</div>',
|
|
{
|
|
compiled: true,
|
|
getMessage: function(rules) {
|
|
var messageHtml = '';
|
|
var messages = [];
|
|
Ext.iterate(rules, function(rule, configuration) {
|
|
if (configuration.showMessage) {
|
|
messages.push(configuration.message);
|
|
}
|
|
}, this);
|
|
|
|
messageHtml = ' <em>' + messages.join(', ') + '</em>';
|
|
return messageHtml;
|
|
|
|
},
|
|
getAttributes: function(attributes) {
|
|
var attributesHtml = '';
|
|
Ext.iterate(attributes, function(key, value) {
|
|
if (value) {
|
|
attributesHtml += key + '="' + value + '" ';
|
|
}
|
|
}, this);
|
|
return attributesHtml;
|
|
}
|
|
}
|
|
),
|
|
|
|
/**
|
|
* Initialize the component
|
|
*/
|
|
initComponent: function() {
|
|
var config = {
|
|
elementContainer: {
|
|
hasDragAndDrop: false
|
|
},
|
|
configuration: {
|
|
attributes: {
|
|
class: 'fieldset-subgroup',
|
|
dir: '',
|
|
id: '',
|
|
lang: '',
|
|
style: ''
|
|
},
|
|
legend: {
|
|
value: TYPO3.l10n.localize('elements_legend')
|
|
},
|
|
options: [
|
|
{
|
|
data: TYPO3.l10n.localize('elements_option_1')
|
|
}, {
|
|
data: TYPO3.l10n.localize('elements_option_2')
|
|
}, {
|
|
data: TYPO3.l10n.localize('elements_option_3')
|
|
}
|
|
],
|
|
various: {
|
|
name: ''
|
|
},
|
|
validation: {}
|
|
}
|
|
};
|
|
|
|
// apply config
|
|
|