<?xml version='1.0' encoding='UTF-8'?><uidget><metadata><name>Bande</name><api_version>1.0</api_version><size height='115' width='400' /><blog en='1201' /></metadata><view><content></content><properties /><design_properties><trigger default_action='true' icon='palette' text='Changer le mode' trigger='select_mode_view' /><bloc><checkbox class='fullWidth' default='false' help='La largeur de la bande  sera ajustée à celle du navigateur de l&apos;internaute.' name='full_width' value='Pleine largeur d&apos;écran' /></bloc><bloc class='strip_reserved'><colors default='&apos;theme_color&apos;' elts='1' name='strip_colors' options='[{allow_gradient: true}]' title='Couleur de la bande' /><checkbox default='false' name='border_activate' value='Bordures' /><border default='({&apos;all&apos;:[3, &apos;solid&apos;, &apos;rgba(255,255,255,1)&apos;, true], &apos;bt&apos;:[3, &apos;solid&apos;, &apos;rgba(255,255,255,1)&apos;, false], &apos;br&apos;:[3, &apos;solid&apos;, &apos;rgba(255,255,255,1)&apos;, false], &apos;bb&apos;:[3, &apos;solid&apos;, &apos;rgba(255,255,255,1)&apos;, false], &apos;bl&apos;:[3, &apos;solid&apos;, &apos;rgba(255,255,255,1)&apos;, false]})' name='border' /><radius default='[0, 0, 0, 0]' maximum='100' minimum='0' name='radius' title='Coins arrondis' /><checkbox default='false' name='shadow_activate' value='Ombre' /><box_shadow default='[45, 5, 0, 5, &apos;rgba(0,0,0,0.4)&apos;, false, &apos;3px 3px 5px 0px rgba(0,0,0,0.4)&apos;]' name='shadow' /></bloc><bloc class='wave_reserved'><trigger default_action='true' icon='palette' text='Générer' trigger='create' /><colors default='&apos;theme_color&apos;' elts='1' name='wave_color' options='[{allow_gradient: true, simple_gradient: true}]' title='Couleur de la vague' /><slider default='4' maximum='50' minimum='2' name='segmentCount' title='Nombre de segments' /><slider default='5' maximum='20' minimum='1' name='variance' title='Variance' /><select default='&apos;top&apos;' display='En haut|En bas' name='orientation' title='Orientation' values='top|bottom' /></bloc><bloc class='skew_reserved'><colors default='&apos;theme_color&apos;' elts='1' name='skew_colors' options='[{allow_gradient: true}]' title='Couleur de la bande' /><slider default='15' maximum='70' minimum='-70' name='skewY' title='Inclinaison' /></bloc></design_properties></view><script>UI_List.UI_Strip={initialize:function(t){this.cpt=t;this.init=!0
;t.setOptions([&quot;locked&quot;,&quot;footer&quot;,&quot;sticky&quot;,&quot;fixed&quot;,&quot;container&quot;])
;&quot;editor&quot;==v.mode&amp;&amp;(this.blockSelectionMode=new BlockSelectionMode(this.cpt,[{
name:&quot;Bande&quot;,icon:&quot;strip&quot;,data_name:&quot;strip&quot;},{name:&quot;Vague&quot;,
icon:&quot;wave&quot;,data_name:&quot;wave&quot;},{name:&quot;Inclinaison&quot;,icon:&quot;skew&quot;,
data_name:&quot;skew&quot;}]))},onDisplay:function(){var t=this
;this.create();this.init=!1
;&quot;editor&quot;==v.mode&amp;&amp;sigCtl.connect(&quot;Theme.changed&quot;,function(){
t.create()})
;this.cpt.setFullWidth(this.cpt.data.full_width,!1,!1)},
onPropertyChanged:function(t){
if(!this.init&amp;&amp;!t.include(&quot;wave&quot;)){
t.include(&quot;full_width&quot;)&amp;&amp;this.cpt.setFullWidth(this.cpt.data.full_width,!1,!1)
;if(t.include(&quot;select_mode_view&quot;))this.blockSelectionMode.show_select();else if(t.include(&quot;create&quot;))this.create(!0);else{
this._showProp()
;this.create(t.include(&quot;full_width&quot;)||t.include(&quot;mode&quot;)||t.include(&quot;segmentCount&quot;)||t.include(&quot;layerCount&quot;)||t.include(&quot;variance&quot;))
}}},onResizeStop:function(){
this.create(&quot;wave&quot;!=this.cpt.data.mode||&quot;editor&quot;==v.mode&amp;&amp;/onDraggable/.test($(&quot;body&quot;).attr(&quot;class&quot;)))
},onMoveStop:function(){
this.cpt.setFullWidth(this.cpt.data.full_width,!1,!0)},
onSelect:function(){this._showProp()},_showProp:function(){
if(this.cpt.propertyNode){
var t=this.cpt.propertyNode.add(this.cpt.propertyDesignNode)
;[&quot;strip&quot;,&quot;wave&quot;,&quot;skew&quot;].each(function(e){
$(&quot;.&quot;+e+&quot;_reserved&quot;,t).hide()})
;$(&quot;.&quot;+this.cpt.data.mode+&quot;_reserved&quot;,t).show()
;var e=$(&quot;.border_prop&quot;,t);e.hide()
;&quot;strip&quot;==this.cpt.data.mode&amp;&amp;this.cpt.data.border_activate&amp;&amp;e.show()
;var a=$(&quot;.propShadow&quot;,t);a.hide()
;&quot;strip&quot;==this.cpt.data.mode&amp;&amp;this.cpt.data.shadow_activate&amp;&amp;a.show()
}},create:function(build){
var self=this,node=$(&quot;&lt;div class=&apos;strip&apos;&gt;&quot;)
;node.addClass(this.cpt.data.mode+&quot;_mode&quot;)
;switch(this.cpt.data.mode){case&quot;strip&quot;:
&quot;string&quot;==typeof this.cpt.data.strip_colors?node.css(&quot;background&quot;,/get_color/.test(this.cpt.data.strip_colors)?eval(this.cpt.data.strip_colors):this.cpt.data.strip_colors):node.setBackgroundGradient(this.cpt.data.strip_colors[1],this.cpt.data.strip_colors[0],this.cpt.data.strip_colors[2])
;node.css(&quot;border-radius&quot;,$.map(self.cpt.data.radius,function(t){
return t+&quot;px&quot;}).join(&quot; &quot;));this.setBorder(node)
;this.setShadow(node)
;this.cpt.setFullWidth(this.cpt.data.full_width,!1,!1);break
;case&quot;wave&quot;:var gradient_defs=null
;this.cpt.load_script(&quot;js&quot;,&quot;wavery&quot;,&quot;ui_strip_wave&quot;)
;var build_wave=function(){if(build){var wavery=new Wavery({
width:self.cpt.data.full_width?3500:self.cpt.W(),
height:self.cpt.H(),
segmentCount:self.cpt.getData(&quot;segmentCount&quot;)||4,layerCount:2,
variance:self.cpt.getData(&quot;variance&quot;)/10||.5,gradientColors:[{
colorValue:&quot;red&quot;,position:0}]}),svg=wavery.generateSvg()
;self.cpt.setData(&quot;wave&quot;,svg.outerHTML)
;var gr_id=$.fn.genId(&quot;svg_gradient_&quot;)
;gradient_defs=self.applyGradient(svg,gradient_defs,gr_id)
;var svg2=null;if(gradient_defs){svg2=$(svg).clone()
;$(&quot;path&quot;,svg2).css(&quot;fill&quot;,&quot;url(#&quot;+gr_id+&quot;)&quot;).attr(&quot;fill&quot;,&quot;url(#&quot;+gr_id+&quot;)&quot;)
}node.html(svg2||svg.outerHTML)}else{
var placeholder=document.createElement(&quot;div&quot;),wave_html=self.cpt.getData(&quot;wave&quot;),old_h=wave_html.match(/height=\&quot;(\d+)\&quot;/)[1]
;wave_html=wave_html.replace(new RegExp(old_h,&quot;g&quot;),self.cpt.H())
;placeholder.innerHTML=wave_html;var svg=placeholder.firstChild
;placeholder.remove();var gr_id=$.fn.genId(&quot;svg_gradient_&quot;)
;gradient_defs=self.applyGradient(svg,gradient_defs,gr_id)
;var svg2=$(svg).clone();if(gradient_defs){
$(&quot;path&quot;,svg2).css(&quot;fill&quot;,&quot;url(#&quot;+gr_id+&quot;)&quot;).attr(&quot;fill&quot;,&quot;url(#&quot;+gr_id+&quot;)&quot;)
;node.html(svg2)}node.html(svg2||data_to_$)}
$(&quot;rect&quot;,node).remove()
;gradient_defs||$(&quot;path&quot;,node).css(&quot;fill&quot;,/get_color/.test(self.cpt.data.wave_color)?eval(self.cpt.data.wave_color):self.cpt.data.wave_color)
;self.cpt.setFullWidth(self.cpt.data.full_width,!1,!1);var ori={
top:&quot;0deg&quot;,bottom:&quot;180deg&quot;};node.css({
transform:&quot;rotate(&quot;+ori[self.cpt.data.orientation]+&quot;)&quot;,
&quot;-webkit-transform&quot;:&quot;rotate(&quot;+ori[self.cpt.data.orientation]+&quot;)&quot;
});self.cpt.componentBody.html(node)};Misc.poll(function(){
return window.Wavery},function(){build_wave()});break
;case&quot;skew&quot;:
&quot;string&quot;==typeof this.cpt.data.skew_colors?node.css(&quot;background&quot;,/get_color/.test(this.cpt.data.skew_colors)?eval(this.cpt.data.skew_colors):this.cpt.data.skew_colors):node.setBackgroundGradient(this.cpt.data.skew_colors[1],this.cpt.data.skew_colors[0],this.cpt.data.skew_colors[2])
;this.cpt.setFullWidth(this.cpt.data.full_width,!1,!1)
;node.css({
&quot;webkit-transform&quot;:&quot;skewY(&quot;+this.cpt.getData(&quot;skewY&quot;)+&quot;deg)&quot;,
transform:&quot;skewY(&quot;+this.cpt.getData(&quot;skewY&quot;)+&quot;deg)&quot;});break
;default:this.blockSelectionMode.show_select()}
this.cpt.data.mode&amp;&amp;this.cpt.componentBody.html(node)},
setBorder:function(t){t.css({border:&quot;&quot;,&quot;border-bottom&quot;:&quot;&quot;,
&quot;border-top&quot;:&quot;&quot;,&quot;border-right&quot;:&quot;&quot;,&quot;border-left&quot;:&quot;&quot;})
;if([&quot;strip&quot;,&quot;skew&quot;].include(this.cpt.data.mode)&amp;&amp;this.cpt.data.border_activate)if(this.cpt.data.border.all[3]){
var e=this.cpt.getData(&quot;border&quot;).all
;t.css(&quot;border&quot;,e[0]+&quot;px &quot;+e[1]+&quot; &quot;+e[2])}else{var a={
bt:&quot;border-top&quot;,bb:&quot;border-bottom&quot;,bl:&quot;border-left&quot;,
br:&quot;border-right&quot;}
;$.each(this.cpt.getData(&quot;border&quot;),function(e,s){
s[3]&amp;&amp;t.css(a[e],s[0]+&quot;px &quot;+s[1]+&quot; &quot;+s[2])})}},
setShadow:function(t){t.css(&quot;box-shadow&quot;,&quot;&quot;)
;[&quot;strip&quot;,&quot;skew&quot;].include(this.cpt.data.mode)&amp;&amp;this.cpt.data.shadow_activate&amp;&amp;t.css(&quot;box-shadow&quot;,this.cpt.data.shadow[6])
},onDeviceChanged:function(){},
applyGradient:function(svg,gradient_defs,gr_id){
var svgNS=svg.namespaceURI
;if(&quot;string&quot;!=typeof this.cpt.data.wave_color){
gradient_defs=document.createElementNS(svgNS,&quot;linearGradient&quot;)
;gradient_defs.setAttribute(&quot;id&quot;,gr_id);var ori_svg
;ori_svg=&quot;vertical&quot;==this.cpt.data.wave_color[0]?&quot;top &quot;==this.cpt.data.orientation?[[&quot;x1&quot;,&quot;1&quot;],[&quot;y1&quot;,&quot;1&quot;],[&quot;x2&quot;,&quot;1&quot;],[&quot;y2&quot;,&quot;0&quot;]]:[[&quot;x1&quot;,&quot;0&quot;],[&quot;y1&quot;,&quot;0&quot;],[&quot;x2&quot;,&quot;0&quot;],[&quot;y2&quot;,&quot;1&quot;]]:[[&quot;x1&quot;,&quot;0&quot;],[&quot;y1&quot;,&quot;1&quot;],[&quot;x2&quot;,&quot;1&quot;],[&quot;y2&quot;,&quot;1&quot;]]
;ori_svg.each(function(t){gradient_defs.setAttribute(t[0],t[1])
});for(var i=0;i&lt;this.cpt.data.wave_color[1].length;i++){
var attrs=this.cpt.data.wave_color[1][i],stop=document.createElementNS(svgNS,&quot;stop&quot;)
;stop.setAttribute(&quot;offset&quot;,attrs[0])
;stop.setAttribute(&quot;stop-color&quot;,/get_color/.test(attrs[1])?eval(attrs[1]):attrs[1])
;gradient_defs.appendChild(stop)}
var defs=svg.insertBefore(document.createElementNS(svgNS,&quot;defs&quot;),svg.firstChild)
;defs.appendChild(gradient_defs);return gradient_defs}}};</script><style>.componentBody.UI_Strip{overflow:visible}
.strip{position:absolute;top:0;left:0;right:0;bottom:0;box-sizing:border-box}
.wave_mode&gt;svg{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;overflow:visible}</style></uidget>