Commit abd590e5 authored by Sven Rhinow's avatar Sven Rhinow

fixed: #3,#4,#5,#5

add jquery-support
remove fixed-style-definition in JS for flexible css-defintion
parent 9261b017
......@@ -52,11 +52,12 @@ class ModuleSRLayer extends \Module
$objTemplate->title = $this->headline;
$objTemplate->id = $this->id;
$objTemplate->link = $this->name;
$objTemplate->href = 'typolight/main.php?do=modules&act=edit&id=' . $this->id;
$objTemplate->href = 'contao/main.php?do=modules&act=edit&id=' . $this->id;
return $objTemplate->parse();
}
if($this->srl_template != '') $strTemplate = $this->srl_template;
if($this->srl_template != '') $this->strTemplate = $this->srl_template;
return parent::generate();
}
......@@ -67,6 +68,7 @@ class ModuleSRLayer extends \Module
*/
protected function compile()
{
global $objPage;
//sucht in den Get-Keys nach einer bestimmten Teil-Zeichenkette
$pos = false;
......@@ -145,10 +147,22 @@ class ModuleSRLayer extends \Module
//expert options
if($this->srl_set_jsoptions == 1)
{
if(strlen($this->srl_set_overLayID)) $this->optionsArr[] = "overLayID:'".$this->srl_set_overLayID."'";
if(strlen($this->srl_set_layerID)) $this->optionsArr[] = "layerID:'".$this->srl_set_layerID."'";
if(strlen($this->srl_set_closeID)) $this->optionsArr[] = "closeID:'".$this->srl_set_closeID."'";
if(strlen($this->srl_set_closeClass)) $this->optionsArr[] = "closeClass:'".$this->srl_set_closeClass."'";
if($objPage->hasJQuery)
{
if(strlen($this->srl_set_overLayID)) $this->optionsArr[] = "overLayID:'#".$this->srl_set_overLayID."'";
if(strlen($this->srl_set_layerID)) $this->optionsArr[] = "layerID:'#".$this->srl_set_layerID."'";
if(strlen($this->srl_set_closeID)) $this->optionsArr[] = "closeID:'#".$this->srl_set_closeID."'";
if(strlen($this->srl_set_closeClass)) $this->optionsArr[] = "closeClass:'.".$this->srl_set_closeClass."'";
} else {
if(strlen($this->srl_set_overLayID)) $this->optionsArr[] = "overLayID:'".$this->srl_set_overLayID."'";
if(strlen($this->srl_set_layerID)) $this->optionsArr[] = "layerID:'".$this->srl_set_layerID."'";
if(strlen($this->srl_set_closeID)) $this->optionsArr[] = "closeID:'".$this->srl_set_closeID."'";
if(strlen($this->srl_set_closeClass)) $this->optionsArr[] = "closeClass:'".$this->srl_set_closeClass."'";
}
if(strlen($this->srl_set_overLayOpacity)) $this->optionsArr[] = 'overLayOpacity:'.$this->srl_set_overLayOpacity;
if(strlen($this->srl_set_duration)) $this->optionsArr[] = 'duration:'.$this->srl_set_duration;
if(!$this->srl_set_closePerEsc) $this->optionsArr[] = 'closePerEsc:false';
......@@ -159,13 +173,13 @@ class ModuleSRLayer extends \Module
$jsOptions = implode(', ',$this->optionsArr);
//eigene CSS-Auszeichnungen aus CSS-Datei
//eigene CSS-Auszeichnungen aus CSS-Datei
if($this->srl_css_file)
{
$cssObjFile = \FilesModel::findByPk($this->srl_css_file);
if(version_compare(VERSION, '3.2','>='))
{
{
if ($cssObjFile === null)
{
if (!Validator::isUuid($this->srl_css_file))
......@@ -173,28 +187,40 @@ class ModuleSRLayer extends \Module
$this->log($GLOBALS['TL_LANG']['ERR']['version2format'],'ModuleSRLayer.php srl_css_file','TL_ERROR');
}
}
$cssPath = $cssObjFile->path;
$cssPath = $cssObjFile->path;
}
elseif(version_compare(VERSION, '3.2','<'))
{
// if (!is_numeric($this->srl_css_file))
// {
// $this->log($GLOBALS['TL_LANG']['ERR']['version2format'],'ModuleSRLayer.php srl_css_file','TL_ERROR');
// }
$cssPath = $cssObjFile->path;
}
}
$GLOBALS['TL_CSS'][] = ($cssPath) ? $cssPath : $GLOBALS['SRL_CSS'].'?'.time();
foreach($GLOBALS['SRL_JS']['mootools'] as $jsSource)
$GLOBALS['TL_CSS'][] = ($cssPath) ? $cssPath : $GLOBALS['SRL_CSS'];
//wenn jQuery aktiviert ist dann jQuery (vorrangig)
if($objPage->hasJQuery && is_array($GLOBALS['SRL_JS']['jquery']))
{
$GLOBALS['TL_JAVASCRIPT'][] = $jsSource.'?'.time();
foreach($GLOBALS['SRL_JS']['jquery'] as $jsSource)
{
$GLOBALS['TL_JAVASCRIPT'][] = $jsSource;
}
if((int) $this->srl_delay > 0) $GLOBALS['TL_JQUERY'][] = '<script type="text/javascript"> jQuery(document).ready(function() { setTimeout(function(){ var ml = new $.srLayer( { '.$jsOptions.', '.$this->srl_option_other.' } ); }, '.$this->srl_delay.'); });</script>';
else $GLOBALS['TL_JQUERY'][] = '<script type="text/javascript">jQuery(document).ready(function() { $.srLayer( { '.$jsOptions.', '.$this->srl_option_other.' } ); });</script>';
}
// ansonsten Mootools
else if($objPage->hasMooTools && is_array($GLOBALS['SRL_JS']['mootools']))
{
if((int) $this->srl_delay > 0) $GLOBALS['TL_MOOTOOLS'][] = '<script type="text/javascript"> window.addEvent(\'domready\', function() { var ml = new myLayer( { '.$jsOptions.', '.$this->srl_option_other.' } ); }.delay('.$this->srl_delay.'));</script>';
else $GLOBALS['TL_MOOTOOLS'][] = '<script type="text/javascript"> window.addEvent(\'domready\', function() { var ml = new myLayer( { '.$jsOptions.', '.$this->srl_option_other.' } ); });</script>';
foreach($GLOBALS['SRL_JS']['mootools'] as $jsSource)
{
$GLOBALS['TL_JAVASCRIPT'][] = $jsSource;
}
if((int) $this->srl_delay > 0) $GLOBALS['TL_MOOTOOLS'][] = '<script type="text/javascript"> window.addEvent(\'domready\', function() { var ml = new srLayer( { '.$jsOptions.', '.$this->srl_option_other.' } ); }.delay('.$this->srl_delay.'));</script>';
else $GLOBALS['TL_MOOTOOLS'][] = '<script type="text/javascript"> window.addEvent(\'domready\', function() { var ml = new srLayer( { '.$jsOptions.', '.$this->srl_option_other.' } ); });</script>';
}
$this->Template->content = $this->srl_content;
$this->Template->showLayerHtml = $this->show;
......
......@@ -5,24 +5,24 @@
left: 0;
width: 100%;
height: 100%;
opacity: 0.7;
background-color: #000;
cursor: pointer;
display:none;
/* border:3px solid #f00; */
}
#srl_layer{
position:fixed;
z-index: 9999;
height:460px;
width:790px;
display:none;
overflow: auto;
background-color: #fff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border:2px solid black;
background-color: #fff;
width: 700px;
height: 500px;
position: fixed;
top: 50%;
left: 50%;
margin-left: -350px;
margin-top: -250px;
z-index: 9999;
display:none;
}
#srl_closeBtn {
position:absolute;
right:10px;
......
// author: Sven Rhinow
// website: http://www.sr-tag.de
// srLayer is MIT-Licensed
;(function($){
$.srLayer = function( options )
{
var defaults = {
parentEl : '#top',
overLayID: '#srl_overLay',
drawOverLay: false, // false = nicht erstellen wenn ein Element mit dieser ID schon im HTML existiert
overLayOpacity: 0.7,
layerID : '#srl_layer',
drawLayer: false, //false = nicht erstellen wenn ein Element mit dieser ID schon im HTML existiert
closePerLayerClick:true,
closePerEsc:true,
closeID : '#srl_closeBtn',
closeClass: '.srl_closer',
drawCloseBtn: false, //false = nicht erstellen wenn ein Element mit dieser ID schon im HTML existiert
contentID : '#srl_content',
mkLinkEvents: true, // wenn false wird kein Link mit dem Click-Event ausgestattet (z.B. beim sortigen anzeigen)
duration : 1000,
// Hoehe vom Headimage + Höhe der Hauptnavigation
topheight : 0, // differenz wenn der Layer obere Bereiche überdecken soll
parentsize : '',
showNow: false //der Layer wird direkt beim laden der Seite angezeigt
};
var plugin = this;
var init = function() {
//overwrite options
plugin.settings = $.extend({}, defaults, options);
//key-events verarbeiten
if(plugin.settings.closePerEsc)
{
$(document).on('keydown', function(e){
var code = e.keyCode || e.which;
switch(code)
{
case 27: // Esc
// case 88: // 'x' #fix: sonst functionieren Formulareingaben nicht
// case 67: // 'c' #fix: sonst functionieren Formulareingaben nicht
close();
}
});
}
//add event of all links with rel="openlayer" or class="openlayer"
if(plugin.settings.mkLinkEvents)
{
var links = $('a').filter(function(el)
{
var patt = /^openlayer/i;
if($(this).attr('rel') && patt.test($(this).attr('rel')) ) return true;
else if ( $(this).hasClass('openlayer') ) return true;
else return false;
});
links.each(function(i)
{
$(this).on('click', function(e)
{
e.preventDefault(); //Prevents the browser from following the link.
$('html body').animate(
{scrollTop: ($('#'+plugin.settings.parent).top)},0
);
open(this);
});
});
}
createHtml();
if(plugin.settings.showNow)
{
open();
}
else
{
$(plugin.settings.layerID).css('display', 'none');
}
}
var createHtml = function()
{
if($(plugin.settings.overLayID))
{
//add event on overlay
if(plugin.settings.closePerLayerClick)
{
$(plugin.settings.overLayID).on('click', function(e)
{
e.preventDefault(); //Prevents the browser from following the link.
close();
});
}
}
// add event on close-button
if($(plugin.settings.closeID))
{
$(plugin.settings.closeID).on('click', function(e)
{
e.preventDefault(); //Prevents the browser from following the link.
close();
});
}
// add event on close-link
if($(plugin.settings.closeClass))
{
$(plugin.settings.closeClass).on('click', function(e)
{
e.preventDefault(); //Prevents the browser from following the link.
close();
});
}
}
var close = function()
{
if($(plugin.settings.layerID)) $(plugin.settings.layerID).fadeOut(plugin.settings.duration);
if($(plugin.settings.overLayID)) $(plugin.settings.overLayID).fadeOut(plugin.settings.duration);
}
var open = function(el)
{
if($(plugin.settings.layerID))
{
$(plugin.settings.layerID).fadeIn(plugin.settings.duration);
}
if($(plugin.settings.overLayID))
{
$(plugin.settings.overLayID).fadeIn(plugin.settings.duration);
}
}
init();
}
}) (jQuery);
// author: Sven Rhinow website: http://www.sr-tag.de
// myLayer is MIT-Licensed
var myLayer = new Class
var srLayer = new Class
( {
Implements: [ Options ],
......@@ -12,8 +12,6 @@
drawOverLay: false, // false = nicht erstellen wenn ein Element mit dieser ID schon im HTML existiert
overLayOpacity: 0.7,
layerID : 'srl_layer',
layerWidth: 500,
layerHeight: 400,
drawLayer: false, //false = nicht erstellen wenn ein Element mit dieser ID schon im HTML existiert
closePerLayerClick:true,
closePerEsc:true,
......@@ -23,8 +21,6 @@
contentID : 'srl_content',
mkLinkEvents: true, // wenn false wird kein Link mit dem Click-Event ausgestattet (z.B. beim sortigen anzeigen)
duration : 1000,
drawLayerCenterY:true,
drawLayerCenterX:true,
// Höhe vom Headimage + Höhe der Hauptnavigation
topheight : 0, // differenz wenn der Layer obere Bereiche überdecken soll
......@@ -40,8 +36,6 @@
this.parentEl = document.id(this.options.parentEl);
this.overLayID = this.options.overLayID;
this.layerID = this.options.layerID;
this.layerWidth = this.options.layerWidth,
this.layerHeight = this.options.layerHeight,
this.closePerLayerClick = this.options.closePerLayerClick;
this.closePerEsc = this.options.closePerEsc;
this.closeID = this.options.closeID;
......@@ -52,29 +46,6 @@
this.topheight = this.options.topheight;
this.parentsize = this.options.parentsize;
this.showNow = this.options.showNow;
this.overLayOpacity = this.options.overLayOpacity;
this.drawLayerCenterY = this.options.drawLayerCenterY;
this.drawLayerCenterX = this.options.drawLayerCenterX;
//resize and positon if resize browser
window.addEvent('resize', function()
{
this.parentsize = this.parentEl.getSize();
//when jquery is loading get undefined function error
var overLayID = this.overLayID;
var layerID = this.layerID;
$(overLayID).setStyles(
{
width : this.parentsize.x,
height : this.parentsize.y
});
if(this.drawLayerCenterX) $(layerID).setStyles({ 'left': (this.parentsize.x - this.layerWidth) / 2 });
if(this.drawLayerCenterY) $(layerID).setStyles({ 'top': (this.parentsize.y - this.layerHeight) / 2 });
}.bind(this));
//key-events verarbeiten
if(this.closePerEsc)
......@@ -121,37 +92,21 @@
}
else
{
//when jquery is loading get undefined function error
var layerID = this.layerID;
$(layerID).setStyle('display', 'none');
$(this.layerID).setStyle('display', 'none');
}
},
createHtml: function()
{
this.parentsize = this.parentEl.getSize();
//when jquery is loading get undefined function error with $(this.OPTIONNAME)
var overLayID = this.overLayID;
var layerID = this.layerID;
var closeID = this.closeID;
var closeClass = this.closeClass;
// position overlay
if($(overLayID))
if($(this.overLayID))
{
$(overLayID).setStyles({
width : this.parentsize.x,
height : this.parentsize.y,
top: this.topheight,
opacity: 0
});
//add event on overlay
if(this.closePerLayerClick)
{
$(overLayID).addEvent('click', function(event)
$(this.overLayID).addEvent('click', function(event)
{
event.stop(); //Prevents the browser from following the link.
this.close();
......@@ -159,27 +114,11 @@
}
}
// position layer
if( $(layerID) )
{
$(layerID).setStyles(
{
width : this.layerWidth,
height : this.layerHeight,
opacity: 0
});
var centerLeft = (this.parentsize.x - this.layerWidth) / 2;
var centerTop = (this.parentsize.y - this.layerHeight) / 2;
if(this.drawLayerCenterX) $(layerID).setStyle( 'left', centerLeft );
if(this.drawLayerCenterY) $(layerID).setStyle( 'top',centerTop );
}
// add event on close-button
if($(closeID))
if($(this.closeID))
{
$(closeID).addEvent('click', function(event)
$(this.closeID).addEvent('click', function(event)
{
event.stop(); //Prevents the browser from following the link.
this.close();
......@@ -187,9 +126,9 @@
}
// add event on close-link
if($$(closeClass))
if($$(this.closeClass))
{
$$('.'+closeClass).addEvent('click', function(event)
$$('.'+this.closeClass).addEvent('click', function(event)
{
event.stop(); //Prevents the browser from following the link.
this.close();
......@@ -200,35 +139,23 @@
close: function()
{
//when jquery is loading get undefined function error
var overLayID = this.overLayID;
var layerID = this.layerID;
if($(layerID)) $(layerID).tween('opacity',0).setStyle('display', 'none');
if($(overLayID)) $(overLayID).tween('opacity',0).setStyle('display', 'none');
if($(this.layerID)) $(this.layerID).setStyle('display', 'none');
if($(this.overLayID)) $(this.overLayID).setStyle('display', 'none');
},
open: function(el)
{
//when jquery is loading get undefined function error
var overLayID = this.overLayID;
var layerID = this.layerID;
if($(layerID))
if($(this.layerID))
{
$(layerID).set('tween',{
$(this.layerID).set('tween',{
duration: this.duration,
transition: Fx.Transitions.Quad.easeIn,
});
$(layerID).setStyle('display', 'block').tween('opacity',1);
$(this.layerID).setStyle('display', 'block');
}
if($(overLayID))
if($(this.overLayID))
{
$(overLayID).set('tween',{
duration: this.duration,
transition: Fx.Transitions.Quad.easeIn,
});
$(overLayID).setStyle('display', 'block').tween('opacity',this.overLayOpacity);
$(this.overLayID).setStyle('display', 'block');
}
}
} );
......
......@@ -21,3 +21,4 @@
*/
$GLOBALS['SRL_CSS'] = 'system/modules/srlayer/assets/css/srl_default.css';
$GLOBALS['SRL_JS']['mootools'][] = 'system/modules/srlayer/assets/js/srl_mootools.js';
$GLOBALS['SRL_JS']['jquery'][] = 'system/modules/srlayer/assets/js/srl_jquery.js';
......@@ -13,12 +13,12 @@
$GLOBALS['TL_DCA']['tl_module']['palettes']['__selector__'] = array_merge( $GLOBALS['TL_DCA']['tl_module']['palettes']['__selector__'], array('srl_set_cookie', 'srl_set_jsoptions'));
$GLOBALS['TL_DCA']['tl_module']['palettes']['srlayer'] = 'name,type;{layer_legend},srl_content,srl_option_layerwidth,srl_option_layerheight;{htmlcss_legend},srl_template,srl_css_file;{show_legend},srl_no_param,srl_set_mkLinkEvents,srl_substr,srl_delay,srl_start,srl_stop;{session_legend},srl_set_session;{cookie_legend},srl_set_cookie;{expert_legend:hide},srl_hideOverlay;{js_legend:hide},srl_set_jsoptions';
$GLOBALS['TL_DCA']['tl_module']['palettes']['srlayer'] = 'name,type;{layer_legend},srl_content;{htmlcss_legend},srl_template,srl_css_file;{show_legend},srl_no_param,srl_set_mkLinkEvents,srl_substr,srl_delay,srl_start,srl_stop;{session_legend},srl_set_session;{cookie_legend},srl_set_cookie;{expert_legend:hide},srl_hideOverlay;{js_legend:hide},srl_set_jsoptions';
$GLOBALS['TL_DCA']['tl_module']['subpalettes'] = array_merge($GLOBALS['TL_DCA']['tl_module']['subpalettes'],
array(
'srl_set_cookie' => 'srl_cookie_name,srl_cookie_dauer',
'srl_set_jsoptions' => 'srl_set_overLayID,srl_set_layerID,srl_set_closeID,srl_set_closeClass,srl_set_overLayOpacity,srl_set_duration,srl_set_closePerEsc,srl_set_closePerLayerClick,srl_set_drawLayerCenterX,srl_set_drawLayerCenterY,srl_option_other'
'srl_set_jsoptions' => 'srl_set_overLayID,srl_set_layerID,srl_set_closeID,srl_set_closeClass,srl_set_duration,srl_set_closePerEsc,srl_set_closePerLayerClick,srl_option_other'
)
);
......@@ -122,7 +122,7 @@ array_insert($GLOBALS['TL_DCA']['tl_module']['fields'] , 2, array
'default' => '600',
'exclude' => true,
'inputType' => 'text',
'eval' => array('mandatory'=>true,'maxlength'=>55,'tl_class'=>'w50','rgxp'=>'digit'),
'eval' => array('mandatory'=>false,'maxlength'=>55,'tl_class'=>'w50','rgxp'=>'digit'),
'sql' => "varchar(55) NOT NULL default ''"
),
'srl_option_layerheight' => array
......@@ -131,7 +131,7 @@ array_insert($GLOBALS['TL_DCA']['tl_module']['fields'] , 2, array
'default' => '450',
'exclude' => true,
'inputType' => 'text',
'eval' => array('mandatory'=>true,'maxlength'=>55,'tl_class'=>'w50','rgxp'=>'digit'),
'eval' => array('mandatory'=>false,'maxlength'=>55,'tl_class'=>'w50','rgxp'=>'digit'),
'sql' => "varchar(55) NOT NULL default ''"
),
'srl_hideOverlay' => array
......@@ -204,7 +204,7 @@ array_insert($GLOBALS['TL_DCA']['tl_module']['fields'] , 2, array
'default' => '1000',
'exclude' => true,
'inputType' => 'text',
'eval' => array('tl_class'=>'w50'),
'eval' => array(),
'sql' => "varchar(55) NOT NULL default '1000'"
),
'srl_set_closePerEsc' => array
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment