From f60ed1ef6f26ad80cc30b8e31660865a0205e0d1 Mon Sep 17 00:00:00 2001 From: Navan Chauhan 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 | NodeListOf | NodeListOf} + * @private + */ + + +Dics.prototype._getImages = function () { + return this.container.querySelectorAll('img'); +}; +/** + * + * @returns {NodeListOf | NodeListOf | NodeListOf} + * @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