How to create a "mobile terminal and students' calendar

Before writing an article Calendar - "mobile terminal born" custom calendar , children's shoes have been a gesture of this plug-in processing, there are some problems, so write articles, growth history is that it's -

Before reading this article, make sure you have seen little effect calendar of Oh ~

• Click to view github, view the calendar source

• You can also search on NPM MOB-Calendar to find it.

First, identify needs

Calendar want to be a main reason, of course, because frequently encountered in the development process. And the demand for Calendar is wonderful to not work, plug-ins can not meet the market demand for our products. So, I had to build their own hands.

This passage, as if made on a plug - cascading selectors , they also said
everyone when nothing happened (⁎⁍̴̛ᴗ⁍̴̛⁎)

The primary problem is still processing requirements:

The first problem: the emergence of a scene, "which features a calendar? "

1. Users are not sure time point or time range you want to select, you need some basic time unit of reference, such as " Monday ", " next weekend ."

2. You need to view a certain time interval, after then selectively chosen time point or time range, such as " avoid as much as possible weekend of 20 days leave to skip work plan ."

3. Users need to see a time interval behavior records, such as " View punch in the last few weeks ."

When the above problems, the time advantage of positioning the calendar on the show.

The second question: "What wonderful work calendar will demand? "

1. There calendar click event, click the event is to jump event or highlight event unpredictable.

2. There calendar selection operation, the selected result is a point in time or time range unpredictable.

3. There are many forms to show the calendar, it is a direct flow of the document display or play the layer display unpredictable.

In response to these uncertainties, the next will take you step by step to resolve.

Second, the design parameters of the constructor

Determine the needs of the calendar, we look at the design parameters to the constructor of it ~

The first three questions: What are the common form of show "calendar have? "

From now common app available in the market point of view, we will find a common calendar to show the form in two ways:

1. Ordinary document flow form

2. Layer in the form of shells

Setting the parameters, the performance is set isMask , to false: common form, true: playing the form of a layer.



The fourth question: "how flexible and efficient parameters to be set? "

1. allow developers to more easily locate date

①: In determining the time when the use of a length of 3 array, each corresponding to an array of [annual] [month] [date]
for example beginTime, endTimeand recentTimeset

②: In the specified style or operations for a particular date when using the timestamp that date.

Such as setting beforeRenderArrthe time, you need to pass an array of objects in line with norms

parameter	Types of	For example	Explanation
stamp	{Number}	eg:1514822400000	Specify a particular timestamp
className	{String}	eg: "enable"	Specify a user's own set of css class name

2. Flexible control arrangement week, week display format, the display format of the month

①: isSundayFirstcontrol Sunday whether to put the first column, true to Sunday put the first column

②: isChinesecontrol the display of week, true to display Chinese, false to display English

③: monthTypecontrol the display format of the month to January, for example, 0: 1 month, 1: Jan, 2: Jan, 3: January

3. do some configuration on the most important slide gesture

①: anglethe control slide angle indirect control sensitivity, it is recommended in the range 5-20

②: isToggleBtnthe need to show the toggle button, true for the need to show

③: canViewDisabledCan not query the month within a predetermined range, true as can query

4. Flexible callback functions for developers to customize

①: successClick on a date after the callback, user custom actions after the click. Own parameters (item, arr). itemClick the current time stamp, arran array of two time stamps for the intelligent judgment after two consecutive clicks

②: switchRenderoperation switching month callback, the user is required to define the switch, such as initiating a request to update data. Own parameters (year, month, cal). yearIs the year of the new generation, monthfor the new generation of the month (starting from 0), calpoints to the current instance

Third, exposed on the prototype, which can be used api

name	The type of arguments passed	effect
renderCallbackArr(arr)	{Array}	Render specified arr, arr format and beforeRenderArrthe format of the array of objects of the same
prevent()	-	In the micro-channel browser, you may need to use to prevent the default event api
hideBackground()	-	Playing the layer mode successcallback, you may need to use api Close popup layer

Api appropriate to explain the intention of:

1. to renderCallbackArrpass in an array (array format and beforeRenderArrthe same, no more explanation) , this method can add style to a specified point in time you need. Imagine a scenario:

By sliding the switch to view the punch in three months ago, and no date has been punch card punch card has a different highlight style.

Obviously, punch in this month is that you need switchRenderto get after initiating http request callback.

After http return the results, construct a line with beforeRenderArran array format, and then call renderCallbackArr, passing the constructed array, you can specify a date for rendering the specified className.

// 举个栗子?
switchRender:  function(year, month,cal) {
    console.log('计算机识别的: 年份: ' + year + ' 月份: ' + month);
    $.ajax({
        url: 'xxxx',
        type: 'GET',
        data: {
            applyYear: year,
           applyMonth: (month + 1),
        },
        success: function(newArr) {
            cal.renderCallbackArr(newArr);            
        }      
    })
}

2. Use prevent()the scene should not be too much. The main is the default slide in order to prevent micro-channel browser.

// 这是prevent 方法的源码
prevent: function (e) {
      e.preventDefault();
},

3. Use hideBackground()of the scene is generally in the elastic layer mode successcallback. Imagine a scenario:

After triggering the calendar bomb layer, if you want to choose a time [point], then click after a certain date can directly call hideBackground()away bombs layer.

If you want to select a time interval [], you can then call after the second time point to determine hideBackground()Collapse bombs layer. Of course, the elastic layer may not be retracted.

Fourth, how do five DOM unlimited slide

In fact, I wrote the first version of the calendar when the solutions adopted a month after the new generation to the body constantly append dom. But the scene at the time of the business is relatively simple, Cheng Si only 10 months. But obviously if there are 100 months, I have such an approach obviously does not work.

It is necessary to make the dom can be reused, unlimited slide

Consideration of five questions: "unlimited slide, then you need at least a few dom? "

First of all clear, here refers to a dom is a month, every month is the month of switching wrapped dom switch

As shown below, it is assumed for the current month [September 2017], due to the slide in real time, when the process of sliding my finger from right to left, [October 2017] will be gradually exposed some consider a special situation :

To punch, for example, in October 2017 there is a punch card records, such as if the user releases the finger, stopped in October 2017 when it suddenly flashed a highlight style punch card records, and give users a very comfortable feeling .

To avoid this, it is necessary for the current month [September 2017], when it has been rendering good [October 2017] highlighting the style, the left [August 2017] is the same reason, so at least you have to render a full three months with data highlighted

So we get to the conclusion that month dom at least three, and these three dom is already rendered even highlight style are good, there will be no change in real time after the end of the slide.

But why the last is to use five dom to achieve unlimited slide it?

Refer to the effect swiper, in order to allow the three sides of the extreme dom dom can also be real-time sliding normal. So at the beginning and end, respectively, plus a dom, it needs a total of five dom to achieve unlimited slide .

Below, the initial start of the analysis part 3 dom green frame.



Thinking six questions: "head and tail as two filled dom which month you want to display it? "

Direct effects refer to the swiper will be able to get an answer, I now give you an example to do some explanations:
first consider the following:

Gestures: a continuous slide from right to left
Result: Continuous View next month

The following is a legend, the red arrow update:



To enter the initial month of the current page is in September 2017 as an example:
the initial state:



Purple dom numbers are subscripts representing the month, the month corresponding to the same index are the same .
Middle 1,2,3 corresponds said before ----- [dom to render at least a good three month in advance].
Why is that and last month was filled with 3 and 1 it?

Suppose we now do not limit five dom, but an unlimited number dom, dom so for the month of subscript combination would be:
1,2,3,1,2,3,1,2,3,1,2,3 ......

We have a 1,2,3 -centered, taking into consecutive five month dom, then get to the index is a combination of:
1, 2, [3,1,2,3,1], 2,3,1 2, 3 ......

Did not understand it does not matter, read on'll understand.

Thinking seven questions: "In line with unlimited slide, how to control the display of the month it? "

In fact, in the future, I would need to take to operate dom index data updated in January, so I tried to find this subscripted array of law [3,1,2,3,1].

I found this loop is the loop subscript 3, I can take on the dom at each position marked by the modulo 3.

Now I want to do some small changes to the index.
I want to change 3 0. That [0,1,2,0,1]

The reason is simple, to calculate when the sliding distance, will be dom subscripts and translateX association convenient. That is, when the leftmost slide dom month, when the month of dom translateXvalue of 0, and subscripts may be 0% 3 results correspond.

Thus, under this standard, and it translateXdirectly up.

Well, the initial month is an example in September 2017, the final result is initialized:




Next, slide from right to left to view the next month, touchendafter the operation is as follows:



When slid dom month rightmost time ( in fact, as long as the slide boundaries do the same process ), in touchstartexecuting a special operation:
that is, touchstart when the moment translate3dto dom and its index to the same month:
for example, above [2017.11] has come to the far right, and that in my next slide touchstarttime to the location of the lower figure:

 

This core principle is to achieve unlimited slides . Of course, you can also slip up then:

 

so on, infinitely Left slide is similar to the truth.

Fifth, why the need to predict the user's gesture

About the principle of unlimited slide from above, you can probably feel: sliding distance by a gray rectangle is relative to the control center of the mobile phone screen translateXto decide.

How to control translateXvalues to achieve sliding effect, this problem is not the focus.

The point is, think of the eight questions: "If only control translateX dom in the calendar section, when I want to slide the entire page, slide does not move, how to do? "

Suppose user blue curves represent the slip curve in FIG:

When the user is sliding curve A in the case, the user's intention is clearly trying to pull up the page
when the user slides the curve B is the case, the user's intention is obviously want to see the month

In fact, if only by controlling the translateXtime value to achieve the sliding effect, either curve A or B will be considered want to see the month



In other words, if the control translateX, then, in this range occupy dom document flow within a huge area, never be able to slide up and down. This is absolutely not allowed.

So we need to predict gestures to achieve in the calendar dom range, both to slide up and down, but also to sliding around . Results are as follows:

Consideration 9 question: "Is there a simple way to be able to predict gesture? "

[Example] sliding curves A and B of the example of FIG previously mentioned, if the green line as the standard,

1. Curve slope is less than the green line, and the property of the slip curve B around the same sliding

2. Curve slope is greater than the green line, and the property of the same slip curve A vertical slide

This is not can it?
But in fact the user's gestures are generally below the curve of the orange curve ....



And calculate the slope of a certain user gestures in touchmovethe real-time calculation (Why? Of course, to real-time slide), so in the end, on the slope of a user gesture anticipation of ideas, it is to end here.

Sixth, how to use calculus to predict user gesture

Thinking question 10: "For a user gesture integrating, we can solve the problem? "

User's gesture is actually an arc, consider the case where only the upper right corner of the current slide, the gesture of the user will be able to simplify the curve in the first quadrant from the lower left corner.
The following diagram, we proceed from the concepts of calculus, the following conclusions.



Look red rectangle of the middle part, that the red rectangle is a rectangle enlarged exaggerated rectangular elongated strip, with a width of △ X, which is a high △ Y.
Through touchmoveeach sliding real-time computing and △ X △ Y, then the cumulative area. Actually directly in accordance with the cumulative area △X × △Yof the positive or negative results are accumulated, so we put the first quadrant gesture extended to all quadrants gesture go.

Core code calculated as a gesture, which points to the current instance cal:

 

We can use the curve to the area of the user gesture quantization user gesture operation.
But quantification is quantified, I know how to quantify the result is slide up and down or sliding around it?
Therefore, it is necessary as a standard line (that green line) when calculating the slope, must have a standard area.

Thinking on the question: "How to calculate the standard area? "

Below, we have three curves, three curves X axis area enclosed, it is hard to quantify the results of our earlier. among them:

The blue curve is the standard area enclosed area of ​​our ideal, though we do not know how to count

Yellow curves which area larger than a standard area, we determined that all larger than the blue curve quantization curve [a user attempts to slide up and down]

The green curve is smaller than the area enclosed by standard area, we determined that all smaller than the blue curve quantization curve user attempts to slide around} {



Back to the question, how to calculate the standard area ?
FIG observation can be found on a clear blue angle A , the angle A , and examples of the parameter angle is the same thing.

Developers can control the value of the angle ( angle in units of ° to control the size of the standard area).
Of course, through my test, angle values in [5, 20] the best.

That source is how to calculate the area of ​​a standard by the developer incoming angle it?

First, I will take the user's point of view into a tan value.

 

Why tan value it, because I can △Xbe calculated △Y = △X * tanA.

 

Therefore, also by standard area it has been accumulated.

 

At this point, we can get a more ideal pre-judgment by comparing the user gesture area and the standard area.
By anticipation, allowing users to slide in anywhere on the page, feel comfortable.

Conclusion

Github address: "To end mobile born" custom calendar of plug-https://github.com/AppianZ/calendar

Welcome the valuable advice and technical exchanges 9 (• ̤ᵕ • ̤1)

I'm Garbo Appian, a home to sell eruption algorithm sister paper (❁ᴗ͈ˬᴗ͈)