im currently digging through the github page, but Im unable to figure out how to set the tabSize property on my prism editor, if anyone has any experience and is willing to share it I would greatly appreciate it!
I will answer here as I placed in code snippet for you to play with.
There is a problem on the umd script where it cannot recognise tabSize as a valid props.
Therefore, you can use tab-size to overcome this.
P.S. move tab size to be part of vue data to avoid complaining the type.
Here is the code snippet for you to test it.
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="https://unpkg.com/vue-prism-editor/dist/prismeditor.min.css" />
<link rel="stylesheet" href="https://unpkg.com/prismjs/themes/prism-tomorrow.css" />
<style>
.height-200 {
height: 200px
}
.my-editor {
/* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
background: #2d2d2d;
color: #ccc;
/* you must provide font-family font-size line-height. Example:*/
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
font-size: 14px;
line-height: 1.5;
padding: 5px;
}
/* optional class for removing the outline */
.prism-editor__textarea:focus {
outline: none;
}
</style>
</head>
<body>
<div id="app">
<prism-editor class="my-editor height-200" v-model="code" :highlight="highlighter" line-numbers :tab-size="tabSize">
</prism-editor>
</div>
<script src="https://unpkg.com/vue#2.6.*"></script>
<script src="https://unpkg.com/vue-prism-editor"></script>
<script src="https://unpkg.com/prismjs/prism.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js"></script>
<!-- <script src="./src/index.js"></script> -->
<script>
new Vue({
el: "#app",
data: () => ({
code: "code",
tabSize: 8
}),
methods: {
highlighter(code) {
// js highlight example
return Prism.highlight(code, Prism.languages.js, "js");
}
}
});
</script>
</body>
</html>
Related
I installed this code on a single page PHP page and it works the way I want it to. Problem is page I need to install it on is broken up into 4 PHP pages.(Home.php, which also includes, Header, Menu, and Footer PHP pages...) and I can't get the code to work. I've tried installing it different places but no luck... if anyone can help would be much appreciated... Code is below.
page to install on is: http://tonysatthejhouse.com THANKS!!
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" />
<link rel="stylesheet" href="http://tonysatthejhouse.com/superadmin/assets/css/Mag3.css" />
</head>
<body>
<h1>THIS IS A TEST</h1>
<script data-require="jquery#1.9.1" data-semver="1.9.1" src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js"></script>
<script src="http://tonysatthejhouse.com/superadmin/assets/js/MagJS4.js"></script>
</body>
</html>
$(document).ready(function() {
$.magnificPopup.open({
items: {
src: 'http://tonysatthejhouse.com/superadmin/assets/extraimages/Restaurant_Week AD-01.jpg', // can be a HTML string, jQuery object, or CSS selector
type: 'image'
}
});
})
.white-popup {
width:500px;
height:700px;
overflow:auto;
padding:10px;
background:white;
border:2px solid black;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
DropDown
I'm using Bootstrap-vue. I need to make the b-dropdown-item-button wrap the text it's showing. How could I do that?
<template>
<b-dropdown menu-class="py-1" text="··· Actions">
<b-dropdown-item-button>Delete</b-dropdown-item-button>
</b-dropdown>
</template>
The dropdown has a min-width andwhite-space: nowrap` set by default, so you need to apply some css to override this.
window.onload = () => {
new Vue({
el: '#app'
})
}
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.0.4/dist/bootstrap-vue.min.js"></script>
<style>
/* Adding it here since it wasn't working in the snippet CSS */
body { padding: 1rem; }
/* Removes the min-width on the dropdown-menu and sets the width to 100% of the parent */
.wrap-dropdown {
width: 100%;
min-width: 0;
}
/* applies white-space: normal to all tags inside the dropdown-menu */
.wrap-dropdown * {
white-space: normal;
}
</style>
<div id="app">
<b-dd menu-class="py-1 wrap-dropdown" text="··· Actions">
<b-dd-item-btn>Delete</b-dd-item-btn>
<b-dd-item-btn>
This text is really long
</b-dd-item-btn>
</b-dd>
</div>
i am new to dojo and i am trying to make a button with an image, but the image does not show, besides, when one clicks the button, it correctly shows the "hi" alert.
the "zoom_in.png" image is right in the same directory with the html. And firebug shows no errors or warnings.
Update. thanks to ed, i managed to get it working via the declarative approach
<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.3/dijit/themes/claro/claro.css">
<script>dojoConfig = {parseOnLoad: true}</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js"></script>
<script>require(["dojo/parser", "dijit/form/Button"]);</script>
<style>
.zoom_in_icon {
background-image: url('zoom_in.png');
height: 25px;
width: 25px;
text-align: center;
background-repeat: no-repeat;
}
</style>
</head>
<body class="claro">
<button data-dojo-type="dijit/form/Button" data-dojo-props="iconClass:'zoom_in_icon'" type="button">
<script type="dojo/on" data-dojo-event="click" data-dojo-args="evt">
require(["dojo/dom"], function(dom){
alert( "Thank you! ");
});
</script>
</button>
<div id="result2"></div>
</body>
</html>
However, programatically, the problem persists
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Button</title>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js" data-dojo-config="async: true"></script>
<style>
.zoom_in_icon {
background-image: url('zoom_in.png');
height: 250px;
width: 250px;
text-align: center;
background-repeat: no-repeat;
}
</style>
<script>
require([
"dijit/form/Button",
"dojo/domReady!"
],
function(Button) {
new Button({
title: 'Zoom in', iconClass:'zoom_in_icon',
onClick: function() { alert("hi"); }}, "zoom_in").startup();
});
</script>
</head>
<body>
<button id="zoom_in" type="button"></button>
</body>
</html>
thanks
If you want to create the button programatically you need to call startup() on the new Button, and you don't need the data-dojo-type="dijit/form/Button" or the parse in the html, if you want to create it declaratively you don't need the new button, but you need to set the icon in the html.
See the Programatic example here:
http://dojotoolkit.org/reference-guide/1.10/dijit/form/Button.html
Hi I have a simple one as shown below that displays bordercontainer and contentpane.
I do not understand why the bordercontainer's id is registered twice since I only have one
id defined for bordercontainer.
The error stated: Error: Tried to register widget with id==main_bContainer but that id is already registered
Please advise where I got it wrong.
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="../dojo1_8/dijit/themes/soria/soria.css"/>
<link rel="stylesheet" href="../common.css"/>
<style type="text/css">
html, body
{
width: 100%;
height: 100%;
margin: 5px;
padding: 0px;
overflow: hidden;
}
</style>
</head>
<body class="soria">
<div id="main_bContainer" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'sidebar'">
<div class="cP_Left" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
Content Pane A
</div>
<div class="cP_Right" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
Content Pane B
</div>
</div>
</body>
<script>
var dojoConfig =
{
parseOnLoad: true,//replace web controls based on theme soria
isDebug: true,//true for debuggin with aid from FireBug, Always set it to false, to avoid overhead
async: true,//
locale : "en-us"//
};
</script>
<script src='../dojo1_8/dojo/dojo.js'></script>
<script>require(["dojo/parser",
"dojo/ready",
"dojo/request",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function(parser, ready, request)
{ready(function()
{parser.parse();
});
});
</script>
</html>
Thanks
Clement
Becuase you have parse() its 2 times.
Here dojoConfig = { parseOnLoad: true };
and here parser.parse();
Just parse only one the problem will solve.
I copied an example from the dojo site using Borderlayout. However, when I load in the browser , the entire data is shown for all the section . Then after a few second the content is refersh and the data is displayed correctly.
here is code that i copied . Thanks for your help
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dijit/themes/tundra/tundra.css">
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<style type="text/css">
html, body { width: 100%; height: 100%; margin: 0; } #borderContainer
{ width: 100%; height: 100%; }
</style>
</head>
<body class="tundra ">
<div dojoType="dijit.layout.BorderContainer" design="sidebar" gutters="true"
liveSplitters="true" id="borderContainer">
<div dojoType="dijit.layout.ContentPane" splitter="true" region="leading"
style="width: 100px;">
Hi
</div>
<div dojoType="dijit.layout.ContentPane" splitter="true" region="center">
Hi, I'm center
</div>
</div>
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.BorderContainer");
</script>
<!-- NOTE: the following script tag is not intended for usage in real
world!! it is part of the CodeGlass and you should just remove it when
you use the code -->
<script type="text/javascript">
dojo.addOnLoad(function() {
if (window.pub) {
window.pub();
}
});
</script>
This looks a bit upside down : you should put your javascripts in the head section and load the dojo libraries in first place. That's not your problem though.
What happens is that when the page loads, dojo loads all the modules that you "dojo.require", then parses all your tags containing the attribute "dojoType" and processes them for rendering, and this takes time.
So the flickering that you're seeing is the difference between the page before and after the widgets are parsed.
You should add a preloader div and hide it once the page is parsed (see this example).
This is what it would look like for your example :
<html>
<head>
<title>Preloader example</title>
<!– every Dijit component needs a theme –>
<link rel="stylesheet"
href="http://o.aolcdn.com/dojo/1.4/dijit/themes/soria/soria.css">
<style type="text/css">
#preloader,
body, html {
width:100%; height:100%; margin:0; padding:0;
}
#preloader {
width:100%; height:100%; margin:0; padding:0;
background:#fff
url(’http://search.nj.com/media/images/loading.gif’)
no-repeat center center;
position:absolute;
z-index:999;
}
#borderContainer {
width:100%; height:100%;
}
</style>
<!– load Dojo, and all the required modules –>
<script src="http://o.aolcdn.com/dojo/1.4/dojo/dojo.xd.js"></script>
<script type="text/javascript">
var hideLoader = function(){
dojo.fadeOut({
node:"preloader",
onEnd: function(){
dojo.style("preloader", "display", "none");
}
}).play();
}
dojo.addOnLoad(function(){
// after page load, load more stuff (spinner is already spinning)
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dojo.parser");
// notice the second onLoad here:
dojo.addOnLoad(function(){
dojo.parser.parse();
hideLoader();
});
});
</script>
</head>
<body class="soria">
<div id="preloader"></div>
<div dojoType="dijit.layout.BorderContainer" id="borderContainer" design="sidebar" gutters="true" liveSplitters="true">
<div dojoType="dijit.layout.ContentPane" splitter="true" region="leading" style="width: 100px;">Hi</div>
<div dojoType="dijit.layout.ContentPane" splitter="true" region="center">I'm Center</div>
</div>
</body>
</html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/dojo.xd.js"></script>
if(dojo.isIE){
addEvent(window, 'load', function(event) {
dojo.parser.parse();
});
}else{
dojo.addOnLoad(function(){
dojo.addOnLoad(function(){
dojo.parser.parse();
});
});
}
function addEvent( obj, type, fn ) {
if ( obj.attachEvent ) {
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
obj.attachEvent( 'on'+type, obj[type+fn] );
} else
obj.addEventListener( type, fn, false );
}
disable parseOnLoad and manually add event to parse widgets for ie.