From f60ed1ef6f26ad80cc30b8e31660865a0205e0d1 Mon Sep 17 00:00:00 2001
From: Navan Chauhan <navanchauhan@gmail.com>
Date: Sun, 11 Oct 2020 16:23:07 +0530
Subject: Publish deploy 2020-10-11 16:23
---
assets/posts/obs/01-media-source.png | Bin 0 -> 144620 bytes
assets/posts/obs/01-panel.png | Bin 0 -> 120308 bytes
assets/posts/obs/01-pewdiepie.png | Bin 0 -> 3443183 bytes
assets/posts/obs/02-remote.png | Bin 0 -> 930081 bytes
assets/posts/obs/021-rotate.png | Bin 0 -> 725295 bytes
assets/posts/obs/021-source.png | Bin 0 -> 91620 bytes
assets/posts/obs/11.png | Bin 0 -> 3161115 bytes
assets/posts/obs/3-usb.png | Bin 0 -> 9395165 bytes
assets/posts/obs/5S.png | Bin 0 -> 2938273 bytes
assets/posts/obs/dics.css | 229 +++++++++++++
assets/posts/obs/dics.js | 638 +++++++++++++++++++++++++++++++++++
assets/posts/obs/mirrorless.png | Bin 0 -> 3103912 bytes
assets/posts/obs/normal.png | Bin 0 -> 3610888 bytes
assets/posts/obs/usb.png | Bin 0 -> 2560671 bytes
14 files changed, 867 insertions(+)
create mode 100644 assets/posts/obs/01-media-source.png
create mode 100644 assets/posts/obs/01-panel.png
create mode 100644 assets/posts/obs/01-pewdiepie.png
create mode 100644 assets/posts/obs/02-remote.png
create mode 100644 assets/posts/obs/021-rotate.png
create mode 100644 assets/posts/obs/021-source.png
create mode 100644 assets/posts/obs/11.png
create mode 100644 assets/posts/obs/3-usb.png
create mode 100644 assets/posts/obs/5S.png
create mode 100644 assets/posts/obs/dics.css
create mode 100644 assets/posts/obs/dics.js
create mode 100644 assets/posts/obs/mirrorless.png
create mode 100644 assets/posts/obs/normal.png
create mode 100644 assets/posts/obs/usb.png
(limited to 'assets')
diff --git a/assets/posts/obs/01-media-source.png b/assets/posts/obs/01-media-source.png
new file mode 100644
index 0000000..cb9c90b
Binary files /dev/null and b/assets/posts/obs/01-media-source.png differ
diff --git a/assets/posts/obs/01-panel.png b/assets/posts/obs/01-panel.png
new file mode 100644
index 0000000..ab5e9f3
Binary files /dev/null and b/assets/posts/obs/01-panel.png differ
diff --git a/assets/posts/obs/01-pewdiepie.png b/assets/posts/obs/01-pewdiepie.png
new file mode 100644
index 0000000..e6db0be
Binary files /dev/null and b/assets/posts/obs/01-pewdiepie.png differ
diff --git a/assets/posts/obs/02-remote.png b/assets/posts/obs/02-remote.png
new file mode 100644
index 0000000..0ccf7c7
Binary files /dev/null and b/assets/posts/obs/02-remote.png differ
diff --git a/assets/posts/obs/021-rotate.png b/assets/posts/obs/021-rotate.png
new file mode 100644
index 0000000..2d7366d
Binary files /dev/null and b/assets/posts/obs/021-rotate.png differ
diff --git a/assets/posts/obs/021-source.png b/assets/posts/obs/021-source.png
new file mode 100644
index 0000000..b848ac0
Binary files /dev/null and b/assets/posts/obs/021-source.png differ
diff --git a/assets/posts/obs/11.png b/assets/posts/obs/11.png
new file mode 100644
index 0000000..61dcf58
Binary files /dev/null and b/assets/posts/obs/11.png differ
diff --git a/assets/posts/obs/3-usb.png b/assets/posts/obs/3-usb.png
new file mode 100644
index 0000000..474c5c2
Binary files /dev/null and b/assets/posts/obs/3-usb.png differ
diff --git a/assets/posts/obs/5S.png b/assets/posts/obs/5S.png
new file mode 100644
index 0000000..de4f5af
Binary files /dev/null and b/assets/posts/obs/5S.png differ
diff --git a/assets/posts/obs/dics.css b/assets/posts/obs/dics.css
new file mode 100644
index 0000000..81ab949
--- /dev/null
+++ b/assets/posts/obs/dics.css
@@ -0,0 +1,229 @@
+.b-dics {
+ width : 100%;
+ max-width : 100%;
+ position : relative;
+ overflow : hidden;
+ display : -webkit-box;
+ display : -ms-flexbox;
+ display : flex;
+ opacity : 0;
+}
+
+.b-dics__section {
+ height : 100%;
+}
+
+.b-dics__slider:hover :before {
+ color : #FFFFFF;
+ border-color : #FFFFFF;
+}
+
+.b-dics__text {
+ position : absolute;
+ top : 0;
+ left : 50%;
+ padding : 5px 25px;
+ -webkit-transform : translateX(-50%);
+ -ms-transform : translateX(-50%);
+ transform : translateX(-50%);
+ background : #FFFFFF;
+ z-index : 11;
+ font-family : Arial, serif;
+ color : #3d3d3d;
+ -webkit-user-select : none;
+ -moz-user-select : none;
+ -ms-user-select : none;
+ user-select : none;
+ font-size : 13px;
+ text-align : center;
+ margin : 16px 0;
+ white-space : nowrap;
+ opacity : .7;
+ pointer-events : none;
+}
+
+.b-dics__image-container {
+ width : 100%;
+ height : 100%;
+ display : block;
+ overflow : hidden;
+ position : relative;
+}
+
+.b-dics__image {
+ height : 100%;
+ position : absolute;
+ left : 0;
+ top : 50%;
+ -webkit-transform : translateY(-50%);
+ -ms-transform : translateY(-50%);
+ transform : translateY(-50%);
+ -webkit-user-select : none;
+ -moz-user-select : none;
+ -ms-user-select : none;
+ user-select : none;
+ max-width : none;
+}
+
+.b-dics__slider {
+ color : #FFFFFF;
+ position : absolute;
+ left : 100%;
+ top : 0;
+ cursor : pointer;
+ -webkit-transform : translateX(-50%);
+ -ms-transform : translateX(-50%);
+ transform : translateX(-50%);
+ height : 100%;
+ width : 3px;
+ padding : 0 30px;
+ z-index : 1;
+ -ms-touch-action : none;
+ touch-action : none;
+ line-height : normal;
+ opacity : .7;
+}
+
+.b-dics__slider:before {
+ content : '';
+ -webkit-mask : url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDUxMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+LnN0MHtmaWxsOiNGRkZGRkY7ZW5hYmxlLWJhY2tncm91bmQ6bmV3ICAgIDt9PC9zdHlsZT48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTgwLjIsMTA4LjFsNjEuNy02Mi4yYzMuOC0zLjgsOC44LTUuOSwxNC4xLTUuOWM1LjMsMCwxMC40LDIuMSwxNC4xLDUuOWw2MS43LDYyLjJjMy45LDMuOSw5LjEsNS45LDE0LjIsNS45czEwLjItMS45LDE0LjEtNS44YzcuOC03LjgsNy45LTIwLjQsMC4xLTI4LjNsLTYxLjctNjIuMkMyODcuMiw2LjMsMjcyLjEsMCwyNTYsMHMtMzEuMiw2LjMtNDIuNSwxNy44TDE1MS44LDgwYy03LjgsNy44LTcuNywyMC41LDAuMSwyOC4zQzE1OS44LDExNiwxNzIuNCwxMTUuOSwxODAuMiwxMDguMXoiLz48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMzMxLjgsNDAzLjlsLTYxLjcsNjIuMmMtMy44LDMuOC04LjgsNS45LTE0LjEsNS45Yy01LjMsMC0xMC40LTIuMS0xNC4xLTUuOWwtNjEuNy02Mi4yYy03LjgtNy44LTIwLjQtNy45LTI4LjMtMC4xYy03LjgsNy44LTcuOSwyMC40LTAuMSwyOC4zbDYxLjcsNjIuMmMxMS40LDExLjQsMjYuNSwxNy44LDQyLjUsMTcuOHMzMS4yLTYuMyw0Mi41LTE3LjhsNjEuNy02Mi4yYzcuOC03LjgsNy43LTIwLjUtMC4xLTI4LjNDMzUyLjIsMzk2LDMzOS42LDM5Ni4xLDMzMS44LDQwMy45eiIvPjwvc3ZnPg==) no-repeat 100% 100%;
+ mask : url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDUxMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+LnN0MHtmaWxsOiNGRkZGRkY7ZW5hYmxlLWJhY2tncm91bmQ6bmV3ICAgIDt9PC9zdHlsZT48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTgwLjIsMTA4LjFsNjEuNy02Mi4yYzMuOC0zLjgsOC44LTUuOSwxNC4xLTUuOWM1LjMsMCwxMC40LDIuMSwxNC4xLDUuOWw2MS43LDYyLjJjMy45LDMuOSw5LjEsNS45LDE0LjIsNS45czEwLjItMS45LDE0LjEtNS44YzcuOC03LjgsNy45LTIwLjQsMC4xLTI4LjNsLTYxLjctNjIuMkMyODcuMiw2LjMsMjcyLjEsMCwyNTYsMHMtMzEuMiw2LjMtNDIuNSwxNy44TDE1MS44LDgwYy03LjgsNy44LTcuNywyMC41LDAuMSwyOC4zQzE1OS44LDExNiwxNzIuNCwxMTUuOSwxODAuMiwxMDguMXoiLz48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMzMxLjgsNDAzLjlsLTYxLjcsNjIuMmMtMy44LDMuOC04LjgsNS45LTE0LjEsNS45Yy01LjMsMC0xMC40LTIuMS0xNC4xLTUuOWwtNjEuNy02Mi4yYy03LjgtNy44LTIwLjQtNy45LTI4LjMtMC4xYy03LjgsNy44LTcuOSwyMC40LTAuMSwyOC4zbDYxLjcsNjIuMmMxMS40LDExLjQsMjYuNSwxNy44LDQyLjUsMTcuOHMzMS4yLTYuMyw0Mi41LTE3LjhsNjEuNy02Mi4yYzcuOC03LjgsNy43LTIwLjUtMC4xLTI4LjNDMzUyLjIsMzk2LDMzOS42LDM5Ni4xLDMzMS44LDQwMy45eiIvPjwvc3ZnPg==) no-repeat 100% 100%;
+ mask-size : cover;
+ -webkit-mask-size : cover;
+ width : 26px;
+ height : 26px;
+ padding : 0;
+ background-color : currentColor;
+ position : absolute;
+ top : 50%;
+ left : 50%;
+ -webkit-transform : translate(-50%, -50%) rotate(90deg);
+ -ms-transform : translate(-50%, -50%) rotate(90deg);
+ transform : translate(-50%, -50%) rotate(90deg);
+ z-index : 2;
+ font-size : 0;
+}
+
+.b-dics__slider:after {
+ content : '';
+ position : absolute;
+ left : 50%;
+ top : 0;
+ -webkit-transform : translateX(-50%);
+ -ms-transform : translateX(-50%);
+ transform : translateX(-50%);
+ height : 100%;
+ width : 3px;
+ background-color : currentColor;
+ z-index : 1;
+}
+
+.b-dics__image-container:hover .b-dics__text {
+ opacity : 1;
+}
+
+.b-dics__slider:hover {
+ opacity : 1;
+}
+
+/* Text Position
+ ****************************************************************************/
+
+.b-dics--tp-center .b-dics__text {
+ top : 50%;
+ -webkit-transform : translate(-50%, -50%);
+ -ms-transform : translate(-50%, -50%);
+ transform : translate(-50%, -50%);
+ margin : 0;
+}
+
+.b-dics--tp-bottom .b-dics__text {
+ top : initial;
+ bottom : 0;
+ -webkit-transform : translate(-50%, -50%);
+ -ms-transform : translate(-50%, -50%);
+ transform : translate(-50%, -50%);
+}
+
+.b-dics--tp-left .b-dics__text {
+ left : 0;
+ top : 50%;
+ -webkit-transform : translateY(-50%);
+ -ms-transform : translateY(-50%);
+ transform : translateY(-50%);
+ margin : 0 16px;
+}
+
+.b-dics--tp-right .b-dics__text {
+ left : initial;
+ right : 0;
+ top : 50%;
+ -webkit-transform : translateY(-50%);
+ -ms-transform : translateY(-50%);
+ transform : translateY(-50%);
+ margin : 0 16px;
+}
+
+/* Hide texts
+ ****************************************************************************/
+
+.b-dics--hide-texts .b-dics__text {
+ background : #ffffff;
+ opacity : 0;
+}
+
+.b-dics--hide-texts .b-dics__image-container:hover .b-dics__text {
+ opacity : 1;
+}
+
+/* Vertical Sliders
+ ****************************************************************************/
+
+.b-dics--vertical {
+ -webkit-box-orient : vertical;
+ -webkit-box-direction : normal;
+ -ms-flex-direction : column;
+ flex-direction : column;
+}
+
+.b-dics--vertical .b-dics__section {
+ height : auto;
+ width : 100%;
+}
+
+.b-dics--vertical .b-dics__image {
+ left : 50%;
+ -webkit-transform : translateX(-50%);
+ -ms-transform : translateX(-50%);
+ transform : translateX(-50%);
+ top : 0;
+ width : 100%;
+ height : auto;
+}
+
+.b-dics--vertical .b-dics__slider {
+ top : 100%;
+ -webkit-transform : translateY(-50%);
+ -ms-transform : translateY(-50%);
+ transform : translateY(-50%);
+ width : 100%;
+ height : 3px;
+ padding : 30px 0;
+ left : 0;
+}
+
+.b-dics--vertical .b-dics__slider:after {
+ top : 50%;
+ left : 0;
+ -webkit-transform : translateY(-50%);
+ -ms-transform : translateY(-50%);
+ transform : translateY(-50%);
+ width : 100%;
+ height : 3px;
+}
+
+.b-dics--vertical .b-dics__slider:before {
+ -webkit-transform : translate(-50%, -50%);
+ -ms-transform : translate(-50%, -50%);
+ transform : translate(-50%, -50%);
+}
\ No newline at end of file
diff --git a/assets/posts/obs/dics.js b/assets/posts/obs/dics.js
new file mode 100644
index 0000000..b739e36
--- /dev/null
+++ b/assets/posts/obs/dics.js
@@ -0,0 +1,638 @@
+"use strict";
+
+/*
+ * Dics: Definitive image comparison slider. A multiple image vanilla comparison slider.
+ *
+ * By Abel Cabeza Román, a Codictados developer
+ * Src: https://github.com/abelcabezaroman/definitive-image-comparison-slider
+ * Example: http://codictados.com/portfolio/definitive-image-comparison-slider-demo/
+ */
+
+/**
+ *
+ */
+
+/**
+ *
+ * @type {{container: null, filters: null, hideTexts: null, textPosition: string, linesOrientation: string, rotate: number, arrayBackgroundColorText: null, arrayColorText: null, linesColor: null}}
+ */
+var defaultOptions = {
+ container: null,
+ // **REQUIRED**: HTML container | `document.querySelector('.b-dics')` |
+ filters: null,
+ // Array of CSS string filters |`['blur(3px)', 'grayscale(1)', 'sepia(1)', 'saturate(3)']` |
+ hideTexts: null,
+ // Show text only when you hover the image container |`true`,`false`|
+ textPosition: 'top',
+ // Set the prefer text position |`'center'`,`'top'`, `'right'`, `'bottom'`, `'left'` |
+ linesOrientation: 'horizontal',
+ // Change the orientation of lines |`'horizontal'`,`'vertical'` |
+ rotate: 0,
+ // Rotate the image container (not too useful but it's a beatiful effect. String of rotate CSS rule) |`'45deg'`|
+ arrayBackgroundColorText: null,
+ // Change the bacground-color of sections texts with an array |`['#000000', '#FFFFFF']`|
+ arrayColorText: null,
+ // Change the color of texts with an array |`['#FFFFFF', '#000000']`|
+ linesColor: null // Change the lines and arrows color |`'rgb(0,0,0)'`|
+
+};
+/**
+ *
+ * @param options
+ * @constructor
+ */
+
+var Dics = function Dics(options) {
+ this.options = utils.extend({}, [defaultOptions, options], {
+ clearEmpty: true
+ });
+ this.container = this.options.container;
+
+ if (this.container == null) {
+ console.error('Container element not found!');
+ } else {
+ this._setOrientation(this.options.linesOrientation, this.container);
+
+ this.images = this._getImages();
+ this.sliders = [];
+ this._activeSlider = null;
+
+ this._load(this.images[0]);
+ }
+};
+/**
+ *
+ * @private
+ */
+
+
+Dics.prototype._load = function (firstImage) {
+ var _this = this;
+
+ var maxCounter = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 100000;
+
+ if (firstImage.naturalWidth) {
+ this._buidAfterFirstImageLoad(firstImage);
+ } else {
+ if (maxCounter > 0) {
+ maxCounter--;
+ setTimeout(function () {
+ _this._load(firstImage, maxCounter);
+ }, 100);
+ } else {
+ console.error('error loading images');
+ }
+ }
+};
+/**
+ *
+ * @private
+ */
+
+
+Dics.prototype._buidAfterFirstImageLoad = function (firstImage) {
+ this._setContainerWidth(firstImage);
+
+ this._build();
+
+ this._setEvents();
+};
+/**
+ *
+ * @private
+ */
+
+
+Dics.prototype._setContainerWidth = function (firstImage) {
+ this.options.container.style.height = "".concat(this._calcContainerHeight(firstImage), "px");
+};
+/**
+ *
+ * @private
+ */
+
+
+Dics.prototype._setOpacityContainerForLoading = function (opacity) {
+ this.options.container.style.opacity = opacity;
+};
+/**
+ * Build HTML
+ * @private
+ */
+
+
+Dics.prototype._build = function () {
+ var dics = this;
+
+ dics._applyGlobalClass(dics.options);
+
+ var imagesLength = dics.images.length;
+ var initialImagesContainerWidth = dics.container.getBoundingClientRect()[dics.config.sizeField] / imagesLength;
+
+ for (var i = 0; i < imagesLength; i++) {
+ var image = dics.images[i];
+
+ var section = dics._createElement('div', 'b-dics__section');
+
+ var imageContainer = dics._createElement('div', 'b-dics__image-container');
+
+ var slider = dics._createSlider(i, initialImagesContainerWidth);
+
+ dics._createAltText(image, i, imageContainer);
+
+ dics._applyFilter(image, i, dics.options.filters);
+
+ dics._rotate(image, imageContainer);
+
+ section.setAttribute('data-function', 'b-dics__section');
+ section.style.flex = "0 0 ".concat(initialImagesContainerWidth, "px");
+ image.classList.add('b-dics__image');
+ section.appendChild(imageContainer);
+ imageContainer.appendChild(image);
+
+ if (i < imagesLength - 1) {
+ section.appendChild(slider);
+ }
+
+ dics.container.appendChild(section);
+ image.style[this.config.positionField] = "".concat(i * -initialImagesContainerWidth, "px");
+ }
+
+ this.sections = this._getSections();
+
+ this._setOpacityContainerForLoading(1);
+};
+/**
+ *
+ * @returns {NodeListOf<SVGElementTagNameMap[string]> | NodeListOf<HTMLElementTagNameMap[string]> | NodeListOf<Element>}
+ * @private
+ */
+
+
+Dics.prototype._getImages = function () {
+ return this.container.querySelectorAll('img');
+};
+/**
+ *
+ * @returns {NodeListOf<SVGElementTagNameMap[string]> | NodeListOf<HTMLElementTagNameMap[string]> | NodeListOf<Element>}
+ * @private
+ */
+
+
+Dics.prototype._getSections = function () {
+ return this.container.querySelectorAll('[data-function="b-dics__section"]');
+};
+/**
+ *
+ * @param elementClass
+ * @param className
+ * @returns {HTMLElement | HTMLSelectElement | HTMLLegendElement | HTMLTableCaptionElement | HTMLTextAreaElement | HTMLModElement | HTMLHRElement | HTMLOutputElement | HTMLPreElement | HTMLEmbedElement | HTMLCanvasElement | HTMLFrameSetElement | HTMLMarqueeElement | HTMLScriptElement | HTMLInputElement | HTMLUnknownElement | HTMLMetaElement | HTMLStyleElement | HTMLObjectElement | HTMLTemplateElement | HTMLBRElement | HTMLAudioElement | HTMLIFrameElement | HTMLMapElement | HTMLTableElement | HTMLAnchorElement | HTMLMenuElement | HTMLPictureElement | HTMLParagraphElement | HTMLTableDataCellElement | HTMLTableSectionElement | HTMLQuoteElement | HTMLTableHeaderCellElement | HTMLProgressElement | HTMLLIElement | HTMLTableRowElement | HTMLFontElement | HTMLSpanElement | HTMLTableColElement | HTMLOptGroupElement | HTMLDataElement | HTMLDListElement | HTMLFieldSetElement | HTMLSourceElement | HTMLBodyElement | HTMLDirectoryElement | HTMLDivElement | HTMLUListElement | HTMLHtmlElement | HTMLAreaElement | HTMLMeterElement | HTMLAppletElement | HTMLFrameElement | HTMLOptionElement | HTMLImageElement | HTMLLinkElement | HTMLHeadingElement | HTMLSlotElement | HTMLVideoElement | HTMLBaseFontElement | HTMLTitleElement | HTMLButtonElement | HTMLHeadElement | HTMLParamElement | HTMLTrackElement | HTMLOListElement | HTMLDataListElement | HTMLLabelElement | HTMLFormElement | HTMLTimeElement | HTMLBaseElement}
+ * @private
+ */
+
+
+Dics.prototype._createElement = function (elementClass, className) {
+ var newElement = document.createElement(elementClass);
+ newElement.classList.add(className);
+ return newElement;
+};
+/**
+ * Set need DOM events
+ * @private
+ */
+
+
+Dics.prototype._setEvents = function () {
+ var dics = this;
+
+ dics._disableImageDrag();
+
+ dics._isGoingRight = null;
+ var oldx = 0;
+
+ var listener = function listener(event) {
+ var xPageCoord = event.pageX ? event.pageX : event.touches[0].pageX;
+
+ if (xPageCoord < oldx) {
+ dics._isGoingRight = false;
+ } else if (xPageCoord > oldx) {
+ dics._isGoingRight = true;
+ }
+
+ oldx = xPageCoord;
+
+ var position = dics._calcPosition(event);
+
+ var beforeSectionsWidth = dics._beforeSectionsWidth(dics.sections, dics.images, dics._activeSlider);
+
+ var calcMovePixels = position - beforeSectionsWidth;
+ dics.sliders[dics._activeSlider].style[dics.config.positionField] = "".concat(position, "px");
+
+ dics._pushSections(calcMovePixels, position);
+ };
+
+ dics.container.addEventListener('click', listener);
+
+ var _loop = function _loop(i) {
+ var slider = dics.sliders[i];
+ utils.setMultiEvents(slider, ['mousedown', 'touchstart'], function (event) {
+ dics._activeSlider = i;
+ dics._clickPosition = dics._calcPosition(event);
+ slider.classList.add('b-dics__slider--active');
+ utils.setMultiEvents(dics.container, ['mousemove', 'touchmove'], listener);
+ });
+ };
+
+ for (var i = 0; i < dics.sliders.length; i++) {
+ _loop(i);
+ }
+
+ var listener2 = function listener2() {
+ var activeElements = dics.container.querySelectorAll('.b-dics__slider--active');
+ var _iteratorNormalCompletion = true;
+ var _didIteratorError = false;
+ var _iteratorError = undefined;
+
+ try {
+ for (var _iterator = activeElements[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+ var activeElement = _step.value;
+ activeElement.classList.remove('b-dics__slider--active');
+ utils.removeMultiEvents(dics.container, ['mousemove', 'touchmove'], listener);
+ }
+ } catch (err) {
+ _didIteratorError = true;
+ _iteratorError = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion && _iterator.return != null) {
+ _iterator.return();
+ }
+ } finally {
+ if (_didIteratorError) {
+ throw _iteratorError;
+ }
+ }
+ }
+ };
+
+ utils.setMultiEvents(document.body, ['mouseup', 'touchend'], listener2);
+};
+/**
+ *
+ * @param sections
+ * @param images
+ * @param activeSlider
+ * @returns {number}
+ * @private
+ */
+
+
+Dics.prototype._beforeSectionsWidth = function (sections, images, activeSlider) {
+ var width = 0;
+
+ for (var i = 0; i < sections.length; i++) {
+ var section = sections[i];
+
+ if (i !== activeSlider) {
+ width += section.getBoundingClientRect()[this.config.sizeField];
+ } else {
+ return width;
+ }
+ }
+};
+/**
+ *
+ * @returns {number}
+ * @private
+ */
+
+
+Dics.prototype._calcContainerHeight = function (firstImage) {
+ var imgHeight = firstImage.naturalHeight;
+ var imgWidth = firstImage.naturalWidth;
+ var containerWidth = this.options.container.getBoundingClientRect().width;
+ return containerWidth / imgWidth * imgHeight;
+};
+/**
+ *
+ * @param sections
+ * @param images
+ * @private
+ */
+
+
+Dics.prototype._setLeftToImages = function (sections, images) {
+ var size = 0;
+
+ for (var i = 0; i < images.length; i++) {
+ var image = images[i];
+ image.style[this.config.positionField] = "-".concat(size, "px");
+ size += sections[i].getBoundingClientRect()[this.config.sizeField];
+ this.sliders[i].style[this.config.positionField] = "".concat(size, "px");
+ }
+};
+/**
+ *
+ * @private
+ */
+
+
+Dics.prototype._disableImageDrag = function () {
+ for (var i = 0; i < this.images.length; i++) {
+ this.sliders[i].addEventListener('dragstart', function (e) {
+ e.preventDefault();
+ });
+ this.images[i].addEventListener('dragstart', function (e) {
+ e.preventDefault();
+ });
+ }
+};
+/**
+ *
+ * @param image
+ * @param index
+ * @param filters
+ * @private
+ */
+
+
+Dics.prototype._applyFilter = function (image, index, filters) {
+ if (filters) {
+ image.style.filter = filters[index];
+ }
+};
+/**
+ *
+ * @param options
+ * @private
+ */
+
+
+Dics.prototype._applyGlobalClass = function (options) {
+ var container = options.container;
+
+ if (options.hideTexts) {
+ container.classList.add('b-dics--hide-texts');
+ }
+
+ if (options.linesOrientation === 'vertical') {
+ container.classList.add('b-dics--vertical');
+ }
+
+ if (options.textPosition === 'center') {
+ container.classList.add('b-dics--tp-center');
+ } else if (options.textPosition === 'bottom') {
+ container.classList.add('b-dics--tp-bottom');
+ } else if (options.textPosition === 'left') {
+ container.classList.add('b-dics--tp-left');
+ } else if (options.textPosition === 'right') {
+ container.classList.add('b-dics--tp-right');
+ }
+};
+
+Dics.prototype._createSlider = function (i, initialImagesContainerWidth) {
+ var slider = this._createElement('div', 'b-dics__slider');
+
+ if (this.options.linesColor) {
+ slider.style.color = this.options.linesColor;
+ }
+
+ slider.style[this.config.positionField] = "".concat(initialImagesContainerWidth * (i + 1), "px");
+ this.sliders.push(slider);
+ return slider;
+};
+/**
+ *
+ * @param image
+ * @param i
+ * @param imageContainer
+ * @private
+ */
+
+
+Dics.prototype._createAltText = function (image, i, imageContainer) {
+ var textContent = image.getAttribute('alt');
+
+ if (textContent) {
+ var text = this._createElement('p', 'b-dics__text');
+
+ if (this.options.arrayBackgroundColorText) {
+ text.style.backgroundColor = this.options.arrayBackgroundColorText[i];
+ }
+
+ if (this.options.arrayColorText) {
+ text.style.color = this.options.arrayColorText[i];
+ }
+
+ text.appendChild(document.createTextNode(textContent));
+ imageContainer.appendChild(text);
+ }
+};
+/**
+ *
+ * @param image
+ * @param imageContainer
+ * @private
+ */
+
+
+Dics.prototype._rotate = function (image, imageContainer) {
+ image.style.rotate = "-".concat(this.options.rotate);
+ imageContainer.style.rotate = this.options.rotate;
+};
+/**
+ *
+ * @private
+ */
+
+
+Dics.prototype._removeActiveElements = function () {
+ var activeElements = Dics.container.querySelectorAll('.b-dics__slider--active');
+ var _iteratorNormalCompletion2 = true;
+ var _didIteratorError2 = false;
+ var _iteratorError2 = undefined;
+
+ try {
+ for (var _iterator2 = activeElements[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+ var activeElement = _step2.value;
+ activeElement.classList.remove('b-dics__slider--active');
+ utils.removeMultiEvents(Dics.container, ['mousemove', 'touchmove'], Dics.prototype._removeActiveElements);
+ }
+ } catch (err) {
+ _didIteratorError2 = true;
+ _iteratorError2 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
+ _iterator2.return();
+ }
+ } finally {
+ if (_didIteratorError2) {
+ throw _iteratorError2;
+ }
+ }
+ }
+};
+/**
+ *
+ * @param linesOrientation
+ * @private
+ */
+
+
+Dics.prototype._setOrientation = function (linesOrientation) {
+ this.config = {};
+
+ if (linesOrientation === 'vertical') {
+ this.config.offsetSizeField = 'offsetHeight';
+ this.config.offsetPositionField = 'offsetTop';
+ this.config.sizeField = 'height';
+ this.config.positionField = 'top';
+ this.config.clientField = 'clientY';
+ this.config.pageField = 'pageY';
+ } else {
+ this.config.offsetSizeField = 'offsetWidth';
+ this.config.offsetPositionField = 'offsetLeft';
+ this.config.sizeField = 'width';
+ this.config.positionField = 'left';
+ this.config.clientField = 'clientX';
+ this.config.pageField = 'pageX';
+ }
+};
+/**
+ *
+ * @param event
+ * @returns {number}
+ * @private
+ */
+
+
+Dics.prototype._calcPosition = function (event) {
+ var containerCoords = this.container.getBoundingClientRect();
+ var pixel = !isNaN(event[this.config.clientField]) ? event[this.config.clientField] : event.touches[0][this.config.clientField];
+ return containerCoords[this.config.positionField] < pixel ? pixel - containerCoords[this.config.positionField] : 0;
+};
+/**
+ *
+ * @private
+ */
+
+
+Dics.prototype._pushSections = function (calcMovePixels, position) {
+ // if (this._rePosUnderActualSections(position)) {
+ this._setFlex(position, this._isGoingRight);
+
+ var section = this.sections[this._activeSlider];
+ var postActualSection = this.sections[this._activeSlider + 1];
+
+ var sectionWidth = postActualSection.getBoundingClientRect()[this.config.sizeField] - (calcMovePixels - this.sections[this._activeSlider].getBoundingClientRect()[this.config.sizeField]);
+
+ section.style.flex = this._isGoingRight === true ? "2 0 ".concat(calcMovePixels, "px") : "1 1 ".concat(calcMovePixels, "px");
+ postActualSection.style.flex = this._isGoingRight === true ? " ".concat(sectionWidth, "px") : "2 0 ".concat(sectionWidth, "px");
+
+ this._setLeftToImages(this.sections, this.images); // }
+
+};
+/**
+ *
+ * @private
+ */
+
+
+Dics.prototype._setFlex = function (position, isGoingRight) {
+ var beforeSumSectionsSize = 0;
+
+ for (var i = 0; i < this.sections.length; i++) {
+ var section = this.sections[i];
+ var sectionSize = section.getBoundingClientRect()[this.config.sizeField];
+ beforeSumSectionsSize += sectionSize;
+
+ if (isGoingRight && position > beforeSumSectionsSize - sectionSize && i > this._activeSlider || !isGoingRight && position < beforeSumSectionsSize && i < this._activeSlider) {
+ section.style.flex = "1 100 ".concat(sectionSize, "px");
+ } else {
+ section.style.flex = "0 0 ".concat(sectionSize, "px");
+ }
+ }
+};
+/**
+ *
+ * @type {{extend: (function(*=, *, *): *), setMultiEvents: setMultiEvents, removeMultiEvents: removeMultiEvents, getConstructor: (function(*=): string)}}
+ */
+
+
+var utils = {
+ /**
+ * Native extend object
+ * @param target
+ * @param objects
+ * @param options
+ * @returns {*}
+ */
+ extend: function extend(target, objects, options) {
+ for (var object in objects) {
+ if (objects.hasOwnProperty(object)) {
+ recursiveMerge(target, objects[object]);
+ }
+ }
+
+ function recursiveMerge(target, object) {
+ for (var property in object) {
+ if (object.hasOwnProperty(property)) {
+ var current = object[property];
+
+ if (utils.getConstructor(current) === 'Object') {
+ if (!target[property]) {
+ target[property] = {};
+ }
+
+ recursiveMerge(target[property], current);
+ } else {
+ // clearEmpty
+ if (options.clearEmpty) {
+ if (current == null) {
+ continue;
+ }
+ }
+
+ target[property] = current;
+ }
+ }
+ }
+ }
+
+ return target;
+ },
+
+ /**
+ * Set Multi addEventListener
+ * @param element
+ * @param events
+ * @param func
+ */
+ setMultiEvents: function setMultiEvents(element, events, func) {
+ for (var i = 0; i < events.length; i++) {
+ element.addEventListener(events[i], func);
+ }
+ },
+
+ /**
+ *
+ * @param element
+ * @param events
+ * @param func
+ */
+ removeMultiEvents: function removeMultiEvents(element, events, func) {
+ for (var i = 0; i < events.length; i++) {
+ element.removeEventListener(events[i], func, false);
+ }
+ },
+
+ /**
+ * Get object constructor
+ * @param object
+ * @returns {string}
+ */
+ getConstructor: function getConstructor(object) {
+ return Object.prototype.toString.call(object).slice(8, -1);
+ }
+};
\ No newline at end of file
diff --git a/assets/posts/obs/mirrorless.png b/assets/posts/obs/mirrorless.png
new file mode 100644
index 0000000..67f6b49
Binary files /dev/null and b/assets/posts/obs/mirrorless.png differ
diff --git a/assets/posts/obs/normal.png b/assets/posts/obs/normal.png
new file mode 100644
index 0000000..a85aaf3
Binary files /dev/null and b/assets/posts/obs/normal.png differ
diff --git a/assets/posts/obs/usb.png b/assets/posts/obs/usb.png
new file mode 100644
index 0000000..c08a805
Binary files /dev/null and b/assets/posts/obs/usb.png differ
--
cgit v1.2.3