Implementation of the image preview widget

Comments (0) sharing 4 October: topics: featured, Open Source applications: kpdecker

This post is the second series describing the use and implementation of the preview widget developed for the application of the section of the applications.Le image first post can be found here.

Today's posts covers general implementation widget as well as motion and animation implementation details.

Implementation of this widget is fairly straightforward from a perspective HTML, composed of a series of divs, with partners, JavaScript, and CSS perform most of the bulk of the work.

In this building, there are three main components:

The container, .preview-image, in which the elements of the image are cells image positioned.The, .preview-cell, which define all of the area that the image can remplir.En reason image scaling portions of these may be blank.The wrapper, .preview-cell-wrapper, which assists the positioning on the image in the cell.

Image cells and wrapper constructs are subject to a post later, but briefly their goal is to position the image such that it is centered in its respective area horizontally and vertically and expands to fill as much of the region while retaining its associated proportions.

The main interaction between this widget and the user is dragging, operation which allows the user to cycle through the images in the liste.Pour do this while maintaining the use of resources at any less, we have designed this widget such as cell .preview elements are absolutely positioned in the container and the container is the only element which is directly modified for the majority of the drag operation.Only when the container was moved quite far as a new image to be displayed us modify images and cells.

Widget is listening to the dragStart and move events to control user .to dragStart event entry, perform us proper initialization and inform the framework we want to follow the displacement event.preventDefault calling () event.

dragStart: function (event) {this.dragOff = 0; event.preventDefault ();};

With the State of the widget correctly configured by the dragStart event, we can now monitor the déplacement.étape by step event this code:

Determines the direction of the var circulation.distance = event.distance rightDrag = event.down.screenX < event.move.screenx;="" this.slide((rightdrag="" 1="" :="" -1)="" *="" distance.x);determines="" if="" an="" element="" swap="" is="" necessary.="" adjust="" the="" offset="" by="" the="" number="" of="" screens="" that="" we="" have="" swapped="" offset="" +="this.dragOff;" if="" (math.abs(offset)=""> this.dragBoundary) {/ / determine which direction we need to move, where appropriate, and to update / moveDir = our tracking variable to reflect this. this.canMove (offset); if (moveDir! == undefined) {var offSize = (offset > 0?-1: 1) * this.tileWidth; this.dragOff += offSize; offSize offset +=;}} container updates jour.This.container.style.setProperty ("left", shift + "px",""); offset swaps items if we are close to the border for the cell child .If (moveDir!)(== undefined) {/ / perform any swaps should occur at the this.move (moveDir) level DOM;}

In addition to the dragStart and drag events, we follow the dragEnd.Ici event return us control naturally, to the next element in the sequence or offset restoration of the container to zero.

dragEnd: function (event) {var moveDir; / / if we dragged if some, but not enough to cause a displacement, force a move after the fact (! this.dragOff && Math.abs (this.curOffset) > 25) {moveDir = this.canMove (this.curOffset);} this.animatedMove (moveDir);}, animatedMove: function (moveLeft) {var self = container = this.container; if (moveLeft! == undefined) {var offSize = (moveLeft? 1:-1) * this.tileWidth; this.curOffset += offSize; container.style.setProperty ("left", this.curOffset + "px",""); this.move (moveLeft);} this.dragOff = 0; / / rebounds back to the default position Mojo.Animation.animateStyle (container, "left", "linear", {from: parseInt (container.style.left), to: 0, duration: this.flicked? 0.2: 0.4, styleSetter: function (value) {self.slide (value);}, onComplete: function (el) {self.resetSlide ();}});},

When we moved enough we want to focus on a new item, we need to do a little more than what is done in drag operations:

Update our flow. status indicators these are used later in the process change the element const = HTML.COULE [{className: "first", left: 0, Centre: 1, right: 2}, {className: "second", left: 2, Centre: 0, right: 1}, {className: "third", left: 1, Centre: 2, right: 0},]; this.flowPos = (this.flowPos + (moveLeft?-1: 1)) % FLOW.length; if (this.flowPos)< 0)="" {="" this.flowpos="FLOW.length" -="" 1;="" }="" var="" el="this.container," curflow="FLOW[this.flowPos];Swap" the="" locations="" of="" the="" existing="" preview="" cells="" such="" that="" the="" cell="" being="" scrolled="" off="" screen="" is="" positioned="" when="" the="" cell="" being="" scrolled="" on="" screen="" is.="" for="" performance="" reasons="" this="" is="" done="" via="" a="" single="" classname="" modification="" on="" the="" container.="" use="" a="" single="" class="" operation="" to="" roll="" the="" images.="" note="" that="" we="" are="" hitting   ="" the="" classname="" directly="" to="" reduce="" the="" possibility="" of="" a="" reflow="" between="" operations   ="" el.classname="el.className.replace(/\b(?:first|second|third)\b/,">

That change, the images will replace positions because of this CSS:

.Preview - image .first > div .preview - first, .preview - image .second > div .preview-third, .preview - image .third > div .preview-second {left:-130px;} .preview - image .first > div .preview-second, .preview - image .second > div .preview - first, .preview - image .third > third div.preview {left: 70px;} .preview - image .first > div .preview-third, .preview - image .second > div .preview-second, .preview - image .third >.preview-first div {right:-130px;}

Note that these values are specific to the size of the images and widget entier.Les users who want to have different frame sizes or widget sizes will have to adjust these to meet their needs.

The following image in the direction of movement is disabled and a new is requested the parent widget: if (moveLeft) {/ / clear the right image if we wait time this.hasRight = false; this.resetContainer (this.rightEl.firstElementChild); this.dataModel.onRightFunction ();} else {/ / clear image on the left if we wait time this.hasLeft = false; this.resetContainer (this.leftEl.firstElementChild); this.dataModel.onLeftFunction ();}

There are a few details such as the loader image and layout proportions maintained that I hope to cover in the entire source widget suivant.La post is available here.

View the original article here