title-switcher 2.0.0 → 2.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +44 -150
  2. package/browser/titleSwitcher.js +154 -199
  3. package/browser/titleSwitcher.min.js +1 -1
  4. package/dist/main.d.ts +90 -0
  5. package/dist/main.js +154 -199
  6. package/dist/main.min.js +1 -1
  7. package/package.json +10 -2
package/README.md CHANGED
@@ -1,5 +1,4 @@
1
- title-switcher-v2
2
- ==============
1
+ # [title-switcher-v2](https://www.npmjs.com/package/title-switcher)
3
2
 
4
3
  This is the updated title-switcher which takes a simpler approach and improves many deficiencies of the original title-switcher.
5
4
 
@@ -19,151 +18,46 @@ the sample code for best results.
19
18
 
20
19
  Live example at https://joshuaheagle.com/projects/title-switcher. Enjoy!
21
20
 
22
- <a name="TitleSwitcher"></a>
23
-
24
- ## TitleSwitcher
25
- **Kind**: global class
26
-
27
- * [TitleSwitcher](#TitleSwitcher)
28
- * [new TitleSwitcher([titlesContainer], [switchStyle])](#new_TitleSwitcher_new)
29
- * [.active](#TitleSwitcher+active) ⇒ <code>boolean</code>
30
- * [.currentClass](#TitleSwitcher+currentClass) ⇒ <code>string</code>
31
- * [.currentIndex](#TitleSwitcher+currentIndex) ⇒ <code>number</code>
32
- * [.delayEffect](#TitleSwitcher+delayEffect) ⇒ <code>number</code>
33
- * [.delaySwitch](#TitleSwitcher+delaySwitch) ⇒ <code>number</code>
34
- * [.switchStyle](#TitleSwitcher+switchStyle) ⇒ <code>string</code>
35
- * [.titles](#TitleSwitcher+titles) ⇒ <code>Array</code> \| <code>NodeList</code>
36
- * [.typeSurface](#TitleSwitcher+typeSurface) ⇒ <code>HTMLElement</code> \| <code>null</code>
37
- * [.startTitles([settings])](#TitleSwitcher+startTitles) ⇒ [<code>TitleSwitcher</code>](#TitleSwitcher)
38
- * [.pause()](#TitleSwitcher+pause)
39
- * [.resume()](#TitleSwitcher+resume)
40
- * [.switchTitle(currentTitle, callBackFunction, self, [runOnce])](#TitleSwitcher+switchTitle) ⇒ [<code>TitleSwitcher</code>](#TitleSwitcher)
41
- * [.cursorBlink(blinkOn, self)](#TitleSwitcher+cursorBlink) ⇒ [<code>TitleSwitcher</code>](#TitleSwitcher)
42
- * [.typingEffect(domObject, callBackFunction, self, [runOnce])](#TitleSwitcher+typingEffect) ⇒ [<code>TitleSwitcher</code>](#TitleSwitcher)
43
-
44
- <a name="new_TitleSwitcher_new"></a>
45
-
46
- ### new TitleSwitcher([titlesContainer], [switchStyle])
47
- Instantiate this as a class to get an instance of TitleSwitcher
48
-
49
-
50
- | Param | Type | Default | Description |
51
- | --- | --- | --- | --- |
52
- | [titlesContainer] | <code>string</code> | <code>&quot;&#x27;&#x27;&quot;</code> | The selector where titles are stored |
53
- | [switchStyle] | <code>function</code> \| <code>string</code> | <code>&#x27;typingEffect&#x27;</code> | The function or function name for the effect to apply |
54
-
55
- <a name="TitleSwitcher+active"></a>
56
-
57
- ### titleSwitcher.active ⇒ <code>boolean</code>
58
- Retrieve active
59
-
60
- **Kind**: instance property of [<code>TitleSwitcher</code>](#TitleSwitcher)
61
- <a name="TitleSwitcher+currentClass"></a>
62
-
63
- ### titleSwitcher.currentClass ⇒ <code>string</code>
64
- Retrieve currentClass
65
-
66
- **Kind**: instance property of [<code>TitleSwitcher</code>](#TitleSwitcher)
67
- <a name="TitleSwitcher+currentIndex"></a>
68
-
69
- ### titleSwitcher.currentIndex ⇒ <code>number</code>
70
- Retrieve currentIndex
71
-
72
- **Kind**: instance property of [<code>TitleSwitcher</code>](#TitleSwitcher)
73
- <a name="TitleSwitcher+delayEffect"></a>
74
-
75
- ### titleSwitcher.delayEffect ⇒ <code>number</code>
76
- Retrieve delayEffect
77
-
78
- **Kind**: instance property of [<code>TitleSwitcher</code>](#TitleSwitcher)
79
- <a name="TitleSwitcher+delaySwitch"></a>
80
-
81
- ### titleSwitcher.delaySwitch ⇒ <code>number</code>
82
- Retrieve delaySwitch
83
-
84
- **Kind**: instance property of [<code>TitleSwitcher</code>](#TitleSwitcher)
85
- <a name="TitleSwitcher+switchStyle"></a>
86
-
87
- ### titleSwitcher.switchStyle ⇒ <code>string</code>
88
- Retrieve switchStyle
89
-
90
- **Kind**: instance property of [<code>TitleSwitcher</code>](#TitleSwitcher)
91
- <a name="TitleSwitcher+titles"></a>
92
-
93
- ### titleSwitcher.titles ⇒ <code>Array</code> \| <code>NodeList</code>
94
- Retrieve list of titles DOM elements
95
-
96
- **Kind**: instance property of [<code>TitleSwitcher</code>](#TitleSwitcher)
97
- <a name="TitleSwitcher+typeSurface"></a>
98
-
99
- ### titleSwitcher.typeSurface ⇒ <code>HTMLElement</code> \| <code>null</code>
100
- Retrieve typeSurface used
101
-
102
- **Kind**: instance property of [<code>TitleSwitcher</code>](#TitleSwitcher)
103
- <a name="TitleSwitcher+startTitles"></a>
104
-
105
- ### titleSwitcher.startTitles([settings]) ⇒ [<code>TitleSwitcher</code>](#TitleSwitcher)
106
- This is the function to begin the switching titles
107
-
108
- **Kind**: instance method of [<code>TitleSwitcher</code>](#TitleSwitcher)
109
-
110
- | Param | Type | Default |
111
- | --- | --- | --- |
112
- | [settings] | <code>Object</code> | <code>{}</code> |
113
- | [settings.delaySwitch] | <code>number</code> | <code>400</code> |
114
- | [settings.delayEffect] | <code>number</code> | <code>200</code> |
115
- | [settings.isRandom] | <code>boolean</code> | <code>false</code> |
116
- | [settings.immediatePause] | <code>boolean</code> | <code>false</code> |
117
-
118
- <a name="TitleSwitcher+pause"></a>
119
-
120
- ### titleSwitcher.pause()
121
- This is the function to pause between switching
122
-
123
- **Kind**: instance method of [<code>TitleSwitcher</code>](#TitleSwitcher)
124
- <a name="TitleSwitcher+resume"></a>
125
-
126
- ### titleSwitcher.resume()
127
- This is the function to resume after a pause.
128
-
129
- **Kind**: instance method of [<code>TitleSwitcher</code>](#TitleSwitcher)
130
- <a name="TitleSwitcher+switchTitle"></a>
131
-
132
- ### titleSwitcher.switchTitle(currentTitle, callBackFunction, self, [runOnce]) ⇒ [<code>TitleSwitcher</code>](#TitleSwitcher)
133
- This is the core function for switching titles
134
-
135
- **Kind**: instance method of [<code>TitleSwitcher</code>](#TitleSwitcher)
136
-
137
- | Param | Type | Default |
138
- | --- | --- | --- |
139
- | currentTitle | <code>HTMLElement</code> | |
140
- | callBackFunction | <code>function</code> | |
141
- | self | [<code>TitleSwitcher</code>](#TitleSwitcher) | |
142
- | [runOnce] | <code>boolean</code> | <code>false</code> |
143
-
144
- <a name="TitleSwitcher+cursorBlink"></a>
145
-
146
- ### titleSwitcher.cursorBlink(blinkOn, self) ⇒ [<code>TitleSwitcher</code>](#TitleSwitcher)
147
- This is a helper function to improve the default 'typingEffect'
148
-
149
- **Kind**: instance method of [<code>TitleSwitcher</code>](#TitleSwitcher)
150
-
151
- | Param | Type |
152
- | --- | --- |
153
- | blinkOn | <code>boolean</code> |
154
- | self | [<code>TitleSwitcher</code>](#TitleSwitcher) |
155
-
156
- <a name="TitleSwitcher+typingEffect"></a>
157
-
158
- ### titleSwitcher.typingEffect(domObject, callBackFunction, self, [runOnce]) ⇒ [<code>TitleSwitcher</code>](#TitleSwitcher)
159
- This is the default and example of an effect being implemented when Titles are switched
160
-
161
- **Kind**: instance method of [<code>TitleSwitcher</code>](#TitleSwitcher)
162
-
163
- | Param | Type | Default |
164
- | --- | --- | --- |
165
- | domObject | <code>HTMLElement</code> | |
166
- | callBackFunction | <code>function</code> | |
167
- | self | [<code>TitleSwitcher</code>](#TitleSwitcher) | |
168
- | [runOnce] | <code>boolean</code> | <code>false</code> |
169
-
21
+ ## Setup Example
22
+
23
+ ### Sequential Titles
24
+
25
+ ```html
26
+ <div class="titles">
27
+ <h4 style='color: #be1010; text-align: center;'>I built this <em>superb</em> <strong>plug-in</strong>.</h4>
28
+ <h4 style='color: #1414af; text-align: right;'><strong>TitleSwitcher</strong> is great to display <em>company
29
+ objectives</em>.</h4>
30
+ <h4 style='color: #ff7816; text-align: center; text-decoration: underline;'>Feel free to contribute and use this
31
+ plug-in.</h4>
32
+ <h4 style='color: #0c710c;'>You can find more projects on <a href='https://github.com/jheagle' target='_blank'>my
33
+ <strong>GitHub</strong></a>.</h4>
34
+ </div>
35
+ ```
36
+
37
+ ```javascript
38
+ const orderedTitles = new TitleSwitcher('.titles', 'typingEffect')
39
+ // the first arguments is to not randomly switch, then the time between switching, and finally the delay of the effect (typing in this case)
40
+ orderedTitles.startTitles({ isRandom: false, delaySwitch: 400, delayEffect: 100 })
41
+ ```
42
+
43
+ ### Random Titles
44
+
45
+ ```html
46
+ <div class='titles-random'>
47
+ <h4>Innovate</h4>
48
+ <h4>Create</h4>
49
+ <h4>Connect</h4>
50
+ <h4>Socialise</h4>
51
+ <h4>Collaborate</h4>
52
+ <h4>Build</h4>
53
+ <h4>Organise</h4>
54
+ <h4>Broadcast</h4>
55
+ </div>
56
+ ```
57
+
58
+ ```javascript
59
+ const randomTitles = new TitleSwitcher('.titles-random', 'typingEffect')
60
+ // set to random title switching, then defaults are 400 and 200 milliseconds for switch/effects
61
+ randomTitles.startTitles({ isRandom: true })
62
+ ```
63
+