silk.carousel = xb.core.object.extend( {
} );
silk.carousel.mount = xb.core.object.extend( silk.node.mount, {
ctor: function( domNode, name, resource ) {
var self = this;
if ( !this.DOMNodeHandler ) {
this.DOMNodeHandler = silk.carousel.mount.handler;
}
silk.node.mount.prototype.ctor.call( this, domNode, name, resource );
},
onLoad: function() {
console.log( "onLoad@carouselMount", this.resource.data[ this.fieldName ] );
this.display();
},
display: function() {
var data = this.resource.data[ this.fieldName ];
if ( 1 || data instanceof Array ) {
this.render( data, true );
} else {
console.error( "carouselMount::display()", this.name, this.resource.data, "data is not an array" );
}
},
onDOMChange: function( handler ) {
var data = handler.getValue();
var reload = ( this.resource.data[ this.fieldName ].length !== data.length );
console.log( "owl-carousel::onUpdateData", data, reload );
this.resource.data[ this.fieldName ] = data;
if ( reload ) {
this.display();
}
}
} );
silk.carousel.mount.handler = xb.core.object.extend( silk.node.mount.DOMNode, {
factory: function( mount, domNode ) {
return new silk.carousel.mount.handler( mount, domNode );
},
ctor: function( mount, domNode ) {
this.owl = null;
silk.node.mount.DOMNode.prototype.ctor.call( this, mount, domNode );
},
getValue: function() {
var data =
this.each( function( context, index ) {
// console.warn( "each", this.domNode );
if ( $( this.domNode.parentNode ).hasClass( "cloned" ) ) {
return null;
}
return this.getValue();
}, { mp: this } );
return data;
},
display: function( data ) {
var data = ( ! ( data instanceof Array ) ) ? [] : data.slice();
if ( data.length < 2 ) {
for ( var i = data.length; i < 2; i++ ) {
data.push( {
"image": {
"src": "/images/placeholder.jpg"
}
} );
}
}
this.render( data, true );
if ( this.owl !== null ) {
console.log( this.owl );
$( this.owl ).trigger( "destroy.owl.carousel" );
}
var settings = xb.core.object.prototype.copy.call( carousel[ this.mount.resource.config.name ] );
//console.log( "EDIT?", document.body.getAttribute( "data-simply-edit" ) );
if ( document.body.getAttribute( "data-simply-edit" ) ) {
settings[ "autoplay" ] = false;
settings[ "mouseDrag" ] = false;
}
//console.log( "INITING OWL", this.domNode );
this.owl = $( this.domNode ).owlCarousel( settings );
$( "img[data-simply-src]" ).each( function() {
//console.log( "IMG: ", this.getAttribute( "data-simply-src" ), "=>", this.getAttribute( "src" ) );
this.setAttribute( "src", this.getAttribute( "data-simply-src" ) );
} );
}
} );
silk.carousel.resource = xb.core.object.extend( silk.resource, {
handlers: {
"*": silk.carousel.mount
},
ctor: function( config ) {
silk.resource.prototype.ctor.call( this, config );
},
endpoint: function() {
var result = "/";
$( document ).find( "script[data-simply-endpoint]" ).each( function() {
var _res = this.getAttribute( "data-simply-endpoint" );
if( _res !== null ) {
result = _res;
}
} );
return result;
},
init: function() {
var self = this;
this.data = [];
console.log( "carouselResource::init", this.endpoint() );
var params = {}; //
this.loadURL( this.endpoint() + "data/" + this.config.name + ".json", null, function( result ) {
console.log( "loaded", result );
// self.data = result;
self.load( result );
var settings = carousel[ self.config.name ];
if ( typeof( settings ) === "object" && typeof( settings.onload ) === "function" ) {
settings.onload( this );
}
} );
},
save: function() {
var self = this;
var params = JSON.stringify( this.data, null, "\t" );
//console.log( "saving string", params );
console.log( this.name, "saving data", this.data );
this.putURL( this.endpoint() + "data/" + this.config.name + ".json", params, function( status, result ) {
console.log( "saved", status, result );
} );
}
} );