So I started with grapesjs just the other day, and so far I love it. However, I have hit a road block. In the canvas (#gjs), I have a preset div container:
<div id="container"></div>
I can create blocks/add them to the blocks section (on the front end which would produce the following structure:
<section class="row">
<div class="6">Column</div>
<div class="6">Column</div>
</section>
I can drag the button to the canvas, but I cant seem to drag it into the container (has to be above or below). I then read about components which looked more like what I needed to do. Unfortunately, I have no clue how to actually add the component to the block section or really what to do with it. I might be going about this the wrong way.
You can create a component with "div container"
{
'id' : '0001',
'data' : {
label: `<div>
<div class="my-label-block">Container</div>
</div>`,
content:`
<div id="container"></div>
`,
editable: true,
draggable: true,
stylable: true,
category: 'Basics elements',
selectable: true,
attributes: {
class: "fa",
id: '0001'
}
}
}
with options:
editable: true,
draggable: true,
stylable: true,
selectable: true,
and then, you will be able to drag your "section component into "container component".
Related
So I am trying to implement codemirror into my Vue.js app using https://github.com/surmon-china/vue-codemirror. The problem is that after I import and use the codemirro component everything works fine expect the line numbers (number of lines the code has) are not showing. Here is my code right out of the demo page:
<template>
<div class="root">
<nav>
<div id="logo-container">
</div>
</nav>
<div id="left-side">
<div class="codemirror">
<!-- codemirror -->
<codemirror v-model="code"
:options="cmOption"
#cursorActivity="onCmCursorActivity"
#ready="onCmReady"
#focus="onCmFocus"
#blur="onCmBlur">
</codemirror>
</div>
</div>
</div>
</template>
and here is the script:
data() {
return {
code: '',
cmOption: {
tabSize: 4,
styleActiveLine: true,
lineNumbers: true,
styleSelectedText: true,
line: true,
foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true },
mode: 'text/javascript',
// hint.js options
hintOptions:{
// 当匹配只有一项的时候是否自动补全
completeSingle: true
},
//快捷键 可提供三种模式 sublime、emacs、vim
keyMap: "sublime",
matchBrackets: true,
showCursorWhenSelecting: true,
theme: "monokai",
extraKeys: { "Ctrl": "autocomplete" }
}
}
}
In your codemirror configuration options there is string:
lineNumbers: false,
which turns off line numbers. Change it's value to true and it should solve the problem.
I am working with multiple panels and I added functionality to expandAll/collapseAll panels. My issue is:
Lets say:
1) I expand all panels
2) Now, I collapse ONLY the second panel
3) Now I click on the ExpandAll button (Expecting all panels to be expanded).
Issue: After following the above steps, I can't get the panels to expand.
Here's my code:
PLUNKER
<button (click)="collapseAll()">ExpandAll</button>
<button (click)="expandAll()">CollapseAll</button>
You have two problems with this code:
You have just one property responsible for the collapsed state of every panel. This way it's impossible to control them separately.
You have one-way binding, so when your collapse the panels manually in your view, the model is not updated. I fixed your code and forked the plunker: https://plnkr.co/edit/rfiVj8vEIBDOZ8rIHV5i
The main ideas are:
Have dynamic template to keep your html dry:
<p-panel *ngFor="let panel of panels"
[header]="panel.name"
[toggleable]="true"
[(collapsed)]="panel.isCollapsed" <== notice the "banana-in-a-box" notation [()], which allows two-way binding
[style]="{'margin-bottom':'20px'}">
{{ panel.text }}
</p-panel>
export class AppComponent {
panels = [
{
name: 'Panel 1',
isCollapsed: false,
text: `The story begins as Don Vito Corleone...`
},
{
name: 'Panel 2',
isCollapsed: false,
text: `The story begins as Don Vito Corleone...`
},
{
name: 'Panel 3',
isCollapsed: false,
text: `The story begins as Don Vito Corleone...`
},
{
name: 'Panel 4',
isCollapsed: false,
text: `The story begins as Don Vito Corleone...`
},
] // you can also move this to a separate file and import
constructor() {
}
expandAll(){
this.panels.forEach(panel => {
panel.isCollapsed = false;
});
}
collapseAll(){
this.panels.forEach(panel => {
panel.isCollapsed = true;
});
}
}
UPDATE
If you don't want to extract the text from your panels you don't have to but in that case you won't be able to use *ngFor and you'll have to store the state of each panel in some datastructure of your component.
You can have somthing like this:
panelsCollapsed = [
{
isCollapsed: false,
},
{
isCollapsed: false,
},
{
isCollapsed: false,
},
{
isCollapsed: false,
}, // this can also be just an arry of booleans, I kep it as an object in case you want to add other fields to it
Then in your markup you'd have:
<p-panel header="Panel 1" [toggleable]="true" [collapsed]="panelsCollapsed[0].isCollapsed" [style]="{'margin-bottom':'20px'}">
The story begins as Don Vito Corleone...
</p-panel>
<p-panel header="Panel 2" [toggleable]="true" [collapsed]="panelsCollapsed[1].isCollapsed" [style]="{'margin-bottom':'20px'}">
The story begins as Don Vito Corleone...
</p-panel>
The methods for expanding/collapsing all would stay the same.
I have a (royal)slider, I need to use the next/prev nav buttons to be out of the slider div.
Lets say I have the navigation nav buttons in my footer.
<div class="my-prev-button"></div>
<div class="my-next-button"></div>
Here is some documentation but I don't know how to use this!
http://dimsemenov.com/plugins/royal-slider/documentation/#api
How can I make these two buttons work with the slider (while it is outside)
<script id="addJS">
jQuery(document).ready(function($) {
$('#slider-with-blocks').royalSlider({
arrowsNav: true,
arrowsNavAutoHide: false,
fadeinLoadedSlide: false,
controlNavigationSpacing: 0,
controlNavigation: 'none',
imageScaleMod: 'none',
autoScaleSlider: false,
imageScalePadding: 0,
slidesSpacing: 0,
autoHeight: false,
blockLoop: true,
loop: true,
numImagesToPreload: 4,
transitionType: 'fade',
autoPlay: {
enabled: true,
pauseOnHover: false,
},
block: {
delay: 400
}
});
});
</script>
<div class="slider">
<div id="slider-with-blocks" class="royalSlider rsMinW">
<div class="rsContent" data-rsDelay="5000">
some div and img here..
</div>
</div>
</div>
Style your Next and Previous div's as per your need and use below code after initializing royal-slider:
// get hold of royal-slider object
var slider = $('#slider-with-blocks').data('royalSlider');
// previous button
$('.my-prev-button').on('click', function(){
slider.prev();
});
$('.my-next-button').on('click', function(){
slider.next();
});
You can find more API's here
http://dimsemenov.com/plugins/royal-slider/documentation/#api
here an example of the solution:
http://dimsemenov.com/plugins/royal-slider/slider-in-laptop/
Working on THIS Page:
newsite.702wedding.com/live/
Can't find where to remove the arrows at the bottom left, but keep the functioning slideshow obviously.
Here is what I think I/YouToo should be looking at:
(function ($, window) {
var
// ColorBox Default Settings.
// See http://colorpowered.com/colorbox for details.
defaults = {
transition: "elastic",
speed: 350,
width: false,
initialWidth: "662",
innerWidth: false,
maxWidth: false,
height: false,
initialHeight: "600",
innerHeight: false,
maxHeight: false,
scalePhotos: true,
scrolling: false,
inline: false,
html: false,
iframe: false,
photo: false,
href: false,
title: false,
rel: false,
opacity: 0.6,
preloading: true,
current: "image {current} of {total}",
previous: "previous",
next: "next",
close: "close",
open: false,
loop: true,
slideshow: true,
slideshowAuto: true,
slideshowSpeed: 3000,
slideshowStart: "Play",
slideshowStop: "Pause",
onOpen: false,
onLoad: false,
onComplete: false,
onCleanup: false,
onClosed: false,
overlayClose: true,
escKey: true,
arrowKey: false
},
Thanks for you help
There doesn't seem to be anything in the options that can help you. You will either have to modify the plugin source or find the elements that correspond to the arrows and hide them with JavaScript or CSS.
Inspecting with Chrome, it looks like the 2 arrow keys have IDs of cboxNext and cboxPrevious.
Try the following after the lightbox loads:
$("#cboxPrevious").hide();
$("#cboxNext").hide();
Or add to your CSS:
#cboxPrevious, #cboxNext{
display: none;
}
You actually can do this.
After you include colorbox.js and colorbox.css you have to initialize it. If you do it like below, you can have 3 separate options.
<script language="javascript">
$(document).ready(function(){
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
$(".photo").colorbox({photo:true, slideshow:false, previous:false, next:false, arrowkey:false, loop:false});
$(".group1").colorbox({rel:'group1', slideshow:true});
});
</script>
class="iframe" can trigger an external page.
class="photo" can show single photo without arrow but just close button
class="group1" will display the gallery and all controls for the gallery.
Note that only group1 contains rel:group1
Others two are classes e.g. iframe and photo and they are called by iframe > true and photo > true instead of group1 that is called by rel > group1
Pay attention in the code and you will know
Go to page
<img src="image.jpg">
<img src="image1.jpg">
Best is to just set the config option rel to false. rel is a the function used to group related colorbox instances.
$(".target").colorbox({rel: false});
The simplest way to disable navigation links is by not defining the rel attribute in the HTML element and using a class selector. For example:
HTML:
<a href="photo-1.php" class="js-colorbox">
<a href="photo-2.php" class="js-colorbox">
Javascript:
$(".js-colorbox").colorbox({iframe:true});
By defining the rel attribute, colorbox will try to find all the related elements (elements that have the same rel value) and create a navigation through them.
I'm trying to create a checkbox list using ListView component. Below is my code.
<script type="text/javascript">
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = 'blank.gif';
var genres = new Ext.data.SimpleStore({
fields: ['id','genre'],
data: [['1','Comedy'],['4','Drama'],['3','Action']]
});
var list1 = new Ext.list.ListView({
store: genres,
width: 120,
hideHeaders: true,
selectedClass: 'x-list-selected',
multiSelect: false,
singleSelect: true,
columns: [{dataIndex:'id',tpl:'<input type="checkbox" id="{id}"></input>',width:.2},{dataIndex:'genre',tpl:'{genre}',width:.5}]
});
var myPanel = new Ext.Panel({
renderTo: Ext.get('div_formPanel'),
layout: 'hbox',
autoWidth: true,
autoHeight: true,
id: 'myP',
autoScroll: true,
items:[list1]
});
});
</script>
As you can see I have checkboxes in my ListView, which is set to SingleSelect mode. The problem is when in singleSelect, the checkbox does not maintain state. Basically I'm clicking the checkbox but it does not check. However when I tried swapping the checkbox with radio buttons, the radio buttons do fill in upon clicking. Can someone please point out what I'm doing wrong or how can I achieve the desired effect.
Thank you
I think you may want to use an Ext.grid.GridPanel with Ext.grid.CheckboxSelectionModel, instead of putting your Ext.list.ListView inside of an Ext.Panel and making checkboxes with a template.
Here's an example: Sencha Grid Plugins Examples
You can also configure your Ext.grid.CheckboxSelectionModel with singleSelect:true to get your desired effect.