tsai
/
grapesjs
mirror of https://github.com/artf/grapesjs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Clean demo

pull/67/head
Artur Arseniev 9 years ago
parent
84d5b027b2
commit
bbccebadf1
2 changed files with 0 additions and 192 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 32
      index.html
  2. 160
      src/demo.js

32
index.html
View File

@ -14,38 +14,6 @@
<div id="gjs" style="height:0px; overflow:hidden">
<header class="header-banner">
<section class="section-testimonials">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1 class="h1-with-decor text-center">Testimonials</h1>
<div class="slider carousel" data-gjs-type="slider">
<div class="slider-mask" data-gjs-custom-name="Slider Mask" data-gjs-droppable="false" data-gjs-draggable="false">
<div class="slider-slideset" data-gjs-type="slider-set" data-gjs-custom-name="Slider Set">
<div class="slider-slide" data-gjs-type="slide">
<cite class="cite">
<img src="https://cdn.filestackcontent.com/o54S2SKtSF2n3QHyzLjF" alt="Image description" width="130" height="130" class="cite-img"><strong class="cite-name">Henry Palmer</strong>App Professional Editor
</cite>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="slider-slide" data-gjs-type="slide">
<cite class="cite"><img src="https://cdn.filestackcontent.com/o54S2SKtSF2n3QHyzLjF" alt="Image description" width="130" height="130" class="cite-img"><strong class="cite-name">Henry Palmer</strong>App Professional Editor</cite>
<p>#2 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="slider-slide" data-gjs-type="slide">
<cite class="cite"><img src="https://cdn.filestackcontent.com/o54S2SKtSF2n3QHyzLjF" alt="Image description" width="130" height="130" class="cite-img"><strong class="cite-name">Henry Palmer</strong>App Professional Editor</cite>
<p>#3 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
</div>
<a href="#" class="btn-slider-prev" data-gjs-type="slider-nav"></a>
<a href="#" class="btn-slider-next" data-gjs-type="slider-nav"></a>
<div class="slider-pagination text-center"></div>
</div>
</div>
</div>
</div>
</section>
<div class="container-width">
<!--
<table>

160
src/demo.js
View File

@ -400,166 +400,6 @@ require(['config/require-config'], function() {
attributes: { title: 'Empty canvas' }
}]);
var domc = editor.DomComponents;
var defaultType = domc.getType('default');
var defaultModel = defaultType.model;
var defaultView = defaultType.view;
// Slider
domc.addType('slider', {
model: defaultModel.extend({
defaults: _.extend({}, defaultModel.prototype.defaults, {
autoRotation: false, // Autoplay
switchTime: 3000, // Switch time
animSpeed: 600, // Animation Speed/Duration
droppable: false,
script : function () {console.log(5);},
traits: [{
type: 'number',
label: 'Duration',
name: 'animSpeed',
changeProp: 1,
}/*,{
type: 'checkbox',
label: 'Autoplay',
name: 'autoRotation',
changeProp: 1,
},{
type: 'number',
label: 'Autoplay time',
name: 'switchTime',
changeProp: 1,
}*/],
}),
init: function () {
this.listenTo(this, 'change:status',function(){
var obj = this.toJSON();
console.log(obj);
console.log(obj.script);
});
this.listenTo(this, 'change:animSpeed change:autoRotation change:switchTime',
this.buildScript);
},
buildScript: function() {
///prevSlide, nextSlide
var opts = {
mask: '.slider-mask',
slider: '.slider-slideset',
slides: '.slider-slide',
btnPrev: '.btn-slider-prev',
btnNext: '.btn-slider-next',
generatePagination: '.slider-pagination',
pagerLinks: '.slider-pagination li a',
stretchSlideToMask: true,
animSpeed: parseInt(this.get('animSpeed')),
//switchTime: parseInt(this.get('switchTime')),
//autoRotation: this.get('autoRotation'),
};
var optsStr = JSON.stringify(opts);
var script = 'var $el = window.$(this); $el.scrollGallery('+ optsStr + ')';
console.log(script);
this.set('script', script);
},
},{
isComponent: function(el) {
if(el.getAttribute &&
el.getAttribute('data-gjs-type') == 'slider'){
return {type: 'slider'};
}
},
}),
view: defaultView.extend({
init: function () {
this.listenTo(this.model, 'active', this.updateScript);
},
}),
});
domc.addType('slide', {
model: defaultModel.extend({
defaults: _.extend({}, defaultModel.prototype.defaults, {
droppable: false,
draggable: false,
}),
},{
isComponent: function(el) {
if(el.getAttribute &&
el.getAttribute('data-gjs-type') == 'slide'){
return {type: 'slide'};
}
},
}),
view: defaultView.extend({
remove: function() {
var slider = this.$el.closest('.slider');
defaultView.prototype.remove.apply(this, arguments);
var model = slider.data('model');
if(model) model.trigger('active');
},
}),
});
domc.addType('slider-nav', {
model: defaultModel.extend({
defaults: _.extend({}, defaultModel.prototype.defaults, {
editable: false,
droppable: false,
draggable: false,
removable: false,
copyable: false,
}),
},{
isComponent: function(el) {
if(el.getAttribute &&
el.getAttribute('data-gjs-type') == 'slider-nav'){
return {type: 'slider-nav'};
}
},
}),
view: defaultView,
});
domc.addType('slider-set', {
model: defaultModel.extend({
defaults: _.extend({}, defaultModel.prototype.defaults, {
droppable: '[data-gjs-type=slide]',
draggable: false,
removable: false,
copyable: false,
}),
},{
isComponent: function(el) {
if(el.getAttribute &&
el.getAttribute('data-gjs-type') == 'slider-set'){
return {type: 'slider-set'};
}
},
}),
view: defaultView.extend({
init: function () {
var comps = this.model.get('components');
this.listenTo(comps, 'add remove change', this.updateSliders);
},
updateSliders: function() {
var slider = this.$el.closest('.slider');
var model = slider.data('model');
if(model)
model.trigger('active');
},
}),
});
var dc = editor.DomComponents.getComponents();
//http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js
dc.add('<link rel="stylesheet" href="private/main.css">'+
'<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>'+
'<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>' +
'<script src="private/jquery.main.js" defer=""></script>');
editor.render();
});
});

Write Preview
Loading…
Cancel
Save