Download E-books Developing Web Components: UI from jQuery to Polymer PDF

Mousedown is used to bind the $. mousemove handler and get the preliminary mouse coordinates. eighty one • $. mouseup is used to unbind the $mousemove handler to avoid over the top $mousemove occasions from being caused. top Practices as well as realizing the mandatory mouse occasions for making a component resizable, it's both vital to understand tips on how to optimize using those occasions. listed here are a number of top practices: • Bind $. mousemove on $. mousedown to avoid pointless mousemove occasions from being caused. • Unbind $. mousemove on $. mouseup to avoid pointless mousemove occasions from being prompted. • Bind the $. mouseup occasion handler to the . The API documentation recom‐ mends this simply because every now and then, “the mouseup occasion could be despatched to another HTML point than the mousemove occasion used to be. ” Resizing a component a similar simple mouse circulation and positioning top practices that follow to tug‐ ging a component additionally observe to resizing a component. although, extra homes will be set counting on the path of the resizing. There are 8 diversified attainable instructions while resizing a component: • North or most sensible center • Northeast or best correct • East or heart correct • Southeast or backside correct • South or backside center • Southwest or backside left • West or heart left • Northwest or most sensible left in terms of correct (east) or backside (south) resizing the element’s width or peak estate is adjusted, respectively. relating to left (west) or most sensible (north) resizing the element’s left or best estate is adjusted, as well as the width or top prop‐ erty. eighty two | bankruptcy eight: Resizing components The examples from this element ahead will use position-based descriptors (top, left, backside, and correct) rather than direction-based descriptors (north, east, south, and west) as position-based descrip‐ tors relate on to CSS positioning, which makes issues more uncomplicated for me to imagine. additionally, I’m an engineer, now not a navigator! The direction-based descriptors have been indexed simply because a few libraries, akin to jQuery UI, use them. this is often most likely simply because they correspond with the cursor houses. creating a Resizable API As within the prior chapters, step one is to stub out an API: // Eh-neeek-chock var ApacheChief = (function (global, $) { 'use strict'; // default resize deal with CSS var handlesCss = { width: '10px', top: '10px', cursor: 'se-resize' }; // strategies defaults var defaults = { handles: ['BR'], handlesCss: { BR: handlesCss } }; // merge default CSS and developer-defined CSS // this can be precious simply because $. expand is shallow functionality mergeResizeHandleCss(defaultCss, instanceCss) { } // create resizable example functionality ApacheChief(el, innovations) { this. el = el; this. $el = $(el); // expand strategies with developer-defined thoughts this. ideas = $. extend({}, defaults, options); // expand isn't really deep, so make sure that resize deal with CSS // is merged effectively mergeResizeHandleCss(this. thoughts, suggestions || {}); // create resize handles creating a Resizable API | eighty three this. createResizeHandles(); // bind occasion handlers this.