├── .access.php
├── .gitignore
├── .htaccess
├── README.md
├── api
├── slider.json
└── upload
│ └── index.php
├── assets
├── bg-paraglider.jpg
└── slider
│ ├── 1.jpg
│ ├── 2.jpg
│ ├── 3.jpg
│ ├── 4.jpg
│ └── 5.jpg
├── components-vue
├── block-footer
│ └── template.vue
├── block-header
│ └── template.vue
├── carousel
│ ├── .settings.php
│ └── template.vue
├── dbogdanoff-loader
│ ├── images
│ │ └── load-double-ring.svg
│ ├── script.js
│ ├── style.css
│ ├── style.min.css
│ └── style.scss
├── dbogdanoff-popup
│ └── template.vue
├── simple-block
│ └── template.vue
└── upload-photo
│ ├── .settings.php
│ ├── script.js
│ ├── style.css
│ └── template.vue
├── index.php
└── local
├── php_interface
└── s4
│ ├── include
│ ├── composer.json
│ └── composer.lock
│ └── init.php
└── templates
└── bitrix-vue-demo
├── .styles.php
├── css
└── vtooltip.css
├── description.php
├── footer.php
├── header.php
├── js
├── vtooltip.js
├── vue.js
└── vue.min.js
└── styles.css
/.access.php:
--------------------------------------------------------------------------------
1 |
2 | $PERM["/"]["*"]="R";
3 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | /.idea
2 | /bitrix
3 | /local/php_interface/s4/include/vendor
4 | /upload
5 | /*.txt
6 | *.css.map
7 | *.js.map
8 | *.zip
9 | *.gzip
10 | *.gz
11 | *.tgz
12 | *.tar
13 | *.gz.[0-9]
14 | *.log
15 | *.mp3
16 | *.exe
17 | *.db
18 | *.csv
19 | *.xml
20 | *.psd
21 | *.[oa]
22 | *~
23 |
--------------------------------------------------------------------------------
/.htaccess:
--------------------------------------------------------------------------------
1 | Options -Indexes
2 | ErrorDocument 404 /404.php
3 |
4 |
5 | php_flag session.use_trans_sid off
6 | #php_value display_errors 1
7 | #php_value mbstring.internal_encoding UTF-8
8 |
9 |
10 |
11 | Options +FollowSymLinks
12 | RewriteEngine On
13 | RewriteCond %{REQUEST_FILENAME} !-f
14 | RewriteCond %{REQUEST_FILENAME} !-l
15 | RewriteCond %{REQUEST_FILENAME} !-d
16 | RewriteCond %{REQUEST_FILENAME} !/bitrix/urlrewrite.php$
17 | RewriteRule ^(.*)$ /bitrix/urlrewrite.php [L]
18 | RewriteRule .* - [E=REMOTE_USER:%{HTTP:Authorization}]
19 |
20 |
21 |
22 | DirectoryIndex index.php index.html
23 |
24 |
25 |
26 | ExpiresActive on
27 | ExpiresByType image/jpeg "access plus 3 day"
28 | ExpiresByType image/gif "access plus 3 day"
29 | ExpiresByType image/png "access plus 3 day"
30 | ExpiresByType text/css "access plus 3 day"
31 | ExpiresByType application/javascript "access plus 3 day"
32 |
33 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Один из вариантов использования vue.js в bitrix на примере класса [\Dbogdanoff\Bitrix\Vue](https://github.com/denx-b/bitrix-vue-component)\
2 | Сам сайт пример можно увидеть по адресу [https://bitrix-vue-demo.dbogdanoff.ru](https://bitrix-vue-demo.dbogdanoff.ru)
3 |
--------------------------------------------------------------------------------
/api/slider.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "src": "/assets/slider/1.jpg"
4 | },
5 | {
6 | "src": "/assets/slider/2.jpg"
7 | },
8 | {
9 | "src": "/assets/slider/3.jpg"
10 | },
11 | {
12 | "src": "/assets/slider/4.jpg"
13 | },
14 | {
15 | "src": "/assets/slider/5.jpg"
16 | }
17 | ]
18 |
--------------------------------------------------------------------------------
/api/upload/index.php:
--------------------------------------------------------------------------------
1 |
2 | sleep(1);
3 | echo json_encode(['success' => true, 'message' => 'Файл загружен.']);
4 |
--------------------------------------------------------------------------------
/assets/bg-paraglider.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/denx-b/bitrix-vue-component-demo/93433bc407b3edc777273dec14bc437c40878c54/assets/bg-paraglider.jpg
--------------------------------------------------------------------------------
/assets/slider/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/denx-b/bitrix-vue-component-demo/93433bc407b3edc777273dec14bc437c40878c54/assets/slider/1.jpg
--------------------------------------------------------------------------------
/assets/slider/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/denx-b/bitrix-vue-component-demo/93433bc407b3edc777273dec14bc437c40878c54/assets/slider/2.jpg
--------------------------------------------------------------------------------
/assets/slider/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/denx-b/bitrix-vue-component-demo/93433bc407b3edc777273dec14bc437c40878c54/assets/slider/3.jpg
--------------------------------------------------------------------------------
/assets/slider/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/denx-b/bitrix-vue-component-demo/93433bc407b3edc777273dec14bc437c40878c54/assets/slider/4.jpg
--------------------------------------------------------------------------------
/assets/slider/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/denx-b/bitrix-vue-component-demo/93433bc407b3edc777273dec14bc437c40878c54/assets/slider/5.jpg
--------------------------------------------------------------------------------
/components-vue/block-footer/template.vue:
--------------------------------------------------------------------------------
1 |
7 |
8 |
13 |
14 |
21 |
--------------------------------------------------------------------------------
/components-vue/block-header/template.vue:
--------------------------------------------------------------------------------
1 |
9 |
10 |
15 |
16 |
24 |
--------------------------------------------------------------------------------
/components-vue/carousel/.settings.php:
--------------------------------------------------------------------------------
1 | [
4 | 'https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js',
5 | 'https://unpkg.com/flickity@2.1.2/dist/flickity.pkgd.min.js',
6 | 'https://unpkg.com/flickity@2.1.2/dist/flickity.min.css'
7 | ]
8 | ];
9 |
--------------------------------------------------------------------------------
/components-vue/carousel/template.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
Flickity
5 |
Touch, responsive, flickable carousels
6 |
7 |
8 |
![]()
9 |
10 |
11 |
12 |
13 |
14 |
15 |
49 |
50 |
63 |
--------------------------------------------------------------------------------
/components-vue/dbogdanoff-loader/images/load-double-ring.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/components-vue/dbogdanoff-loader/script.js:
--------------------------------------------------------------------------------
1 | Vue.component('dbogdanoff-loader', {
2 | props: {
3 | active: {
4 | type: Boolean,
5 | default: false
6 | },
7 | replace: {
8 | type: Boolean,
9 | default: false
10 | }
11 | },
12 | template: '' +
13 | '
' +
14 | '
![]()
' +
15 | '
',
16 | computed: {
17 | src: function () {
18 | return this.$bx.componentsPath + '/' + this.$options.name + '/images/load-double-ring.svg'
19 | }
20 | },
21 | mounted: function () {
22 | if (window.hasOwnProperty('BX') && window.hasOwnProperty('mainVueApp') && this.replace === true) {
23 | BX.showWait = function () {
24 | mainVueApp.loader = true
25 | }
26 | BX.closeWait = function () {
27 | mainVueApp.loader = false
28 | }
29 | }
30 | }
31 | })
32 |
--------------------------------------------------------------------------------
/components-vue/dbogdanoff-loader/style.css:
--------------------------------------------------------------------------------
1 | .dbogdanoff-loader {
2 | z-index: 10000;
3 | position: fixed;
4 | left: 0;
5 | top: 0;
6 | width: 100%;
7 | height: 100%;
8 | background: rgba(0, 0, 0, 0.4);
9 | display: none;
10 | align-items: center;
11 | justify-content: center;
12 | user-select: none; }
13 | .dbogdanoff-loader--showed {
14 | display: flex; }
15 |
16 | .dbogdanoff-loader__icon {
17 | width: 166px;
18 | height: 166px; }
19 |
20 | /*# sourceMappingURL=style.css.map */
21 |
--------------------------------------------------------------------------------
/components-vue/dbogdanoff-loader/style.min.css:
--------------------------------------------------------------------------------
1 | .dbogdanoff-loader{z-index:10000;position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.4);display:none;align-items:center;justify-content:center;user-select:none}.dbogdanoff-loader--showed{display:flex}.dbogdanoff-loader__icon{width:166px;height:166px}
--------------------------------------------------------------------------------
/components-vue/dbogdanoff-loader/style.scss:
--------------------------------------------------------------------------------
1 | .dbogdanoff-loader {
2 | z-index: 10000;
3 | position: fixed;
4 | left: 0;
5 | top: 0;
6 | width: 100%;
7 | height: 100%;
8 | background: rgba(0, 0, 0, .4);
9 | display: none;
10 | align-items: center;
11 | justify-content: center;
12 | user-select: none;
13 |
14 | &--showed {
15 | display: flex;
16 | }
17 | }
18 |
19 | .dbogdanoff-loader__icon {
20 | width: 166px;
21 | height: 166px;
22 | }
23 |
--------------------------------------------------------------------------------
/components-vue/dbogdanoff-popup/template.vue:
--------------------------------------------------------------------------------
1 |
11 |
12 |
42 |
--------------------------------------------------------------------------------
/components-vue/simple-block/template.vue:
--------------------------------------------------------------------------------
1 |
2 |
7 |
8 |
9 |
20 |
21 |
30 |
--------------------------------------------------------------------------------
/components-vue/upload-photo/.settings.php:
--------------------------------------------------------------------------------
1 | [
4 | 'https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js'
5 | ]
6 | ];
7 |
--------------------------------------------------------------------------------
/components-vue/upload-photo/script.js:
--------------------------------------------------------------------------------
1 | Vue.component('upload-photo', {
2 | template: '#upload-photo',
3 | model: {
4 | prop: 'loader',
5 | event: 'change'
6 | },
7 | props: {
8 | loader: {
9 | type: Boolean,
10 | default: false
11 | }
12 | },
13 | data: function () {
14 | return {
15 | photo: ''
16 | }
17 | },
18 | methods: {
19 | changeFile: function() {
20 | this.readFile(this.$refs.photo.files[0])
21 | },
22 | readFile: function(file) {
23 | if (!file.type.match('image.*') || this.loader === true)
24 | return
25 |
26 | this.$emit('change', true)
27 |
28 | var reader = new FileReader(),
29 | $this = this
30 |
31 | reader.onload = (function () {
32 | return function (e) {
33 | var image = new Image()
34 | image.src = e.target.result
35 | image.onload = function () {
36 | $this.$emit('change', false)
37 | $this.photo = e.target.result
38 | }
39 | }
40 | })(file)
41 |
42 | reader.readAsDataURL(file)
43 | },
44 | getResult: function() {
45 | if (this.loader === true)
46 | return
47 |
48 | this.$emit('change', true)
49 |
50 | var $this = this
51 |
52 | axios.get('/api/upload/')
53 | .then(function (response) {
54 | $this.$emit('change', false)
55 |
56 | if (response.data.success !== true) {
57 | throw new Error(response.data.message)
58 | }
59 | else if (response.data.hasOwnProperty('message')) {
60 | alert(response.data.message)
61 | }
62 | })
63 | .catch(function (error) {
64 | $this.$emit('change', false)
65 | alert(error)
66 | })
67 | }
68 | }
69 | })
70 |
--------------------------------------------------------------------------------
/components-vue/upload-photo/style.css:
--------------------------------------------------------------------------------
1 | .upload-photo__img {
2 | width: 100%;
3 | max-width: 250px;
4 | min-height: 250px;
5 | border: 2px dashed;
6 | border-radius: 10px;
7 | cursor: pointer;
8 | }
9 |
10 | .upload-photo__img:hover {
11 | color: #9eafbf;
12 | }
13 |
14 | .upload-photo__img img {
15 | max-width: 100%;
16 | border-radius: 8px;
17 | }
18 |
--------------------------------------------------------------------------------
/components-vue/upload-photo/template.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
Upload Your Photo
4 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/index.php:
--------------------------------------------------------------------------------
1 | SetTitle('Bitrix Vue Component');
4 | ?>
5 |
6 |
16 |
17 |
18 |
19 |
20 |
21 | Text block
22 |
23 |
24 |
25 | Second text block
26 |
27 |
28 |
29 |
30 |
31 |
46 |
47 |
52 |
53 | require($_SERVER['DOCUMENT_ROOT'] . '/bitrix/footer.php'); ?>
54 |
--------------------------------------------------------------------------------
/local/php_interface/s4/include/composer.json:
--------------------------------------------------------------------------------
1 | {
2 | "require": {
3 | "denx-b/bitrix-vue-component": "^1.1"
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/local/php_interface/s4/include/composer.lock:
--------------------------------------------------------------------------------
1 | {
2 | "_readme": [
3 | "This file locks the dependencies of your project to a known state",
4 | "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
5 | "This file is @generated automatically"
6 | ],
7 | "content-hash": "552de7f7a9b245d8ae729bb4cab9a5f3",
8 | "packages": [
9 | {
10 | "name": "denx-b/bitrix-vue-component",
11 | "version": "1.1.0",
12 | "source": {
13 | "type": "git",
14 | "url": "https://github.com/denx-b/bitrix-vue-component.git",
15 | "reference": "e2b4aabbb29c9a027490fbc87ef16bd7622dc097"
16 | },
17 | "dist": {
18 | "type": "zip",
19 | "url": "https://api.github.com/repos/denx-b/bitrix-vue-component/zipball/e2b4aabbb29c9a027490fbc87ef16bd7622dc097",
20 | "reference": "e2b4aabbb29c9a027490fbc87ef16bd7622dc097",
21 | "shasum": ""
22 | },
23 | "require": {
24 | "ext-json": "*",
25 | "php": ">=7.0.0"
26 | },
27 | "type": "library",
28 | "autoload": {
29 | "psr-4": {
30 | "Dbogdanoff\\": "src/"
31 | }
32 | },
33 | "notification-url": "https://packagist.org/downloads/",
34 | "license": [
35 | "MIT"
36 | ],
37 | "description": "Connecting vue components in the bitrix",
38 | "support": {
39 | "issues": "https://github.com/denx-b/bitrix-vue-component/issues",
40 | "source": "https://github.com/denx-b/bitrix-vue-component/tree/1.1.0"
41 | },
42 | "time": "2022-03-19T17:22:30+00:00"
43 | }
44 | ],
45 | "packages-dev": [],
46 | "aliases": [],
47 | "minimum-stability": "stable",
48 | "stability-flags": [],
49 | "prefer-stable": false,
50 | "prefer-lowest": false,
51 | "platform": [],
52 | "platform-dev": [],
53 | "plugin-api-version": "2.2.0"
54 | }
55 |
--------------------------------------------------------------------------------
/local/php_interface/s4/init.php:
--------------------------------------------------------------------------------
1 | 'Bitrix Vue Component',
4 | 'DESCRIPTION' => 'Bitrix Vue Component',
5 | 'SORT' => 500,
6 | 'TYPE' => '',
7 | );
8 |
--------------------------------------------------------------------------------
/local/templates/bitrix-vue-demo/footer.php:
--------------------------------------------------------------------------------
1 | if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED !== true)
2 | die();
3 |
4 | ?>
5 |