mirror of https://github.com/artf/grapesjs.git
Artur Arseniev
6 years ago
committed by
GitHub
GitHub
65 changed files with 6740 additions and 10459 deletions
@ -0,0 +1,29 @@ |
|||
.DS_Store |
|||
.settings/ |
|||
.sass-cache/ |
|||
.project |
|||
.idea |
|||
npm-debug.log* |
|||
yarn-error.log |
|||
yarn.lock |
|||
style/.sass-cache/ |
|||
stats.json |
|||
|
|||
img/ |
|||
images/ |
|||
private/ |
|||
vendor/ |
|||
coverage/ |
|||
node_modules/ |
|||
bower_components/ |
|||
grapesjs-*.tgz |
|||
_index.html |
|||
index.html |
|||
docs |
|||
.github |
|||
test |
|||
.editorconfig |
|||
.eslintrc |
|||
.travis.yml |
|||
*.md |
|||
webpack.config.js |
|||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,5 @@ |
|||
$accentColor = #e2627f |
|||
$accentColor = #e67891 |
|||
$navBarColor = white |
|||
$scrollBarSize = 8px |
|||
$pageWidth = 900px |
|||
@ -1,17 +0,0 @@ |
|||
<template> |
|||
<Layout> |
|||
<CarbonAds slot="sidebar-top"/> |
|||
</Layout> |
|||
</template> |
|||
|
|||
<script> |
|||
var Layout = require('@default-theme/Layout.vue').default; |
|||
var CarbonAds = require('./CarbonAds.vue').default; |
|||
|
|||
export default { |
|||
components: { |
|||
Layout, |
|||
CarbonAds, |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,3 @@ |
|||
module.exports = { |
|||
extend: '@vuepress/theme-default' |
|||
} |
|||
@ -0,0 +1,21 @@ |
|||
<template> |
|||
<Layout> |
|||
<CarbonAds slot="sidebar-top"/> |
|||
</Layout> |
|||
</template> |
|||
|
|||
<script> |
|||
// var Layout = require('@vuepress/theme-vue/layouts/Layout.vue').default; |
|||
// var CarbonAds = require('./CarbonAds.vue').default; |
|||
// import Layout from '@vuepress/theme-default/layouts/Layout.vue'; |
|||
// import CarbonAds from './CarbonAds.vue'; |
|||
import Layout from '@parent-theme/layouts/Layout.vue' |
|||
import CarbonAds from './CarbonAds.vue'; |
|||
|
|||
export default { |
|||
components: { |
|||
Layout, |
|||
CarbonAds, |
|||
} |
|||
} |
|||
</script> |
|||
File diff suppressed because it is too large
@ -0,0 +1,200 @@ |
|||
const traitInputAttr = { placeholder: 'ex: Insira o texto' }; |
|||
|
|||
export default { |
|||
assetManager: { |
|||
addButton: 'Adicionar imagem', |
|||
inputPlh: 'http://caminho/para/a/imagem.jpg', |
|||
modalTitle: 'Selecionar imagem', |
|||
uploadTitle: 'Solte os arquivos aqui ou clique para enviar' |
|||
}, |
|||
// Here just as a reference, GrapesJS core doesn't contain any block,
|
|||
// so this should be omitted from other local files
|
|||
blockManager: { |
|||
labels: { |
|||
// 'block-id': 'Block Label',
|
|||
}, |
|||
categories: { |
|||
// 'category-id': 'Category Label',
|
|||
} |
|||
}, |
|||
domComponents: { |
|||
names: { |
|||
'': 'Box', |
|||
wrapper: 'Corpo', |
|||
text: 'Texto', |
|||
comment: 'Comentário', |
|||
image: 'Imagem', |
|||
video: 'Vídeo', |
|||
label: 'Label', |
|||
link: 'Link', |
|||
map: 'Mapa', |
|||
tfoot: 'Rodapé da tabela', |
|||
tbody: 'Corpo da tabela', |
|||
thead: 'Cabeçalho da tabela', |
|||
table: 'Tabela', |
|||
row: 'Linha da tabela', |
|||
cell: 'Célula da tabela', |
|||
section: 'Seção', |
|||
body: 'Corpo' |
|||
} |
|||
}, |
|||
deviceManager: { |
|||
device: 'Dispositivo', |
|||
devices: { |
|||
desktop: 'Desktop', |
|||
tablet: 'Tablet', |
|||
mobileLandscape: 'Celular, modo panorâmico', |
|||
mobilePortrait: 'Celular, modo retrato' |
|||
} |
|||
}, |
|||
panels: { |
|||
buttons: { |
|||
titles: { |
|||
preview: 'Pré-visualização', |
|||
fullscreen: 'Tela cheia', |
|||
'sw-visibility': 'Ver componentes', |
|||
'export-template': 'Ver código', |
|||
'open-sm': 'Abrir gerenciador de estilos', |
|||
'open-tm': 'Configurações', |
|||
'open-layers': 'Abrir gerenciador de camadas', |
|||
'open-blocks': 'Abrir blocos' |
|||
} |
|||
} |
|||
}, |
|||
selectorManager: { |
|||
label: 'Classes', |
|||
selected: 'Selecionado', |
|||
emptyState: '- Estado -', |
|||
states: { |
|||
hover: 'Hover', |
|||
active: 'Click', |
|||
'nth-of-type(2n)': 'Even/Odd' |
|||
} |
|||
}, |
|||
styleManager: { |
|||
empty: 'Selecione um elemento para usar o gerenciador de estilos', |
|||
layer: 'Camada', |
|||
fileButton: 'Imagens', |
|||
sectors: { |
|||
general: 'Geral', |
|||
layout: 'Disposição', |
|||
typography: 'Tipografia', |
|||
decorations: 'Decorações', |
|||
extra: 'Extra', |
|||
flex: 'Flex', |
|||
dimension: 'Dimensão' |
|||
}, |
|||
// The core library generates the name by their `property` name
|
|||
properties: { |
|||
float: 'Float', |
|||
display: 'Exibição', |
|||
position: 'Posição', |
|||
top: 'Topo', |
|||
right: 'Direita', |
|||
left: 'Esquerda', |
|||
bottom: 'Inferior', |
|||
width: 'Largura', |
|||
height: 'Altura', |
|||
'max-width': 'Largura Max.', |
|||
'max-height': 'Altura Max.', |
|||
margin: 'Margem', |
|||
'margin-top': 'Margem Superior', |
|||
'margin-right': 'Margem a Direita', |
|||
'margin-left': 'Margem a Esquerda', |
|||
'margin-bottom': 'Margem Inferior', |
|||
padding: 'Padding', |
|||
'padding-top': 'Padding Superior', |
|||
'padding-left': 'Padding a Esquerda', |
|||
'padding-right': 'Padding a Direita', |
|||
'padding-bottom': 'Padding Inferior', |
|||
'font-family': 'Tipo de letra', |
|||
'font-size': 'Tamanho da fonte', |
|||
'font-weight': 'Espessura da fonte', |
|||
'letter-spacing': 'Espaço entre letras', |
|||
color: 'Cor', |
|||
'line-height': 'Altura da linha', |
|||
'text-align': 'Alinhamento do texto', |
|||
'text-shadow': 'Sombra do texto', |
|||
'text-shadow-h': 'Sombra do texto: horizontal', |
|||
'text-shadow-v': 'Sombra do texto: vertical', |
|||
'text-shadow-blur': 'Desfoque da sombra do texto', |
|||
'text-shadow-color': 'Cor da sombra da fonte', |
|||
'border-top-left': 'Borda superior a esquerda', |
|||
'border-top-right': 'Borda superior a direita', |
|||
'border-bottom-left': 'Borda inferior a esquerda', |
|||
'border-bottom-right': 'Borda inferior a direita', |
|||
'border-radius-top-left': 'Raio da borda superior esquerda', |
|||
'border-radius-top-right': 'Raio da borda superior direita', |
|||
'border-radius-bottom-left': 'Raio da borda inferior esquerda', |
|||
'border-radius-bottom-right': 'Raio da borda inferior direita', |
|||
'border-radius': 'Raio da borda', |
|||
border: 'Borda', |
|||
'border-width': 'Largura da borda', |
|||
'border-style': 'Estilo da borda', |
|||
'border-color': 'Cor da borda', |
|||
'box-shadow': 'Sombra da box', |
|||
'box-shadow-h': 'Sombra da box: horizontal', |
|||
'box-shadow-v': 'Sombra da box: vertical', |
|||
'box-shadow-blur': 'Desfoque da sombra da box', |
|||
'box-shadow-spread': 'Extensão da sombra da box', |
|||
'box-shadow-color': 'Cor da sombra da box', |
|||
'box-shadow-type': 'Tipo de sombra da box', |
|||
background: 'Fundo', |
|||
'background-color': 'Cor de fundo', |
|||
'background-image': 'Imagem de fundo', |
|||
'background-repeat': 'Repetir fundo', |
|||
'background-position': 'Posição do fundo', |
|||
'background-attachment': 'Plugin de fundo', |
|||
'background-size': 'Tamanho do fundo', |
|||
transition: 'Transição', |
|||
'transition-property': 'Tipo de transição', |
|||
'transition-duration': 'Tempo de transição', |
|||
'transition-timing-function': 'Função do tempo da transição', |
|||
perspective: 'Perspectiva', |
|||
transform: 'Transformação', |
|||
'transform-rotate-x': 'Rotacionar horizontalmente', |
|||
'transform-rotate-y': 'Rotacionar verticalmente', |
|||
'transform-rotate-z': 'Rotacionar profundidade', |
|||
'transform-scale-x': 'Escalar horizontalmente', |
|||
'transform-scale-y': 'Escalar verticalmente', |
|||
'transform-scale-z': 'Escalar profundidade', |
|||
'flex-direction': 'Direção Flex', |
|||
'flex-wrap': 'Flex wrap', |
|||
'justify-content': 'Ajustar conteúdo', |
|||
'align-items': 'Alinhar elementos', |
|||
'align-content': 'Alinhar conteúdo', |
|||
order: 'Ordem', |
|||
'flex-basis': 'Base Flex', |
|||
'flex-grow': 'Crescimento Flex', |
|||
'flex-shrink': 'Contração Flex', |
|||
'align-self': 'Alinhar-se', |
|||
} |
|||
}, |
|||
traitManager: { |
|||
empty: 'Selecione um elemento para usar o gerenciador de características', |
|||
label: 'Configurações do componente', |
|||
traits: { |
|||
// The core library generates the name by their `name` property
|
|||
labels: { |
|||
// id: 'Id',
|
|||
// alt: 'Alt',
|
|||
// title: 'Title',
|
|||
// href: 'Href',
|
|||
}, |
|||
// In a simple trait, like text input, these are used on input attributes
|
|||
attributes: { |
|||
id: traitInputAttr, |
|||
alt: traitInputAttr, |
|||
title: traitInputAttr, |
|||
href: { placeholder: 'ex: https://google.com' } |
|||
}, |
|||
// In a trait like select, these are used to translate option names
|
|||
options: { |
|||
target: { |
|||
false: 'Esta janela', |
|||
_blank: 'Nova janela' |
|||
} |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
@ -0,0 +1,29 @@ |
|||
import SwitchVisibility from 'commands/view/SwitchVisibility'; |
|||
|
|||
describe('SwitchVisibility command', () => { |
|||
let fakeEditor, fakeFrames, fakeIsActive; |
|||
|
|||
beforeEach(() => { |
|||
fakeFrames = []; |
|||
fakeIsActive = false; |
|||
|
|||
fakeEditor = { |
|||
Canvas: { |
|||
getFrames: jest.fn(() => fakeFrames) |
|||
}, |
|||
|
|||
Commands: { |
|||
isActive: jest.fn(() => fakeIsActive) |
|||
} |
|||
}; |
|||
}); |
|||
|
|||
describe('.toggleVis', () => { |
|||
it('should do nothing if the preview command is active', () => { |
|||
expect(fakeEditor.Canvas.getFrames).not.toHaveBeenCalled(); |
|||
fakeIsActive = true; |
|||
SwitchVisibility.toggleVis(fakeEditor); |
|||
expect(fakeEditor.Canvas.getFrames).not.toHaveBeenCalled(); |
|||
}); |
|||
}); |
|||
}); |
|||
@ -0,0 +1,116 @@ |
|||
import Editor from 'editor'; |
|||
|
|||
const { keys } = Object; |
|||
const initComps = 1; |
|||
|
|||
describe('Editor', () => { |
|||
const editor = new Editor(); |
|||
|
|||
beforeEach(() => { |
|||
editor.init(); |
|||
}); |
|||
|
|||
afterEach(() => { |
|||
editor.destroy(); |
|||
}); |
|||
|
|||
test('Object exists', () => { |
|||
expect(editor).toBeTruthy(); |
|||
}); |
|||
|
|||
test('Has no components', () => { |
|||
const all = editor.Components.allById(); |
|||
const allKeys = keys(all); |
|||
// By default 1 wrapper components is created
|
|||
expect(allKeys.length).toBe(initComps); |
|||
expect(allKeys[0]).toBe('wrapper'); |
|||
}); |
|||
|
|||
test('Has no CSS rules', () => { |
|||
const all = editor.Css.getAll(); |
|||
expect(all.length).toBe(0); |
|||
}); |
|||
|
|||
test('Has one default frame', () => { |
|||
const all = editor.Canvas.getFrames(); |
|||
expect(all.length).toBe(1); |
|||
}); |
|||
|
|||
test('The default frame has the same main component and css', () => { |
|||
const wrapper = editor.getWrapper(); |
|||
const style = editor.getStyle(); |
|||
const frame = editor.Canvas.getFrame(); |
|||
expect(wrapper).toBe(frame.get('root')); |
|||
expect(style).toBe(frame.get('styles')); |
|||
}); |
|||
|
|||
test('Components are correctly tracked on add', () => { |
|||
const all = editor.Components.allById(); |
|||
const wrapper = editor.getWrapper(); |
|||
wrapper.append('<div>Component</div>'); |
|||
expect(keys(all).length).toBe(1 + initComps); |
|||
}); |
|||
|
|||
test('Components are correctly tracked on add and remove', () => { |
|||
const all = editor.Components.allById(); |
|||
const wrapper = editor.getWrapper(); |
|||
const added = wrapper.append(` |
|||
<div>Component 1</div> |
|||
<div></div> |
|||
`);
|
|||
expect(keys(all).length).toBe(2 + initComps); |
|||
const secComp = added[1]; |
|||
secComp.append(` |
|||
<div>Component 2</div> |
|||
<div>Component 3</div> |
|||
`);
|
|||
expect(keys(all).length).toBe(4 + initComps); |
|||
wrapper.empty(); |
|||
expect(wrapper.components().length).toBe(0); |
|||
expect(keys(all).length).toBe(initComps); |
|||
}); |
|||
|
|||
test('Components are correctly tracked with UndoManager', () => { |
|||
editor.Components.postLoad(); // Init UndoManager
|
|||
const all = editor.Components.allById(); |
|||
const um = editor.UndoManager; |
|||
const umStack = um.getStack(); |
|||
const wrapper = editor.getWrapper(); |
|||
expect(umStack.length).toBe(0); |
|||
const comp = wrapper.append(`<div>Component 1</div>`)[0]; |
|||
expect(umStack.length).toBe(1); |
|||
wrapper.empty(); |
|||
expect(umStack.length).toBe(2); |
|||
expect(keys(all).length).toBe(initComps); |
|||
um.undo(false); |
|||
expect(keys(all).length).toBe(1 + initComps); |
|||
}); |
|||
|
|||
test('Components are correctly tracked with UndoManager and mutiple operations', () => { |
|||
editor.Components.postLoad(); // Init UndoManager
|
|||
const all = editor.Components.allById(); |
|||
const um = editor.UndoManager; |
|||
const umStack = um.getStack(); |
|||
const wrapper = editor.getWrapper(); |
|||
expect(umStack.length).toBe(0); |
|||
wrapper.append(`<div>
|
|||
<div>Component 1</div> |
|||
<div>Component 2</div> |
|||
</div>`); |
|||
expect(umStack.length).toBe(1); // UM counts first children
|
|||
expect(keys(all).length).toBe(3 + initComps); |
|||
wrapper |
|||
.components() |
|||
.at(0) |
|||
.components() |
|||
.at(0) |
|||
.remove(); // Remove 1 component
|
|||
// UM registers 2 identical remove undoTypes as Backbone triggers remove from the
|
|||
// collection and the model
|
|||
expect(umStack.length).toBe(3); |
|||
expect(keys(all).length).toBe(2 + initComps); |
|||
wrapper.empty(); |
|||
expect(umStack.length).toBe(4); |
|||
expect(keys(all).length).toBe(initComps); |
|||
}); |
|||
}); |
|||
Loading…
Reference in new issue