PeguyJS library

NameCopyCodeKeywords
Create default base code 
<!DOCTYPE html>
<html>
	<head id="head" >
		<meta charset="utf-8" />

		<!-- Désactiver les comportements natifs indésirables des mobiles -->
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<meta name="viewport" content="width=device-width, minimum-scale=1" />
		<meta name="viewport" content="width=device-width, maximum-scale=1" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name=“viewport” content=”initial-scale=1, viewport-fit=cover”>

		<title>My Application</title>

		<!-- Style de la page HTML affichée pendant le chargement du framework et autres contenus, à adapter selon les besoins -->
		<style>

			#main, #screen
			{
				position: absolute;
				left: 0px;
				right: 0px;
				top: 0px;
				bottom: 0px;

				overflow: hidden;

				margin: 0px;
				padding: 0px;

				text-align: center;
				font-family: Arial;
			}

		</style>

	</head>

	<!-- Racine du DOM, la présence de l'id "main" est obligatoire -->
	<body id="main" >

		<!-- Zone d'écran principal de l'application, la présence de l'id "screen" est obligatoire -->

		<div id="screen">
			<!-- Ici, vous écrivez le HTML que vous voulez -->
			<p>Chargement en cours...</p>
		</div>

		<!-- Chargement du Loader qui permet d'initialiser le framework ensuite -->
		<script src='../PeguyJS/Loader.js?token=0' ></script>

		<script type='text/javascript' >

			// Instanciation du Loader
			// La variable doit obligatoirement s'appeler "Loader".
			var Loader = new Loader('../', 'Default');

			// Ici on déclare les ressources statiques supplémentaires à faire charger par le Loader

			// Exemples : 
			Loader.addSVG('/chemin/image.svg', 'monImageSVG');
			Loader.addStyle('/chemin/feuilleDeStyle.css', 'maFeuilleDeStyle');
			Loader.addScript('/chemin/script.js', 'monScript');
			Loader.addComponent('/chemin/feuilleDeStyleDuComposent.css', '/chemin/scriptDuComposent.js', 'monComposent');

			// Redéfinir la fonction this.onload
			// Elle sera déclenchée lorsque le framework ainsi que les ressources supplémentaires déclarée juste au dessus seront chargés.
			Loader.onload = function()
			{
				console.log("Hello ! J'ai fini de charger JanusJS ! ");
				document.getElementById('screen').innerHTML = "<p>Hello ! J'ai fini de charger JanusJS ! </p>";

				// Code de l'application
				// Généralement il s'agit d'un simple point d'entrée
			};

			// On ne lance le chargement du framework que lorsque la page HTML qui héberge l'application a fini de charger
			window.onload = function()
			{
				Loader.load();
			};

		</script>

	</body>
</html>
template, main, index, html
Create ViewManager base code 
function ViewManager()
{
	////////////////
	// Attributes //
	////////////////

	var grid = new Grid();

	/////////////
	// Methods //
	/////////////

	this.init = function()
	{
		document.getElementById('screen').removeAllChildren();
		document.getElementById('screen').appendChild(grid);
	};

	this.resize = function()
	{
		
	};

	///////////////////////
	// Getters & Setters //
	///////////////////////

	// GET

	// SET

	var $this = this;
}

if (Loader !== null && Loader !== undefined)
	Loader.hasLoaded("viewManager");
template, main, view manager, viewmanager
Grid1 class 
function Grid1()
{
	///////////////
	// Attributs //
	///////////////
	
	var html = '<div class="grid grid1" >'
					+ '<div id="leftPanel" class="leftPanel" >'
						+ '<div class="panel" ></div>'
					+ '</div>'
					+ '<div id="rightPanel" class="rightPanel" >'
						+ '<div class="panel" ></div>'
					+ '</div>'
				+ '</div>';
	
	var component = new Component(html);
	
	var slide1 = new HorizontalSlide(component.getById('leftPanel'), component.getById('rightPanel'), 300);
	component.appendChild(slide1);
	
	///////////////////////////////////
	// Initialisation des événements //
	///////////////////////////////////
	
	slide1.onDrag = function() { Events.resize(); };
	
	//////////////
	// Héritage //
	//////////////
	var $this = utils.extend(component, this);
	return $this;
}
	
if (Loader !== undefined && Loader !== null)
	Loader.hasLoaded("grid1");
template, grid, js, javascript
Grid1 css 
.grid1
{
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
}

.grid1 .leftPanel, .grid1 .rightPanel
{
	position: absolute;
	top: 0px;
	bottom: 0px;
}

.grid1 .leftPanel
{
	left: 0px;
	right: 50%;
}

.grid1 .rightPanel
{
	left: 50%;
	right: 0px;
}
template, grid, css
Grid2 class 
function Grid2()
{
	///////////////
	// Attributs //
	///////////////
	
	var html = '<div class="grid grid2" >'
					+ '<div id="topPanel" class="topPanel" >'
						+ '<div class="panel" ></div>'
					+ '</div>'
					+ '<div id="bottomPanel" class="bottomPanel" >'
						+ '<div class="panel" ></div>'
					+ '</div>'
				+ '</div>';
	
	var component = new Component(html);
	
	var slide1 = new VerticalSlide(component.getById('topPanel'), component.getById('bottomPanel'), 300);
	component.appendChild(slide1);
	
	///////////////////////////////////
	// Initialisation des événements //
	///////////////////////////////////
	
	slide1.onDrag = function() { Events.resize(); };
	
	//////////////
	// Héritage //
	//////////////

	var $this = utils.extend(component, this);
	return $this;
}

if (Loader !== undefined && Loader !== null)
	Loader.hasLoaded("grid2");
template, grid, js, javascript
Grid2 css 
.grid2
{
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
}

.grid2 .topPanel, .grid2 .bottomPanel
{
	position: absolute;
	left: 0px;
	right: 0px;
}

.grid2 .topPanel
{
	top: 0px;
	bottom: 50%;
}

.grid2 .bottomPanel
{
	top: 50%;
	bottom: 0px;
}
template, grid, css
Grid3 class 
function Grid3()
{
	///////////////
	// Attributs //
	///////////////
	
	var html = '<div class="grid grid3" >'
				+ '<div id="leftPanel" class="leftPanel" ><div class="panel" ></div></div>'
				+ '<div id="rightPanel" class="rightPanel" >'
					+ '<div id="leftRightPanel" class="leftRightPanel" ><div class="panel" ></div></div>'
					+ '<div id="rightRightPanel" class="rightRightPanel" ><div class="panel" ></div></div>'
				+ '</div>'
			+ '</div>';
	
	var component = new Component(html);
	
	var slide1 = new HorizontalSlide(component.getById('leftPanel'), component.getById('rightPanel'), 300);
	var slide2 = new HorizontalSlide(component.getById('leftRightPanel'), component.getById('rightRightPanel'), 300);
	
	component.appendChild(slide1);
	component.getById('rightPanel').appendChild(slide2);
	
	///////////////////////////////////
	// Initialisation des événements //
	///////////////////////////////////
	
	slide1.onDrag = function() { Events.resize(); };
	slide2.onDrag = function() { Events.resize(); };
	
	//////////////
	// Héritage //
	//////////////

	var $this = utils.extend(component, this);
	return $this;
}

if (Loader !== undefined && Loader !== null)
	Loader.hasLoaded("grid3");
template, grid, js, javascript
Grid3 css 
.grid3
{
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
}

.grid3 .leftPanel, .grid3 .rightPanel, .grid3 .leftRightPanel, .grid3 .rightRightPanel
{
	position: absolute;
	top: 0px;
	bottom: 0px;
}

.grid3 .leftPanel
{
	left: 0px;
	right: 67%;
}

.grid3 .rightPanel
{
	left: 33%;
	right: 0px;
}

.grid3 .leftRightPanel
{
	left: 0px;
	right: 50%;
}

.grid3 .rightRightPanel
{
	left: 50%;
	right: 0px;
}
template, grid, css
Grid4 class 
function Grid4()
{
	///////////////
	// Attributs //
	///////////////
	
	var html = '<div class="grid grid4" >'
				+ '<div id="leftPanel" class="leftPanel" ><div class="panel" ></div></div>'
				+ '<div id="rightPanel" class="rightPanel" >'
					+ '<div id="topPanel" class="topPanel" ><div class="panel" ></div></div>'
					+ '<div id="bottomPanel" class="bottomPanel" ><div class="panel" ></div></div>'
				+ '</div>'
			+ '</div>';
	
	var component = new Component(html);
	
	var slide1 = new HorizontalSlide(component.getById('leftPanel'), component.getById('rightPanel'), 500);
	var slide2 = new VerticalSlide(component.getById('topPanel'), component.getById('bottomPanel'), 300);
	
	component.appendChild(slide1);
	component.getById('rightPanel').appendChild(slide2);
	
	///////////////////////////////////
	// Initialisation des événements //
	///////////////////////////////////
	
	slide1.onDrag = function() { Events.resize(); };
	slide2.onDrag = function() { Events.resize(); };
	
	//////////////
	// Héritage //
	//////////////

	var $this = utils.extend(component, this);
	return $this;
}

if (Loader !== undefined && Loader !== null)
	Loader.hasLoaded("grid4");
template, grid, js, javascript
Grid4 css 
.grid4
{
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
}

.grid4 .leftPanel, .grid4 .rightPanel
{
	position: absolute;
	top: 0px;
	bottom: 0px;
}

.grid4 .leftPanel
{
	left: 0px;
	right: 500px;
}

.grid4 .rightPanel
{
	left: calc(100% - 500px);
	right: 0px;
}

.grid4 .topPanel, .grid4 .bottomPanel
{
	position: absolute;
	left: 0px;
	right: 0px;
}

.grid4 .topPanel
{
	top: 0px;
	bottom: 50%;
}

.grid4 .bottomPanel
{
	top: 50%;
	bottom: 0px;
}
template, grid, css
Grid5 class 
function Grid5()
{
	///////////////
	// Attributs //
	///////////////
	
	var html = '<div class="grid grid5" >'
				+ '<div id="leftPanel" class="leftPanel" >'
					+ '<div id="topPanel" class="topPanel" ><div class="panel" ></div></div>'
					+ '<div id="bottomPanel" class="bottomPanel" ><div class="panel" ></div></div>'
				+ '</div>'
				+ '<div id="rightPanel" class="rightPanel" ><div class="panel" ></div></div>'
			+ '</div>';
	
	var component = new Component(html);
	
	var slide1 = new HorizontalSlide(component.getById('leftPanel'), component.getById('rightPanel'), 500);
	var slide2 = new VerticalSlide(component.getById('topPanel'), component.getById('bottomPanel'), 300);
	
	component.appendChild(slide1);
	component.getById('leftPanel').appendChild(slide2);
	
	///////////////////////////////////
	// Initialisation des événements //
	///////////////////////////////////
	
	slide1.onDrag = function() { Events.resize(); };
	slide2.onDrag = function() { Events.resize(); };
	
	//////////////
	// Héritage //
	//////////////

	var $this = utils.extend(component, this);
	return $this;
}

if (Loader !== undefined && Loader !== null)
	Loader.hasLoaded("grid5");
template, grid, js, javascript
Grid5 css 
.grid5
{
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
}

.grid5 .leftPanel, .grid5 .rightPanel
{
	position: absolute;
	top: 0px;
	bottom: 0px;
}

.grid5 .leftPanel
{
	left: 0px;
	right: calc(100% - 500px);
}

.grid5 .rightPanel
{
	left: 500px;
	right: 0px;
}

.grid5 .topPanel, .grid5 .bottomPanel
{
	position: absolute;
	left: 0px;
	right: 0px;
}

.grid5 .topPanel
{
	top: 0px;
	bottom: 50%;
}

.grid5 .bottomPanel
{
	top: 50%;
	bottom: 0px;
}
template, grid, css
Grid6 class 
function Grid6()
{
	///////////////
	// Attributs //
	///////////////
	
	var html = '<div class="grid grid6" >'
				+ '<div id="leftPanel" class="leftPanel" ><div class="panel" ></div></div>'
				+ '<div id="rightPanel" class="rightPanel" >'
					+ '<div id="topPanel" class="topPanel" ><div class="panel" ></div></div>'
					+ '<div id="bottomPanel" class="bottomPanel" >'
						+ '<div id="topBottomPanel" class="topBottomPanel" ><div class="panel" ></div></div>'
						+ '<div id="bottomBottomPanel" class="bottomBottomPanel" ><div class="panel" ></div></div>'
					+ '</div>'
				+ '</div>'
			+ '</div>';
	
	var component = new Component(html);
	
	var slide1 = new HorizontalSlide(component.getById('leftPanel'), component.getById('rightPanel'), 500);
	var slide2 = new VerticalSlide(component.getById('topPanel'), component.getById('bottomPanel'), 300);
	var slide3 = new VerticalSlide(component.getById('topBottomPanel'), component.getById('bottomBottomPanel'), 300);
	
	component.appendChild(slide1);
	component.getById('rightPanel').appendChild(slide2);
	component.getById('bottomPanel').appendChild(slide3);
	
	///////////////////////////////////
	// Initialisation des événements //
	///////////////////////////////////
	
	slide1.onDrag = function() { Events.resize(); };
	slide2.onDrag = function() { Events.resize(); };
	slide3.onDrag = function() { Events.resize(); };
	
	//////////////
	// Héritage //
	//////////////

	var $this = utils.extend(component, this);
	return $this;
}

if (Loader !== undefined && Loader !== null)
	Loader.hasLoaded("grid6");
template, grid, js, javascript
Grid6 css 
.grid6
{
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
}

.grid6 .leftPanel, .grid6 .rightPanel
{
	position: absolute;
	top: 0px;
	bottom: 0px;
}

.grid6 .leftPanel
{
	left: 0px;
	right: 500px;
}

.grid6 .rightPanel
{
	left: calc(100% - 500px);
	right: 0px;
}

.grid6 .topPanel, .grid6 .bottomPanel, .grid6 .topBottomPanel, .grid6 .bottomBottomPanel
{
	position: absolute;
	left: 0px;
	right: 0px;
}

.grid6 .topPanel
{
	top: 0px;
	bottom: 67%;
}

.grid6 .bottomPanel
{
	top: 33%;
	bottom: 0px;
}

.grid6 .topBottomPanel
{
	top: 0px;
	bottom: 50%;
}

.grid6 .bottomBottomPanel
{
	top: 50%;
	bottom: 0px;
}
template, grid, css
Grid7 class 
function Grid7()
{
	///////////////
	// Attributs //
	///////////////
	
	var html = '<div class="grid grid7" >'
				+ '<div id="leftPanel" class="leftPanel" >'
					+ '<div id="topPanel" class="topPanel" ><div class="panel" ></div></div>'
					+ '<div id="bottomPanel" class="bottomPanel" >'
						+ '<div id="topBottomPanel" class="topBottomPanel" ><div class="panel" ></div></div>'
						+ '<div id="bottomBottomPanel" class="bottomBottomPanel" ><div class="panel" ></div></div>'
					+ '</div>'
				+ '</div>'
				+ '<div id="rightPanel" class="rightPanel" ><div class="panel" ></div></div>'
			+ '</div>';
	
	var component = new Component(html);
	
	var slide1 = new HorizontalSlide(component.getById('leftPanel'), component.getById('rightPanel'), 500);
	var slide2 = new VerticalSlide(component.getById('topPanel'), component.getById('bottomPanel'), 300);
	var slide3 = new VerticalSlide(component.getById('topBottomPanel'), component.getById('bottomBottomPanel'), 300);
	
	component.appendChild(slide1);
	component.getById('leftPanel').appendChild(slide2);
	component.getById('bottomPanel').appendChild(slide3);
	
	///////////////////////////////////
	// Initialisation des événements //
	///////////////////////////////////
	
	slide1.onDrag = function() { Events.resize(); };
	slide2.onDrag = function() { Events.resize(); };
	slide3.onDrag = function() { Events.resize(); };
	
	//////////////
	// Héritage //
	//////////////

	var $this = utils.extend(component, this);
	return $this;
}

if (Loader !== undefined && Loader !== null)
	Loader.hasLoaded("grid7");
template, grid, js, javascript
Grid7 css 
.grid7
{
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
}

.grid7 .leftPanel, .grid7 .rightPanel
{
	position: absolute;
	top: 0px;
	bottom: 0px;
}

.grid7 .leftPanel
{
	left: 0px;
	right: calc(100% - 500px);
}

.grid7 .rightPanel
{
	left: 500px;
	right: 0px;
}

.grid7 .topPanel, .grid7 .bottomPanel, .grid7 .topBottomPanel, .grid7 .bottomBottomPanel
{
	position: absolute;
	left: 0px;
	right: 0px;
}

.grid7 .topPanel
{
	top: 0px;
	bottom: 67%;
}

.grid7 .bottomPanel
{
	top: 33%;
	bottom: 0px;
}

.grid7 .topBottomPanel
{
	top: 0px;
	bottom: 50%;
}

.grid7 .bottomBottomPanel
{
	top: 50%;
	bottom: 0px;
}
template, grid, css
Create accordion 
var myAccordion = Accordion($openOneCloseAll);
component
Create accordion item 
var myAccordionItem = AccordionItem($label, $content);

myAccordion.addElement(myAccordionItem);
component
Create auto complete 
var myAutoComplete = AutoComplete();
myAutoComplete.setList(["value1", "value2", "value3"]);

myAutoComplete.onChange = function($value) { /* Do something. */ };
myAutoComplete.onTyping = function($value) { /* Do something. */ };
component
Create button 
var myButton = new Button($label)

myButton.onAction = function() { /* Do something. */ };
component
Create calendar (classic only) 
var myCalendar = new Calendar(new Date(), $autoresize);

myCalendar.onChange = function() { /* Do something. */ };
myCalendar.onOpen = function() { /* Do something. */ };
component
Create canvas 
var myCanvas = Canvas2D($width, $height);
component
Create check box 
var myCheckBox = CheckBox($checked, $size);
myCheckBox.onChange = function($checked) { /* Do something. */ };
component
Create check box list 
var options = [{ name: "value1", label: "Value 1", checked: true }, { name: "value2", label: "Value 2", checked: false }];

var myCheckBoxList = CheckBoxList($name, options, $nbColumns, $isHTML);

myCheckBoxList.onChange = function($checked) { /* Do something. */ };
component
Create color palette 
var colorsList = ["rgb(255, 0, 0)", "#00FF00", "rgb(0, 0, 255)"];

var myColorPalette = ColorPalette($colorsList);
component
Create color picker 
var myColorPicker = ColorPicker();

myColorPicker.onChange = function() { /* Do something. */ };
component
Create combo box 
var options = [{ name: "value1", label: "Value 1", color: "rgb(255, 0, 0)" }, { name: "value2", label: "Value 2", color: "rgb(0, 0, 255)" }];

var myComboBox = ComboBox($name, options, $currentValue, $freeOption, $autoResize);

myComboBox.onChange = function() { /* Do something. */ };
component
Create combo box item 
var myComboBoxItem = new ComboBoxItem($name, $value, $color, $selected);
component
Create component 
var html = '<div></div>';

var myComponent = new Component(html);
component
Create comfirm popup 
var html = '<div></div>';

var myConfirmPopup = new ConfirmPopup(html, $yesNo);

myConfirmPopup.onCancel = function() { /* Do something. */ };

myConfirmPopup.onOk = function()
{
	/* Do something. */
	return true;
};
component
Create content editable 
var myContentEditable = new ContentEditable();

myContentEditable.setBold(true);
myContentEditable.setItalic(true);
myContentEditable.setUnderline(true);
myContentEditable.setStrike(true);
myContentEditable.setFontSize(true);
myContentEditable.setFont(true);
myContentEditable.setTitle(true);
myContentEditable.setTextColor(true);
myContentEditable.setQuote(true);
myContentEditable.setCode(true);
myContentEditable.setAlign(true);
myContentEditable.setLists(true);
myContentEditable.setTables(true);
myContentEditable.setLinks(true);
myContentEditable.setImages(true);
myContentEditable.setAddAnchor(false);
myContentEditable.setKeepBR(false);
myContentEditable.setDefaultColor("rgb(0, 0, 0)");
myContentEditable.setColorsList(["rgb(255, 0, 0)", "#00FF00", "rgb(0, 0, 255)"]);
myContentEditable.setFontsList([{ value: 'Arial', label: 'Arial' }, { value: 'Times New Roman', label: 'Times New Roman' }]);
myContentEditable.setLanguagesList([{ value: 'xml', label: 'HTML, XML' }, { value: 'css', label: 'CSS' }, { value: 'javascript', label: 'Javascript' }, { value: 'json', label: 'JSON' }]);
myContentEditable.setImagesUploadModes({ url: false, hosted: true });

myContentEditable.setImagesLibraryConfig({

	params: { 'sectionId': 0 },

	displayFreezeScreen: function() {},
	hideFreezeScreen: function() {},

	onError: function($statut, $response)
	{
		var errorPopup = new InfoPopup('<p class="error" >' + $response['error'] + '</p>');
		document.getElementById('main').appendChild(errorPopup);
	},

	getImagesListRequest: { url: '/path', method: 'GET', param: ['sectionId'], data: [], response: {id: 'id', url: 'url'} },
	uploadImageRequest: { url: '/path', method: 'POST', param: [], data: ['sectionId'], response: {id: 'id', url: 'url'} },
	editImageRequest: { url: '/path', method: 'POST', param: [], data: [], response: {id: 'id', url: 'url'} },
	deleteImageRequest: { url: '/path', method: 'POST', param: [], data: [], response: {id: 'id', url: 'url'} }
});

myContentEditable.setImgSecureURL('/path');
component
Create context menu 
var myContextMenu = new ContextMenu(Events.mouseX, Events.mouseY);

myContextMenu.addElement(new MenuItem("Label"));
component
Get shortcut modifier 
if (/mac os x/.test(navigator.userAgent.toLowerCase().replace(" ", "")) || /macosx/.test(navigator.userAgent.toLowerCase().replace(" ", "")))
	shortcutModifier = $event.metaKey;

if (shortcutModifier === true)
{
	// Do something...
}
events, keyboard
Force scroll position 
if (utils.isset(element.scrollTo))
	element.scrollTo(scrollX, scrollY);
else
{
	element.scrollLeft = scrollX;
	element.scrollTop = scrollY;
}
events, scroll
To clipboard 
dataManager.toClipboard("Hello world !",
							function()
							{
								// Do something...
							},
							function() { console.log("Copy to clipboard failed."); });
other, clipboard