add js modules

This commit is contained in:
Simon Vieille 2021-03-29 19:40:55 +02:00
parent 5e8b49a131
commit df910d1ed2
29 changed files with 487 additions and 26 deletions

1
.gitignore vendored
View File

@ -25,3 +25,4 @@ yarn-error.log
/public/uploads/
!/public/uploads/.gitkeep
/data

View File

@ -19,6 +19,9 @@ asset:
$(YARN)
$(WEBPACK)
jsroute:
$(PHP) bin/console fos:js-routing:dump --format=json --target=public/js/fos_js_routes.json
clean:
rm -fr var/cache/dev/*
rm -fr var/cache/prod/*

View File

@ -384,6 +384,11 @@ a:focus .logo-svg * {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
&[class*="language-"] {
padding-bottom: 10px;
border: 1px solid #3c3c3c;
}
}
}

View File

@ -1,3 +1,28 @@
import '../css/app.scss';
const App = require('./app/app')
const FormPnw = require('./app/form-pwn')
const Post = require('./app/post')
const LazyLoad = require('./app/lazy-load')
const QuickPost = require('./app/quick-post')
const Code = require('./app/code')
const Knmc = require('./app/knmc')
const VideoRatio = require('./app/video-ratio')
const Stats = require('./app/stats')
const Particles = require('./app/particles')
const app = new App([
new FormPnw(window),
new Post(window),
new LazyLoad(window),
new QuickPost(window),
new Code(window),
new Knmc(window),
new VideoRatio(window),
new Stats(),
new Particles(window),
]);
window.addEventListener('load', function() {
app.init();
}, false);

View File

@ -1,4 +1,4 @@
var App = function(components) {
const App = function(components) {
this.components = components || [];
}
@ -13,3 +13,5 @@ App.prototype.init = function() {
this.components[u].init();
}
}
module.exports = App

View File

@ -1,11 +1,33 @@
var Code = function(w) {
const Prism = require('prismjs');
require('prismjs/plugins/line-numbers/prism-line-numbers.css');
require('prismjs/themes/prism-twilight.css');
require('prismjs/components/prism-scss');
require('prismjs/components/prism-markup');
require('prismjs/components/prism-markup-templating');
require('prismjs/components/prism-css');
require('prismjs/components/prism-clike');
require('prismjs/components/prism-javascript');
require('prismjs/components/prism-bash');
require('prismjs/components/prism-markdown');
require('prismjs/components/prism-nginx');
require('prismjs/components/prism-php');
require('prismjs/components/prism-python');
require('prismjs/components/prism-sql');
require('prismjs/components/prism-yaml');
require('prismjs/plugins/keep-markup/prism-keep-markup');
require('prismjs/plugins/line-highlight/prism-line-highlight');
require('prismjs/plugins/line-numbers/prism-line-numbers');
const Code = function(w) {
this.window = w;
}
Code.prototype.init = function() {
Prism.highlightAllUnder(document);
var elements = this.window.document.querySelectorAll('code[data-title], div[data-title]');
Prism.highlightAllUnder(document)
var elements = this.window.document.querySelectorAll('code[data-title], div[data-title]')
for (var i = 0, len = elements.length; i < len; i++) {
var element = elements[i];

View File

@ -1,23 +1,28 @@
var FormPnw = function(w) {
this.window = w;
const Routing = require('./routing')
const FormPnw = function(w) {
this.window = w
}
FormPnw.prototype.init = function() {
var doc = this.window.document;
var doc = this.window.document
doc.addEventListener('mousemove', function() {
var forms = doc.querySelectorAll('form[data-form-bot]');
var forms = doc.querySelectorAll('form[data-form-bot]')
for (var i = 0, len = forms.length; i < len; i++) {
var form = forms[i];
var action = form.getAttribute('action');
action = action.replace(Routing.generate('form_without_javascript') + '?page=', '');
action = decodeURIComponent(action);
var form = forms[i]
var action = form.getAttribute('action')
form.setAttribute('action', action);
form.removeAttribute('data-form-bot');
console.log([action, Routing.generate('blog_tech_form_without_javascript', [], true)])
action = action.replace(Routing.generate('blog_tech_form_without_javascript', [], false) + '?page=', '')
action = decodeURIComponent(action)
form.setAttribute('action', action)
form.removeAttribute('data-form-bot')
}
});
})
}
module.exports = FormPnw

View File

@ -1,4 +1,4 @@
var Knmc = function(w) {
const Knmc = function(w) {
this.window = w;
}

View File

@ -1,4 +1,6 @@
var LazyLoad = function() {
const lozad = require('lozad')
const LazyLoad = function() {
}
LazyLoad.prototype.init = function() {

View File

@ -1,4 +1,6 @@
var Particles = function(w) {
require('particles.js');
const Particles = function(w) {
this.window = w;
}

View File

@ -1,4 +1,4 @@
var Post = function(w) {
const Post = function(w) {
this.window = w;
}

View File

@ -1,4 +1,4 @@
var QuickPost = function(w) {
const QuickPost = function(w) {
this.window = w;
}

8
assets/js/app/routing.js Normal file
View File

@ -0,0 +1,8 @@
const routes = require('../../../public/js/fos_js_routes.json');
const Routing = require('./../../../vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.js');
Routing.setRoutingData(routes);
Routing.setScheme(location.protocol.replace(':', ''))
module.exports = Routing

View File

@ -1,4 +1,4 @@
var Stats = function() {
const Stats = function() {
}
Stats.prototype.init = function() {

View File

@ -1,4 +1,4 @@
var VideoRatio = function(w) {
const VideoRatio = function(w) {
this.window = w;
}

View File

@ -14,6 +14,7 @@
"doctrine/doctrine-bundle": "^2.2",
"doctrine/doctrine-migrations-bundle": "^3.0",
"doctrine/orm": "^2.8",
"friendsofsymfony/jsrouting-bundle": "^2.7",
"knplabs/knp-markdown-bundle": "^1.9",
"knplabs/knp-menu-bundle": "^3.1",
"knplabs/knp-paginator-bundle": "^5.4",

View File

@ -21,4 +21,5 @@ return [
App\Bundle\AppBundle::class => ['all' => true],
Knp\Bundle\MarkdownBundle\KnpMarkdownBundle::class => ['all' => true],
Knp\Bundle\MenuBundle\KnpMenuBundle::class => ['all' => true],
FOS\JsRoutingBundle\FOSJsRoutingBundle::class => ['all' => true],
];

View File

@ -19,3 +19,7 @@ core:
name: 'Page titrée'
templates:
- {name: "Par défaut", file: "page/titled/default.html.twig"}
fos_js_routing:
routes_to_expose:
- blog_tech_form_without_javascript

View File

@ -0,0 +1,2 @@
fos_js_routing:
resource: "@FOSJsRoutingBundle/Resources/config/routing/routing-sf4.xml"

View File

@ -23,8 +23,11 @@
"bootstrap": "^4.3.1",
"choices.js": "^9.0.1",
"jquery": "^3.6.0",
"lozad": "^1.16.0",
"particles.js": "^2.0.0",
"particlesjs": "^2.2.3",
"popper.js": "^1.16.0",
"prismjs": "^1.23.0",
"qrcodejs": "^1.0.0",
"simplemde": "^1.11.2",
"tinymce": "^5.7.1",

View File

@ -0,0 +1 @@
{"base_url":"","routes":{"blog_tech_form_without_javascript":{"tokens":[["text","\/nojs"]],"defaults":[],"requirements":[],"hosttokens":[["text","local.deblan"]],"methods":[],"schemes":[]}},"prefix":"","host":"localhost","port":"","scheme":"http","locale":[]}

View File

@ -0,0 +1,101 @@
{
"particles": {
"number": {
"value": 90,
"density": {
"enable": true,
"value_area": 900
}
},
"color": {
"value": "#ffffff"
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 5,
"random": true,
"anim": {
"enable": false,
"speed": 1,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": false,
"mode": "repulse"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true,
"config_demo": {
"hide_card": false,
"background_color": "#b61924",
"background_image": "",
"background_position": "50% 50%",
"background_repeat": "no-repeat",
"background_size": "cover"
}
}

View File

@ -0,0 +1,110 @@
{
"particles": {
"number": {
"value": 100,
"density": {
"enable": false,
"value_area": 800
}
},
"color": {
"value": "#fff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": true,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 10,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": false,
"distance": 500,
"color": "#ffffff",
"opacity": 0.4,
"width": 2
},
"move": {
"enable": true,
"speed": 3,
"direction": "bottom",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": false,
"mode": "repulse"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 0.5
}
},
"bubble": {
"distance": 400,
"size": 4,
"duration": 0.3,
"opacity": 1,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.7
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": false
}

101
public/js/particles.json Normal file
View File

@ -0,0 +1,101 @@
{
"particles": {
"number": {
"value": 90,
"density": {
"enable": true,
"value_area": 900
}
},
"color": {
"value": "#ffffff"
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 5,
"random": true,
"anim": {
"enable": false,
"speed": 1,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": false,
"mode": "repulse"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true,
"config_demo": {
"hide_card": false,
"background_color": "#b61924",
"background_image": "",
"background_position": "50% 50%",
"background_repeat": "no-repeat",
"background_size": "cover"
}
}

View File

@ -105,6 +105,18 @@
"friendsofphp/proxy-manager-lts": {
"version": "v1.0.3"
},
"friendsofsymfony/jsrouting-bundle": {
"version": "2.3",
"recipe": {
"repo": "github.com/symfony/recipes-contrib",
"branch": "master",
"version": "2.3",
"ref": "a9f2e49180f75cdc71ae279a929c4b2e0638de84"
},
"files": [
"config/routes/fos_js_routing.yaml"
]
},
"gedmo/doctrine-extensions": {
"version": "v3.0.3"
},
@ -652,5 +664,8 @@
},
"webmozart/assert": {
"version": "1.10.0"
},
"willdurand/jsonp-callback-validator": {
"version": "v1.1.0"
}
}

View File

@ -53,7 +53,6 @@
<li>
<a href="{{ safe_node_url(item) }}">
<span class="deblan-icon deblan-icon-{{ item.attributes.icon.value }}"></span>
{{- item.label -}}
</a>
</li>
{% endfor %}

View File

@ -21,7 +21,7 @@
{% if showForm %}
<div class="body col-12">
<form class="form" method="POST" data-form-bot action="{{ safe_path('blog_tech_form_without_javascript', {page: app.request.uri}) }}">
<form class="form" method="POST" data-form-bot action="{{ safe_url('blog_tech_form_without_javascript', {page: app.request.uri}) }}">
<div class="row">
<div class="field col-6">
{{ form_label(form.name) }}

View File

@ -24,7 +24,7 @@ Encore
.addEntry('app', './assets/js/app.js')
// When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
.splitEntryChunks()
// .splitEntryChunks()
// will require an extra script tag for runtime.js
// but, you probably want this, unless you're building a single-page app

View File

@ -1743,6 +1743,15 @@ clean-webpack-plugin@^3.0.0:
"@types/webpack" "^4.4.31"
del "^4.1.1"
clipboard@^2.0.0:
version "2.0.8"
resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.8.tgz#ffc6c103dd2967a83005f3f61976aa4655a4cdba"
integrity sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ==
dependencies:
good-listener "^1.2.2"
select "^1.1.2"
tiny-emitter "^2.0.0"
cliui@^5.0.0:
version "5.0.0"
resolved "https://registry.yarnpkg.com/cliui/-/cliui-5.0.0.tgz#deefcfdb2e800784aa34f46fa08e06851c7bbbc5"
@ -2263,6 +2272,11 @@ delayed-stream@~1.0.0:
resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
delegate@^3.1.2:
version "3.2.0"
resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"
integrity sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==
delegates@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
@ -2963,6 +2977,13 @@ globule@^1.0.0:
lodash "~4.17.10"
minimatch "~3.0.2"
good-listener@^1.2.2:
version "1.2.2"
resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
integrity sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=
dependencies:
delegate "^3.1.2"
graceful-fs@^4.1.2, graceful-fs@^4.2.4:
version "4.2.6"
resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.6.tgz#ff040b2b0853b23c3d31027523706f1885d76bee"
@ -3737,6 +3758,11 @@ loud-rejection@^1.0.0:
currently-unhandled "^0.4.1"
signal-exit "^3.0.0"
lozad@^1.16.0:
version "1.16.0"
resolved "https://registry.yarnpkg.com/lozad/-/lozad-1.16.0.tgz#86ce732c64c69926ccdebb81c8c90bb3735948b4"
integrity sha512-JBr9WjvEFeKoyim3svo/gsQPTkgG/mOHJmDctZ/+U9H3ymUuvEkqpn8bdQMFsvTMcyRJrdJkLv0bXqGm0sP72w==
lru-cache@^4.0.1:
version "4.1.5"
resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
@ -4351,6 +4377,11 @@ particles.js@^2.0.0:
resolved "https://registry.yarnpkg.com/particles.js/-/particles.js-2.0.0.tgz#21386c4328d6c7f96780a201e96eedfc09c736f6"
integrity sha1-IThsQyjWx/lngKIB6W7t/AnHNvY=
particlesjs@^2.2.3:
version "2.2.3"
resolved "https://registry.yarnpkg.com/particlesjs/-/particlesjs-2.2.3.tgz#4d213ca740679fc1ccc772e8d864b884a091f37e"
integrity sha512-f0rL80Agqdsrnv/uhlLewv+LMdiXHu9MYPzMv0ZLPM06nLx3zmAXMH882fxqO6Uzb91csli8WlWaYd2XPN0d/Q==
path-exists@^2.0.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-2.1.0.tgz#0feb6c64f0fc518d9a754dd5efb62c7022761f4b"
@ -4806,6 +4837,13 @@ pretty-error@^3.0.3:
lodash "^4.17.20"
renderkid "^2.0.5"
prismjs@^1.23.0:
version "1.23.0"
resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.23.0.tgz#d3b3967f7d72440690497652a9d40ff046067f33"
integrity sha512-c29LVsqOaLbBHuIbsTxaKENh1N2EQBOHaWv7gkHN4dgRbxSREqDnDbtFJYdpPauS4YCplMSNCABQ6Eeor69bAA==
optionalDependencies:
clipboard "^2.0.0"
process-nextick-args@~2.0.0:
version "2.0.1"
resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
@ -5259,6 +5297,11 @@ select-hose@^2.0.0:
resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
integrity sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo=
select@^1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
integrity sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=
selfsigned@^1.10.8:
version "1.10.8"
resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.8.tgz#0d17208b7d12c33f8eac85c41835f27fc3d81a30"
@ -5812,6 +5855,11 @@ timsort@^0.3.0:
resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
tiny-emitter@^2.0.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
tinymce@^5.7.1:
version "5.7.1"
resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-5.7.1.tgz#658a6fb4c7d53a8496cc00f8da33f4b8290da06d"