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

Update demo

gh-pages
Artur Arseniev 5 years ago
parent
0c389ab2d3
commit
f03f278e9b
1 changed files with 211 additions and 247 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 458
      demo.html

458
demo.html
View File

@ -511,24 +511,24 @@
} }
.card-header{ .card-header{
height: 155px; height: 155px;
background-image:url("https://placehold.it/350x250/78c5d6/fff/image1.jpg"); background-image:url("https://via.placeholder.com/350x250/78c5d6/fff/image1.jpg");
background-size:cover; background-size:cover;
background-position:center center; background-position:center center;
} }
.card-header.ch2{ .card-header.ch2{
background-image:url("https://placehold.it/350x250/459ba8/fff/image2.jpg"); background-image:url("https://via.placeholder.com/350x250/459ba8/fff/image2.jpg");
} }
.card-header.ch3{ .card-header.ch3{
background-image:url("https://placehold.it/350x250/79c267/fff/image3.jpg"); background-image:url("https://via.placeholder.com/350x250/79c267/fff/image3.jpg");
} }
.card-header.ch4{ .card-header.ch4{
background-image:url("https://placehold.it/350x250/c5d647/fff/image4.jpg"); background-image:url("https://via.placeholder.com/350x250/c5d647/fff/image4.jpg");
} }
.card-header.ch5{ .card-header.ch5{
background-image:url("https://placehold.it/350x250/f28c33/fff/image5.jpg"); background-image:url("https://via.placeholder.com/350x250/f28c33/fff/image5.jpg");
} }
.card-header.ch6{ .card-header.ch6{
background-image:url("https://placehold.it/350x250/e868a2/fff/image6.jpg"); background-image:url("https://via.placeholder.com/350x250/e868a2/fff/image6.jpg");
} }
.card-body{ .card-body{
padding: 15px 15px 5px 15px; padding: 15px 15px 5px 15px;
@ -976,7 +976,7 @@
<script type="text/javascript"> <script type="text/javascript">
var lp = './img/'; var lp = './img/';
var plp = '//placehold.it/350x250/'; var plp = 'https://via.placeholder.com/350x250/';
var images = [ var images = [
lp+'team1.jpg', lp+'team2.jpg', lp+'team3.jpg', plp+'78c5d6/fff/image1.jpg', plp+'459ba8/fff/image2.jpg', plp+'79c267/fff/image3.jpg', lp+'team1.jpg', lp+'team2.jpg', lp+'team3.jpg', plp+'78c5d6/fff/image1.jpg', plp+'459ba8/fff/image2.jpg', plp+'79c267/fff/image3.jpg',
plp+'c5d647/fff/image4.jpg', plp+'f28c33/fff/image5.jpg', plp+'e868a2/fff/image6.jpg', plp+'cc4360/fff/image7.jpg', plp+'c5d647/fff/image4.jpg', plp+'f28c33/fff/image5.jpg', plp+'e868a2/fff/image6.jpg', plp+'cc4360/fff/image7.jpg',
@ -994,7 +994,7 @@
assets: images assets: images
}, },
selectorManager: { componentFirst: true }, selectorManager: { componentFirst: true },
styleManager: { clearProperties: 1 }, styleManager: { sectors: [] },
plugins: [ plugins: [
'grapesjs-lory-slider', 'grapesjs-lory-slider',
'grapesjs-tabs', 'grapesjs-tabs',
@ -1008,6 +1008,18 @@
'gjs-preset-webpage', 'gjs-preset-webpage',
], ],
pluginsOpts: { pluginsOpts: {
'grapesjs-tui-image-editor': {
script: [
// 'https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.7/fabric.min.js',
'https://uicdn.toast.com/tui.code-snippet/v1.5.2/tui-code-snippet.min.js',
'https://uicdn.toast.com/tui-color-picker/v2.2.7/tui-color-picker.min.js',
'https://uicdn.toast.com/tui-image-editor/v3.15.2/tui-image-editor.min.js'
],
style: [
'https://uicdn.toast.com/tui-color-picker/v2.2.7/tui-color-picker.min.css',
'https://uicdn.toast.com/tui-image-editor/v3.15.2/tui-image-editor.min.css',
],
},
'grapesjs-lory-slider': { 'grapesjs-lory-slider': {
sliderBlock: { sliderBlock: {
category: 'Extra' category: 'Extra'
@ -1043,140 +1055,92 @@
blocksBasicOpts: { flexGrid: 1 }, blocksBasicOpts: { flexGrid: 1 },
customStyleManager: [{ customStyleManager: [{
name: 'General', name: 'General',
buildProps: ['float', 'display', 'position', 'top', 'right', 'left', 'bottom'], properties:[
properties:[{ {
name: 'Alignment', extend: 'float',
property: 'float',
type: 'radio', type: 'radio',
defaults: 'none', default: 'none',
list: [ options: [
{ value: 'none', className: 'fa fa-times'}, { value: 'none', className: 'fa fa-times'},
{ value: 'left', className: 'fa fa-align-left'}, { value: 'left', className: 'fa fa-align-left'},
{ value: 'right', className: 'fa fa-align-right'} { value: 'right', className: 'fa fa-align-right'}
], ],
}, },
{ property: 'position', type: 'select'} 'display',
{ extend: 'position', type: 'select' },
'top',
'right',
'left',
'bottom',
], ],
},{ }, {
name: 'Dimension', name: 'Dimension',
open: false, open: false,
buildProps: ['width', 'flex-width', 'height', 'max-width', 'min-height', 'margin', 'padding'], properties: [
properties: [{ 'width',
id: 'flex-width', {
type: 'integer', id: 'flex-width',
name: 'Width', type: 'integer',
units: ['px', '%'], name: 'Width',
property: 'flex-basis', units: ['px', '%'],
toRequire: 1, property: 'flex-basis',
},{ toRequire: 1,
property: 'margin', },
properties:[ 'height',
{ name: 'Top', property: 'margin-top'}, 'max-width',
{ name: 'Right', property: 'margin-right'}, 'min-height',
{ name: 'Bottom', property: 'margin-bottom'}, 'margin',
{ name: 'Left', property: 'margin-left'} 'padding'
], ],
},{
property : 'padding',
properties:[
{ name: 'Top', property: 'padding-top'},
{ name: 'Right', property: 'padding-right'},
{ name: 'Bottom', property: 'padding-bottom'},
{ name: 'Left', property: 'padding-left'}
],
}],
},{ },{
name: 'Typography', name: 'Typography',
open: false, open: false,
buildProps: ['font-family', 'font-size', 'font-weight', 'letter-spacing', 'color', 'line-height', 'text-align', 'text-decoration', 'text-shadow'], properties: [
properties:[ 'font-family',
{ name: 'Font', property: 'font-family'}, 'font-size',
{ name: 'Weight', property: 'font-weight'}, 'font-weight',
{ name: 'Font color', property: 'color'}, 'letter-spacing',
{ 'color',
property: 'text-align', 'line-height',
type: 'radio', {
defaults: 'left', extend: 'text-align',
list: [ options: [
{ value : 'left', name : 'Left', className: 'fa fa-align-left'}, { id : 'left', label : 'Left', className: 'fa fa-align-left'},
{ value : 'center', name : 'Center', className: 'fa fa-align-center' }, { id : 'center', label : 'Center', className: 'fa fa-align-center' },
{ value : 'right', name : 'Right', className: 'fa fa-align-right'}, { id : 'right', label : 'Right', className: 'fa fa-align-right'},
{ value : 'justify', name : 'Justify', className: 'fa fa-align-justify'} { id : 'justify', label : 'Justify', className: 'fa fa-align-justify'}
], ],
},{ },
property: 'text-decoration', {
type: 'radio', property: 'text-decoration',
defaults: 'none', type: 'radio',
list: [ default: 'none',
{ value: 'none', name: 'None', className: 'fa fa-times'}, options: [
{ value: 'underline', name: 'underline', className: 'fa fa-underline' }, { id: 'none', label: 'None', className: 'fa fa-times'},
{ value: 'line-through', name: 'Line-through', className: 'fa fa-strikethrough'} { id: 'underline', label: 'underline', className: 'fa fa-underline' },
], { id: 'line-through', label: 'Line-through', className: 'fa fa-strikethrough'}
},{ ],
property: 'text-shadow', },
properties: [ 'text-shadow'
{ name: 'X position', property: 'text-shadow-h'}, ],
{ name: 'Y position', property: 'text-shadow-v'},
{ name: 'Blur', property: 'text-shadow-blur'},
{ name: 'Color', property: 'text-shadow-color'}
],
}],
},{ },{
name: 'Decorations', name: 'Decorations',
open: false, open: false,
buildProps: ['opacity', 'border-radius', 'border', 'box-shadow', 'background-bg'], properties: [
properties: [{ 'opacity',
type: 'slider', 'border-radius',
property: 'opacity', 'border',
defaults: 1, 'box-shadow',
step: 0.01, 'background', // { id: 'background-bg', property: 'background', type: 'bg' }
max: 1, ],
min:0,
},{
property: 'border-radius',
properties : [
{ name: 'Top', property: 'border-top-left-radius'},
{ name: 'Right', property: 'border-top-right-radius'},
{ name: 'Bottom', property: 'border-bottom-left-radius'},
{ name: 'Left', property: 'border-bottom-right-radius'}
],
},{
property: 'box-shadow',
properties: [
{ name: 'X position', property: 'box-shadow-h'},
{ name: 'Y position', property: 'box-shadow-v'},
{ name: 'Blur', property: 'box-shadow-blur'},
{ name: 'Spread', property: 'box-shadow-spread'},
{ name: 'Color', property: 'box-shadow-color'},
{ name: 'Shadow type', property: 'box-shadow-type'}
],
},{
id: 'background-bg',
property: 'background',
type: 'bg',
},],
},{ },{
name: 'Extra', name: 'Extra',
open: false, open: false,
buildProps: ['transition', 'perspective', 'transform'], buildProps: [
properties: [{ 'transition',
property: 'transition', 'perspective',
properties:[ 'transform'
{ name: 'Property', property: 'transition-property'}, ],
{ name: 'Duration', property: 'transition-duration'},
{ name: 'Easing', property: 'transition-timing-function'}
],
},{
property: 'transform',
properties:[
{ name: 'Rotate X', property: 'transform-rotate-x'},
{ name: 'Rotate Y', property: 'transform-rotate-y'},
{ name: 'Rotate Z', property: 'transform-rotate-z'},
{ name: 'Scale X', property: 'transform-scale-x'},
{ name: 'Scale Y', property: 'transform-scale-y'},
{ name: 'Scale Z', property: 'transform-scale-z'}
],
}]
},{ },{
name: 'Flex', name: 'Flex',
open: false, open: false,
@ -1194,138 +1158,138 @@
property: 'label-parent-flex', property: 'label-parent-flex',
type: 'integer', type: 'integer',
},{ },{
name : 'Direction', name: 'Direction',
property : 'flex-direction', property: 'flex-direction',
type : 'radio', type: 'radio',
defaults : 'row', defaults: 'row',
list : [{ list: [{
value : 'row', value: 'row',
name : 'Row', name: 'Row',
className : 'icons-flex icon-dir-row', className: 'icons-flex icon-dir-row',
title : 'Row', title: 'Row',
},{ },{
value : 'row-reverse', value: 'row-reverse',
name : 'Row reverse', name: 'Row reverse',
className : 'icons-flex icon-dir-row-rev', className: 'icons-flex icon-dir-row-rev',
title : 'Row reverse', title: 'Row reverse',
},{ },{
value : 'column', value: 'column',
name : 'Column', name: 'Column',
title : 'Column', title: 'Column',
className : 'icons-flex icon-dir-col', className: 'icons-flex icon-dir-col',
},{ },{
value : 'column-reverse', value: 'column-reverse',
name : 'Column reverse', name: 'Column reverse',
title : 'Column reverse', title: 'Column reverse',
className : 'icons-flex icon-dir-col-rev', className: 'icons-flex icon-dir-col-rev',
}], }],
},{ },{
name : 'Justify', name: 'Justify',
property : 'justify-content', property: 'justify-content',
type : 'radio', type: 'radio',
defaults : 'flex-start', defaults: 'flex-start',
list : [{ list: [{
value : 'flex-start', value: 'flex-start',
className : 'icons-flex icon-just-start', className: 'icons-flex icon-just-start',
title : 'Start', title: 'Start',
},{ },{
value : 'flex-end', value: 'flex-end',
title : 'End', title: 'End',
className : 'icons-flex icon-just-end', className: 'icons-flex icon-just-end',
},{ },{
value : 'space-between', value: 'space-between',
title : 'Space between', title: 'Space between',
className : 'icons-flex icon-just-sp-bet', className: 'icons-flex icon-just-sp-bet',
},{ },{
value : 'space-around', value: 'space-around',
title : 'Space around', title: 'Space around',
className : 'icons-flex icon-just-sp-ar', className: 'icons-flex icon-just-sp-ar',
},{ },{
value : 'center', value: 'center',
title : 'Center', title: 'Center',
className : 'icons-flex icon-just-sp-cent', className: 'icons-flex icon-just-sp-cent',
}], }],
},{ },{
name : 'Align', name: 'Align',
property : 'align-items', property: 'align-items',
type : 'radio', type: 'radio',
defaults : 'center', defaults: 'center',
list : [{ list: [{
value : 'flex-start', value: 'flex-start',
title : 'Start', title: 'Start',
className : 'icons-flex icon-al-start', className: 'icons-flex icon-al-start',
},{ },{
value : 'flex-end', value: 'flex-end',
title : 'End', title: 'End',
className : 'icons-flex icon-al-end', className: 'icons-flex icon-al-end',
},{ },{
value : 'stretch', value: 'stretch',
title : 'Stretch', title: 'Stretch',
className : 'icons-flex icon-al-str', className: 'icons-flex icon-al-str',
},{ },{
value : 'center', value: 'center',
title : 'Center', title: 'Center',
className : 'icons-flex icon-al-center', className: 'icons-flex icon-al-center',
}], }],
},{ },{
name: 'Flex Children', name: 'Flex Children',
property: 'label-parent-flex', property: 'label-parent-flex',
type: 'integer', type: 'integer',
},{ },{
name: 'Order', name: 'Order',
property: 'order', property: 'order',
type: 'integer', type: 'integer',
defaults : 0, defaults: 0,
min: 0 min: 0
},{ },{
name : 'Flex', name: 'Flex',
property : 'flex', property: 'flex',
type : 'composite', type: 'composite',
properties : [{ properties : [{
name: 'Grow', name: 'Grow',
property: 'flex-grow', property: 'flex-grow',
type: 'integer', type: 'integer',
defaults : 0, defaults: 0,
min: 0 min: 0
},{ },{
name: 'Shrink', name: 'Shrink',
property: 'flex-shrink', property: 'flex-shrink',
type: 'integer', type: 'integer',
defaults : 0, defaults: 0,
min: 0 min: 0
},{ },{
name: 'Basis', name: 'Basis',
property: 'flex-basis', property: 'flex-basis',
type: 'integer', type: 'integer',
units: ['px','%',''], units: ['px','%',''],
unit: '', unit: '',
defaults : 'auto', defaults: 'auto',
}], }],
},{ },{
name : 'Align', name: 'Align',
property : 'align-self', property: 'align-self',
type : 'radio', type: 'radio',
defaults : 'auto', defaults: 'auto',
list : [{ list: [{
value : 'auto', value: 'auto',
name : 'Auto', name: 'Auto',
},{ },{
value : 'flex-start', value: 'flex-start',
title : 'Start', title: 'Start',
className : 'icons-flex icon-al-start', className: 'icons-flex icon-al-start',
},{ },{
value : 'flex-end', value : 'flex-end',
title : 'End', title: 'End',
className : 'icons-flex icon-al-end', className: 'icons-flex icon-al-end',
},{ },{
value : 'stretch', value : 'stretch',
title : 'Stretch', title: 'Stretch',
className : 'icons-flex icon-al-str', className: 'icons-flex icon-al-str',
},{ },{
value : 'center', value : 'center',
title : 'Center', title: 'Center',
className : 'icons-flex icon-al-center', className: 'icons-flex icon-al-center',
}], }],
}] }]
} }
], ],
@ -1462,12 +1426,12 @@
// Add Settings Sector // Add Settings Sector
var traitsSector = $('<div class="gjs-sm-sector no-select">'+ var traitsSector = $('<div class="gjs-sm-sector no-select">'+
'<div class="gjs-sm-title"><span class="icon-settings fa fa-cog"></span> Settings</div>' + '<div class="gjs-sm-sector-title"><span class="icon-settings fa fa-cog"></span> <span class="gjs-sm-sector-label">Settings</span></div>' +
'<div class="gjs-sm-properties" style="display: none;"></div></div>'); '<div class="gjs-sm-properties" style="display: none;"></div></div>');
var traitsProps = traitsSector.find('.gjs-sm-properties'); var traitsProps = traitsSector.find('.gjs-sm-properties');
traitsProps.append($('.gjs-trt-traits')); traitsProps.append($('.gjs-trt-traits'));
$('.gjs-sm-sectors').before(traitsSector); $('.gjs-sm-sectors').before(traitsSector);
traitsSector.find('.gjs-sm-title').on('click', function(){ traitsSector.find('.gjs-sm-sector-title').on('click', function(){
var traitStyle = traitsProps.get(0).style; var traitStyle = traitsProps.get(0).style;
var hidden = traitStyle.display == 'none'; var hidden = traitStyle.display == 'none';
if (hidden) { if (hidden) {

Write Preview
Loading…
Cancel
Save