├── README.md ├── assets ├── coolboy.jpg └── coolgirl.jpg ├── chat.html ├── css ├── index.css └── style.css ├── index.html └── js ├── chat.js ├── index.js ├── jquery.mCustomScrollbar.concat.min.js ├── jquery.mCustomScrollbar.min.css └── paho-mqtt.js /README.md: -------------------------------------------------------------------------------- 1 | # Cp7Chat 2 | Coolpy7聊天室示例 3 | 4 | -------------------------------------------------------------------------------- /assets/coolboy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Coolpy7/Cp7Chat/fb71ad8e9a94c7fbbb3f8ddc6c6940f455a1bfc5/assets/coolboy.jpg -------------------------------------------------------------------------------- /assets/coolgirl.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Coolpy7/Cp7Chat/fb71ad8e9a94c7fbbb3f8ddc6c6940f455a1bfc5/assets/coolgirl.jpg -------------------------------------------------------------------------------- /chat.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Coolpy7ChatDemo 15 | 16 | 17 | 18 |
19 |
20 |

Coolpy 7

21 |

Coolpy.net

22 |
23 | 24 |
25 |
26 |
27 |
28 |
29 |
30 | 31 | 32 |
33 |
34 |
35 | 36 | 132 | 133 | 134 | -------------------------------------------------------------------------------- /css/index.css: -------------------------------------------------------------------------------- 1 | form .captchaDiv input[type="text"], 2 | form .formDiv input, 3 | form .formDiv .checkboxDiv .checkbox label, 4 | button { 5 | font-family: "Dosis", sans-serif; 6 | font-size: 1rem; 7 | letter-spacing: 0.05em; 8 | box-sizing: border-box; 9 | outline: 0; 10 | border-radius: 2px; 11 | } 12 | form .captchaDiv input[type="text"], 13 | form .formDiv input, 14 | form .formDiv .checkboxDiv .checkbox label { 15 | background: rgba(31, 33, 36, 0.5); 16 | border: 1px solid rgba(255, 255, 255, 0.1); 17 | color: white; 18 | padding: 10px 8px 0; 19 | } 20 | form .captchaDiv input[type="text"] { 21 | background: #ffffff; 22 | color: #353535; 23 | border: none; 24 | } 25 | /* 26 | Amazing CSS Spinner from 27 | http://tobiasahlin.com/spinkit/ 28 | */ 29 | 30 | .spinner { 31 | margin: 0 auto; 32 | width: 70px; 33 | text-align: center; 34 | -webkit-transform: scale(0.5); 35 | transform: scale(0.5); 36 | } 37 | .spinner > div { 38 | width: 18px; 39 | height: 18px; 40 | background-color: #ffffff; 41 | border-radius: 100%; 42 | display: inline-block; 43 | -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; 44 | animation: sk-bouncedelay 1.4s infinite ease-in-out both; 45 | } 46 | .spinner .bounce1 { 47 | -webkit-animation-delay: -0.32s; 48 | animation-delay: -0.32s; 49 | } 50 | .spinner .bounce2 { 51 | -webkit-animation-delay: -0.16s; 52 | animation-delay: -0.16s; 53 | } 54 | @-webkit-keyframes sk-bouncedelay { 55 | 0%, 80%, 100% { 56 | -webkit-transform: scale(0); 57 | transform: scale(0); 58 | } 59 | 40% { 60 | -webkit-transform: scale(1); 61 | transform: scale(1); 62 | } 63 | } 64 | @keyframes sk-bouncedelay { 65 | 0%, 80%, 100% { 66 | -webkit-transform: scale(0); 67 | transform: scale(0); 68 | } 69 | 40% { 70 | -webkit-transform: scale(1); 71 | transform: scale(1); 72 | } 73 | } 74 | *, 75 | *::before, 76 | *::after { 77 | box-sizing: border-box; 78 | } 79 | body { 80 | background: #353535; 81 | font-size: 16px; 82 | text-transform: uppercase; 83 | font-family: "Dosis", sans-serif; 84 | color: #ffffff; 85 | font-weight: 200; 86 | letter-spacing: 0.11em; 87 | } 88 | a { 89 | color: #2F8BE6; 90 | } 91 | h1 { 92 | font-weight: 200; 93 | text-align: center; 94 | margin-bottom: 20px; 95 | font-size: 2.5rem; 96 | letter-spacing: 0.05em; 97 | } 98 | h1 > span { 99 | font-weight: 400; 100 | } 101 | h1 .blue { 102 | color: #0cf; 103 | } 104 | h1 .pink { 105 | color: #e54cb5; 106 | } 107 | h1 .red { 108 | color: #fc6669; 109 | } 110 | h1 .green { 111 | color: #0f9; 112 | } 113 | h1 .purple { 114 | color: #93f; 115 | } 116 | .container { 117 | max-width: 600px; 118 | margin: 50px auto 0; 119 | } 120 | form { 121 | width: 100%; 122 | margin: 0 auto; 123 | color: #ffffff; 124 | } 125 | form .formDiv { 126 | position: relative; 127 | margin-bottom: 20px; 128 | } 129 | form .formDiv .label { 130 | position: absolute; 131 | top: 50%; 132 | left: 10px; 133 | -webkit-transform: translateY(-50%); 134 | transform: translateY(-50%); 135 | opacity: .3; 136 | z-index: 2; 137 | -webkit-transition: all .5s ease; 138 | transition: all .5s ease; 139 | } 140 | form .formDiv input { 141 | position: relative; 142 | z-index: 3; 143 | } 144 | form .formDiv input[type="text"] { 145 | width: 100%; 146 | height: 60px; 147 | box-shadow: inset 0 0 10px 1px transparent; 148 | -webkit-transition: all .5s ease; 149 | transition: all .5s ease; 150 | } 151 | form .formDiv input[type="text"]:focus { 152 | box-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0.3); 153 | } 154 | form .formDiv input[type="text"]:focus ~ .label, 155 | form .formDiv input[type="text"]:valid ~ .label { 156 | top: 15px; 157 | font-size: 10px; 158 | opacity: .8; 159 | z-index: 4; 160 | } 161 | form .formDiv input[type="checkbox"] { 162 | visibility: hidden; 163 | } 164 | form .formDiv .checkboxDiv { 165 | position: relative; 166 | } 167 | form .formDiv .checkboxDiv .checkbox, 168 | form .formDiv .checkboxDiv > span { 169 | display: inline-block; 170 | vertical-align: middle; 171 | } 172 | form .formDiv .checkboxDiv .checkbox { 173 | width: 24px; 174 | height: 24px; 175 | position: relative; 176 | margin-right: 5px; 177 | } 178 | form .formDiv .checkboxDiv .checkbox label { 179 | position: absolute; 180 | top: 0; 181 | left: 0; 182 | width: 100%; 183 | height: 100%; 184 | -webkit-transition: all .5s ease; 185 | transition: all .5s ease; 186 | } 187 | form .formDiv .checkboxDiv .checkbox input[type="checkbox"]:checked ~ label { 188 | box-shadow: inset 0 0 3px 2px rgba(0, 0, 0, 0.3); 189 | } 190 | form .formDiv .checkboxDiv .checkbox input[type="checkbox"]:checked ~ label:after { 191 | content: "\f00c"; 192 | font-family: FontAwesome; 193 | font-size: 0.75rem; 194 | position: absolute; 195 | top: 50%; 196 | left: 50%; 197 | -webkit-transform: translateX(-50%) translateY(-50%); 198 | transform: translateX(-50%) translateY(-50%); 199 | } 200 | form .captchaDiv { 201 | overflow-y: hidden; 202 | max-height: 800px; 203 | -webkit-transition: all .8s ease; 204 | transition: all .8s ease; 205 | } 206 | form .captchaDiv.close { 207 | max-height: 0; 208 | } 209 | form .captchaDiv #giphy_captcha { 210 | background: #1F2124; 211 | text-align: center; 212 | border-radius: 2px 2px 0 0; 213 | -webkit-transition: all .3s linear; 214 | transition: all .3s linear; 215 | } 216 | form .captchaDiv input[type="text"] { 217 | padding-top: 0; 218 | margin-bottom: 10px; 219 | width: 100%; 220 | height: 50px; 221 | } 222 | form .captchaDiv span { 223 | display: block; 224 | text-transform: initial; 225 | margin-bottom: 20px; 226 | } 227 | form .formData { 228 | position: relative; 229 | } 230 | form .formData.disabled:after { 231 | content: ''; 232 | position: absolute; 233 | top: 0; 234 | left: 0; 235 | width: 100%; 236 | height: 100%; 237 | background: rgba(53, 53, 53, 0.6); 238 | z-index: 10; 239 | } 240 | button { 241 | width: 100%; 242 | height: 60px; 243 | text-align: center; 244 | background: #2F8BE6; 245 | color: #ffffff; 246 | border: none; 247 | text-transform: uppercase; 248 | cursor: pointer; 249 | -webkit-transition: all .3s linear; 250 | transition: all .3s linear; 251 | } 252 | button .spinner { 253 | display: none; 254 | } 255 | button:hover { 256 | background: #1871ca; 257 | } 258 | button:disabled { 259 | background: #1DE9B6; 260 | cursor: default; 261 | } -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | } 6 | 7 | html, 8 | body { 9 | height: 100%; 10 | margin: 0; 11 | padding: 0; 12 | } 13 | 14 | body { 15 | background: -webkit-linear-gradient(315deg, #044f48, #2a7561); 16 | background: linear-gradient(135deg, #044f48, #2a7561); 17 | background-size: cover; 18 | font-family: 'Open Sans', sans-serif; 19 | font-size: 12px; 20 | line-height: 1.3; 21 | overflow: hidden; 22 | } 23 | 24 | .bg { 25 | width: 100%; 26 | height: 100%; 27 | top: 0; 28 | left: 0; 29 | z-index: 1; 30 | background: url("https://images.unsplash.com/photo-1451186859696-371d9477be93?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925") no-repeat 0 0; 31 | -webkit-filter: blur(80px); 32 | filter: blur(80px); 33 | -webkit-transform: scale(1); 34 | transform: scale(1); 35 | } 36 | 37 | /*-------------------- 38 | Chat 39 | --------------------*/ 40 | 41 | .chat { 42 | position: absolute; 43 | top: 50%; 44 | left: 50%; 45 | -webkit-transform: translate(-50%, -50%); 46 | transform: translate(-50%, -50%); 47 | width: 100%; 48 | height: 100%; 49 | max-height: 500px; 50 | z-index: 2; 51 | overflow: hidden; 52 | box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2); 53 | background: rgba(0, 0, 0, 0.5); 54 | border-radius: 20px; 55 | display: -webkit-box; 56 | display: -ms-flexbox; 57 | display: flex; 58 | -webkit-box-pack: justify; 59 | -ms-flex-pack: justify; 60 | justify-content: space-between; 61 | -webkit-box-orient: vertical; 62 | -webkit-box-direction: normal; 63 | -ms-flex-direction: column; 64 | flex-direction: column; 65 | } 66 | 67 | /*-------------------- 68 | Chat Title 69 | --------------------*/ 70 | 71 | .chat-title { 72 | -webkit-box-flex: 0; 73 | -ms-flex: 0 1 45px; 74 | flex: 0 1 45px; 75 | position: relative; 76 | z-index: 2; 77 | background: rgba(0, 0, 0, 0.2); 78 | color: #fff; 79 | text-transform: uppercase; 80 | text-align: right; 81 | padding: 10px 45px 10px 50px; 82 | } 83 | 84 | .chat-title h1, 85 | .chat-title h2 { 86 | font-weight: normal; 87 | font-size: 10px; 88 | margin: 0; 89 | padding: 0; 90 | } 91 | 92 | .chat-title h2 { 93 | color: rgba(255, 255, 255, 0.5); 94 | font-size: 8px; 95 | letter-spacing: 1px; 96 | } 97 | 98 | .chat-title .avatar { 99 | position: absolute; 100 | z-index: 1; 101 | top: 8px; 102 | right: 9px; 103 | border-radius: 30px; 104 | width: 30px; 105 | height: 30px; 106 | overflow: hidden; 107 | margin: 0; 108 | padding: 0; 109 | border: 2px solid rgba(255, 255, 255, 0.24); 110 | } 111 | 112 | .chat-title .avatar img { 113 | width: 100%; 114 | height: auto; 115 | } 116 | 117 | /*-------------------- 118 | Messages 119 | --------------------*/ 120 | 121 | .messages { 122 | -webkit-box-flex: 1; 123 | -ms-flex: 1 1 auto; 124 | flex: 1 1 auto; 125 | color: rgba(255, 255, 255, 0.5); 126 | overflow: hidden; 127 | position: relative; 128 | width: 100%; 129 | } 130 | 131 | .messages .messages-content { 132 | position: absolute; 133 | top: 0; 134 | left: 0; 135 | height: 100%; 136 | width: 100%; 137 | } 138 | 139 | .messages .message { 140 | clear: both; 141 | float: left; 142 | padding: 6px 10px 7px; 143 | border-radius: 10px 10px 10px 0; 144 | background: rgba(0, 0, 0, 0.3); 145 | margin: 8px 0; 146 | font-size: 11px; 147 | line-height: 1.4; 148 | margin-left: 35px; 149 | position: relative; 150 | text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); 151 | } 152 | 153 | .messages .message .timestamp { 154 | position: absolute; 155 | bottom: -15px; 156 | font-size: 9px; 157 | color: rgba(255, 255, 255, 0.3); 158 | } 159 | 160 | .messages .message::before { 161 | content: ''; 162 | position: absolute; 163 | bottom: -6px; 164 | border-top: 6px solid rgba(0, 0, 0, 0.3); 165 | left: 0; 166 | border-right: 7px solid transparent; 167 | } 168 | 169 | .messages .message .avatar { 170 | position: absolute; 171 | z-index: 1; 172 | bottom: -15px; 173 | left: -35px; 174 | border-radius: 30px; 175 | width: 30px; 176 | height: 30px; 177 | overflow: hidden; 178 | margin: 0; 179 | padding: 0; 180 | border: 2px solid rgba(255, 255, 255, 0.24); 181 | } 182 | 183 | .messages .message .avatar img { 184 | width: 100%; 185 | height: auto; 186 | } 187 | 188 | .messages .message.message-personal { 189 | float: right; 190 | color: #fff; 191 | text-align: left; 192 | word-break: break-all; 193 | background: -webkit-linear-gradient(330deg, #248A52, #257287); 194 | background: linear-gradient(120deg, #248A52, #257287); 195 | border-radius: 10px 10px 0 10px; 196 | } 197 | 198 | .messages .message.message-personal::before { 199 | left: auto; 200 | right: 0; 201 | border-right: none; 202 | border-left: 5px solid transparent; 203 | border-top: 4px solid #257287; 204 | bottom: -4px; 205 | } 206 | 207 | .messages .message:last-child { 208 | margin-bottom: 30px; 209 | } 210 | 211 | .messages .message.new { 212 | word-break: break-all; 213 | -webkit-transform: scale(0); 214 | transform: scale(0); 215 | -webkit-transform-origin: 0 0; 216 | transform-origin: 0 0; 217 | -webkit-animation: bounce 500ms linear both; 218 | animation: bounce 500ms linear both; 219 | } 220 | 221 | .messages .message.loading::before { 222 | position: absolute; 223 | top: 50%; 224 | left: 50%; 225 | -webkit-transform: translate(-50%, -50%); 226 | transform: translate(-50%, -50%); 227 | content: ''; 228 | display: block; 229 | width: 3px; 230 | height: 3px; 231 | border-radius: 50%; 232 | background: rgba(255, 255, 255, 0.5); 233 | z-index: 2; 234 | margin-top: 4px; 235 | -webkit-animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite; 236 | animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite; 237 | border: none; 238 | -webkit-animation-delay: .15s; 239 | animation-delay: .15s; 240 | } 241 | 242 | .messages .message.loading span { 243 | display: block; 244 | font-size: 0; 245 | width: 20px; 246 | height: 10px; 247 | position: relative; 248 | } 249 | 250 | .messages .message.loading span::before { 251 | position: absolute; 252 | top: 50%; 253 | left: 50%; 254 | -webkit-transform: translate(-50%, -50%); 255 | transform: translate(-50%, -50%); 256 | content: ''; 257 | display: block; 258 | width: 3px; 259 | height: 3px; 260 | border-radius: 50%; 261 | background: rgba(255, 255, 255, 0.5); 262 | z-index: 2; 263 | margin-top: 4px; 264 | -webkit-animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite; 265 | animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite; 266 | margin-left: -7px; 267 | } 268 | 269 | .messages .message.loading span::after { 270 | position: absolute; 271 | top: 50%; 272 | left: 50%; 273 | -webkit-transform: translate(-50%, -50%); 274 | transform: translate(-50%, -50%); 275 | content: ''; 276 | display: block; 277 | width: 3px; 278 | height: 3px; 279 | border-radius: 50%; 280 | background: rgba(255, 255, 255, 0.5); 281 | z-index: 2; 282 | margin-top: 4px; 283 | -webkit-animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite; 284 | animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite; 285 | margin-left: 7px; 286 | -webkit-animation-delay: .3s; 287 | animation-delay: .3s; 288 | } 289 | 290 | /*-------------------- 291 | Message Box 292 | --------------------*/ 293 | 294 | .message-box { 295 | -webkit-box-flex: 0; 296 | -ms-flex: 0 1 40px; 297 | flex: 0 1 40px; 298 | width: 100%; 299 | background: rgba(0, 0, 0, 0.3); 300 | padding: 10px; 301 | position: relative; 302 | display:flex; 303 | } 304 | 305 | .message-box .message-input { 306 | background: none; 307 | border: none; 308 | outline: none !important; 309 | resize: none; 310 | color: rgba(255, 255, 255, 0.7); 311 | font-size: 11px; 312 | height: 17px; 313 | margin: 0; 314 | padding-right: 20px; 315 | width: 80%; 316 | overflow: hidden; 317 | flex:1; 318 | } 319 | 320 | .message-box textarea:focus:-webkit-placeholder { 321 | color: transparent; 322 | } 323 | 324 | .message-box .message-submit { 325 | /*position: absolute;*/ 326 | flex:none; 327 | z-index: 1; 328 | top: 9px; 329 | right: 10px; 330 | color: #fff; 331 | border: none; 332 | background: #248A52; 333 | font-size: 10px; 334 | text-transform: uppercase; 335 | line-height: 1; 336 | padding: 6px 10px; 337 | border-radius: 10px; 338 | outline: none !important; 339 | -webkit-transition: background .2s ease; 340 | transition: background .2s ease; 341 | } 342 | 343 | .message-box .message-submit:hover { 344 | background: #1D7745; 345 | } 346 | 347 | /*-------------------- 348 | Custom Srollbar 349 | --------------------*/ 350 | 351 | .mCSB_scrollTools { 352 | margin: 1px -3px 1px 0; 353 | opacity: 0; 354 | } 355 | 356 | .mCSB_inside > .mCSB_container { 357 | margin-right: 0px; 358 | padding: 0 10px; 359 | } 360 | 361 | .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { 362 | background-color: rgba(0, 0, 0, 0.5) !important; 363 | } 364 | 365 | /*-------------------- 366 | Bounce 367 | --------------------*/ 368 | 369 | @-webkit-keyframes bounce { 370 | 0% { 371 | -webkit-transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 372 | transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 373 | } 374 | 4.7% { 375 | -webkit-transform: matrix3d(0.45, 0, 0, 0, 0, 0.45, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 376 | transform: matrix3d(0.45, 0, 0, 0, 0, 0.45, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 377 | } 378 | 9.41% { 379 | -webkit-transform: matrix3d(0.883, 0, 0, 0, 0, 0.883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 380 | transform: matrix3d(0.883, 0, 0, 0, 0, 0.883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 381 | } 382 | 14.11% { 383 | -webkit-transform: matrix3d(1.141, 0, 0, 0, 0, 1.141, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 384 | transform: matrix3d(1.141, 0, 0, 0, 0, 1.141, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 385 | } 386 | 18.72% { 387 | -webkit-transform: matrix3d(1.212, 0, 0, 0, 0, 1.212, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 388 | transform: matrix3d(1.212, 0, 0, 0, 0, 1.212, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 389 | } 390 | 24.32% { 391 | -webkit-transform: matrix3d(1.151, 0, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 392 | transform: matrix3d(1.151, 0, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 393 | } 394 | 29.93% { 395 | -webkit-transform: matrix3d(1.048, 0, 0, 0, 0, 1.048, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 396 | transform: matrix3d(1.048, 0, 0, 0, 0, 1.048, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 397 | } 398 | 35.54% { 399 | -webkit-transform: matrix3d(0.979, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 400 | transform: matrix3d(0.979, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 401 | } 402 | 41.04% { 403 | -webkit-transform: matrix3d(0.961, 0, 0, 0, 0, 0.961, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 404 | transform: matrix3d(0.961, 0, 0, 0, 0, 0.961, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 405 | } 406 | 52.15% { 407 | -webkit-transform: matrix3d(0.991, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 408 | transform: matrix3d(0.991, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 409 | } 410 | 63.26% { 411 | -webkit-transform: matrix3d(1.007, 0, 0, 0, 0, 1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 412 | transform: matrix3d(1.007, 0, 0, 0, 0, 1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 413 | } 414 | 85.49% { 415 | -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 416 | transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 417 | } 418 | 100% { 419 | -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 420 | transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 421 | } 422 | } 423 | 424 | @keyframes bounce { 425 | 0% { 426 | -webkit-transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 427 | transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 428 | } 429 | 4.7% { 430 | -webkit-transform: matrix3d(0.45, 0, 0, 0, 0, 0.45, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 431 | transform: matrix3d(0.45, 0, 0, 0, 0, 0.45, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 432 | } 433 | 9.41% { 434 | -webkit-transform: matrix3d(0.883, 0, 0, 0, 0, 0.883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 435 | transform: matrix3d(0.883, 0, 0, 0, 0, 0.883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 436 | } 437 | 14.11% { 438 | -webkit-transform: matrix3d(1.141, 0, 0, 0, 0, 1.141, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 439 | transform: matrix3d(1.141, 0, 0, 0, 0, 1.141, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 440 | } 441 | 18.72% { 442 | -webkit-transform: matrix3d(1.212, 0, 0, 0, 0, 1.212, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 443 | transform: matrix3d(1.212, 0, 0, 0, 0, 1.212, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 444 | } 445 | 24.32% { 446 | -webkit-transform: matrix3d(1.151, 0, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 447 | transform: matrix3d(1.151, 0, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 448 | } 449 | 29.93% { 450 | -webkit-transform: matrix3d(1.048, 0, 0, 0, 0, 1.048, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 451 | transform: matrix3d(1.048, 0, 0, 0, 0, 1.048, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 452 | } 453 | 35.54% { 454 | -webkit-transform: matrix3d(0.979, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 455 | transform: matrix3d(0.979, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 456 | } 457 | 41.04% { 458 | -webkit-transform: matrix3d(0.961, 0, 0, 0, 0, 0.961, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 459 | transform: matrix3d(0.961, 0, 0, 0, 0, 0.961, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 460 | } 461 | 52.15% { 462 | -webkit-transform: matrix3d(0.991, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 463 | transform: matrix3d(0.991, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 464 | } 465 | 63.26% { 466 | -webkit-transform: matrix3d(1.007, 0, 0, 0, 0, 1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 467 | transform: matrix3d(1.007, 0, 0, 0, 0, 1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 468 | } 469 | 85.49% { 470 | -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 471 | transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 472 | } 473 | 100% { 474 | -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 475 | transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 476 | } 477 | } 478 | 479 | @-webkit-keyframes ball { 480 | from { 481 | -webkit-transform: translateY(0) scaleY(0.8); 482 | transform: translateY(0) scaleY(0.8); 483 | } 484 | to { 485 | -webkit-transform: translateY(-10px); 486 | transform: translateY(-10px); 487 | } 488 | } 489 | 490 | @keyframes ball { 491 | from { 492 | -webkit-transform: translateY(0) scaleY(0.8); 493 | transform: translateY(0) scaleY(0.8); 494 | } 495 | to { 496 | -webkit-transform: translateY(-10px); 497 | transform: translateY(-10px); 498 | } 499 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Coolpy7ChatDemo 8 | 9 | 10 | 11 | 12 | 13 |
14 |

15 | C 16 | oo 17 | l 18 | p 19 | y 20 | 7. 21 |

22 |
23 |
24 |
25 | 26 | 27 |
28 |
29 | 30 | 31 |
32 |
33 | 34 | 42 |
43 |
44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /js/chat.js: -------------------------------------------------------------------------------- 1 | var $messages = $('.messages-content'), 2 | d, h, m, 3 | i = 0; 4 | 5 | $(window).load(function () { 6 | $messages.mCustomScrollbar(); 7 | // setTimeout(function () { 8 | // fakeMessage(); 9 | // }, 100); 10 | }); 11 | 12 | function updateScrollbar() { 13 | $messages.mCustomScrollbar("update").mCustomScrollbar('scrollTo', 'bottom', { 14 | scrollInertia: 10, 15 | timeout: 0 16 | }); 17 | } 18 | 19 | function setDate() { 20 | d = new Date() 21 | if (m != d.getMinutes()) { 22 | m = d.getMinutes(); 23 | $('
' + d.getHours() + ':' + m + '
').appendTo($('.message:last')); 24 | } 25 | } 26 | 27 | function insertMessage(msg) { 28 | $('
' + msg + '
').appendTo($('.mCSB_container')).addClass('new'); 29 | setDate(); 30 | updateScrollbar(); 31 | // setTimeout(function () { 32 | // fakeMessage(); 33 | // }, 1000 + (Math.random() * 20) * 100); 34 | } 35 | 36 | // var Fake = [ 37 | // 'Hi there, I\'m Fabio and you?', 38 | // 'Nice to meet you', 39 | // 'How are you?', 40 | // 'Not too bad, thanks', 41 | // 'What do you do?', 42 | // 'That\'s awesome', 43 | // 'Codepen is a nice place to stay', 44 | // 'I think you\'re a nice person', 45 | // 'Why do you think that?', 46 | // 'Can you explain?', 47 | // 'Anyway I\'ve gotta go now', 48 | // 'It was a pleasure chat with you', 49 | // 'Time to make a new codepen', 50 | // 'Bye', 51 | // ':)' 52 | // ]; 53 | 54 | function fakeMessage(msg) { 55 | $('
' + msg + '
').appendTo($('.mCSB_container')).addClass('new'); 56 | setDate(); 57 | updateScrollbar(); 58 | } 59 | 60 | // function fakeMessage(msg) { 61 | // // if ($('.message-input').val() !== '') { 62 | // // return false; 63 | // // } 64 | // $('
').appendTo($('.mCSB_container')); 65 | // updateScrollbar(); 66 | // 67 | // setTimeout(function () { 68 | // $('.message.loading').remove(); 69 | // $('
' + msg + '
').appendTo($('.mCSB_container')).addClass('new'); 70 | // setDate(); 71 | // updateScrollbar(); 72 | // i++; 73 | // }, 1000 + (Math.random() * 20) * 100); 74 | // } -------------------------------------------------------------------------------- /js/index.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { 2 | //submit function 3 | $('#submit').click(function(e) { 4 | var btn = $(this), 5 | spinner = btn.children('.spinner'), 6 | text = btn.children('.text'); 7 | 8 | 9 | if ($("form")[0].checkValidity()) { 10 | e.preventDefault(); 11 | 12 | text.hide(0); 13 | spinner.fadeIn(); 14 | 15 | var userid = $('#userid').val(); 16 | var mail = $('#email').val(); 17 | if (userid.length >= 0 && mail.length >= 0) { 18 | $('#userid').val(null); 19 | $('#email').val(null); 20 | // console.log('validated!'); 21 | spinner.fadeOut(300, function() { 22 | text.html('Succcess!!!').show(0); 23 | btn.prop('disabled', true); 24 | $('.captchaDiv').toggleClass('close'); 25 | $('.formData').addClass('disabled'); 26 | window.location.href = '/Cp7Chat/chat.html?uid='+userid+'&email='+mail; 27 | }); 28 | } else { 29 | spinner.fadeOut(300, function() { 30 | text.html('登陆失败 :(').show(0); 31 | }); 32 | } 33 | } 34 | }); 35 | }); -------------------------------------------------------------------------------- /js/jquery.mCustomScrollbar.concat.min.js: -------------------------------------------------------------------------------- 1 | /* == jquery mousewheel plugin == Version: 3.1.13, License: MIT License (MIT) */ 2 | !function(a){"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a:a(jQuery)}(function(a){function b(b){var g=b||window.event,h=i.call(arguments,1),j=0,l=0,m=0,n=0,o=0,p=0;if(b=a.event.fix(g),b.type="mousewheel","detail"in g&&(m=-1*g.detail),"wheelDelta"in g&&(m=g.wheelDelta),"wheelDeltaY"in g&&(m=g.wheelDeltaY),"wheelDeltaX"in g&&(l=-1*g.wheelDeltaX),"axis"in g&&g.axis===g.HORIZONTAL_AXIS&&(l=-1*m,m=0),j=0===m?l:m,"deltaY"in g&&(m=-1*g.deltaY,j=m),"deltaX"in g&&(l=g.deltaX,0===m&&(j=-1*l)),0!==m||0!==l){if(1===g.deltaMode){var q=a.data(this,"mousewheel-line-height");j*=q,m*=q,l*=q}else if(2===g.deltaMode){var r=a.data(this,"mousewheel-page-height");j*=r,m*=r,l*=r}if(n=Math.max(Math.abs(m),Math.abs(l)),(!f||f>n)&&(f=n,d(g,n)&&(f/=40)),d(g,n)&&(j/=40,l/=40,m/=40),j=Math[j>=1?"floor":"ceil"](j/f),l=Math[l>=1?"floor":"ceil"](l/f),m=Math[m>=1?"floor":"ceil"](m/f),k.settings.normalizeOffset&&this.getBoundingClientRect){var s=this.getBoundingClientRect();o=b.clientX-s.left,p=b.clientY-s.top}return b.deltaX=l,b.deltaY=m,b.deltaFactor=f,b.offsetX=o,b.offsetY=p,b.deltaMode=0,h.unshift(b,j,l,m),e&&clearTimeout(e),e=setTimeout(c,200),(a.event.dispatch||a.event.handle).apply(this,h)}}function c(){f=null}function d(a,b){return k.settings.adjustOldDeltas&&"mousewheel"===a.type&&b%120===0}var e,f,g=["wheel","mousewheel","DOMMouseScroll","MozMousePixelScroll"],h="onwheel"in document||document.documentMode>=9?["wheel"]:["mousewheel","DomMouseScroll","MozMousePixelScroll"],i=Array.prototype.slice;if(a.event.fixHooks)for(var j=g.length;j;)a.event.fixHooks[g[--j]]=a.event.mouseHooks;var k=a.event.special.mousewheel={version:"3.1.12",setup:function(){if(this.addEventListener)for(var c=h.length;c;)this.addEventListener(h[--c],b,!1);else this.onmousewheel=b;a.data(this,"mousewheel-line-height",k.getLineHeight(this)),a.data(this,"mousewheel-page-height",k.getPageHeight(this))},teardown:function(){if(this.removeEventListener)for(var c=h.length;c;)this.removeEventListener(h[--c],b,!1);else this.onmousewheel=null;a.removeData(this,"mousewheel-line-height"),a.removeData(this,"mousewheel-page-height")},getLineHeight:function(b){var c=a(b),d=c["offsetParent"in a.fn?"offsetParent":"parent"]();return d.length||(d=a("body")),parseInt(d.css("fontSize"),10)||parseInt(c.css("fontSize"),10)||16},getPageHeight:function(b){return a(b).height()},settings:{adjustOldDeltas:!0,normalizeOffset:!0}};a.fn.extend({mousewheel:function(a){return a?this.bind("mousewheel",a):this.trigger("mousewheel")},unmousewheel:function(a){return this.unbind("mousewheel",a)}})});!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a:a(jQuery)}(function(a){function b(b){var g=b||window.event,h=i.call(arguments,1),j=0,l=0,m=0,n=0,o=0,p=0;if(b=a.event.fix(g),b.type="mousewheel","detail"in g&&(m=-1*g.detail),"wheelDelta"in g&&(m=g.wheelDelta),"wheelDeltaY"in g&&(m=g.wheelDeltaY),"wheelDeltaX"in g&&(l=-1*g.wheelDeltaX),"axis"in g&&g.axis===g.HORIZONTAL_AXIS&&(l=-1*m,m=0),j=0===m?l:m,"deltaY"in g&&(m=-1*g.deltaY,j=m),"deltaX"in g&&(l=g.deltaX,0===m&&(j=-1*l)),0!==m||0!==l){if(1===g.deltaMode){var q=a.data(this,"mousewheel-line-height");j*=q,m*=q,l*=q}else if(2===g.deltaMode){var r=a.data(this,"mousewheel-page-height");j*=r,m*=r,l*=r}if(n=Math.max(Math.abs(m),Math.abs(l)),(!f||f>n)&&(f=n,d(g,n)&&(f/=40)),d(g,n)&&(j/=40,l/=40,m/=40),j=Math[j>=1?"floor":"ceil"](j/f),l=Math[l>=1?"floor":"ceil"](l/f),m=Math[m>=1?"floor":"ceil"](m/f),k.settings.normalizeOffset&&this.getBoundingClientRect){var s=this.getBoundingClientRect();o=b.clientX-s.left,p=b.clientY-s.top}return b.deltaX=l,b.deltaY=m,b.deltaFactor=f,b.offsetX=o,b.offsetY=p,b.deltaMode=0,h.unshift(b,j,l,m),e&&clearTimeout(e),e=setTimeout(c,200),(a.event.dispatch||a.event.handle).apply(this,h)}}function c(){f=null}function d(a,b){return k.settings.adjustOldDeltas&&"mousewheel"===a.type&&b%120===0}var e,f,g=["wheel","mousewheel","DOMMouseScroll","MozMousePixelScroll"],h="onwheel"in document||document.documentMode>=9?["wheel"]:["mousewheel","DomMouseScroll","MozMousePixelScroll"],i=Array.prototype.slice;if(a.event.fixHooks)for(var j=g.length;j;)a.event.fixHooks[g[--j]]=a.event.mouseHooks;var k=a.event.special.mousewheel={version:"3.1.12",setup:function(){if(this.addEventListener)for(var c=h.length;c;)this.addEventListener(h[--c],b,!1);else this.onmousewheel=b;a.data(this,"mousewheel-line-height",k.getLineHeight(this)),a.data(this,"mousewheel-page-height",k.getPageHeight(this))},teardown:function(){if(this.removeEventListener)for(var c=h.length;c;)this.removeEventListener(h[--c],b,!1);else this.onmousewheel=null;a.removeData(this,"mousewheel-line-height"),a.removeData(this,"mousewheel-page-height")},getLineHeight:function(b){var c=a(b),d=c["offsetParent"in a.fn?"offsetParent":"parent"]();return d.length||(d=a("body")),parseInt(d.css("fontSize"),10)||parseInt(c.css("fontSize"),10)||16},getPageHeight:function(b){return a(b).height()},settings:{adjustOldDeltas:!0,normalizeOffset:!0}};a.fn.extend({mousewheel:function(a){return a?this.bind("mousewheel",a):this.trigger("mousewheel")},unmousewheel:function(a){return this.unbind("mousewheel",a)}})}); 3 | /* == malihu jquery custom scrollbar plugin == Version: 3.1.3, License: MIT License (MIT) */ 4 | !function(e){"undefined"!=typeof module&&module.exports?module.exports=e:e(jQuery,window,document)}(function(e){!function(t){var o="function"==typeof define&&define.amd,a="undefined"!=typeof module&&module.exports,n="https:"==document.location.protocol?"https:":"http:",i="cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js";o||(a?require("jquery-mousewheel")(e):e.event.special.mousewheel||e("head").append(decodeURI("%3Cscript src="+n+"//"+i+"%3E%3C/script%3E"))),t()}(function(){var t,o="mCustomScrollbar",a="mCS",n=".mCustomScrollbar",i={setTop:0,setLeft:0,axis:"y",scrollbarPosition:"inside",scrollInertia:950,autoDraggerLength:!0,alwaysShowScrollbar:0,snapOffset:0,mouseWheel:{enable:!0,scrollAmount:"auto",axis:"y",deltaFactor:"auto",disableOver:["select","option","keygen","datalist","textarea"]},scrollButtons:{scrollType:"stepless",scrollAmount:"auto"},keyboard:{enable:!0,scrollType:"stepless",scrollAmount:"auto"},contentTouchScroll:25,documentTouchScroll:!0,advanced:{autoScrollOnFocus:"input,textarea,select,button,datalist,keygen,a[tabindex],area,object,[contenteditable='true']",updateOnContentResize:!0,updateOnImageLoad:"auto",autoUpdateTimeout:60},theme:"light",callbacks:{onTotalScrollOffset:0,onTotalScrollBackOffset:0,alwaysTriggerOffsets:!0}},r=0,l={},s=window.attachEvent&&!window.addEventListener?1:0,c=!1,d=["mCSB_dragger_onDrag","mCSB_scrollTools_onDrag","mCS_img_loaded","mCS_disabled","mCS_destroyed","mCS_no_scrollbar","mCS-autoHide","mCS-dir-rtl","mCS_no_scrollbar_y","mCS_no_scrollbar_x","mCS_y_hidden","mCS_x_hidden","mCSB_draggerContainer","mCSB_buttonUp","mCSB_buttonDown","mCSB_buttonLeft","mCSB_buttonRight"],u={init:function(t){var t=e.extend(!0,{},i,t),o=f.call(this);if(t.live){var s=t.liveSelector||this.selector||n,c=e(s);if("off"===t.live)return void m(s);l[s]=setTimeout(function(){c.mCustomScrollbar(t),"once"===t.live&&c.length&&m(s)},500)}else m(s);return t.setWidth=t.set_width?t.set_width:t.setWidth,t.setHeight=t.set_height?t.set_height:t.setHeight,t.axis=t.horizontalScroll?"x":p(t.axis),t.scrollInertia=t.scrollInertia>0&&t.scrollInertia<17?17:t.scrollInertia,"object"!=typeof t.mouseWheel&&1==t.mouseWheel&&(t.mouseWheel={enable:!0,scrollAmount:"auto",axis:"y",preventDefault:!1,deltaFactor:"auto",normalizeDelta:!1,invert:!1}),t.mouseWheel.scrollAmount=t.mouseWheelPixels?t.mouseWheelPixels:t.mouseWheel.scrollAmount,t.mouseWheel.normalizeDelta=t.advanced.normalizeMouseWheelDelta?t.advanced.normalizeMouseWheelDelta:t.mouseWheel.normalizeDelta,t.scrollButtons.scrollType=g(t.scrollButtons.scrollType),h(t),e(o).each(function(){var o=e(this);if(!o.data(a)){o.data(a,{idx:++r,opt:t,scrollRatio:{y:null,x:null},overflowed:null,contentReset:{y:null,x:null},bindEvents:!1,tweenRunning:!1,sequential:{},langDir:o.css("direction"),cbOffsets:null,trigger:null,poll:{size:{o:0,n:0},img:{o:0,n:0},change:{o:0,n:0}}});var n=o.data(a),i=n.opt,l=o.data("mcs-axis"),s=o.data("mcs-scrollbar-position"),c=o.data("mcs-theme");l&&(i.axis=l),s&&(i.scrollbarPosition=s),c&&(i.theme=c,h(i)),v.call(this),n&&i.callbacks.onCreate&&"function"==typeof i.callbacks.onCreate&&i.callbacks.onCreate.call(this),e("#mCSB_"+n.idx+"_container img:not(."+d[2]+")").addClass(d[2]),u.update.call(null,o)}})},update:function(t,o){var n=t||f.call(this);return e(n).each(function(){var t=e(this);if(t.data(a)){var n=t.data(a),i=n.opt,r=e("#mCSB_"+n.idx+"_container"),l=e("#mCSB_"+n.idx),s=[e("#mCSB_"+n.idx+"_dragger_vertical"),e("#mCSB_"+n.idx+"_dragger_horizontal")];if(!r.length)return;n.tweenRunning&&N(t),o&&n&&i.callbacks.onBeforeUpdate&&"function"==typeof i.callbacks.onBeforeUpdate&&i.callbacks.onBeforeUpdate.call(this),t.hasClass(d[3])&&t.removeClass(d[3]),t.hasClass(d[4])&&t.removeClass(d[4]),l.css("max-height","none"),l.height()!==t.height()&&l.css("max-height",t.height()),_.call(this),"y"===i.axis||i.advanced.autoExpandHorizontalScroll||r.css("width",x(r)),n.overflowed=y.call(this),M.call(this),i.autoDraggerLength&&S.call(this),b.call(this),T.call(this);var c=[Math.abs(r[0].offsetTop),Math.abs(r[0].offsetLeft)];"x"!==i.axis&&(n.overflowed[0]?s[0].height()>s[0].parent().height()?B.call(this):(V(t,c[0].toString(),{dir:"y",dur:0,overwrite:"none"}),n.contentReset.y=null):(B.call(this),"y"===i.axis?k.call(this):"yx"===i.axis&&n.overflowed[1]&&V(t,c[1].toString(),{dir:"x",dur:0,overwrite:"none"}))),"y"!==i.axis&&(n.overflowed[1]?s[1].width()>s[1].parent().width()?B.call(this):(V(t,c[1].toString(),{dir:"x",dur:0,overwrite:"none"}),n.contentReset.x=null):(B.call(this),"x"===i.axis?k.call(this):"yx"===i.axis&&n.overflowed[0]&&V(t,c[0].toString(),{dir:"y",dur:0,overwrite:"none"}))),o&&n&&(2===o&&i.callbacks.onImageLoad&&"function"==typeof i.callbacks.onImageLoad?i.callbacks.onImageLoad.call(this):3===o&&i.callbacks.onSelectorChange&&"function"==typeof i.callbacks.onSelectorChange?i.callbacks.onSelectorChange.call(this):i.callbacks.onUpdate&&"function"==typeof i.callbacks.onUpdate&&i.callbacks.onUpdate.call(this)),X.call(this)}})},scrollTo:function(t,o){if("undefined"!=typeof t&&null!=t){var n=f.call(this);return e(n).each(function(){var n=e(this);if(n.data(a)){var i=n.data(a),r=i.opt,l={trigger:"external",scrollInertia:r.scrollInertia,scrollEasing:"mcsEaseInOut",moveDragger:!1,timeout:60,callbacks:!0,onStart:!0,onUpdate:!0,onComplete:!0},s=e.extend(!0,{},l,o),c=q.call(this,t),d=s.scrollInertia>0&&s.scrollInertia<17?17:s.scrollInertia;c[0]=Y.call(this,c[0],"y"),c[1]=Y.call(this,c[1],"x"),s.moveDragger&&(c[0]*=i.scrollRatio.y,c[1]*=i.scrollRatio.x),s.dur=oe()?0:d,setTimeout(function(){null!==c[0]&&"undefined"!=typeof c[0]&&"x"!==r.axis&&i.overflowed[0]&&(s.dir="y",s.overwrite="all",V(n,c[0].toString(),s)),null!==c[1]&&"undefined"!=typeof c[1]&&"y"!==r.axis&&i.overflowed[1]&&(s.dir="x",s.overwrite="none",V(n,c[1].toString(),s))},s.timeout)}})}},stop:function(){var t=f.call(this);return e(t).each(function(){var t=e(this);t.data(a)&&N(t)})},disable:function(t){var o=f.call(this);return e(o).each(function(){var o=e(this);if(o.data(a)){{o.data(a)}X.call(this,"remove"),k.call(this),t&&B.call(this),M.call(this,!0),o.addClass(d[3])}})},destroy:function(){var t=f.call(this);return e(t).each(function(){var n=e(this);if(n.data(a)){var i=n.data(a),r=i.opt,l=e("#mCSB_"+i.idx),s=e("#mCSB_"+i.idx+"_container"),c=e(".mCSB_"+i.idx+"_scrollbar");r.live&&m(r.liveSelector||e(t).selector),X.call(this,"remove"),k.call(this),B.call(this),n.removeData(a),K(this,"mcs"),c.remove(),s.find("img."+d[2]).removeClass(d[2]),l.replaceWith(s.contents()),n.removeClass(o+" _"+a+"_"+i.idx+" "+d[6]+" "+d[7]+" "+d[5]+" "+d[3]).addClass(d[4])}})}},f=function(){return"object"!=typeof e(this)||e(this).length<1?n:this},h=function(t){var o=["rounded","rounded-dark","rounded-dots","rounded-dots-dark"],a=["rounded-dots","rounded-dots-dark","3d","3d-dark","3d-thick","3d-thick-dark","inset","inset-dark","inset-2","inset-2-dark","inset-3","inset-3-dark"],n=["minimal","minimal-dark"],i=["minimal","minimal-dark"],r=["minimal","minimal-dark"];t.autoDraggerLength=e.inArray(t.theme,o)>-1?!1:t.autoDraggerLength,t.autoExpandScrollbar=e.inArray(t.theme,a)>-1?!1:t.autoExpandScrollbar,t.scrollButtons.enable=e.inArray(t.theme,n)>-1?!1:t.scrollButtons.enable,t.autoHideScrollbar=e.inArray(t.theme,i)>-1?!0:t.autoHideScrollbar,t.scrollbarPosition=e.inArray(t.theme,r)>-1?"outside":t.scrollbarPosition},m=function(e){l[e]&&(clearTimeout(l[e]),K(l,e))},p=function(e){return"yx"===e||"xy"===e||"auto"===e?"yx":"x"===e||"horizontal"===e?"x":"y"},g=function(e){return"stepped"===e||"pixels"===e||"step"===e||"click"===e?"stepped":"stepless"},v=function(){var t=e(this),n=t.data(a),i=n.opt,r=i.autoExpandScrollbar?" "+d[1]+"_expand":"",l=["
","
"],s="yx"===i.axis?"mCSB_vertical_horizontal":"x"===i.axis?"mCSB_horizontal":"mCSB_vertical",c="yx"===i.axis?l[0]+l[1]:"x"===i.axis?l[1]:l[0],u="yx"===i.axis?"
":"",f=i.autoHideScrollbar?" "+d[6]:"",h="x"!==i.axis&&"rtl"===n.langDir?" "+d[7]:"";i.setWidth&&t.css("width",i.setWidth),i.setHeight&&t.css("height",i.setHeight),i.setLeft="y"!==i.axis&&"rtl"===n.langDir?"989999px":i.setLeft,t.addClass(o+" _"+a+"_"+n.idx+f+h).wrapInner("
");var m=e("#mCSB_"+n.idx),p=e("#mCSB_"+n.idx+"_container");"y"===i.axis||i.advanced.autoExpandHorizontalScroll||p.css("width",x(p)),"outside"===i.scrollbarPosition?("static"===t.css("position")&&t.css("position","relative"),t.css("overflow","visible"),m.addClass("mCSB_outside").after(c)):(m.addClass("mCSB_inside").append(c),p.wrap(u)),w.call(this);var g=[e("#mCSB_"+n.idx+"_dragger_vertical"),e("#mCSB_"+n.idx+"_dragger_horizontal")];g[0].css("min-height",g[0].height()),g[1].css("min-width",g[1].width())},x=function(t){var o=[t[0].scrollWidth,Math.max.apply(Math,t.children().map(function(){return e(this).outerWidth(!0)}).get())],a=t.parent().width();return o[0]>a?o[0]:o[1]>a?o[1]:"100%"},_=function(){var t=e(this),o=t.data(a),n=o.opt,i=e("#mCSB_"+o.idx+"_container");if(n.advanced.autoExpandHorizontalScroll&&"y"!==n.axis){i.css({width:"auto","min-width":0,"overflow-x":"scroll"});var r=Math.ceil(i[0].scrollWidth);3===n.advanced.autoExpandHorizontalScroll||2!==n.advanced.autoExpandHorizontalScroll&&r>i.parent().width()?i.css({width:r,"min-width":"100%","overflow-x":"inherit"}):i.css({"overflow-x":"inherit",position:"absolute"}).wrap("
").css({width:Math.ceil(i[0].getBoundingClientRect().right+.4)-Math.floor(i[0].getBoundingClientRect().left),"min-width":"100%",position:"relative"}).unwrap()}},w=function(){var t=e(this),o=t.data(a),n=o.opt,i=e(".mCSB_"+o.idx+"_scrollbar:first"),r=ee(n.scrollButtons.tabindex)?"tabindex='"+n.scrollButtons.tabindex+"'":"",l=["","","",""],s=["x"===n.axis?l[2]:l[0],"x"===n.axis?l[3]:l[1],l[2],l[3]];n.scrollButtons.enable&&i.prepend(s[0]).append(s[1]).next(".mCSB_scrollTools").prepend(s[2]).append(s[3])},S=function(){var t=e(this),o=t.data(a),n=e("#mCSB_"+o.idx),i=e("#mCSB_"+o.idx+"_container"),r=[e("#mCSB_"+o.idx+"_dragger_vertical"),e("#mCSB_"+o.idx+"_dragger_horizontal")],l=[n.height()/i.outerHeight(!1),n.width()/i.outerWidth(!1)],c=[parseInt(r[0].css("min-height")),Math.round(l[0]*r[0].parent().height()),parseInt(r[1].css("min-width")),Math.round(l[1]*r[1].parent().width())],d=s&&c[1]r&&(r=s),c>l&&(l=c),[r>n.height(),l>n.width()]},B=function(){var t=e(this),o=t.data(a),n=o.opt,i=e("#mCSB_"+o.idx),r=e("#mCSB_"+o.idx+"_container"),l=[e("#mCSB_"+o.idx+"_dragger_vertical"),e("#mCSB_"+o.idx+"_dragger_horizontal")];if(N(t),("x"!==n.axis&&!o.overflowed[0]||"y"===n.axis&&o.overflowed[0])&&(l[0].add(r).css("top",0),V(t,"_resetY")),"y"!==n.axis&&!o.overflowed[1]||"x"===n.axis&&o.overflowed[1]){var s=dx=0;"rtl"===o.langDir&&(s=i.width()-r.outerWidth(!1),dx=Math.abs(s/o.scrollRatio.x)),r.css("left",s),l[1].css("left",dx),V(t,"_resetX")}},T=function(){function t(){r=setTimeout(function(){e.event.special.mousewheel?(clearTimeout(r),R.call(o[0])):t()},100)}var o=e(this),n=o.data(a),i=n.opt;if(!n.bindEvents){if(I.call(this),i.contentTouchScroll&&D.call(this),E.call(this),i.mouseWheel.enable){var r;t()}L.call(this),P.call(this),i.advanced.autoScrollOnFocus&&z.call(this),i.scrollButtons.enable&&H.call(this),i.keyboard.enable&&U.call(this),n.bindEvents=!0}},k=function(){var t=e(this),o=t.data(a),n=o.opt,i=a+"_"+o.idx,r=".mCSB_"+o.idx+"_scrollbar",l=e("#mCSB_"+o.idx+",#mCSB_"+o.idx+"_container,#mCSB_"+o.idx+"_container_wrapper,"+r+" ."+d[12]+",#mCSB_"+o.idx+"_dragger_vertical,#mCSB_"+o.idx+"_dragger_horizontal,"+r+">a"),s=e("#mCSB_"+o.idx+"_container");n.advanced.releaseDraggableSelectors&&l.add(e(n.advanced.releaseDraggableSelectors)),n.advanced.extraDraggableSelectors&&l.add(e(n.advanced.extraDraggableSelectors)),o.bindEvents&&(e(document).add(e(!W()||top.document)).unbind("."+i),l.each(function(){e(this).unbind("."+i)}),clearTimeout(t[0]._focusTimeout),K(t[0],"_focusTimeout"),clearTimeout(o.sequential.step),K(o.sequential,"step"),clearTimeout(s[0].onCompleteTimeout),K(s[0],"onCompleteTimeout"),o.bindEvents=!1)},M=function(t){var o=e(this),n=o.data(a),i=n.opt,r=e("#mCSB_"+n.idx+"_container_wrapper"),l=r.length?r:e("#mCSB_"+n.idx+"_container"),s=[e("#mCSB_"+n.idx+"_scrollbar_vertical"),e("#mCSB_"+n.idx+"_scrollbar_horizontal")],c=[s[0].find(".mCSB_dragger"),s[1].find(".mCSB_dragger")];"x"!==i.axis&&(n.overflowed[0]&&!t?(s[0].add(c[0]).add(s[0].children("a")).css("display","block"),l.removeClass(d[8]+" "+d[10])):(i.alwaysShowScrollbar?(2!==i.alwaysShowScrollbar&&c[0].css("display","none"),l.removeClass(d[10])):(s[0].css("display","none"),l.addClass(d[10])),l.addClass(d[8]))),"y"!==i.axis&&(n.overflowed[1]&&!t?(s[1].add(c[1]).add(s[1].children("a")).css("display","block"),l.removeClass(d[9]+" "+d[11])):(i.alwaysShowScrollbar?(2!==i.alwaysShowScrollbar&&c[1].css("display","none"),l.removeClass(d[11])):(s[1].css("display","none"),l.addClass(d[11])),l.addClass(d[9]))),n.overflowed[0]||n.overflowed[1]?o.removeClass(d[5]):o.addClass(d[5])},O=function(t){var o=t.type,a=t.target.ownerDocument!==document?[e(frameElement).offset().top,e(frameElement).offset().left]:null,n=W()&&t.target.ownerDocument!==top.document?[e(t.view.frameElement).offset().top,e(t.view.frameElement).offset().left]:[0,0];switch(o){case"pointerdown":case"MSPointerDown":case"pointermove":case"MSPointerMove":case"pointerup":case"MSPointerUp":return a?[t.originalEvent.pageY-a[0]+n[0],t.originalEvent.pageX-a[1]+n[1],!1]:[t.originalEvent.pageY,t.originalEvent.pageX,!1];case"touchstart":case"touchmove":case"touchend":var i=t.originalEvent.touches[0]||t.originalEvent.changedTouches[0],r=t.originalEvent.touches.length||t.originalEvent.changedTouches.length;return t.target.ownerDocument!==document?[i.screenY,i.screenX,r>1]:[i.pageY,i.pageX,r>1];default:return a?[t.pageY-a[0]+n[0],t.pageX-a[1]+n[1],!1]:[t.pageY,t.pageX,!1]}},I=function(){function t(e){var t=m.find("iframe");if(t.length){var o=e?"auto":"none";t.css("pointer-events",o)}}function o(e,t,o,a){if(m[0].idleTimer=u.scrollInertia<233?250:0,n.attr("id")===h[1])var i="x",r=(n[0].offsetLeft-t+a)*d.scrollRatio.x;else var i="y",r=(n[0].offsetTop-e+o)*d.scrollRatio.y;V(l,r.toString(),{dir:i,drag:!0})}var n,i,r,l=e(this),d=l.data(a),u=d.opt,f=a+"_"+d.idx,h=["mCSB_"+d.idx+"_dragger_vertical","mCSB_"+d.idx+"_dragger_horizontal"],m=e("#mCSB_"+d.idx+"_container"),p=e("#"+h[0]+",#"+h[1]),g=u.advanced.releaseDraggableSelectors?p.add(e(u.advanced.releaseDraggableSelectors)):p,v=u.advanced.extraDraggableSelectors?e(!W()||top.document).add(e(u.advanced.extraDraggableSelectors)):e(!W()||top.document);p.bind("mousedown."+f+" touchstart."+f+" pointerdown."+f+" MSPointerDown."+f,function(o){if(o.stopImmediatePropagation(),o.preventDefault(),Z(o)){c=!0,s&&(document.onselectstart=function(){return!1}),t(!1),N(l),n=e(this);var a=n.offset(),d=O(o)[0]-a.top,f=O(o)[1]-a.left,h=n.height()+a.top,m=n.width()+a.left;h>d&&d>0&&m>f&&f>0&&(i=d,r=f),C(n,"active",u.autoExpandScrollbar)}}).bind("touchmove."+f,function(e){e.stopImmediatePropagation(),e.preventDefault();var t=n.offset(),a=O(e)[0]-t.top,l=O(e)[1]-t.left;o(i,r,a,l)}),e(document).add(v).bind("mousemove."+f+" pointermove."+f+" MSPointerMove."+f,function(e){if(n){var t=n.offset(),a=O(e)[0]-t.top,l=O(e)[1]-t.left;if(i===a&&r===l)return;o(i,r,a,l)}}).add(g).bind("mouseup."+f+" touchend."+f+" pointerup."+f+" MSPointerUp."+f,function(e){n&&(C(n,"active",u.autoExpandScrollbar),n=null),c=!1,s&&(document.onselectstart=null),t(!0)})},D=function(){function o(e){if(!$(e)||c||O(e)[2])return void(t=0);t=1,b=0,C=0,d=1,y.removeClass("mCS_touch_action");var o=I.offset();u=O(e)[0]-o.top,f=O(e)[1]-o.left,z=[O(e)[0],O(e)[1]]}function n(e){if($(e)&&!c&&!O(e)[2]&&(T.documentTouchScroll||e.preventDefault(),e.stopImmediatePropagation(),(!C||b)&&d)){g=G();var t=M.offset(),o=O(e)[0]-t.top,a=O(e)[1]-t.left,n="mcsLinearOut";if(E.push(o),R.push(a),z[2]=Math.abs(O(e)[0]-z[0]),z[3]=Math.abs(O(e)[1]-z[1]),B.overflowed[0])var i=D[0].parent().height()-D[0].height(),r=u-o>0&&o-u>-(i*B.scrollRatio.y)&&(2*z[3]0&&a-f>-(l*B.scrollRatio.x)&&(2*z[2]30)){_=1e3/(v-p);var n="mcsEaseOut",i=2.5>_,r=i?[E[E.length-2],R[R.length-2]]:[0,0];x=i?[o-r[0],a-r[1]]:[o-h,a-m];var u=[Math.abs(x[0]),Math.abs(x[1])];_=i?[Math.abs(x[0]/4),Math.abs(x[1]/4)]:[_,_];var f=[Math.abs(I[0].offsetTop)-x[0]*l(u[0]/_[0],_[0]),Math.abs(I[0].offsetLeft)-x[1]*l(u[1]/_[1],_[1])];w="yx"===T.axis?[f[0],f[1]]:"x"===T.axis?[null,f[1]]:[f[0],null],S=[4*u[0]+T.scrollInertia,4*u[1]+T.scrollInertia];var y=parseInt(T.contentTouchScroll)||0;w[0]=u[0]>y?w[0]:0,w[1]=u[1]>y?w[1]:0,B.overflowed[0]&&s(w[0],S[0],n,"y",L,!1),B.overflowed[1]&&s(w[1],S[1],n,"x",L,!1)}}}function l(e,t){var o=[1.5*t,2*t,t/1.5,t/2];return e>90?t>4?o[0]:o[3]:e>60?t>3?o[3]:o[2]:e>30?t>8?o[1]:t>6?o[0]:t>4?t:o[2]:t>8?t:o[3]}function s(e,t,o,a,n,i){e&&V(y,e.toString(),{dur:t,scrollEasing:o,dir:a,overwrite:n,drag:i})}var d,u,f,h,m,p,g,v,x,_,w,S,b,C,y=e(this),B=y.data(a),T=B.opt,k=a+"_"+B.idx,M=e("#mCSB_"+B.idx),I=e("#mCSB_"+B.idx+"_container"),D=[e("#mCSB_"+B.idx+"_dragger_vertical"),e("#mCSB_"+B.idx+"_dragger_horizontal")],E=[],R=[],A=0,L="yx"===T.axis?"none":"all",z=[],P=I.find("iframe"),H=["touchstart."+k+" pointerdown."+k+" MSPointerDown."+k,"touchmove."+k+" pointermove."+k+" MSPointerMove."+k,"touchend."+k+" pointerup."+k+" MSPointerUp."+k],U=void 0!==document.body.style.touchAction;I.bind(H[0],function(e){o(e)}).bind(H[1],function(e){n(e)}),M.bind(H[0],function(e){i(e)}).bind(H[2],function(e){r(e)}),P.length&&P.each(function(){e(this).load(function(){W(this)&&e(this.contentDocument||this.contentWindow.document).bind(H[0],function(e){o(e),i(e)}).bind(H[1],function(e){n(e)}).bind(H[2],function(e){r(e)})})})},E=function(){function o(){return window.getSelection?window.getSelection().toString():document.selection&&"Control"!=document.selection.type?document.selection.createRange().text:0}function n(e,t,o){d.type=o&&i?"stepped":"stepless",d.scrollAmount=10,F(r,e,t,"mcsLinearOut",o?60:null)}var i,r=e(this),l=r.data(a),s=l.opt,d=l.sequential,u=a+"_"+l.idx,f=e("#mCSB_"+l.idx+"_container"),h=f.parent();f.bind("mousedown."+u,function(e){t||i||(i=1,c=!0)}).add(document).bind("mousemove."+u,function(e){if(!t&&i&&o()){var a=f.offset(),r=O(e)[0]-a.top+f[0].offsetTop,c=O(e)[1]-a.left+f[0].offsetLeft;r>0&&r0&&cr?n("on",38):r>h.height()&&n("on",40)),"y"!==s.axis&&l.overflowed[1]&&(0>c?n("on",37):c>h.width()&&n("on",39)))}}).bind("mouseup."+u+" dragend."+u,function(e){t||(i&&(i=0,n("off",null)),c=!1)})},R=function(){function t(t,a){if(N(o),!A(o,t.target)){var r="auto"!==i.mouseWheel.deltaFactor?parseInt(i.mouseWheel.deltaFactor):s&&t.deltaFactor<100?100:t.deltaFactor||100,d=i.scrollInertia;if("x"===i.axis||"x"===i.mouseWheel.axis)var u="x",f=[Math.round(r*n.scrollRatio.x),parseInt(i.mouseWheel.scrollAmount)],h="auto"!==i.mouseWheel.scrollAmount?f[1]:f[0]>=l.width()?.9*l.width():f[0],m=Math.abs(e("#mCSB_"+n.idx+"_container")[0].offsetLeft),p=c[1][0].offsetLeft,g=c[1].parent().width()-c[1].width(),v=t.deltaX||t.deltaY||a;else var u="y",f=[Math.round(r*n.scrollRatio.y),parseInt(i.mouseWheel.scrollAmount)],h="auto"!==i.mouseWheel.scrollAmount?f[1]:f[0]>=l.height()?.9*l.height():f[0],m=Math.abs(e("#mCSB_"+n.idx+"_container")[0].offsetTop),p=c[0][0].offsetTop,g=c[0].parent().height()-c[0].height(),v=t.deltaY||a;"y"===u&&!n.overflowed[0]||"x"===u&&!n.overflowed[1]||((i.mouseWheel.invert||t.webkitDirectionInvertedFromDevice)&&(v=-v),i.mouseWheel.normalizeDelta&&(v=0>v?-1:1),(v>0&&0!==p||0>v&&p!==g||i.mouseWheel.preventDefault)&&(t.stopImmediatePropagation(),t.preventDefault()),t.deltaFactor<2&&!i.mouseWheel.normalizeDelta&&(h=t.deltaFactor,d=17),V(o,(m-v*h).toString(),{dir:u,dur:d}))}}if(e(this).data(a)){var o=e(this),n=o.data(a),i=n.opt,r=a+"_"+n.idx,l=e("#mCSB_"+n.idx),c=[e("#mCSB_"+n.idx+"_dragger_vertical"),e("#mCSB_"+n.idx+"_dragger_horizontal")],d=e("#mCSB_"+n.idx+"_container").find("iframe");d.length&&d.each(function(){e(this).load(function(){W(this)&&e(this.contentDocument||this.contentWindow.document).bind("mousewheel."+r,function(e,o){t(e,o)})})}),l.bind("mousewheel."+r,function(e,o){t(e,o)})}},W=function(e){var t=null;if(e){try{var o=e.contentDocument||e.contentWindow.document;t=o.body.innerHTML}catch(a){}return null!==t}try{var o=top.document;t=o.body.innerHTML}catch(a){}return null!==t},A=function(t,o){var n=o.nodeName.toLowerCase(),i=t.data(a).opt.mouseWheel.disableOver,r=["select","textarea"];return e.inArray(n,i)>-1&&!(e.inArray(n,r)>-1&&!e(o).is(":focus"))},L=function(){var t,o=e(this),n=o.data(a),i=a+"_"+n.idx,r=e("#mCSB_"+n.idx+"_container"),l=r.parent(),s=e(".mCSB_"+n.idx+"_scrollbar ."+d[12]);s.bind("mousedown."+i+" touchstart."+i+" pointerdown."+i+" MSPointerDown."+i,function(o){c=!0,e(o.target).hasClass("mCSB_dragger")||(t=1)}).bind("touchend."+i+" pointerup."+i+" MSPointerUp."+i,function(e){c=!1}).bind("click."+i,function(a){if(t&&(t=0,e(a.target).hasClass(d[12])||e(a.target).hasClass("mCSB_draggerRail"))){N(o);var i=e(this),s=i.find(".mCSB_dragger");if(i.parent(".mCSB_scrollTools_horizontal").length>0){if(!n.overflowed[1])return;var c="x",u=a.pageX>s.offset().left?-1:1,f=Math.abs(r[0].offsetLeft)-.9*u*l.width()}else{if(!n.overflowed[0])return;var c="y",u=a.pageY>s.offset().top?-1:1,f=Math.abs(r[0].offsetTop)-.9*u*l.height()}V(o,f.toString(),{dir:c,scrollEasing:"mcsEaseInOut"})}})},z=function(){var t=e(this),o=t.data(a),n=o.opt,i=a+"_"+o.idx,r=e("#mCSB_"+o.idx+"_container"),l=r.parent();r.bind("focusin."+i,function(o){var a=e(document.activeElement),i=r.find(".mCustomScrollBox").length,s=0;a.is(n.advanced.autoScrollOnFocus)&&(N(t),clearTimeout(t[0]._focusTimeout),t[0]._focusTimer=i?(s+17)*i:0,t[0]._focusTimeout=setTimeout(function(){var e=[te(a)[0],te(a)[1]],o=[r[0].offsetTop,r[0].offsetLeft],i=[o[0]+e[0]>=0&&o[0]+e[0]=0&&o[0]+e[1]a");s.bind("mousedown."+r+" touchstart."+r+" pointerdown."+r+" MSPointerDown."+r+" mouseup."+r+" touchend."+r+" pointerup."+r+" MSPointerUp."+r+" mouseout."+r+" pointerout."+r+" MSPointerOut."+r+" click."+r,function(a){function r(e,o){i.scrollAmount=n.scrollButtons.scrollAmount,F(t,e,o)}if(a.preventDefault(),Z(a)){var l=e(this).attr("class");switch(i.type=n.scrollButtons.scrollType,a.type){case"mousedown":case"touchstart":case"pointerdown":case"MSPointerDown":if("stepped"===i.type)return;c=!0,o.tweenRunning=!1,r("on",l);break;case"mouseup":case"touchend":case"pointerup":case"MSPointerUp":case"mouseout":case"pointerout":case"MSPointerOut":if("stepped"===i.type)return;c=!1,i.dir&&r("off",l);break;case"click":if("stepped"!==i.type||o.tweenRunning)return;r("on",l)}}})},U=function(){function t(t){function a(e,t){r.type=i.keyboard.scrollType,r.scrollAmount=i.keyboard.scrollAmount,"stepped"===r.type&&n.tweenRunning||F(o,e,t)}switch(t.type){case"blur":n.tweenRunning&&r.dir&&a("off",null);break;case"keydown":case"keyup":var l=t.keyCode?t.keyCode:t.which,s="on";if("x"!==i.axis&&(38===l||40===l)||"y"!==i.axis&&(37===l||39===l)){if((38===l||40===l)&&!n.overflowed[0]||(37===l||39===l)&&!n.overflowed[1])return;"keyup"===t.type&&(s="off"),e(document.activeElement).is(u)||(t.preventDefault(),t.stopImmediatePropagation(),a(s,l))}else if(33===l||34===l){if((n.overflowed[0]||n.overflowed[1])&&(t.preventDefault(),t.stopImmediatePropagation()),"keyup"===t.type){N(o);var f=34===l?-1:1;if("x"===i.axis||"yx"===i.axis&&n.overflowed[1]&&!n.overflowed[0])var h="x",m=Math.abs(c[0].offsetLeft)-.9*f*d.width();else var h="y",m=Math.abs(c[0].offsetTop)-.9*f*d.height();V(o,m.toString(),{dir:h,scrollEasing:"mcsEaseInOut"})}}else if((35===l||36===l)&&!e(document.activeElement).is(u)&&((n.overflowed[0]||n.overflowed[1])&&(t.preventDefault(),t.stopImmediatePropagation()),"keyup"===t.type)){if("x"===i.axis||"yx"===i.axis&&n.overflowed[1]&&!n.overflowed[0])var h="x",m=35===l?Math.abs(d.width()-c.outerWidth(!1)):0;else var h="y",m=35===l?Math.abs(d.height()-c.outerHeight(!1)):0;V(o,m.toString(),{dir:h,scrollEasing:"mcsEaseInOut"})}}}var o=e(this),n=o.data(a),i=n.opt,r=n.sequential,l=a+"_"+n.idx,s=e("#mCSB_"+n.idx),c=e("#mCSB_"+n.idx+"_container"),d=c.parent(),u="input,textarea,select,datalist,keygen,[contenteditable='true']",f=c.find("iframe"),h=["blur."+l+" keydown."+l+" keyup."+l];f.length&&f.each(function(){e(this).load(function(){W(this)&&e(this.contentDocument||this.contentWindow.document).bind(h[0],function(e){t(e)})})}),s.attr("tabindex","0").bind(h[0],function(e){t(e)})},F=function(t,o,n,i,r){function l(e){u.snapAmount&&(f.scrollAmount=u.snapAmount instanceof Array?"x"===f.dir[0]?u.snapAmount[1]:u.snapAmount[0]:u.snapAmount);var o="stepped"!==f.type,a=r?r:e?o?p/1.5:g:1e3/60,n=e?o?7.5:40:2.5,s=[Math.abs(h[0].offsetTop),Math.abs(h[0].offsetLeft)],d=[c.scrollRatio.y>10?10:c.scrollRatio.y,c.scrollRatio.x>10?10:c.scrollRatio.x],m="x"===f.dir[0]?s[1]+f.dir[1]*d[1]*n:s[0]+f.dir[1]*d[0]*n,v="x"===f.dir[0]?s[1]+f.dir[1]*parseInt(f.scrollAmount):s[0]+f.dir[1]*parseInt(f.scrollAmount),x="auto"!==f.scrollAmount?v:m,_=i?i:e?o?"mcsLinearOut":"mcsEaseInOut":"mcsLinear",w=e?!0:!1;return e&&17>a&&(x="x"===f.dir[0]?s[1]:s[0]),V(t,x.toString(),{dir:f.dir[0],scrollEasing:_,dur:a,onComplete:w}),e?void(f.dir=!1):(clearTimeout(f.step),void(f.step=setTimeout(function(){l()},a)))}function s(){clearTimeout(f.step),K(f,"step"),N(t)}var c=t.data(a),u=c.opt,f=c.sequential,h=e("#mCSB_"+c.idx+"_container"),m="stepped"===f.type?!0:!1,p=u.scrollInertia<26?26:u.scrollInertia,g=u.scrollInertia<1?17:u.scrollInertia;switch(o){case"on":if(f.dir=[n===d[16]||n===d[15]||39===n||37===n?"x":"y",n===d[13]||n===d[15]||38===n||37===n?-1:1],N(t),ee(n)&&"stepped"===f.type)return;l(m);break;case"off":s(),(m||c.tweenRunning&&f.dir)&&l(!0)}},q=function(t){var o=e(this).data(a).opt,n=[];return"function"==typeof t&&(t=t()),t instanceof Array?n=t.length>1?[t[0],t[1]]:"x"===o.axis?[null,t[0]]:[t[0],null]:(n[0]=t.y?t.y:t.x||"x"===o.axis?null:t,n[1]=t.x?t.x:t.y||"y"===o.axis?null:t),"function"==typeof n[0]&&(n[0]=n[0]()),"function"==typeof n[1]&&(n[1]=n[1]()),n},Y=function(t,o){if(null!=t&&"undefined"!=typeof t){var n=e(this),i=n.data(a),r=i.opt,l=e("#mCSB_"+i.idx+"_container"),s=l.parent(),c=typeof t;o||(o="x"===r.axis?"x":"y");var d="x"===o?l.outerWidth(!1):l.outerHeight(!1),f="x"===o?l[0].offsetLeft:l[0].offsetTop,h="x"===o?"left":"top";switch(c){case"function":return t();case"object":var m=t.jquery?t:e(t);if(!m.length)return;return"x"===o?te(m)[1]:te(m)[0];case"string":case"number":if(ee(t))return Math.abs(t);if(-1!==t.indexOf("%"))return Math.abs(d*parseInt(t)/100);if(-1!==t.indexOf("-="))return Math.abs(f-parseInt(t.split("-=")[1]));if(-1!==t.indexOf("+=")){var p=f+parseInt(t.split("+=")[1]);return p>=0?0:Math.abs(p)}if(-1!==t.indexOf("px")&&ee(t.split("px")[0]))return Math.abs(t.split("px")[0]);if("top"===t||"left"===t)return 0;if("bottom"===t)return Math.abs(s.height()-l.outerHeight(!1));if("right"===t)return Math.abs(s.width()-l.outerWidth(!1));if("first"===t||"last"===t){var m=l.find(":"+t);return"x"===o?te(m)[1]:te(m)[0]}return e(t).length?"x"===o?te(e(t))[1]:te(e(t))[0]:(l.css(h,t),void u.update.call(null,n[0]))}}},X=function(t){function o(){return clearTimeout(f[0].autoUpdate),0===l.parents("html").length?void(l=null):void(f[0].autoUpdate=setTimeout(function(){return c.advanced.updateOnSelectorChange&&(s.poll.change.n=i(),s.poll.change.n!==s.poll.change.o)?(s.poll.change.o=s.poll.change.n,void r(3)):c.advanced.updateOnContentResize&&(s.poll.size.n=l[0].scrollHeight+l[0].scrollWidth+f[0].offsetHeight+l[0].offsetHeight+l[0].offsetWidth,s.poll.size.n!==s.poll.size.o)?(s.poll.size.o=s.poll.size.n,void r(1)):!c.advanced.updateOnImageLoad||"auto"===c.advanced.updateOnImageLoad&&"y"===c.axis||(s.poll.img.n=f.find("img").length,s.poll.img.n===s.poll.img.o)?void((c.advanced.updateOnSelectorChange||c.advanced.updateOnContentResize||c.advanced.updateOnImageLoad)&&o()):(s.poll.img.o=s.poll.img.n,void f.find("img").each(function(){n(this)}))},c.advanced.autoUpdateTimeout))}function n(t){function o(e,t){return function(){return t.apply(e,arguments)}}function a(){this.onload=null,e(t).addClass(d[2]),r(2)}if(e(t).hasClass(d[2]))return void r();var n=new Image;n.onload=o(n,a),n.src=t.src}function i(){c.advanced.updateOnSelectorChange===!0&&(c.advanced.updateOnSelectorChange="*");var e=0,t=f.find(c.advanced.updateOnSelectorChange); 5 | 6 | return c.advanced.updateOnSelectorChange&&t.length>0&&t.each(function(){e+=this.offsetHeight+this.offsetWidth}),e}function r(e){clearTimeout(f[0].autoUpdate),u.update.call(null,l[0],e)}var l=e(this),s=l.data(a),c=s.opt,f=e("#mCSB_"+s.idx+"_container");return t?(clearTimeout(f[0].autoUpdate),void K(f[0],"autoUpdate")):void o()},j=function(e,t,o){return Math.round(e/t)*t-o},N=function(t){var o=t.data(a),n=e("#mCSB_"+o.idx+"_container,#mCSB_"+o.idx+"_container_wrapper,#mCSB_"+o.idx+"_dragger_vertical,#mCSB_"+o.idx+"_dragger_horizontal");n.each(function(){J.call(this)})},V=function(t,o,n){function i(e){return s&&c.callbacks[e]&&"function"==typeof c.callbacks[e]}function r(){return[c.callbacks.alwaysTriggerOffsets||w>=S[0]+y,c.callbacks.alwaysTriggerOffsets||-B>=w]}function l(){var e=[h[0].offsetTop,h[0].offsetLeft],o=[x[0].offsetTop,x[0].offsetLeft],a=[h.outerHeight(!1),h.outerWidth(!1)],i=[f.height(),f.width()];t[0].mcs={content:h,top:e[0],left:e[1],draggerTop:o[0],draggerLeft:o[1],topPct:Math.round(100*Math.abs(e[0])/(Math.abs(a[0])-i[0])),leftPct:Math.round(100*Math.abs(e[1])/(Math.abs(a[1])-i[1])),direction:n.dir}}var s=t.data(a),c=s.opt,d={trigger:"internal",dir:"y",scrollEasing:"mcsEaseOut",drag:!1,dur:c.scrollInertia,overwrite:"all",callbacks:!0,onStart:!0,onUpdate:!0,onComplete:!0},n=e.extend(d,n),u=[n.dur,n.drag?0:n.dur],f=e("#mCSB_"+s.idx),h=e("#mCSB_"+s.idx+"_container"),m=h.parent(),p=c.callbacks.onTotalScrollOffset?q.call(t,c.callbacks.onTotalScrollOffset):[0,0],g=c.callbacks.onTotalScrollBackOffset?q.call(t,c.callbacks.onTotalScrollBackOffset):[0,0];if(s.trigger=n.trigger,(0!==m.scrollTop()||0!==m.scrollLeft())&&(e(".mCSB_"+s.idx+"_scrollbar").css("visibility","visible"),m.scrollTop(0).scrollLeft(0)),"_resetY"!==o||s.contentReset.y||(i("onOverflowYNone")&&c.callbacks.onOverflowYNone.call(t[0]),s.contentReset.y=1),"_resetX"!==o||s.contentReset.x||(i("onOverflowXNone")&&c.callbacks.onOverflowXNone.call(t[0]),s.contentReset.x=1),"_resetY"!==o&&"_resetX"!==o){if(!s.contentReset.y&&t[0].mcs||!s.overflowed[0]||(i("onOverflowY")&&c.callbacks.onOverflowY.call(t[0]),s.contentReset.x=null),!s.contentReset.x&&t[0].mcs||!s.overflowed[1]||(i("onOverflowX")&&c.callbacks.onOverflowX.call(t[0]),s.contentReset.x=null),c.snapAmount){var v=c.snapAmount instanceof Array?"x"===n.dir?c.snapAmount[1]:c.snapAmount[0]:c.snapAmount;o=j(o,v,c.snapOffset)}switch(n.dir){case"x":var x=e("#mCSB_"+s.idx+"_dragger_horizontal"),_="left",w=h[0].offsetLeft,S=[f.width()-h.outerWidth(!1),x.parent().width()-x.width()],b=[o,0===o?0:o/s.scrollRatio.x],y=p[1],B=g[1],T=y>0?y/s.scrollRatio.x:0,k=B>0?B/s.scrollRatio.x:0;break;case"y":var x=e("#mCSB_"+s.idx+"_dragger_vertical"),_="top",w=h[0].offsetTop,S=[f.height()-h.outerHeight(!1),x.parent().height()-x.height()],b=[o,0===o?0:o/s.scrollRatio.y],y=p[0],B=g[0],T=y>0?y/s.scrollRatio.y:0,k=B>0?B/s.scrollRatio.y:0}b[1]<0||0===b[0]&&0===b[1]?b=[0,0]:b[1]>=S[1]?b=[S[0],S[1]]:b[0]=-b[0],t[0].mcs||(l(),i("onInit")&&c.callbacks.onInit.call(t[0])),clearTimeout(h[0].onCompleteTimeout),Q(x[0],_,Math.round(b[1]),u[1],n.scrollEasing),(s.tweenRunning||!(0===w&&b[0]>=0||w===S[0]&&b[0]<=S[0]))&&Q(h[0],_,Math.round(b[0]),u[0],n.scrollEasing,n.overwrite,{onStart:function(){n.callbacks&&n.onStart&&!s.tweenRunning&&(i("onScrollStart")&&(l(),c.callbacks.onScrollStart.call(t[0])),s.tweenRunning=!0,C(x),s.cbOffsets=r())},onUpdate:function(){n.callbacks&&n.onUpdate&&i("whileScrolling")&&(l(),c.callbacks.whileScrolling.call(t[0]))},onComplete:function(){if(n.callbacks&&n.onComplete){"yx"===c.axis&&clearTimeout(h[0].onCompleteTimeout);var e=h[0].idleTimer||0;h[0].onCompleteTimeout=setTimeout(function(){i("onScroll")&&(l(),c.callbacks.onScroll.call(t[0])),i("onTotalScroll")&&b[1]>=S[1]-T&&s.cbOffsets[0]&&(l(),c.callbacks.onTotalScroll.call(t[0])),i("onTotalScrollBack")&&b[1]<=k&&s.cbOffsets[1]&&(l(),c.callbacks.onTotalScrollBack.call(t[0])),s.tweenRunning=!1,h[0].idleTimer=0,C(x,"hide")},e)}}})}},Q=function(e,t,o,a,n,i,r){function l(){S.stop||(x||m.call(),x=G()-v,s(),x>=S.time&&(S.time=x>S.time?x+f-(x-S.time):x+f-1,S.time0?(S.currVal=u(S.time,_,b,a,n),w[t]=Math.round(S.currVal)+"px"):w[t]=o+"px",p.call()}function c(){f=1e3/60,S.time=x+f,h=window.requestAnimationFrame?window.requestAnimationFrame:function(e){return s(),setTimeout(e,.01)},S.id=h(l)}function d(){null!=S.id&&(window.requestAnimationFrame?window.cancelAnimationFrame(S.id):clearTimeout(S.id),S.id=null)}function u(e,t,o,a,n){switch(n){case"linear":case"mcsLinear":return o*e/a+t;case"mcsLinearOut":return e/=a,e--,o*Math.sqrt(1-e*e)+t;case"easeInOutSmooth":return e/=a/2,1>e?o/2*e*e+t:(e--,-o/2*(e*(e-2)-1)+t);case"easeInOutStrong":return e/=a/2,1>e?o/2*Math.pow(2,10*(e-1))+t:(e--,o/2*(-Math.pow(2,-10*e)+2)+t);case"easeInOut":case"mcsEaseInOut":return e/=a/2,1>e?o/2*e*e*e+t:(e-=2,o/2*(e*e*e+2)+t);case"easeOutSmooth":return e/=a,e--,-o*(e*e*e*e-1)+t;case"easeOutStrong":return o*(-Math.pow(2,-10*e/a)+1)+t;case"easeOut":case"mcsEaseOut":default:var i=(e/=a)*e,r=i*e;return t+o*(.499999999999997*r*i+-2.5*i*i+5.5*r+-6.5*i+4*e)}}e._mTween||(e._mTween={top:{},left:{}});var f,h,r=r||{},m=r.onStart||function(){},p=r.onUpdate||function(){},g=r.onComplete||function(){},v=G(),x=0,_=e.offsetTop,w=e.style,S=e._mTween[t];"left"===t&&(_=e.offsetLeft);var b=o-_;S.stop=0,"none"!==i&&d(),c()},G=function(){return window.performance&&window.performance.now?window.performance.now():window.performance&&window.performance.webkitNow?window.performance.webkitNow():Date.now?Date.now():(new Date).getTime()},J=function(){var e=this;e._mTween||(e._mTween={top:{},left:{}});for(var t=["top","left"],o=0;o=0&&a[0]+te(n)[0]=0&&a[1]+te(n)[1].mCSB_container{margin-right:30px}.mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{margin-right:0}.mCS-dir-rtl>.mCSB_inside>.mCSB_container{margin-right:0;margin-left:30px}.mCS-dir-rtl>.mCSB_inside>.mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{margin-left:0}.mCSB_scrollTools{position:absolute;width:16px;height:auto;left:auto;top:0;right:0;bottom:0;opacity:.75;filter:"alpha(opacity=75)";-ms-filter:"alpha(opacity=75)"}.mCSB_outside+.mCSB_scrollTools{right:-26px}.mCS-dir-rtl>.mCSB_inside>.mCSB_scrollTools,.mCS-dir-rtl>.mCSB_outside+.mCSB_scrollTools{right:auto;left:0}.mCS-dir-rtl>.mCSB_outside+.mCSB_scrollTools{left:-26px}.mCSB_scrollTools .mCSB_draggerContainer{position:absolute;top:0;left:0;bottom:0;right:0;height:auto}.mCSB_scrollTools a+.mCSB_draggerContainer{margin:20px 0}.mCSB_scrollTools .mCSB_draggerRail{width:2px;height:100%;margin:0 auto;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px}.mCSB_scrollTools .mCSB_dragger{cursor:pointer;width:100%;height:30px;z-index:1}.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{position:relative;width:4px;height:100%;margin:0 auto;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px;text-align:center}.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{width:12px}.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{width:8px}.mCSB_scrollTools .mCSB_buttonDown,.mCSB_scrollTools .mCSB_buttonUp{display:block;position:absolute;height:20px;width:100%;overflow:hidden;margin:0 auto;cursor:pointer}.mCSB_scrollTools .mCSB_buttonDown{bottom:0}.mCSB_horizontal.mCSB_inside>.mCSB_container{margin-right:0;margin-bottom:30px}.mCSB_horizontal.mCSB_outside>.mCSB_container{min-height:100%}.mCSB_horizontal>.mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden{margin-bottom:0}.mCSB_scrollTools.mCSB_scrollTools_horizontal{width:auto;height:16px;top:auto;right:0;bottom:0;left:0}.mCustomScrollBox+.mCSB_scrollTools+.mCSB_scrollTools.mCSB_scrollTools_horizontal,.mCustomScrollBox+.mCSB_scrollTools.mCSB_scrollTools_horizontal{bottom:-26px}.mCSB_scrollTools.mCSB_scrollTools_horizontal a+.mCSB_draggerContainer{margin:0 20px}.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail{width:100%;height:2px;margin:7px 0}.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger{width:30px;height:100%;left:0}.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{width:100%;height:4px;margin:6px auto}.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{height:12px;margin:2px auto}.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{height:8px;margin:4px 0}.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft,.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight{display:block;position:absolute;width:20px;height:100%;overflow:hidden;margin:0 auto;cursor:pointer}.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft{left:0}.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight{right:0}.mCSB_container_wrapper{position:absolute;height:auto;width:auto;overflow:hidden;top:0;left:0;right:0;bottom:0;margin-right:30px;margin-bottom:30px}.mCSB_container_wrapper>.mCSB_container{padding-right:30px;padding-bottom:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.mCSB_vertical_horizontal>.mCSB_scrollTools.mCSB_scrollTools_vertical{bottom:20px}.mCSB_vertical_horizontal>.mCSB_scrollTools.mCSB_scrollTools_horizontal{right:20px}.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden+.mCSB_scrollTools.mCSB_scrollTools_vertical{bottom:0}.mCS-dir-rtl>.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside>.mCSB_scrollTools.mCSB_scrollTools_horizontal,.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden+.mCSB_scrollTools~.mCSB_scrollTools.mCSB_scrollTools_horizontal{right:0}.mCS-dir-rtl>.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside>.mCSB_scrollTools.mCSB_scrollTools_horizontal{left:20px}.mCS-dir-rtl>.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside>.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden+.mCSB_scrollTools~.mCSB_scrollTools.mCSB_scrollTools_horizontal{left:0}.mCS-dir-rtl>.mCSB_inside>.mCSB_container_wrapper{margin-right:0;margin-left:30px}.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden>.mCSB_container{padding-right:0}.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden>.mCSB_container{padding-bottom:0}.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside>.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden{margin-right:0;margin-left:0}.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside>.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden{margin-bottom:0}.mCSB_scrollTools,.mCSB_scrollTools .mCSB_buttonDown,.mCSB_scrollTools .mCSB_buttonLeft,.mCSB_scrollTools .mCSB_buttonRight,.mCSB_scrollTools .mCSB_buttonUp,.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{-webkit-transition:opacity .2s ease-in-out,background-color .2s ease-in-out;-moz-transition:opacity .2s ease-in-out,background-color .2s ease-in-out;-o-transition:opacity .2s ease-in-out,background-color .2s ease-in-out;transition:opacity .2s ease-in-out,background-color .2s ease-in-out}.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail,.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar,.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail,.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar{-webkit-transition:width .2s ease-out .2s,height .2s ease-out .2s,margin-left .2s ease-out .2s,margin-right .2s ease-out .2s,margin-top .2s ease-out .2s,margin-bottom .2s ease-out .2s,opacity .2s ease-in-out,background-color .2s ease-in-out;-moz-transition:width .2s ease-out .2s,height .2s ease-out .2s,margin-left .2s ease-out .2s,margin-right .2s ease-out .2s,margin-top .2s ease-out .2s,margin-bottom .2s ease-out .2s,opacity .2s ease-in-out,background-color .2s ease-in-out;-o-transition:width .2s ease-out .2s,height .2s ease-out .2s,margin-left .2s ease-out .2s,margin-right .2s ease-out .2s,margin-top .2s ease-out .2s,margin-bottom .2s ease-out .2s,opacity .2s ease-in-out,background-color .2s ease-in-out;transition:width .2s ease-out .2s,height .2s ease-out .2s,margin-left .2s ease-out .2s,margin-right .2s ease-out .2s,margin-top .2s ease-out .2s,margin-bottom .2s ease-out .2s,opacity .2s ease-in-out,background-color .2s ease-in-out}.mCS-autoHide>.mCustomScrollBox>.mCSB_scrollTools,.mCS-autoHide>.mCustomScrollBox~.mCSB_scrollTools{opacity:0;filter:"alpha(opacity=0)";-ms-filter:"alpha(opacity=0)"}.mCS-autoHide:hover>.mCustomScrollBox>.mCSB_scrollTools,.mCS-autoHide:hover>.mCustomScrollBox~.mCSB_scrollTools,.mCustomScrollBox:hover>.mCSB_scrollTools,.mCustomScrollBox:hover~.mCSB_scrollTools,.mCustomScrollbar>.mCustomScrollBox>.mCSB_scrollTools.mCSB_scrollTools_onDrag,.mCustomScrollbar>.mCustomScrollBox~.mCSB_scrollTools.mCSB_scrollTools_onDrag{opacity:1;filter:"alpha(opacity=100)";-ms-filter:"alpha(opacity=100)"}.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.4);filter:"alpha(opacity=40)";-ms-filter:"alpha(opacity=40)"}.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.75);filter:"alpha(opacity=75)";-ms-filter:"alpha(opacity=75)"}.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.85);filter:"alpha(opacity=85)";-ms-filter:"alpha(opacity=85)"}.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.9);filter:"alpha(opacity=90)";-ms-filter:"alpha(opacity=90)"}.mCSB_scrollTools .mCSB_buttonDown,.mCSB_scrollTools .mCSB_buttonLeft,.mCSB_scrollTools .mCSB_buttonRight,.mCSB_scrollTools .mCSB_buttonUp{background-image:url(mCSB_buttons.png);background-repeat:no-repeat;opacity:.4;filter:"alpha(opacity=40)";-ms-filter:"alpha(opacity=40)"}.mCSB_scrollTools .mCSB_buttonUp{background-position:0 0}.mCSB_scrollTools .mCSB_buttonDown{background-position:0 -20px}.mCSB_scrollTools .mCSB_buttonLeft{background-position:0 -40px}.mCSB_scrollTools .mCSB_buttonRight{background-position:0 -56px}.mCSB_scrollTools .mCSB_buttonDown:hover,.mCSB_scrollTools .mCSB_buttonLeft:hover,.mCSB_scrollTools .mCSB_buttonRight:hover,.mCSB_scrollTools .mCSB_buttonUp:hover{opacity:.75;filter:"alpha(opacity=75)";-ms-filter:"alpha(opacity=75)"}.mCSB_scrollTools .mCSB_buttonDown:active,.mCSB_scrollTools .mCSB_buttonLeft:active,.mCSB_scrollTools .mCSB_buttonRight:active,.mCSB_scrollTools .mCSB_buttonUp:active{opacity:.9;filter:"alpha(opacity=90)";-ms-filter:"alpha(opacity=90)"}.mCS-dark.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.15)}.mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.75)}.mCS-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:rgba(0,0,0,.85)}.mCS-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:rgba(0,0,0,.9)}.mCS-dark.mCSB_scrollTools .mCSB_buttonUp{background-position:-80px 0}.mCS-dark.mCSB_scrollTools .mCSB_buttonDown{background-position:-80px -20px}.mCS-dark.mCSB_scrollTools .mCSB_buttonLeft{background-position:-80px -40px}.mCS-dark.mCSB_scrollTools .mCSB_buttonRight{background-position:-80px -56px}.mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail,.mCS-light-2.mCSB_scrollTools .mCSB_draggerRail{width:4px;background-color:#fff;background-color:rgba(255,255,255,.1);-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px}.mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-light-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:4px;background-color:#fff;background-color:rgba(255,255,255,.75);-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px}.mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-light-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-light-2.mCSB_scrollTools_horizontal .mCSB_draggerRail{width:100%;height:4px;margin:6px auto}.mCS-light-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.85)}.mCS-light-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-light-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.9)}.mCS-light-2.mCSB_scrollTools .mCSB_buttonUp{background-position:-32px 0}.mCS-light-2.mCSB_scrollTools .mCSB_buttonDown{background-position:-32px -20px}.mCS-light-2.mCSB_scrollTools .mCSB_buttonLeft{background-position:-40px -40px}.mCS-light-2.mCSB_scrollTools .mCSB_buttonRight{background-position:-40px -56px}.mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.1);-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px}.mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.75);-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px}.mCS-dark-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.85)}.mCS-dark-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-dark-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.9)}.mCS-dark-2.mCSB_scrollTools .mCSB_buttonUp{background-position:-112px 0}.mCS-dark-2.mCSB_scrollTools .mCSB_buttonDown{background-position:-112px -20px}.mCS-dark-2.mCSB_scrollTools .mCSB_buttonLeft{background-position:-120px -40px}.mCS-dark-2.mCSB_scrollTools .mCSB_buttonRight{background-position:-120px -56px}.mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail,.mCS-light-thick.mCSB_scrollTools .mCSB_draggerRail{width:4px;background-color:#fff;background-color:rgba(255,255,255,.1);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-light-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:6px;background-color:#fff;background-color:rgba(255,255,255,.75);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}.mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail{width:100%;height:4px;margin:6px 0}.mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{width:100%;height:6px;margin:5px auto}.mCS-light-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.85)}.mCS-light-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-light-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.9)}.mCS-light-thick.mCSB_scrollTools .mCSB_buttonUp{background-position:-16px 0}.mCS-light-thick.mCSB_scrollTools .mCSB_buttonDown{background-position:-16px -20px}.mCS-light-thick.mCSB_scrollTools .mCSB_buttonLeft{background-position:-20px -40px}.mCS-light-thick.mCSB_scrollTools .mCSB_buttonRight{background-position:-20px -56px}.mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.1);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.75);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.85)}.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.9)}.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonUp{background-position:-96px 0}.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonDown{background-position:-96px -20px}.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonLeft{background-position:-100px -40px}.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonRight{background-position:-100px -56px}.mCS-light-thin.mCSB_scrollTools .mCSB_draggerRail{background-color:#fff;background-color:rgba(255,255,255,.1)}.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-light-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:2px}.mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail{width:100%}.mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{width:100%;height:2px;margin:7px auto}.mCS-dark-thin.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.15)}.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.75)}.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.85)}.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.9)}.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonUp{background-position:-80px 0}.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonDown{background-position:-80px -20px}.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonLeft{background-position:-80px -40px}.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonRight{background-position:-80px -56px}.mCS-rounded.mCSB_scrollTools .mCSB_draggerRail{background-color:#fff;background-color:rgba(255,255,255,.15)}.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger,.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger,.mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger,.mCS-rounded.mCSB_scrollTools .mCSB_dragger{height:14px}.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:14px;margin:0 1px}.mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger,.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger,.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger,.mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger{width:14px}.mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{height:14px;margin:1px 0}.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{width:16px;height:16px;margin:-1px 0}.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail,.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{width:4px}.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{height:16px;width:16px;margin:0 -1px}.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail,.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{height:4px;margin:6px 0}.mCS-rounded.mCSB_scrollTools .mCSB_buttonUp{background-position:0 -72px}.mCS-rounded.mCSB_scrollTools .mCSB_buttonDown{background-position:0 -92px}.mCS-rounded.mCSB_scrollTools .mCSB_buttonLeft{background-position:0 -112px}.mCS-rounded.mCSB_scrollTools .mCSB_buttonRight{background-position:0 -128px}.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.75)}.mCS-rounded-dark.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.15)}.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.85)}.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.9)}.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonUp{background-position:-80px -72px}.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonDown{background-position:-80px -92px}.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonLeft{background-position:-80px -112px}.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonRight{background-position:-80px -128px}.mCS-rounded-dots-dark.mCSB_scrollTools_vertical .mCSB_draggerRail,.mCS-rounded-dots.mCSB_scrollTools_vertical .mCSB_draggerRail{width:4px}.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail,.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail{background-color:transparent;background-position:center}.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg==);background-repeat:repeat-y;opacity:.3;filter:"alpha(opacity=30)";-ms-filter:"alpha(opacity=30)"}.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail{height:4px;margin:6px 0;background-repeat:repeat-x}.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonUp{background-position:-16px -72px}.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonDown{background-position:-16px -92px}.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonLeft{background-position:-20px -112px}.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonRight{background-position:-20px -128px}.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYV2NkIAAYSVFgDFR8BqrBBEifBbGRTfiPZhpYjiQFBK3A6l6CvgAAE9kGCd1mvgEAAAAASUVORK5CYII=)}.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonUp{background-position:-96px -72px}.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonDown{background-position:-96px -92px}.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonLeft{background-position:-100px -112px}.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonRight{background-position:-100px -128px}.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-repeat:repeat-y;background-image:-moz-linear-gradient(left,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%);background-image:-webkit-gradient(linear,left top,right top,color-stop(0,rgba(255,255,255,.5)),color-stop(100%,rgba(255,255,255,0)));background-image:-webkit-linear-gradient(left,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%);background-image:-o-linear-gradient(left,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%);background-image:-ms-linear-gradient(left,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%);background-image:linear-gradient(to right,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%)}.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{background-repeat:repeat-x;background-image:-moz-linear-gradient(top,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(255,255,255,.5)),color-stop(100%,rgba(255,255,255,0)));background-image:-webkit-linear-gradient(top,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%);background-image:-o-linear-gradient(top,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%);background-image:-ms-linear-gradient(top,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%);background-image:linear-gradient(to bottom,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%)}.mCS-3d-dark.mCSB_scrollTools_vertical .mCSB_dragger,.mCS-3d.mCSB_scrollTools_vertical .mCSB_dragger{height:70px}.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger,.mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger{width:70px}.mCS-3d-dark.mCSB_scrollTools,.mCS-3d.mCSB_scrollTools{opacity:1;filter:"alpha(opacity=30)";-ms-filter:"alpha(opacity=30)"}.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools .mCSB_draggerRail{-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px}.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-3d.mCSB_scrollTools .mCSB_draggerRail{width:8px;background-color:#000;background-color:rgba(0,0,0,.2);box-shadow:inset 1px 0 1px rgba(0,0,0,.5),inset -1px 0 1px rgba(255,255,255,.2)}.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#555}.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:8px}.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-3d.mCSB_scrollTools_horizontal .mCSB_draggerRail{width:100%;height:8px;margin:4px 0;box-shadow:inset 0 1px 1px rgba(0,0,0,.5),inset 0 -1px 1px rgba(255,255,255,.2)}.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{width:100%;height:8px;margin:4px auto}.mCS-3d.mCSB_scrollTools .mCSB_buttonUp{background-position:-32px -72px}.mCS-3d.mCSB_scrollTools .mCSB_buttonDown{background-position:-32px -92px}.mCS-3d.mCSB_scrollTools .mCSB_buttonLeft{background-position:-40px -112px}.mCS-3d.mCSB_scrollTools .mCSB_buttonRight{background-position:-40px -128px}.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.1);box-shadow:inset 1px 0 1px rgba(0,0,0,.1)}.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{box-shadow:inset 0 1px 1px rgba(0,0,0,.1)}.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonUp{background-position:-112px -72px}.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonDown{background-position:-112px -92px}.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonLeft{background-position:-120px -112px}.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonRight{background-position:-120px -128px}.mCS-3d-thick-dark.mCSB_scrollTools,.mCS-3d-thick.mCSB_scrollTools{opacity:1;filter:"alpha(opacity=30)";-ms-filter:"alpha(opacity=30)"}.mCS-3d-thick-dark.mCSB_scrollTools,.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer,.mCS-3d-thick.mCSB_scrollTools,.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer{-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px}.mCSB_inside+.mCS-3d-thick-dark.mCSB_scrollTools_vertical,.mCSB_inside+.mCS-3d-thick.mCSB_scrollTools_vertical{right:1px}.mCS-3d-thick-dark.mCSB_scrollTools_vertical,.mCS-3d-thick.mCSB_scrollTools_vertical{box-shadow:inset 1px 0 1px rgba(0,0,0,.1),inset 0 0 14px rgba(0,0,0,.5)}.mCS-3d-thick-dark.mCSB_scrollTools_horizontal,.mCS-3d-thick.mCSB_scrollTools_horizontal{bottom:1px;box-shadow:inset 0 1px 1px rgba(0,0,0,.1),inset 0 0 14px rgba(0,0,0,.5)}.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;box-shadow:inset 1px 0 0 rgba(255,255,255,.4);width:12px;margin:2px;position:absolute;height:auto;top:0;bottom:0;left:0;right:0}.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{box-shadow:inset 0 1px 0 rgba(255,255,255,.4);height:12px;width:auto}.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#555}.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer{background-color:#000;background-color:rgba(0,0,0,.05);box-shadow:inset 1px 1px 16px rgba(0,0,0,.1)}.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerRail{background-color:transparent}.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonUp{background-position:-32px -72px}.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonDown{background-position:-32px -92px}.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonLeft{background-position:-40px -112px}.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonRight{background-position:-40px -128px}.mCS-3d-thick-dark.mCSB_scrollTools{box-shadow:inset 0 0 14px rgba(0,0,0,.2)}.mCS-3d-thick-dark.mCSB_scrollTools_horizontal{box-shadow:inset 0 1px 1px rgba(0,0,0,.1),inset 0 0 14px rgba(0,0,0,.2)}.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{box-shadow:inset 1px 0 0 rgba(255,255,255,.4),inset -1px 0 0 rgba(0,0,0,.2)}.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.2)}.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#777}.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer{background-color:#fff;background-color:rgba(0,0,0,.05);box-shadow:inset 1px 1px 16px rgba(0,0,0,.1)}.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-minimal-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-minimal.mCSB_scrollTools .mCSB_draggerRail{background-color:transparent}.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonUp{background-position:-112px -72px}.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonDown{background-position:-112px -92px}.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonLeft{background-position:-120px -112px}.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonRight{background-position:-120px -128px}.mCSB_outside+.mCS-minimal-dark.mCSB_scrollTools_vertical,.mCSB_outside+.mCS-minimal.mCSB_scrollTools_vertical{right:0;margin:12px 0}.mCustomScrollBox.mCS-minimal+.mCSB_scrollTools+.mCSB_scrollTools.mCSB_scrollTools_horizontal,.mCustomScrollBox.mCS-minimal+.mCSB_scrollTools.mCSB_scrollTools_horizontal,.mCustomScrollBox.mCS-minimal-dark+.mCSB_scrollTools+.mCSB_scrollTools.mCSB_scrollTools_horizontal,.mCustomScrollBox.mCS-minimal-dark+.mCSB_scrollTools.mCSB_scrollTools_horizontal{bottom:0;margin:0 12px}.mCS-dir-rtl>.mCSB_outside+.mCS-minimal-dark.mCSB_scrollTools_vertical,.mCS-dir-rtl>.mCSB_outside+.mCS-minimal.mCSB_scrollTools_vertical{left:0;right:auto}.mCS-minimal-dark.mCSB_scrollTools_vertical .mCSB_dragger,.mCS-minimal.mCSB_scrollTools_vertical .mCSB_dragger{height:50px}.mCS-minimal-dark.mCSB_scrollTools_horizontal .mCSB_dragger,.mCS-minimal.mCSB_scrollTools_horizontal .mCSB_dragger{width:50px}.mCS-minimal.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.2);filter:"alpha(opacity=20)";-ms-filter:"alpha(opacity=20)"}.mCS-minimal.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-minimal.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.5);filter:"alpha(opacity=50)";-ms-filter:"alpha(opacity=50)"}.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.2);filter:"alpha(opacity=20)";-ms-filter:"alpha(opacity=20)"}.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.5);filter:"alpha(opacity=50)";-ms-filter:"alpha(opacity=50)"}.mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail,.mCS-light-3.mCSB_scrollTools .mCSB_draggerRail{width:6px;background-color:#000;background-color:rgba(0,0,0,.2)}.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-light-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:6px}.mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-light-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-light-3.mCSB_scrollTools_horizontal .mCSB_draggerRail{width:100%;height:6px;margin:5px 0}.mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail,.mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{width:12px}.mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail,.mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{height:12px;margin:2px 0}.mCS-light-3.mCSB_scrollTools .mCSB_buttonUp{background-position:-32px -72px}.mCS-light-3.mCSB_scrollTools .mCSB_buttonDown{background-position:-32px -92px}.mCS-light-3.mCSB_scrollTools .mCSB_buttonLeft{background-position:-40px -112px}.mCS-light-3.mCSB_scrollTools .mCSB_buttonRight{background-position:-40px -128px}.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.75)}.mCS-dark-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.85)}.mCS-dark-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-dark-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.9)}.mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.1)}.mCS-dark-3.mCSB_scrollTools .mCSB_buttonUp{background-position:-112px -72px}.mCS-dark-3.mCSB_scrollTools .mCSB_buttonDown{background-position:-112px -92px}.mCS-dark-3.mCSB_scrollTools .mCSB_buttonLeft{background-position:-120px -112px}.mCS-dark-3.mCSB_scrollTools .mCSB_buttonRight{background-position:-120px -128px}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset.mCSB_scrollTools .mCSB_draggerRail{width:12px;background-color:#000;background-color:rgba(0,0,0,.2)}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-inset.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:6px;margin:3px 5px;position:absolute;height:auto;top:0;bottom:0;left:0;right:0}.mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-inset.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{height:6px;margin:5px 3px;position:absolute;width:auto;top:0;bottom:0;left:0;right:0}.mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-inset.mCSB_scrollTools_horizontal .mCSB_draggerRail{width:100%;height:12px;margin:2px 0}.mCS-inset-2.mCSB_scrollTools .mCSB_buttonUp,.mCS-inset-3.mCSB_scrollTools .mCSB_buttonUp,.mCS-inset.mCSB_scrollTools .mCSB_buttonUp{background-position:-32px -72px}.mCS-inset-2.mCSB_scrollTools .mCSB_buttonDown,.mCS-inset-3.mCSB_scrollTools .mCSB_buttonDown,.mCS-inset.mCSB_scrollTools .mCSB_buttonDown{background-position:-32px -92px}.mCS-inset-2.mCSB_scrollTools .mCSB_buttonLeft,.mCS-inset-3.mCSB_scrollTools .mCSB_buttonLeft,.mCS-inset.mCSB_scrollTools .mCSB_buttonLeft{background-position:-40px -112px}.mCS-inset-2.mCSB_scrollTools .mCSB_buttonRight,.mCS-inset-3.mCSB_scrollTools .mCSB_buttonRight,.mCS-inset.mCSB_scrollTools .mCSB_buttonRight{background-position:-40px -128px}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.75)}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.85)}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.9)}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.1)}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonUp,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonUp,.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonUp{background-position:-112px -72px}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonDown,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonDown,.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonDown{background-position:-112px -92px}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonLeft,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonLeft,.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonLeft{background-position:-120px -112px}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonRight,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonRight,.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonRight{background-position:-120px -128px}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail{background-color:transparent;border-width:1px;border-style:solid;border-color:#fff;border-color:rgba(255,255,255,.2);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail{border-color:#000;border-color:rgba(0,0,0,.2)}.mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail{background-color:#fff;background-color:rgba(255,255,255,.6)}.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.6)}.mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.75)}.mCS-inset-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.85)}.mCS-inset-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-inset-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.9)}.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.75)}.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.85)}.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.9)} -------------------------------------------------------------------------------- /js/paho-mqtt.js: -------------------------------------------------------------------------------- 1 | /******************************************************************************* 2 | * Copyright (c) 2013 IBM Corp. 3 | * 4 | * All rights reserved. This program and the accompanying materials 5 | * are made available under the terms of the Eclipse Public License v1.0 6 | * and Eclipse Distribution License v1.0 which accompany this distribution. 7 | * 8 | * The Eclipse Public License is available at 9 | * http://www.eclipse.org/legal/epl-v10.html 10 | * and the Eclipse Distribution License is available at 11 | * http://www.eclipse.org/org/documents/edl-v10.php. 12 | * 13 | * Contributors: 14 | * Andrew Banks - initial API and implementation and initial documentation 15 | *******************************************************************************/ 16 | 17 | 18 | // Only expose a single object name in the global namespace. 19 | // Everything must go through this module. Global Paho module 20 | // only has a single public function, client, which returns 21 | // a Paho client object given connection details. 22 | 23 | /** 24 | * Send and receive messages using web browsers. 25 | *

26 | * This programming interface lets a JavaScript client application use the MQTT V3.1 or 27 | * V3.1.1 protocol to connect to an MQTT-supporting messaging server. 28 | * 29 | * The function supported includes: 30 | *

    31 | *
  1. Connecting to and disconnecting from a server. The server is identified by its host name and port number. 32 | *
  2. Specifying options that relate to the communications link with the server, 33 | * for example the frequency of keep-alive heartbeats, and whether SSL/TLS is required. 34 | *
  3. Subscribing to and receiving messages from MQTT Topics. 35 | *
  4. Publishing messages to MQTT Topics. 36 | *
37 | *

38 | * The API consists of two main objects: 39 | *

40 | *
{@link Paho.Client}
41 | *
This contains methods that provide the functionality of the API, 42 | * including provision of callbacks that notify the application when a message 43 | * arrives from or is delivered to the messaging server, 44 | * or when the status of its connection to the messaging server changes.
45 | *
{@link Paho.Message}
46 | *
This encapsulates the payload of the message along with various attributes 47 | * associated with its delivery, in particular the destination to which it has 48 | * been (or is about to be) sent.
49 | *
50 | *

51 | * The programming interface validates parameters passed to it, and will throw 52 | * an Error containing an error message intended for developer use, if it detects 53 | * an error with any parameter. 54 | *

55 | * Example: 56 | * 57 | *

  58 | var client = new Paho.MQTT.Client(location.hostname, Number(location.port), "clientId");
  59 | client.onConnectionLost = onConnectionLost;
  60 | client.onMessageArrived = onMessageArrived;
  61 | client.connect({onSuccess:onConnect});
  62 | 
  63 | function onConnect() {
  64 |   // Once a connection has been made, make a subscription and send a message.
  65 |   console.log("onConnect");
  66 |   client.subscribe("/World");
  67 |   var message = new Paho.MQTT.Message("Hello");
  68 |   message.destinationName = "/World";
  69 |   client.send(message);
  70 | };
  71 | function onConnectionLost(responseObject) {
  72 |   if (responseObject.errorCode !== 0)
  73 | 	console.log("onConnectionLost:"+responseObject.errorMessage);
  74 | };
  75 | function onMessageArrived(message) {
  76 |   console.log("onMessageArrived:"+message.payloadString);
  77 |   client.disconnect();
  78 | };
  79 |  * 
80 | * @namespace Paho 81 | */ 82 | 83 | /* jshint shadow:true */ 84 | (function ExportLibrary(root, factory) { 85 | if(typeof exports === "object" && typeof module === "object"){ 86 | module.exports = factory(); 87 | } else if (typeof define === "function" && define.amd){ 88 | define(factory); 89 | } else if (typeof exports === "object"){ 90 | exports = factory(); 91 | } else { 92 | //if (typeof root.Paho === "undefined"){ 93 | // root.Paho = {}; 94 | //} 95 | root.Paho = factory(); 96 | } 97 | })(this, function LibraryFactory(){ 98 | 99 | 100 | var PahoMQTT = (function (global) { 101 | 102 | // Private variables below, these are only visible inside the function closure 103 | // which is used to define the module. 104 | var version = "@VERSION@-@BUILDLEVEL@"; 105 | 106 | /** 107 | * @private 108 | */ 109 | var localStorage = global.localStorage || (function () { 110 | var data = {}; 111 | 112 | return { 113 | setItem: function (key, item) { data[key] = item; }, 114 | getItem: function (key) { return data[key]; }, 115 | removeItem: function (key) { delete data[key]; }, 116 | }; 117 | })(); 118 | 119 | /** 120 | * Unique message type identifiers, with associated 121 | * associated integer values. 122 | * @private 123 | */ 124 | var MESSAGE_TYPE = { 125 | CONNECT: 1, 126 | CONNACK: 2, 127 | PUBLISH: 3, 128 | PUBACK: 4, 129 | PUBREC: 5, 130 | PUBREL: 6, 131 | PUBCOMP: 7, 132 | SUBSCRIBE: 8, 133 | SUBACK: 9, 134 | UNSUBSCRIBE: 10, 135 | UNSUBACK: 11, 136 | PINGREQ: 12, 137 | PINGRESP: 13, 138 | DISCONNECT: 14 139 | }; 140 | 141 | // Collection of utility methods used to simplify module code 142 | // and promote the DRY pattern. 143 | 144 | /** 145 | * Validate an object's parameter names to ensure they 146 | * match a list of expected variables name for this option 147 | * type. Used to ensure option object passed into the API don't 148 | * contain erroneous parameters. 149 | * @param {Object} obj - User options object 150 | * @param {Object} keys - valid keys and types that may exist in obj. 151 | * @throws {Error} Invalid option parameter found. 152 | * @private 153 | */ 154 | var validate = function(obj, keys) { 155 | for (var key in obj) { 156 | if (obj.hasOwnProperty(key)) { 157 | if (keys.hasOwnProperty(key)) { 158 | if (typeof obj[key] !== keys[key]) 159 | throw new Error(format(ERROR.INVALID_TYPE, [typeof obj[key], key])); 160 | } else { 161 | var errorStr = "Unknown property, " + key + ". Valid properties are:"; 162 | for (var validKey in keys) 163 | if (keys.hasOwnProperty(validKey)) 164 | errorStr = errorStr+" "+validKey; 165 | throw new Error(errorStr); 166 | } 167 | } 168 | } 169 | }; 170 | 171 | /** 172 | * Return a new function which runs the user function bound 173 | * to a fixed scope. 174 | * @param {function} User function 175 | * @param {object} Function scope 176 | * @return {function} User function bound to another scope 177 | * @private 178 | */ 179 | var scope = function (f, scope) { 180 | return function () { 181 | return f.apply(scope, arguments); 182 | }; 183 | }; 184 | 185 | /** 186 | * Unique message type identifiers, with associated 187 | * associated integer values. 188 | * @private 189 | */ 190 | var ERROR = { 191 | OK: {code:0, text:"AMQJSC0000I OK."}, 192 | CONNECT_TIMEOUT: {code:1, text:"AMQJSC0001E Connect timed out."}, 193 | SUBSCRIBE_TIMEOUT: {code:2, text:"AMQJS0002E Subscribe timed out."}, 194 | UNSUBSCRIBE_TIMEOUT: {code:3, text:"AMQJS0003E Unsubscribe timed out."}, 195 | PING_TIMEOUT: {code:4, text:"AMQJS0004E Ping timed out."}, 196 | INTERNAL_ERROR: {code:5, text:"AMQJS0005E Internal error. Error Message: {0}, Stack trace: {1}"}, 197 | CONNACK_RETURNCODE: {code:6, text:"AMQJS0006E Bad Connack return code:{0} {1}."}, 198 | SOCKET_ERROR: {code:7, text:"AMQJS0007E Socket error:{0}."}, 199 | SOCKET_CLOSE: {code:8, text:"AMQJS0008I Socket closed."}, 200 | MALFORMED_UTF: {code:9, text:"AMQJS0009E Malformed UTF data:{0} {1} {2}."}, 201 | UNSUPPORTED: {code:10, text:"AMQJS0010E {0} is not supported by this browser."}, 202 | INVALID_STATE: {code:11, text:"AMQJS0011E Invalid state {0}."}, 203 | INVALID_TYPE: {code:12, text:"AMQJS0012E Invalid type {0} for {1}."}, 204 | INVALID_ARGUMENT: {code:13, text:"AMQJS0013E Invalid argument {0} for {1}."}, 205 | UNSUPPORTED_OPERATION: {code:14, text:"AMQJS0014E Unsupported operation."}, 206 | INVALID_STORED_DATA: {code:15, text:"AMQJS0015E Invalid data in local storage key={0} value={1}."}, 207 | INVALID_MQTT_MESSAGE_TYPE: {code:16, text:"AMQJS0016E Invalid MQTT message type {0}."}, 208 | MALFORMED_UNICODE: {code:17, text:"AMQJS0017E Malformed Unicode string:{0} {1}."}, 209 | BUFFER_FULL: {code:18, text:"AMQJS0018E Message buffer is full, maximum buffer size: {0}."}, 210 | }; 211 | 212 | /** CONNACK RC Meaning. */ 213 | var CONNACK_RC = { 214 | 0:"Connection Accepted", 215 | 1:"Connection Refused: unacceptable protocol version", 216 | 2:"Connection Refused: identifier rejected", 217 | 3:"Connection Refused: server unavailable", 218 | 4:"Connection Refused: bad user name or password", 219 | 5:"Connection Refused: not authorized" 220 | }; 221 | 222 | /** 223 | * Format an error message text. 224 | * @private 225 | * @param {error} ERROR value above. 226 | * @param {substitutions} [array] substituted into the text. 227 | * @return the text with the substitutions made. 228 | */ 229 | var format = function(error, substitutions) { 230 | var text = error.text; 231 | if (substitutions) { 232 | var field,start; 233 | for (var i=0; i 0) { 237 | var part1 = text.substring(0,start); 238 | var part2 = text.substring(start+field.length); 239 | text = part1+substitutions[i]+part2; 240 | } 241 | } 242 | } 243 | return text; 244 | }; 245 | 246 | //MQTT protocol and version 6 M Q I s d p 3 247 | var MqttProtoIdentifierv3 = [0x00,0x06,0x4d,0x51,0x49,0x73,0x64,0x70,0x03]; 248 | //MQTT proto/version for 311 4 M Q T T 4 249 | var MqttProtoIdentifierv4 = [0x00,0x04,0x4d,0x51,0x54,0x54,0x04]; 250 | 251 | /** 252 | * Construct an MQTT wire protocol message. 253 | * @param type MQTT packet type. 254 | * @param options optional wire message attributes. 255 | * 256 | * Optional properties 257 | * 258 | * messageIdentifier: message ID in the range [0..65535] 259 | * payloadMessage: Application Message - PUBLISH only 260 | * connectStrings: array of 0 or more Strings to be put into the CONNECT payload 261 | * topics: array of strings (SUBSCRIBE, UNSUBSCRIBE) 262 | * requestQoS: array of QoS values [0..2] 263 | * 264 | * "Flag" properties 265 | * cleanSession: true if present / false if absent (CONNECT) 266 | * willMessage: true if present / false if absent (CONNECT) 267 | * isRetained: true if present / false if absent (CONNECT) 268 | * userName: true if present / false if absent (CONNECT) 269 | * password: true if present / false if absent (CONNECT) 270 | * keepAliveInterval: integer [0..65535] (CONNECT) 271 | * 272 | * @private 273 | * @ignore 274 | */ 275 | var WireMessage = function (type, options) { 276 | this.type = type; 277 | for (var name in options) { 278 | if (options.hasOwnProperty(name)) { 279 | this[name] = options[name]; 280 | } 281 | } 282 | }; 283 | 284 | WireMessage.prototype.encode = function() { 285 | // Compute the first byte of the fixed header 286 | var first = ((this.type & 0x0f) << 4); 287 | 288 | /* 289 | * Now calculate the length of the variable header + payload by adding up the lengths 290 | * of all the component parts 291 | */ 292 | 293 | var remLength = 0; 294 | var topicStrLength = []; 295 | var destinationNameLength = 0; 296 | var willMessagePayloadBytes; 297 | 298 | // if the message contains a messageIdentifier then we need two bytes for that 299 | if (this.messageIdentifier !== undefined) 300 | remLength += 2; 301 | 302 | switch(this.type) { 303 | // If this a Connect then we need to include 12 bytes for its header 304 | case MESSAGE_TYPE.CONNECT: 305 | switch(this.mqttVersion) { 306 | case 3: 307 | remLength += MqttProtoIdentifierv3.length + 3; 308 | break; 309 | case 4: 310 | remLength += MqttProtoIdentifierv4.length + 3; 311 | break; 312 | } 313 | 314 | remLength += UTF8Length(this.clientId) + 2; 315 | if (this.willMessage !== undefined) { 316 | remLength += UTF8Length(this.willMessage.destinationName) + 2; 317 | // Will message is always a string, sent as UTF-8 characters with a preceding length. 318 | willMessagePayloadBytes = this.willMessage.payloadBytes; 319 | if (!(willMessagePayloadBytes instanceof Uint8Array)) 320 | willMessagePayloadBytes = new Uint8Array(payloadBytes); 321 | remLength += willMessagePayloadBytes.byteLength +2; 322 | } 323 | if (this.userName !== undefined) 324 | remLength += UTF8Length(this.userName) + 2; 325 | if (this.password !== undefined) 326 | remLength += UTF8Length(this.password) + 2; 327 | break; 328 | 329 | // Subscribe, Unsubscribe can both contain topic strings 330 | case MESSAGE_TYPE.SUBSCRIBE: 331 | first |= 0x02; // Qos = 1; 332 | for ( var i = 0; i < this.topics.length; i++) { 333 | topicStrLength[i] = UTF8Length(this.topics[i]); 334 | remLength += topicStrLength[i] + 2; 335 | } 336 | remLength += this.requestedQos.length; // 1 byte for each topic's Qos 337 | // QoS on Subscribe only 338 | break; 339 | 340 | case MESSAGE_TYPE.UNSUBSCRIBE: 341 | first |= 0x02; // Qos = 1; 342 | for ( var i = 0; i < this.topics.length; i++) { 343 | topicStrLength[i] = UTF8Length(this.topics[i]); 344 | remLength += topicStrLength[i] + 2; 345 | } 346 | break; 347 | 348 | case MESSAGE_TYPE.PUBREL: 349 | first |= 0x02; // Qos = 1; 350 | break; 351 | 352 | case MESSAGE_TYPE.PUBLISH: 353 | if (this.payloadMessage.duplicate) first |= 0x08; 354 | first = first |= (this.payloadMessage.qos << 1); 355 | if (this.payloadMessage.retained) first |= 0x01; 356 | destinationNameLength = UTF8Length(this.payloadMessage.destinationName); 357 | remLength += destinationNameLength + 2; 358 | var payloadBytes = this.payloadMessage.payloadBytes; 359 | remLength += payloadBytes.byteLength; 360 | if (payloadBytes instanceof ArrayBuffer) 361 | payloadBytes = new Uint8Array(payloadBytes); 362 | else if (!(payloadBytes instanceof Uint8Array)) 363 | payloadBytes = new Uint8Array(payloadBytes.buffer); 364 | break; 365 | 366 | case MESSAGE_TYPE.DISCONNECT: 367 | break; 368 | 369 | default: 370 | break; 371 | } 372 | 373 | // Now we can allocate a buffer for the message 374 | 375 | var mbi = encodeMBI(remLength); // Convert the length to MQTT MBI format 376 | var pos = mbi.length + 1; // Offset of start of variable header 377 | var buffer = new ArrayBuffer(remLength + pos); 378 | var byteStream = new Uint8Array(buffer); // view it as a sequence of bytes 379 | 380 | //Write the fixed header into the buffer 381 | byteStream[0] = first; 382 | byteStream.set(mbi,1); 383 | 384 | // If this is a PUBLISH then the variable header starts with a topic 385 | if (this.type == MESSAGE_TYPE.PUBLISH) 386 | pos = writeString(this.payloadMessage.destinationName, destinationNameLength, byteStream, pos); 387 | // If this is a CONNECT then the variable header contains the protocol name/version, flags and keepalive time 388 | 389 | else if (this.type == MESSAGE_TYPE.CONNECT) { 390 | switch (this.mqttVersion) { 391 | case 3: 392 | byteStream.set(MqttProtoIdentifierv3, pos); 393 | pos += MqttProtoIdentifierv3.length; 394 | break; 395 | case 4: 396 | byteStream.set(MqttProtoIdentifierv4, pos); 397 | pos += MqttProtoIdentifierv4.length; 398 | break; 399 | } 400 | var connectFlags = 0; 401 | if (this.cleanSession) 402 | connectFlags = 0x02; 403 | if (this.willMessage !== undefined ) { 404 | connectFlags |= 0x04; 405 | connectFlags |= (this.willMessage.qos<<3); 406 | if (this.willMessage.retained) { 407 | connectFlags |= 0x20; 408 | } 409 | } 410 | if (this.userName !== undefined) 411 | connectFlags |= 0x80; 412 | if (this.password !== undefined) 413 | connectFlags |= 0x40; 414 | byteStream[pos++] = connectFlags; 415 | pos = writeUint16 (this.keepAliveInterval, byteStream, pos); 416 | } 417 | 418 | // Output the messageIdentifier - if there is one 419 | if (this.messageIdentifier !== undefined) 420 | pos = writeUint16 (this.messageIdentifier, byteStream, pos); 421 | 422 | switch(this.type) { 423 | case MESSAGE_TYPE.CONNECT: 424 | pos = writeString(this.clientId, UTF8Length(this.clientId), byteStream, pos); 425 | if (this.willMessage !== undefined) { 426 | pos = writeString(this.willMessage.destinationName, UTF8Length(this.willMessage.destinationName), byteStream, pos); 427 | pos = writeUint16(willMessagePayloadBytes.byteLength, byteStream, pos); 428 | byteStream.set(willMessagePayloadBytes, pos); 429 | pos += willMessagePayloadBytes.byteLength; 430 | 431 | } 432 | if (this.userName !== undefined) 433 | pos = writeString(this.userName, UTF8Length(this.userName), byteStream, pos); 434 | if (this.password !== undefined) 435 | pos = writeString(this.password, UTF8Length(this.password), byteStream, pos); 436 | break; 437 | 438 | case MESSAGE_TYPE.PUBLISH: 439 | // PUBLISH has a text or binary payload, if text do not add a 2 byte length field, just the UTF characters. 440 | byteStream.set(payloadBytes, pos); 441 | 442 | break; 443 | 444 | // case MESSAGE_TYPE.PUBREC: 445 | // case MESSAGE_TYPE.PUBREL: 446 | // case MESSAGE_TYPE.PUBCOMP: 447 | // break; 448 | 449 | case MESSAGE_TYPE.SUBSCRIBE: 450 | // SUBSCRIBE has a list of topic strings and request QoS 451 | for (var i=0; i> 4; 474 | var messageInfo = first &= 0x0f; 475 | pos += 1; 476 | 477 | 478 | // Decode the remaining length (MBI format) 479 | 480 | var digit; 481 | var remLength = 0; 482 | var multiplier = 1; 483 | do { 484 | if (pos == input.length) { 485 | return [null,startingPos]; 486 | } 487 | digit = input[pos++]; 488 | remLength += ((digit & 0x7F) * multiplier); 489 | multiplier *= 128; 490 | } while ((digit & 0x80) !== 0); 491 | 492 | var endPos = pos+remLength; 493 | if (endPos > input.length) { 494 | return [null,startingPos]; 495 | } 496 | 497 | var wireMessage = new WireMessage(type); 498 | switch(type) { 499 | case MESSAGE_TYPE.CONNACK: 500 | var connectAcknowledgeFlags = input[pos++]; 501 | if (connectAcknowledgeFlags & 0x01) 502 | wireMessage.sessionPresent = true; 503 | wireMessage.returnCode = input[pos++]; 504 | break; 505 | 506 | case MESSAGE_TYPE.PUBLISH: 507 | var qos = (messageInfo >> 1) & 0x03; 508 | 509 | var len = readUint16(input, pos); 510 | pos += 2; 511 | var topicName = parseUTF8(input, pos, len); 512 | pos += len; 513 | // If QoS 1 or 2 there will be a messageIdentifier 514 | if (qos > 0) { 515 | wireMessage.messageIdentifier = readUint16(input, pos); 516 | pos += 2; 517 | } 518 | 519 | var message = new Message(input.subarray(pos, endPos)); 520 | if ((messageInfo & 0x01) == 0x01) 521 | message.retained = true; 522 | if ((messageInfo & 0x08) == 0x08) 523 | message.duplicate = true; 524 | message.qos = qos; 525 | message.destinationName = topicName; 526 | wireMessage.payloadMessage = message; 527 | break; 528 | 529 | case MESSAGE_TYPE.PUBACK: 530 | case MESSAGE_TYPE.PUBREC: 531 | case MESSAGE_TYPE.PUBREL: 532 | case MESSAGE_TYPE.PUBCOMP: 533 | case MESSAGE_TYPE.UNSUBACK: 534 | wireMessage.messageIdentifier = readUint16(input, pos); 535 | break; 536 | 537 | case MESSAGE_TYPE.SUBACK: 538 | wireMessage.messageIdentifier = readUint16(input, pos); 539 | pos += 2; 540 | wireMessage.returnCode = input.subarray(pos, endPos); 541 | break; 542 | 543 | default: 544 | break; 545 | } 546 | 547 | return [wireMessage,endPos]; 548 | } 549 | 550 | function writeUint16(input, buffer, offset) { 551 | buffer[offset++] = input >> 8; //MSB 552 | buffer[offset++] = input % 256; //LSB 553 | return offset; 554 | } 555 | 556 | function writeString(input, utf8Length, buffer, offset) { 557 | offset = writeUint16(utf8Length, buffer, offset); 558 | stringToUTF8(input, buffer, offset); 559 | return offset + utf8Length; 560 | } 561 | 562 | function readUint16(buffer, offset) { 563 | return 256*buffer[offset] + buffer[offset+1]; 564 | } 565 | 566 | /** 567 | * Encodes an MQTT Multi-Byte Integer 568 | * @private 569 | */ 570 | function encodeMBI(number) { 571 | var output = new Array(1); 572 | var numBytes = 0; 573 | 574 | do { 575 | var digit = number % 128; 576 | number = number >> 7; 577 | if (number > 0) { 578 | digit |= 0x80; 579 | } 580 | output[numBytes++] = digit; 581 | } while ( (number > 0) && (numBytes<4) ); 582 | 583 | return output; 584 | } 585 | 586 | /** 587 | * Takes a String and calculates its length in bytes when encoded in UTF8. 588 | * @private 589 | */ 590 | function UTF8Length(input) { 591 | var output = 0; 592 | for (var i = 0; i 0x7FF) 596 | { 597 | // Surrogate pair means its a 4 byte character 598 | if (0xD800 <= charCode && charCode <= 0xDBFF) 599 | { 600 | i++; 601 | output++; 602 | } 603 | output +=3; 604 | } 605 | else if (charCode > 0x7F) 606 | output +=2; 607 | else 608 | output++; 609 | } 610 | return output; 611 | } 612 | 613 | /** 614 | * Takes a String and writes it into an array as UTF8 encoded bytes. 615 | * @private 616 | */ 617 | function stringToUTF8(input, output, start) { 618 | var pos = start; 619 | for (var i = 0; i>6 & 0x1F | 0xC0; 636 | output[pos++] = charCode & 0x3F | 0x80; 637 | } else if (charCode <= 0xFFFF) { 638 | output[pos++] = charCode>>12 & 0x0F | 0xE0; 639 | output[pos++] = charCode>>6 & 0x3F | 0x80; 640 | output[pos++] = charCode & 0x3F | 0x80; 641 | } else { 642 | output[pos++] = charCode>>18 & 0x07 | 0xF0; 643 | output[pos++] = charCode>>12 & 0x3F | 0x80; 644 | output[pos++] = charCode>>6 & 0x3F | 0x80; 645 | output[pos++] = charCode & 0x3F | 0x80; 646 | } 647 | } 648 | return output; 649 | } 650 | 651 | function parseUTF8(input, offset, length) { 652 | var output = ""; 653 | var utf16; 654 | var pos = offset; 655 | 656 | while (pos < offset+length) 657 | { 658 | var byte1 = input[pos++]; 659 | if (byte1 < 128) 660 | utf16 = byte1; 661 | else 662 | { 663 | var byte2 = input[pos++]-128; 664 | if (byte2 < 0) 665 | throw new Error(format(ERROR.MALFORMED_UTF, [byte1.toString(16), byte2.toString(16),""])); 666 | if (byte1 < 0xE0) // 2 byte character 667 | utf16 = 64*(byte1-0xC0) + byte2; 668 | else 669 | { 670 | var byte3 = input[pos++]-128; 671 | if (byte3 < 0) 672 | throw new Error(format(ERROR.MALFORMED_UTF, [byte1.toString(16), byte2.toString(16), byte3.toString(16)])); 673 | if (byte1 < 0xF0) // 3 byte character 674 | utf16 = 4096*(byte1-0xE0) + 64*byte2 + byte3; 675 | else 676 | { 677 | var byte4 = input[pos++]-128; 678 | if (byte4 < 0) 679 | throw new Error(format(ERROR.MALFORMED_UTF, [byte1.toString(16), byte2.toString(16), byte3.toString(16), byte4.toString(16)])); 680 | if (byte1 < 0xF8) // 4 byte character 681 | utf16 = 262144*(byte1-0xF0) + 4096*byte2 + 64*byte3 + byte4; 682 | else // longer encodings are not supported 683 | throw new Error(format(ERROR.MALFORMED_UTF, [byte1.toString(16), byte2.toString(16), byte3.toString(16), byte4.toString(16)])); 684 | } 685 | } 686 | } 687 | 688 | if (utf16 > 0xFFFF) // 4 byte character - express as a surrogate pair 689 | { 690 | utf16 -= 0x10000; 691 | output += String.fromCharCode(0xD800 + (utf16 >> 10)); // lead character 692 | utf16 = 0xDC00 + (utf16 & 0x3FF); // trail character 693 | } 694 | output += String.fromCharCode(utf16); 695 | } 696 | return output; 697 | } 698 | 699 | /** 700 | * Repeat keepalive requests, monitor responses. 701 | * @ignore 702 | */ 703 | var Pinger = function(client, keepAliveInterval) { 704 | this._client = client; 705 | this._keepAliveInterval = keepAliveInterval*1000; 706 | this.isReset = false; 707 | 708 | var pingReq = new WireMessage(MESSAGE_TYPE.PINGREQ).encode(); 709 | 710 | var doTimeout = function (pinger) { 711 | return function () { 712 | return doPing.apply(pinger); 713 | }; 714 | }; 715 | 716 | /** @ignore */ 717 | var doPing = function() { 718 | if (!this.isReset) { 719 | this._client._trace("Pinger.doPing", "Timed out"); 720 | this._client._disconnected( ERROR.PING_TIMEOUT.code , format(ERROR.PING_TIMEOUT)); 721 | } else { 722 | this.isReset = false; 723 | this._client._trace("Pinger.doPing", "send PINGREQ"); 724 | this._client.socket.send(pingReq); 725 | this.timeout = setTimeout(doTimeout(this), this._keepAliveInterval); 726 | } 727 | }; 728 | 729 | this.reset = function() { 730 | this.isReset = true; 731 | clearTimeout(this.timeout); 732 | if (this._keepAliveInterval > 0) 733 | this.timeout = setTimeout(doTimeout(this), this._keepAliveInterval); 734 | }; 735 | 736 | this.cancel = function() { 737 | clearTimeout(this.timeout); 738 | }; 739 | }; 740 | 741 | /** 742 | * Monitor request completion. 743 | * @ignore 744 | */ 745 | var Timeout = function(client, timeoutSeconds, action, args) { 746 | if (!timeoutSeconds) 747 | timeoutSeconds = 30; 748 | 749 | var doTimeout = function (action, client, args) { 750 | return function () { 751 | return action.apply(client, args); 752 | }; 753 | }; 754 | this.timeout = setTimeout(doTimeout(action, client, args), timeoutSeconds * 1000); 755 | 756 | this.cancel = function() { 757 | clearTimeout(this.timeout); 758 | }; 759 | }; 760 | 761 | /** 762 | * Internal implementation of the Websockets MQTT V3.1 client. 763 | * 764 | * @name Paho.ClientImpl @constructor 765 | * @param {String} host the DNS nameof the webSocket host. 766 | * @param {Number} port the port number for that host. 767 | * @param {String} clientId the MQ client identifier. 768 | */ 769 | var ClientImpl = function (uri, host, port, path, clientId) { 770 | // Check dependencies are satisfied in this browser. 771 | if (!("WebSocket" in global && global.WebSocket !== null)) { 772 | throw new Error(format(ERROR.UNSUPPORTED, ["WebSocket"])); 773 | } 774 | if (!("ArrayBuffer" in global && global.ArrayBuffer !== null)) { 775 | throw new Error(format(ERROR.UNSUPPORTED, ["ArrayBuffer"])); 776 | } 777 | this._trace("Paho.Client", uri, host, port, path, clientId); 778 | 779 | this.host = host; 780 | this.port = port; 781 | this.path = path; 782 | this.uri = uri; 783 | this.clientId = clientId; 784 | this._wsuri = null; 785 | 786 | // Local storagekeys are qualified with the following string. 787 | // The conditional inclusion of path in the key is for backward 788 | // compatibility to when the path was not configurable and assumed to 789 | // be /mqtt 790 | this._localKey=host+":"+port+(path!="/mqtt"?":"+path:"")+":"+clientId+":"; 791 | 792 | // Create private instance-only message queue 793 | // Internal queue of messages to be sent, in sending order. 794 | this._msg_queue = []; 795 | this._buffered_msg_queue = []; 796 | 797 | // Messages we have sent and are expecting a response for, indexed by their respective message ids. 798 | this._sentMessages = {}; 799 | 800 | // Messages we have received and acknowleged and are expecting a confirm message for 801 | // indexed by their respective message ids. 802 | this._receivedMessages = {}; 803 | 804 | // Internal list of callbacks to be executed when messages 805 | // have been successfully sent over web socket, e.g. disconnect 806 | // when it doesn't have to wait for ACK, just message is dispatched. 807 | this._notify_msg_sent = {}; 808 | 809 | // Unique identifier for SEND messages, incrementing 810 | // counter as messages are sent. 811 | this._message_identifier = 1; 812 | 813 | // Used to determine the transmission sequence of stored sent messages. 814 | this._sequence = 0; 815 | 816 | 817 | // Load the local state, if any, from the saved version, only restore state relevant to this client. 818 | for (var key in localStorage) 819 | if ( key.indexOf("Sent:"+this._localKey) === 0 || key.indexOf("Received:"+this._localKey) === 0) 820 | this.restore(key); 821 | }; 822 | 823 | // Messaging Client public instance members. 824 | ClientImpl.prototype.host = null; 825 | ClientImpl.prototype.port = null; 826 | ClientImpl.prototype.path = null; 827 | ClientImpl.prototype.uri = null; 828 | ClientImpl.prototype.clientId = null; 829 | 830 | // Messaging Client private instance members. 831 | ClientImpl.prototype.socket = null; 832 | /* true once we have received an acknowledgement to a CONNECT packet. */ 833 | ClientImpl.prototype.connected = false; 834 | /* The largest message identifier allowed, may not be larger than 2**16 but 835 | * if set smaller reduces the maximum number of outbound messages allowed. 836 | */ 837 | ClientImpl.prototype.maxMessageIdentifier = 65536; 838 | ClientImpl.prototype.connectOptions = null; 839 | ClientImpl.prototype.hostIndex = null; 840 | ClientImpl.prototype.onConnected = null; 841 | ClientImpl.prototype.onConnectionLost = null; 842 | ClientImpl.prototype.onMessageDelivered = null; 843 | ClientImpl.prototype.onMessageArrived = null; 844 | ClientImpl.prototype.traceFunction = null; 845 | ClientImpl.prototype._msg_queue = null; 846 | ClientImpl.prototype._buffered_msg_queue = null; 847 | ClientImpl.prototype._connectTimeout = null; 848 | /* The sendPinger monitors how long we allow before we send data to prove to the server that we are alive. */ 849 | ClientImpl.prototype.sendPinger = null; 850 | /* The receivePinger monitors how long we allow before we require evidence that the server is alive. */ 851 | ClientImpl.prototype.receivePinger = null; 852 | ClientImpl.prototype._reconnectInterval = 1; // Reconnect Delay, starts at 1 second 853 | ClientImpl.prototype._reconnecting = false; 854 | ClientImpl.prototype._reconnectTimeout = null; 855 | ClientImpl.prototype.disconnectedPublishing = false; 856 | ClientImpl.prototype.disconnectedBufferSize = 5000; 857 | 858 | ClientImpl.prototype.receiveBuffer = null; 859 | 860 | ClientImpl.prototype._traceBuffer = null; 861 | ClientImpl.prototype._MAX_TRACE_ENTRIES = 100; 862 | 863 | ClientImpl.prototype.connect = function (connectOptions) { 864 | var connectOptionsMasked = this._traceMask(connectOptions, "password"); 865 | this._trace("Client.connect", connectOptionsMasked, this.socket, this.connected); 866 | 867 | if (this.connected) 868 | throw new Error(format(ERROR.INVALID_STATE, ["already connected"])); 869 | if (this.socket) 870 | throw new Error(format(ERROR.INVALID_STATE, ["already connected"])); 871 | 872 | if (this._reconnecting) { 873 | // connect() function is called while reconnect is in progress. 874 | // Terminate the auto reconnect process to use new connect options. 875 | this._reconnectTimeout.cancel(); 876 | this._reconnectTimeout = null; 877 | this._reconnecting = false; 878 | } 879 | 880 | this.connectOptions = connectOptions; 881 | this._reconnectInterval = 1; 882 | this._reconnecting = false; 883 | if (connectOptions.uris) { 884 | this.hostIndex = 0; 885 | this._doConnect(connectOptions.uris[0]); 886 | } else { 887 | this._doConnect(this.uri); 888 | } 889 | 890 | }; 891 | 892 | ClientImpl.prototype.subscribe = function (filter, subscribeOptions) { 893 | this._trace("Client.subscribe", filter, subscribeOptions); 894 | 895 | if (!this.connected) 896 | throw new Error(format(ERROR.INVALID_STATE, ["not connected"])); 897 | 898 | var wireMessage = new WireMessage(MESSAGE_TYPE.SUBSCRIBE); 899 | wireMessage.topics = filter.constructor === Array ? filter : [filter]; 900 | if (subscribeOptions.qos === undefined) 901 | subscribeOptions.qos = 0; 902 | wireMessage.requestedQos = []; 903 | for (var i = 0; i < wireMessage.topics.length; i++) 904 | wireMessage.requestedQos[i] = subscribeOptions.qos; 905 | 906 | if (subscribeOptions.onSuccess) { 907 | wireMessage.onSuccess = function(grantedQos) {subscribeOptions.onSuccess({invocationContext:subscribeOptions.invocationContext,grantedQos:grantedQos});}; 908 | } 909 | 910 | if (subscribeOptions.onFailure) { 911 | wireMessage.onFailure = function(errorCode) {subscribeOptions.onFailure({invocationContext:subscribeOptions.invocationContext,errorCode:errorCode, errorMessage:format(errorCode)});}; 912 | } 913 | 914 | if (subscribeOptions.timeout) { 915 | wireMessage.timeOut = new Timeout(this, subscribeOptions.timeout, subscribeOptions.onFailure, 916 | [{invocationContext:subscribeOptions.invocationContext, 917 | errorCode:ERROR.SUBSCRIBE_TIMEOUT.code, 918 | errorMessage:format(ERROR.SUBSCRIBE_TIMEOUT)}]); 919 | } 920 | 921 | // All subscriptions return a SUBACK. 922 | this._requires_ack(wireMessage); 923 | this._schedule_message(wireMessage); 924 | }; 925 | 926 | /** @ignore */ 927 | ClientImpl.prototype.unsubscribe = function(filter, unsubscribeOptions) { 928 | this._trace("Client.unsubscribe", filter, unsubscribeOptions); 929 | 930 | if (!this.connected) 931 | throw new Error(format(ERROR.INVALID_STATE, ["not connected"])); 932 | 933 | var wireMessage = new WireMessage(MESSAGE_TYPE.UNSUBSCRIBE); 934 | wireMessage.topics = filter.constructor === Array ? filter : [filter]; 935 | 936 | if (unsubscribeOptions.onSuccess) { 937 | wireMessage.callback = function() {unsubscribeOptions.onSuccess({invocationContext:unsubscribeOptions.invocationContext});}; 938 | } 939 | if (unsubscribeOptions.timeout) { 940 | wireMessage.timeOut = new Timeout(this, unsubscribeOptions.timeout, unsubscribeOptions.onFailure, 941 | [{invocationContext:unsubscribeOptions.invocationContext, 942 | errorCode:ERROR.UNSUBSCRIBE_TIMEOUT.code, 943 | errorMessage:format(ERROR.UNSUBSCRIBE_TIMEOUT)}]); 944 | } 945 | 946 | // All unsubscribes return a SUBACK. 947 | this._requires_ack(wireMessage); 948 | this._schedule_message(wireMessage); 949 | }; 950 | 951 | ClientImpl.prototype.send = function (message) { 952 | this._trace("Client.send", message); 953 | 954 | var wireMessage = new WireMessage(MESSAGE_TYPE.PUBLISH); 955 | wireMessage.payloadMessage = message; 956 | 957 | if (this.connected) { 958 | // Mark qos 1 & 2 message as "ACK required" 959 | // For qos 0 message, invoke onMessageDelivered callback if there is one. 960 | // Then schedule the message. 961 | if (message.qos > 0) { 962 | this._requires_ack(wireMessage); 963 | } else if (this.onMessageDelivered) { 964 | this._notify_msg_sent[wireMessage] = this.onMessageDelivered(wireMessage.payloadMessage); 965 | } 966 | this._schedule_message(wireMessage); 967 | } else { 968 | // Currently disconnected, will not schedule this message 969 | // Check if reconnecting is in progress and disconnected publish is enabled. 970 | if (this._reconnecting && this.disconnectedPublishing) { 971 | // Check the limit which include the "required ACK" messages 972 | var messageCount = Object.keys(this._sentMessages).length + this._buffered_msg_queue.length; 973 | if (messageCount > this.disconnectedBufferSize) { 974 | throw new Error(format(ERROR.BUFFER_FULL, [this.disconnectedBufferSize])); 975 | } else { 976 | if (message.qos > 0) { 977 | // Mark this message as "ACK required" 978 | this._requires_ack(wireMessage); 979 | } else { 980 | wireMessage.sequence = ++this._sequence; 981 | // Add messages in fifo order to array, by adding to start 982 | this._buffered_msg_queue.unshift(wireMessage); 983 | } 984 | } 985 | } else { 986 | throw new Error(format(ERROR.INVALID_STATE, ["not connected"])); 987 | } 988 | } 989 | }; 990 | 991 | ClientImpl.prototype.disconnect = function () { 992 | this._trace("Client.disconnect"); 993 | 994 | if (this._reconnecting) { 995 | // disconnect() function is called while reconnect is in progress. 996 | // Terminate the auto reconnect process. 997 | this._reconnectTimeout.cancel(); 998 | this._reconnectTimeout = null; 999 | this._reconnecting = false; 1000 | } 1001 | 1002 | if (!this.socket) 1003 | throw new Error(format(ERROR.INVALID_STATE, ["not connecting or connected"])); 1004 | 1005 | var wireMessage = new WireMessage(MESSAGE_TYPE.DISCONNECT); 1006 | 1007 | // Run the disconnected call back as soon as the message has been sent, 1008 | // in case of a failure later on in the disconnect processing. 1009 | // as a consequence, the _disconected call back may be run several times. 1010 | this._notify_msg_sent[wireMessage] = scope(this._disconnected, this); 1011 | 1012 | this._schedule_message(wireMessage); 1013 | }; 1014 | 1015 | ClientImpl.prototype.getTraceLog = function () { 1016 | if ( this._traceBuffer !== null ) { 1017 | this._trace("Client.getTraceLog", new Date()); 1018 | this._trace("Client.getTraceLog in flight messages", this._sentMessages.length); 1019 | for (var key in this._sentMessages) 1020 | this._trace("_sentMessages ",key, this._sentMessages[key]); 1021 | for (var key in this._receivedMessages) 1022 | this._trace("_receivedMessages ",key, this._receivedMessages[key]); 1023 | 1024 | return this._traceBuffer; 1025 | } 1026 | }; 1027 | 1028 | ClientImpl.prototype.startTrace = function () { 1029 | if ( this._traceBuffer === null ) { 1030 | this._traceBuffer = []; 1031 | } 1032 | this._trace("Client.startTrace", new Date(), version); 1033 | }; 1034 | 1035 | ClientImpl.prototype.stopTrace = function () { 1036 | delete this._traceBuffer; 1037 | }; 1038 | 1039 | ClientImpl.prototype._doConnect = function (wsurl) { 1040 | // When the socket is open, this client will send the CONNECT WireMessage using the saved parameters. 1041 | if (this.connectOptions.useSSL) { 1042 | var uriParts = wsurl.split(":"); 1043 | uriParts[0] = "wss"; 1044 | wsurl = uriParts.join(":"); 1045 | } 1046 | this._wsuri = wsurl; 1047 | this.connected = false; 1048 | 1049 | 1050 | 1051 | if (this.connectOptions.mqttVersion < 4) { 1052 | this.socket = new WebSocket(wsurl, ["mqttv3.1"]); 1053 | } else { 1054 | this.socket = new WebSocket(wsurl, ["mqtt"]); 1055 | } 1056 | this.socket.binaryType = "arraybuffer"; 1057 | this.socket.onopen = scope(this._on_socket_open, this); 1058 | this.socket.onmessage = scope(this._on_socket_message, this); 1059 | this.socket.onerror = scope(this._on_socket_error, this); 1060 | this.socket.onclose = scope(this._on_socket_close, this); 1061 | 1062 | this.sendPinger = new Pinger(this, this.connectOptions.keepAliveInterval); 1063 | this.receivePinger = new Pinger(this, this.connectOptions.keepAliveInterval); 1064 | if (this._connectTimeout) { 1065 | this._connectTimeout.cancel(); 1066 | this._connectTimeout = null; 1067 | } 1068 | this._connectTimeout = new Timeout(this, this.connectOptions.timeout, this._disconnected, [ERROR.CONNECT_TIMEOUT.code, format(ERROR.CONNECT_TIMEOUT)]); 1069 | }; 1070 | 1071 | 1072 | // Schedule a new message to be sent over the WebSockets 1073 | // connection. CONNECT messages cause WebSocket connection 1074 | // to be started. All other messages are queued internally 1075 | // until this has happened. When WS connection starts, process 1076 | // all outstanding messages. 1077 | ClientImpl.prototype._schedule_message = function (message) { 1078 | // Add messages in fifo order to array, by adding to start 1079 | this._msg_queue.unshift(message); 1080 | // Process outstanding messages in the queue if we have an open socket, and have received CONNACK. 1081 | if (this.connected) { 1082 | this._process_queue(); 1083 | } 1084 | }; 1085 | 1086 | ClientImpl.prototype.store = function(prefix, wireMessage) { 1087 | var storedMessage = {type:wireMessage.type, messageIdentifier:wireMessage.messageIdentifier, version:1}; 1088 | 1089 | switch(wireMessage.type) { 1090 | case MESSAGE_TYPE.PUBLISH: 1091 | if(wireMessage.pubRecReceived) 1092 | storedMessage.pubRecReceived = true; 1093 | 1094 | // Convert the payload to a hex string. 1095 | storedMessage.payloadMessage = {}; 1096 | var hex = ""; 1097 | var messageBytes = wireMessage.payloadMessage.payloadBytes; 1098 | for (var i=0; i= 2) { 1141 | var x = parseInt(hex.substring(0, 2), 16); 1142 | hex = hex.substring(2, hex.length); 1143 | byteStream[i++] = x; 1144 | } 1145 | var payloadMessage = new Message(byteStream); 1146 | 1147 | payloadMessage.qos = storedMessage.payloadMessage.qos; 1148 | payloadMessage.destinationName = storedMessage.payloadMessage.destinationName; 1149 | if (storedMessage.payloadMessage.duplicate) 1150 | payloadMessage.duplicate = true; 1151 | if (storedMessage.payloadMessage.retained) 1152 | payloadMessage.retained = true; 1153 | wireMessage.payloadMessage = payloadMessage; 1154 | 1155 | break; 1156 | 1157 | default: 1158 | throw Error(format(ERROR.INVALID_STORED_DATA, [key, value])); 1159 | } 1160 | 1161 | if (key.indexOf("Sent:"+this._localKey) === 0) { 1162 | wireMessage.payloadMessage.duplicate = true; 1163 | this._sentMessages[wireMessage.messageIdentifier] = wireMessage; 1164 | } else if (key.indexOf("Received:"+this._localKey) === 0) { 1165 | this._receivedMessages[wireMessage.messageIdentifier] = wireMessage; 1166 | } 1167 | }; 1168 | 1169 | ClientImpl.prototype._process_queue = function () { 1170 | var message = null; 1171 | 1172 | // Send all queued messages down socket connection 1173 | while ((message = this._msg_queue.pop())) { 1174 | this._socket_send(message); 1175 | // Notify listeners that message was successfully sent 1176 | if (this._notify_msg_sent[message]) { 1177 | this._notify_msg_sent[message](); 1178 | delete this._notify_msg_sent[message]; 1179 | } 1180 | } 1181 | }; 1182 | 1183 | /** 1184 | * Expect an ACK response for this message. Add message to the set of in progress 1185 | * messages and set an unused identifier in this message. 1186 | * @ignore 1187 | */ 1188 | ClientImpl.prototype._requires_ack = function (wireMessage) { 1189 | var messageCount = Object.keys(this._sentMessages).length; 1190 | if (messageCount > this.maxMessageIdentifier) 1191 | throw Error ("Too many messages:"+messageCount); 1192 | 1193 | while(this._sentMessages[this._message_identifier] !== undefined) { 1194 | this._message_identifier++; 1195 | } 1196 | wireMessage.messageIdentifier = this._message_identifier; 1197 | this._sentMessages[wireMessage.messageIdentifier] = wireMessage; 1198 | if (wireMessage.type === MESSAGE_TYPE.PUBLISH) { 1199 | this.store("Sent:", wireMessage); 1200 | } 1201 | if (this._message_identifier === this.maxMessageIdentifier) { 1202 | this._message_identifier = 1; 1203 | } 1204 | }; 1205 | 1206 | /** 1207 | * Called when the underlying websocket has been opened. 1208 | * @ignore 1209 | */ 1210 | ClientImpl.prototype._on_socket_open = function () { 1211 | // Create the CONNECT message object. 1212 | var wireMessage = new WireMessage(MESSAGE_TYPE.CONNECT, this.connectOptions); 1213 | wireMessage.clientId = this.clientId; 1214 | this._socket_send(wireMessage); 1215 | }; 1216 | 1217 | /** 1218 | * Called when the underlying websocket has received a complete packet. 1219 | * @ignore 1220 | */ 1221 | ClientImpl.prototype._on_socket_message = function (event) { 1222 | this._trace("Client._on_socket_message", event.data); 1223 | var messages = this._deframeMessages(event.data); 1224 | for (var i = 0; i < messages.length; i+=1) { 1225 | this._handleMessage(messages[i]); 1226 | } 1227 | }; 1228 | 1229 | ClientImpl.prototype._deframeMessages = function(data) { 1230 | var byteArray = new Uint8Array(data); 1231 | var messages = []; 1232 | if (this.receiveBuffer) { 1233 | var newData = new Uint8Array(this.receiveBuffer.length+byteArray.length); 1234 | newData.set(this.receiveBuffer); 1235 | newData.set(byteArray,this.receiveBuffer.length); 1236 | byteArray = newData; 1237 | delete this.receiveBuffer; 1238 | } 1239 | try { 1240 | var offset = 0; 1241 | while(offset < byteArray.length) { 1242 | var result = decodeMessage(byteArray,offset); 1243 | var wireMessage = result[0]; 1244 | offset = result[1]; 1245 | if (wireMessage !== null) { 1246 | messages.push(wireMessage); 1247 | } else { 1248 | break; 1249 | } 1250 | } 1251 | if (offset < byteArray.length) { 1252 | this.receiveBuffer = byteArray.subarray(offset); 1253 | } 1254 | } catch (error) { 1255 | var errorStack = ((error.hasOwnProperty("stack") == "undefined") ? error.stack.toString() : "No Error Stack Available"); 1256 | this._disconnected(ERROR.INTERNAL_ERROR.code , format(ERROR.INTERNAL_ERROR, [error.message,errorStack])); 1257 | return; 1258 | } 1259 | return messages; 1260 | }; 1261 | 1262 | ClientImpl.prototype._handleMessage = function(wireMessage) { 1263 | 1264 | this._trace("Client._handleMessage", wireMessage); 1265 | 1266 | try { 1267 | switch(wireMessage.type) { 1268 | case MESSAGE_TYPE.CONNACK: 1269 | this._connectTimeout.cancel(); 1270 | if (this._reconnectTimeout) 1271 | this._reconnectTimeout.cancel(); 1272 | 1273 | // If we have started using clean session then clear up the local state. 1274 | if (this.connectOptions.cleanSession) { 1275 | for (var key in this._sentMessages) { 1276 | var sentMessage = this._sentMessages[key]; 1277 | localStorage.removeItem("Sent:"+this._localKey+sentMessage.messageIdentifier); 1278 | } 1279 | this._sentMessages = {}; 1280 | 1281 | for (var key in this._receivedMessages) { 1282 | var receivedMessage = this._receivedMessages[key]; 1283 | localStorage.removeItem("Received:"+this._localKey+receivedMessage.messageIdentifier); 1284 | } 1285 | this._receivedMessages = {}; 1286 | } 1287 | // Client connected and ready for business. 1288 | if (wireMessage.returnCode === 0) { 1289 | 1290 | this.connected = true; 1291 | // Jump to the end of the list of uris and stop looking for a good host. 1292 | 1293 | if (this.connectOptions.uris) 1294 | this.hostIndex = this.connectOptions.uris.length; 1295 | 1296 | } else { 1297 | this._disconnected(ERROR.CONNACK_RETURNCODE.code , format(ERROR.CONNACK_RETURNCODE, [wireMessage.returnCode, CONNACK_RC[wireMessage.returnCode]])); 1298 | break; 1299 | } 1300 | 1301 | // Resend messages. 1302 | var sequencedMessages = []; 1303 | for (var msgId in this._sentMessages) { 1304 | if (this._sentMessages.hasOwnProperty(msgId)) 1305 | sequencedMessages.push(this._sentMessages[msgId]); 1306 | } 1307 | 1308 | // Also schedule qos 0 buffered messages if any 1309 | if (this._buffered_msg_queue.length > 0) { 1310 | var msg = null; 1311 | while ((msg = this._buffered_msg_queue.pop())) { 1312 | sequencedMessages.push(msg); 1313 | if (this.onMessageDelivered) 1314 | this._notify_msg_sent[msg] = this.onMessageDelivered(msg.payloadMessage); 1315 | } 1316 | } 1317 | 1318 | // Sort sentMessages into the original sent order. 1319 | var sequencedMessages = sequencedMessages.sort(function(a,b) {return a.sequence - b.sequence;} ); 1320 | for (var i=0, len=sequencedMessages.length; i 1674 | * Most applications will create just one Client object and then call its connect() method, 1675 | * however applications can create more than one Client object if they wish. 1676 | * In this case the combination of host, port and clientId attributes must be different for each Client object. 1677 | *

1678 | * The send, subscribe and unsubscribe methods are implemented as asynchronous JavaScript methods 1679 | * (even though the underlying protocol exchange might be synchronous in nature). 1680 | * This means they signal their completion by calling back to the application, 1681 | * via Success or Failure callback functions provided by the application on the method in question. 1682 | * Such callbacks are called at most once per method invocation and do not persist beyond the lifetime 1683 | * of the script that made the invocation. 1684 | *

1685 | * In contrast there are some callback functions, most notably onMessageArrived, 1686 | * that are defined on the {@link Paho.Client} object. 1687 | * These may get called multiple times, and aren't directly related to specific method invocations made by the client. 1688 | * 1689 | * @name Paho.Client 1690 | * 1691 | * @constructor 1692 | * 1693 | * @param {string} host - the address of the messaging server, as a fully qualified WebSocket URI, as a DNS name or dotted decimal IP address. 1694 | * @param {number} port - the port number to connect to - only required if host is not a URI 1695 | * @param {string} path - the path on the host to connect to - only used if host is not a URI. Default: '/mqtt'. 1696 | * @param {string} clientId - the Messaging client identifier, between 1 and 23 characters in length. 1697 | * 1698 | * @property {string} host - read only the server's DNS hostname or dotted decimal IP address. 1699 | * @property {number} port - read only the server's port. 1700 | * @property {string} path - read only the server's path. 1701 | * @property {string} clientId - read only used when connecting to the server. 1702 | * @property {function} onConnectionLost - called when a connection has been lost. 1703 | * after a connect() method has succeeded. 1704 | * Establish the call back used when a connection has been lost. The connection may be 1705 | * lost because the client initiates a disconnect or because the server or network 1706 | * cause the client to be disconnected. The disconnect call back may be called without 1707 | * the connectionComplete call back being invoked if, for example the client fails to 1708 | * connect. 1709 | * A single response object parameter is passed to the onConnectionLost callback containing the following fields: 1710 | *

    1711 | *
  1. errorCode 1712 | *
  2. errorMessage 1713 | *
1714 | * @property {function} onMessageDelivered - called when a message has been delivered. 1715 | * All processing that this Client will ever do has been completed. So, for example, 1716 | * in the case of a Qos=2 message sent by this client, the PubComp flow has been received from the server 1717 | * and the message has been removed from persistent storage before this callback is invoked. 1718 | * Parameters passed to the onMessageDelivered callback are: 1719 | *
    1720 | *
  1. {@link Paho.Message} that was delivered. 1721 | *
1722 | * @property {function} onMessageArrived - called when a message has arrived in this Paho.client. 1723 | * Parameters passed to the onMessageArrived callback are: 1724 | *
    1725 | *
  1. {@link Paho.Message} that has arrived. 1726 | *
1727 | * @property {function} onConnected - called when a connection is successfully made to the server. 1728 | * after a connect() method. 1729 | * Parameters passed to the onConnected callback are: 1730 | *
    1731 | *
  1. reconnect (boolean) - If true, the connection was the result of a reconnect.
  2. 1732 | *
  3. URI (string) - The URI used to connect to the server.
  4. 1733 | *
1734 | * @property {boolean} disconnectedPublishing - if set, will enable disconnected publishing in 1735 | * in the event that the connection to the server is lost. 1736 | * @property {number} disconnectedBufferSize - Used to set the maximum number of messages that the disconnected 1737 | * buffer will hold before rejecting new messages. Default size: 5000 messages 1738 | * @property {function} trace - called whenever trace is called. TODO 1739 | */ 1740 | var Client = function (host, port, path, clientId) { 1741 | 1742 | var uri; 1743 | 1744 | if (typeof host !== "string") 1745 | throw new Error(format(ERROR.INVALID_TYPE, [typeof host, "host"])); 1746 | 1747 | if (arguments.length == 2) { 1748 | // host: must be full ws:// uri 1749 | // port: clientId 1750 | clientId = port; 1751 | uri = host; 1752 | var match = uri.match(/^(wss?):\/\/((\[(.+)\])|([^\/]+?))(:(\d+))?(\/.*)$/); 1753 | if (match) { 1754 | host = match[4]||match[2]; 1755 | port = parseInt(match[7]); 1756 | path = match[8]; 1757 | } else { 1758 | throw new Error(format(ERROR.INVALID_ARGUMENT,[host,"host"])); 1759 | } 1760 | } else { 1761 | if (arguments.length == 3) { 1762 | clientId = path; 1763 | path = "/mqtt"; 1764 | } 1765 | if (typeof port !== "number" || port < 0) 1766 | throw new Error(format(ERROR.INVALID_TYPE, [typeof port, "port"])); 1767 | if (typeof path !== "string") 1768 | throw new Error(format(ERROR.INVALID_TYPE, [typeof path, "path"])); 1769 | 1770 | var ipv6AddSBracket = (host.indexOf(":") !== -1 && host.slice(0,1) !== "[" && host.slice(-1) !== "]"); 1771 | uri = "ws://"+(ipv6AddSBracket?"["+host+"]":host)+":"+port+path; 1772 | } 1773 | 1774 | var clientIdLength = 0; 1775 | for (var i = 0; i 65535) 1783 | throw new Error(format(ERROR.INVALID_ARGUMENT, [clientId, "clientId"])); 1784 | 1785 | var client = new ClientImpl(uri, host, port, path, clientId); 1786 | 1787 | //Public Properties 1788 | Object.defineProperties(this,{ 1789 | "host":{ 1790 | get: function() { return host; }, 1791 | set: function() { throw new Error(format(ERROR.UNSUPPORTED_OPERATION)); } 1792 | }, 1793 | "port":{ 1794 | get: function() { return port; }, 1795 | set: function() { throw new Error(format(ERROR.UNSUPPORTED_OPERATION)); } 1796 | }, 1797 | "path":{ 1798 | get: function() { return path; }, 1799 | set: function() { throw new Error(format(ERROR.UNSUPPORTED_OPERATION)); } 1800 | }, 1801 | "uri":{ 1802 | get: function() { return uri; }, 1803 | set: function() { throw new Error(format(ERROR.UNSUPPORTED_OPERATION)); } 1804 | }, 1805 | "clientId":{ 1806 | get: function() { return client.clientId; }, 1807 | set: function() { throw new Error(format(ERROR.UNSUPPORTED_OPERATION)); } 1808 | }, 1809 | "onConnected":{ 1810 | get: function() { return client.onConnected; }, 1811 | set: function(newOnConnected) { 1812 | if (typeof newOnConnected === "function") 1813 | client.onConnected = newOnConnected; 1814 | else 1815 | throw new Error(format(ERROR.INVALID_TYPE, [typeof newOnConnected, "onConnected"])); 1816 | } 1817 | }, 1818 | "disconnectedPublishing":{ 1819 | get: function() { return client.disconnectedPublishing; }, 1820 | set: function(newDisconnectedPublishing) { 1821 | client.disconnectedPublishing = newDisconnectedPublishing; 1822 | } 1823 | }, 1824 | "disconnectedBufferSize":{ 1825 | get: function() { return client.disconnectedBufferSize; }, 1826 | set: function(newDisconnectedBufferSize) { 1827 | client.disconnectedBufferSize = newDisconnectedBufferSize; 1828 | } 1829 | }, 1830 | "onConnectionLost":{ 1831 | get: function() { return client.onConnectionLost; }, 1832 | set: function(newOnConnectionLost) { 1833 | if (typeof newOnConnectionLost === "function") 1834 | client.onConnectionLost = newOnConnectionLost; 1835 | else 1836 | throw new Error(format(ERROR.INVALID_TYPE, [typeof newOnConnectionLost, "onConnectionLost"])); 1837 | } 1838 | }, 1839 | "onMessageDelivered":{ 1840 | get: function() { return client.onMessageDelivered; }, 1841 | set: function(newOnMessageDelivered) { 1842 | if (typeof newOnMessageDelivered === "function") 1843 | client.onMessageDelivered = newOnMessageDelivered; 1844 | else 1845 | throw new Error(format(ERROR.INVALID_TYPE, [typeof newOnMessageDelivered, "onMessageDelivered"])); 1846 | } 1847 | }, 1848 | "onMessageArrived":{ 1849 | get: function() { return client.onMessageArrived; }, 1850 | set: function(newOnMessageArrived) { 1851 | if (typeof newOnMessageArrived === "function") 1852 | client.onMessageArrived = newOnMessageArrived; 1853 | else 1854 | throw new Error(format(ERROR.INVALID_TYPE, [typeof newOnMessageArrived, "onMessageArrived"])); 1855 | } 1856 | }, 1857 | "trace":{ 1858 | get: function() { return client.traceFunction; }, 1859 | set: function(trace) { 1860 | if(typeof trace === "function"){ 1861 | client.traceFunction = trace; 1862 | }else{ 1863 | throw new Error(format(ERROR.INVALID_TYPE, [typeof trace, "onTrace"])); 1864 | } 1865 | } 1866 | }, 1867 | }); 1868 | 1869 | /** 1870 | * Connect this Messaging client to its server. 1871 | * 1872 | * @name Paho.Client#connect 1873 | * @function 1874 | * @param {object} connectOptions - Attributes used with the connection. 1875 | * @param {number} connectOptions.timeout - If the connect has not succeeded within this 1876 | * number of seconds, it is deemed to have failed. 1877 | * The default is 30 seconds. 1878 | * @param {string} connectOptions.userName - Authentication username for this connection. 1879 | * @param {string} connectOptions.password - Authentication password for this connection. 1880 | * @param {Paho.Message} connectOptions.willMessage - sent by the server when the client 1881 | * disconnects abnormally. 1882 | * @param {number} connectOptions.keepAliveInterval - the server disconnects this client if 1883 | * there is no activity for this number of seconds. 1884 | * The default value of 60 seconds is assumed if not set. 1885 | * @param {boolean} connectOptions.cleanSession - if true(default) the client and server 1886 | * persistent state is deleted on successful connect. 1887 | * @param {boolean} connectOptions.useSSL - if present and true, use an SSL Websocket connection. 1888 | * @param {object} connectOptions.invocationContext - passed to the onSuccess callback or onFailure callback. 1889 | * @param {function} connectOptions.onSuccess - called when the connect acknowledgement 1890 | * has been received from the server. 1891 | * A single response object parameter is passed to the onSuccess callback containing the following fields: 1892 | *
    1893 | *
  1. invocationContext as passed in to the onSuccess method in the connectOptions. 1894 | *
1895 | * @param {function} connectOptions.onFailure - called when the connect request has failed or timed out. 1896 | * A single response object parameter is passed to the onFailure callback containing the following fields: 1897 | *
    1898 | *
  1. invocationContext as passed in to the onFailure method in the connectOptions. 1899 | *
  2. errorCode a number indicating the nature of the error. 1900 | *
  3. errorMessage text describing the error. 1901 | *
1902 | * @param {array} connectOptions.hosts - If present this contains either a set of hostnames or fully qualified 1903 | * WebSocket URIs (ws://iot.eclipse.org:80/ws), that are tried in order in place 1904 | * of the host and port paramater on the construtor. The hosts are tried one at at time in order until 1905 | * one of then succeeds. 1906 | * @param {array} connectOptions.ports - If present the set of ports matching the hosts. If hosts contains URIs, this property 1907 | * is not used. 1908 | * @param {boolean} connectOptions.reconnect - Sets whether the client will automatically attempt to reconnect 1909 | * to the server if the connection is lost. 1910 | *
    1911 | *
  • If set to false, the client will not attempt to automatically reconnect to the server in the event that the 1912 | * connection is lost.
  • 1913 | *
  • If set to true, in the event that the connection is lost, the client will attempt to reconnect to the server. 1914 | * It will initially wait 1 second before it attempts to reconnect, for every failed reconnect attempt, the delay 1915 | * will double until it is at 2 minutes at which point the delay will stay at 2 minutes.
  • 1916 | *
1917 | * @param {number} connectOptions.mqttVersion - The version of MQTT to use to connect to the MQTT Broker. 1918 | *
    1919 | *
  • 3 - MQTT V3.1
  • 1920 | *
  • 4 - MQTT V3.1.1
  • 1921 | *
1922 | * @param {boolean} connectOptions.mqttVersionExplicit - If set to true, will force the connection to use the 1923 | * selected MQTT Version or will fail to connect. 1924 | * @param {array} connectOptions.uris - If present, should contain a list of fully qualified WebSocket uris 1925 | * (e.g. ws://iot.eclipse.org:80/ws), that are tried in order in place of the host and port parameter of the construtor. 1926 | * The uris are tried one at a time in order until one of them succeeds. Do not use this in conjunction with hosts as 1927 | * the hosts array will be converted to uris and will overwrite this property. 1928 | * @throws {InvalidState} If the client is not in disconnected state. The client must have received connectionLost 1929 | * or disconnected before calling connect for a second or subsequent time. 1930 | */ 1931 | this.connect = function (connectOptions) { 1932 | connectOptions = connectOptions || {} ; 1933 | validate(connectOptions, {timeout:"number", 1934 | userName:"string", 1935 | password:"string", 1936 | willMessage:"object", 1937 | keepAliveInterval:"number", 1938 | cleanSession:"boolean", 1939 | useSSL:"boolean", 1940 | invocationContext:"object", 1941 | onSuccess:"function", 1942 | onFailure:"function", 1943 | hosts:"object", 1944 | ports:"object", 1945 | reconnect:"boolean", 1946 | mqttVersion:"number", 1947 | mqttVersionExplicit:"boolean", 1948 | uris: "object"}); 1949 | 1950 | // If no keep alive interval is set, assume 60 seconds. 1951 | if (connectOptions.keepAliveInterval === undefined) 1952 | connectOptions.keepAliveInterval = 60; 1953 | 1954 | if (connectOptions.mqttVersion > 4 || connectOptions.mqttVersion < 3) { 1955 | throw new Error(format(ERROR.INVALID_ARGUMENT, [connectOptions.mqttVersion, "connectOptions.mqttVersion"])); 1956 | } 1957 | 1958 | if (connectOptions.mqttVersion === undefined) { 1959 | connectOptions.mqttVersionExplicit = false; 1960 | connectOptions.mqttVersion = 4; 1961 | } else { 1962 | connectOptions.mqttVersionExplicit = true; 1963 | } 1964 | 1965 | //Check that if password is set, so is username 1966 | if (connectOptions.password !== undefined && connectOptions.userName === undefined) 1967 | throw new Error(format(ERROR.INVALID_ARGUMENT, [connectOptions.password, "connectOptions.password"])); 1968 | 1969 | if (connectOptions.willMessage) { 1970 | if (!(connectOptions.willMessage instanceof Message)) 1971 | throw new Error(format(ERROR.INVALID_TYPE, [connectOptions.willMessage, "connectOptions.willMessage"])); 1972 | // The will message must have a payload that can be represented as a string. 1973 | // Cause the willMessage to throw an exception if this is not the case. 1974 | connectOptions.willMessage.stringPayload = null; 1975 | 1976 | if (typeof connectOptions.willMessage.destinationName === "undefined") 1977 | throw new Error(format(ERROR.INVALID_TYPE, [typeof connectOptions.willMessage.destinationName, "connectOptions.willMessage.destinationName"])); 1978 | } 1979 | if (typeof connectOptions.cleanSession === "undefined") 1980 | connectOptions.cleanSession = true; 1981 | if (connectOptions.hosts) { 1982 | 1983 | if (!(connectOptions.hosts instanceof Array) ) 1984 | throw new Error(format(ERROR.INVALID_ARGUMENT, [connectOptions.hosts, "connectOptions.hosts"])); 1985 | if (connectOptions.hosts.length <1 ) 1986 | throw new Error(format(ERROR.INVALID_ARGUMENT, [connectOptions.hosts, "connectOptions.hosts"])); 1987 | 1988 | var usingURIs = false; 1989 | for (var i = 0; i 2038 | * @param {object} subscribeOptions - used to control the subscription 2039 | * 2040 | * @param {number} subscribeOptions.qos - the maximum qos of any publications sent 2041 | * as a result of making this subscription. 2042 | * @param {object} subscribeOptions.invocationContext - passed to the onSuccess callback 2043 | * or onFailure callback. 2044 | * @param {function} subscribeOptions.onSuccess - called when the subscribe acknowledgement 2045 | * has been received from the server. 2046 | * A single response object parameter is passed to the onSuccess callback containing the following fields: 2047 | *
    2048 | *
  1. invocationContext if set in the subscribeOptions. 2049 | *
2050 | * @param {function} subscribeOptions.onFailure - called when the subscribe request has failed or timed out. 2051 | * A single response object parameter is passed to the onFailure callback containing the following fields: 2052 | *
    2053 | *
  1. invocationContext - if set in the subscribeOptions. 2054 | *
  2. errorCode - a number indicating the nature of the error. 2055 | *
  3. errorMessage - text describing the error. 2056 | *
2057 | * @param {number} subscribeOptions.timeout - which, if present, determines the number of 2058 | * seconds after which the onFailure calback is called. 2059 | * The presence of a timeout does not prevent the onSuccess 2060 | * callback from being called when the subscribe completes. 2061 | * @throws {InvalidState} if the client is not in connected state. 2062 | */ 2063 | this.subscribe = function (filter, subscribeOptions) { 2064 | if (typeof filter !== "string" && filter.constructor !== Array) 2065 | throw new Error("Invalid argument:"+filter); 2066 | subscribeOptions = subscribeOptions || {} ; 2067 | validate(subscribeOptions, {qos:"number", 2068 | invocationContext:"object", 2069 | onSuccess:"function", 2070 | onFailure:"function", 2071 | timeout:"number" 2072 | }); 2073 | if (subscribeOptions.timeout && !subscribeOptions.onFailure) 2074 | throw new Error("subscribeOptions.timeout specified with no onFailure callback."); 2075 | if (typeof subscribeOptions.qos !== "undefined" && !(subscribeOptions.qos === 0 || subscribeOptions.qos === 1 || subscribeOptions.qos === 2 )) 2076 | throw new Error(format(ERROR.INVALID_ARGUMENT, [subscribeOptions.qos, "subscribeOptions.qos"])); 2077 | client.subscribe(filter, subscribeOptions); 2078 | }; 2079 | 2080 | /** 2081 | * Unsubscribe for messages, stop receiving messages sent to destinations described by the filter. 2082 | * 2083 | * @name Paho.Client#unsubscribe 2084 | * @function 2085 | * @param {string} filter - describing the destinations to receive messages from. 2086 | * @param {object} unsubscribeOptions - used to control the subscription 2087 | * @param {object} unsubscribeOptions.invocationContext - passed to the onSuccess callback 2088 | or onFailure callback. 2089 | * @param {function} unsubscribeOptions.onSuccess - called when the unsubscribe acknowledgement has been received from the server. 2090 | * A single response object parameter is passed to the 2091 | * onSuccess callback containing the following fields: 2092 | *
    2093 | *
  1. invocationContext - if set in the unsubscribeOptions. 2094 | *
2095 | * @param {function} unsubscribeOptions.onFailure called when the unsubscribe request has failed or timed out. 2096 | * A single response object parameter is passed to the onFailure callback containing the following fields: 2097 | *
    2098 | *
  1. invocationContext - if set in the unsubscribeOptions. 2099 | *
  2. errorCode - a number indicating the nature of the error. 2100 | *
  3. errorMessage - text describing the error. 2101 | *
2102 | * @param {number} unsubscribeOptions.timeout - which, if present, determines the number of seconds 2103 | * after which the onFailure callback is called. The presence of 2104 | * a timeout does not prevent the onSuccess callback from being 2105 | * called when the unsubscribe completes 2106 | * @throws {InvalidState} if the client is not in connected state. 2107 | */ 2108 | this.unsubscribe = function (filter, unsubscribeOptions) { 2109 | if (typeof filter !== "string" && filter.constructor !== Array) 2110 | throw new Error("Invalid argument:"+filter); 2111 | unsubscribeOptions = unsubscribeOptions || {} ; 2112 | validate(unsubscribeOptions, {invocationContext:"object", 2113 | onSuccess:"function", 2114 | onFailure:"function", 2115 | timeout:"number" 2116 | }); 2117 | if (unsubscribeOptions.timeout && !unsubscribeOptions.onFailure) 2118 | throw new Error("unsubscribeOptions.timeout specified with no onFailure callback."); 2119 | client.unsubscribe(filter, unsubscribeOptions); 2120 | }; 2121 | 2122 | /** 2123 | * Send a message to the consumers of the destination in the Message. 2124 | * 2125 | * @name Paho.Client#send 2126 | * @function 2127 | * @param {string|Paho.Message} topic - mandatory The name of the destination to which the message is to be sent. 2128 | * - If it is the only parameter, used as Paho.Message object. 2129 | * @param {String|ArrayBuffer} payload - The message data to be sent. 2130 | * @param {number} qos The Quality of Service used to deliver the message. 2131 | *
2132 | *
0 Best effort (default). 2133 | *
1 At least once. 2134 | *
2 Exactly once. 2135 | *
2136 | * @param {Boolean} retained If true, the message is to be retained by the server and delivered 2137 | * to both current and future subscriptions. 2138 | * If false the server only delivers the message to current subscribers, this is the default for new Messages. 2139 | * A received message has the retained boolean set to true if the message was published 2140 | * with the retained boolean set to true 2141 | * and the subscrption was made after the message has been published. 2142 | * @throws {InvalidState} if the client is not connected. 2143 | */ 2144 | this.send = function (topic,payload,qos,retained) { 2145 | var message ; 2146 | 2147 | if(arguments.length === 0){ 2148 | throw new Error("Invalid argument."+"length"); 2149 | 2150 | }else if(arguments.length == 1) { 2151 | 2152 | if (!(topic instanceof Message) && (typeof topic !== "string")) 2153 | throw new Error("Invalid argument:"+ typeof topic); 2154 | 2155 | message = topic; 2156 | if (typeof message.destinationName === "undefined") 2157 | throw new Error(format(ERROR.INVALID_ARGUMENT,[message.destinationName,"Message.destinationName"])); 2158 | client.send(message); 2159 | 2160 | }else { 2161 | //parameter checking in Message object 2162 | message = new Message(payload); 2163 | message.destinationName = topic; 2164 | if(arguments.length >= 3) 2165 | message.qos = qos; 2166 | if(arguments.length >= 4) 2167 | message.retained = retained; 2168 | client.send(message); 2169 | } 2170 | }; 2171 | 2172 | /** 2173 | * Publish a message to the consumers of the destination in the Message. 2174 | * Synonym for Paho.Mqtt.Client#send 2175 | * 2176 | * @name Paho.Client#publish 2177 | * @function 2178 | * @param {string|Paho.Message} topic - mandatory The name of the topic to which the message is to be published. 2179 | * - If it is the only parameter, used as Paho.Message object. 2180 | * @param {String|ArrayBuffer} payload - The message data to be published. 2181 | * @param {number} qos The Quality of Service used to deliver the message. 2182 | *
2183 | *
0 Best effort (default). 2184 | *
1 At least once. 2185 | *
2 Exactly once. 2186 | *
2187 | * @param {Boolean} retained If true, the message is to be retained by the server and delivered 2188 | * to both current and future subscriptions. 2189 | * If false the server only delivers the message to current subscribers, this is the default for new Messages. 2190 | * A received message has the retained boolean set to true if the message was published 2191 | * with the retained boolean set to true 2192 | * and the subscrption was made after the message has been published. 2193 | * @throws {InvalidState} if the client is not connected. 2194 | */ 2195 | this.publish = function(topic,payload,qos,retained) { 2196 | var message ; 2197 | 2198 | if(arguments.length === 0){ 2199 | throw new Error("Invalid argument."+"length"); 2200 | 2201 | }else if(arguments.length == 1) { 2202 | 2203 | if (!(topic instanceof Message) && (typeof topic !== "string")) 2204 | throw new Error("Invalid argument:"+ typeof topic); 2205 | 2206 | message = topic; 2207 | if (typeof message.destinationName === "undefined") 2208 | throw new Error(format(ERROR.INVALID_ARGUMENT,[message.destinationName,"Message.destinationName"])); 2209 | client.send(message); 2210 | 2211 | }else { 2212 | //parameter checking in Message object 2213 | message = new Message(payload); 2214 | message.destinationName = topic; 2215 | if(arguments.length >= 3) 2216 | message.qos = qos; 2217 | if(arguments.length >= 4) 2218 | message.retained = retained; 2219 | client.send(message); 2220 | } 2221 | }; 2222 | 2223 | /** 2224 | * Normal disconnect of this Messaging client from its server. 2225 | * 2226 | * @name Paho.Client#disconnect 2227 | * @function 2228 | * @throws {InvalidState} if the client is already disconnected. 2229 | */ 2230 | this.disconnect = function () { 2231 | client.disconnect(); 2232 | }; 2233 | 2234 | /** 2235 | * Get the contents of the trace log. 2236 | * 2237 | * @name Paho.Client#getTraceLog 2238 | * @function 2239 | * @return {Object[]} tracebuffer containing the time ordered trace records. 2240 | */ 2241 | this.getTraceLog = function () { 2242 | return client.getTraceLog(); 2243 | }; 2244 | 2245 | /** 2246 | * Start tracing. 2247 | * 2248 | * @name Paho.Client#startTrace 2249 | * @function 2250 | */ 2251 | this.startTrace = function () { 2252 | client.startTrace(); 2253 | }; 2254 | 2255 | /** 2256 | * Stop tracing. 2257 | * 2258 | * @name Paho.Client#stopTrace 2259 | * @function 2260 | */ 2261 | this.stopTrace = function () { 2262 | client.stopTrace(); 2263 | }; 2264 | 2265 | this.isConnected = function() { 2266 | return client.connected; 2267 | }; 2268 | }; 2269 | 2270 | /** 2271 | * An application message, sent or received. 2272 | *

2273 | * All attributes may be null, which implies the default values. 2274 | * 2275 | * @name Paho.Message 2276 | * @constructor 2277 | * @param {String|ArrayBuffer} payload The message data to be sent. 2278 | *

2279 | * @property {string} payloadString read only The payload as a string if the payload consists of valid UTF-8 characters. 2280 | * @property {ArrayBuffer} payloadBytes read only The payload as an ArrayBuffer. 2281 | *

2282 | * @property {string} destinationName mandatory The name of the destination to which the message is to be sent 2283 | * (for messages about to be sent) or the name of the destination from which the message has been received. 2284 | * (for messages received by the onMessage function). 2285 | *

2286 | * @property {number} qos The Quality of Service used to deliver the message. 2287 | *

2288 | *
0 Best effort (default). 2289 | *
1 At least once. 2290 | *
2 Exactly once. 2291 | *
2292 | *

2293 | * @property {Boolean} retained If true, the message is to be retained by the server and delivered 2294 | * to both current and future subscriptions. 2295 | * If false the server only delivers the message to current subscribers, this is the default for new Messages. 2296 | * A received message has the retained boolean set to true if the message was published 2297 | * with the retained boolean set to true 2298 | * and the subscrption was made after the message has been published. 2299 | *

2300 | * @property {Boolean} duplicate read only If true, this message might be a duplicate of one which has already been received. 2301 | * This is only set on messages received from the server. 2302 | * 2303 | */ 2304 | var Message = function (newPayload) { 2305 | var payload; 2306 | if ( typeof newPayload === "string" || 2307 | newPayload instanceof ArrayBuffer || 2308 | (ArrayBuffer.isView(newPayload) && !(newPayload instanceof DataView)) 2309 | ) { 2310 | payload = newPayload; 2311 | } else { 2312 | throw (format(ERROR.INVALID_ARGUMENT, [newPayload, "newPayload"])); 2313 | } 2314 | 2315 | var destinationName; 2316 | var qos = 0; 2317 | var retained = false; 2318 | var duplicate = false; 2319 | 2320 | Object.defineProperties(this,{ 2321 | "payloadString":{ 2322 | enumerable : true, 2323 | get : function () { 2324 | if (typeof payload === "string") 2325 | return payload; 2326 | else 2327 | return parseUTF8(payload, 0, payload.length); 2328 | } 2329 | }, 2330 | "payloadBytes":{ 2331 | enumerable: true, 2332 | get: function() { 2333 | if (typeof payload === "string") { 2334 | var buffer = new ArrayBuffer(UTF8Length(payload)); 2335 | var byteStream = new Uint8Array(buffer); 2336 | stringToUTF8(payload, byteStream, 0); 2337 | 2338 | return byteStream; 2339 | } else { 2340 | return payload; 2341 | } 2342 | } 2343 | }, 2344 | "destinationName":{ 2345 | enumerable: true, 2346 | get: function() { return destinationName; }, 2347 | set: function(newDestinationName) { 2348 | if (typeof newDestinationName === "string") 2349 | destinationName = newDestinationName; 2350 | else 2351 | throw new Error(format(ERROR.INVALID_ARGUMENT, [newDestinationName, "newDestinationName"])); 2352 | } 2353 | }, 2354 | "qos":{ 2355 | enumerable: true, 2356 | get: function() { return qos; }, 2357 | set: function(newQos) { 2358 | if (newQos === 0 || newQos === 1 || newQos === 2 ) 2359 | qos = newQos; 2360 | else 2361 | throw new Error("Invalid argument:"+newQos); 2362 | } 2363 | }, 2364 | "retained":{ 2365 | enumerable: true, 2366 | get: function() { return retained; }, 2367 | set: function(newRetained) { 2368 | if (typeof newRetained === "boolean") 2369 | retained = newRetained; 2370 | else 2371 | throw new Error(format(ERROR.INVALID_ARGUMENT, [newRetained, "newRetained"])); 2372 | } 2373 | }, 2374 | "topic":{ 2375 | enumerable: true, 2376 | get: function() { return destinationName; }, 2377 | set: function(newTopic) {destinationName=newTopic;} 2378 | }, 2379 | "duplicate":{ 2380 | enumerable: true, 2381 | get: function() { return duplicate; }, 2382 | set: function(newDuplicate) {duplicate=newDuplicate;} 2383 | } 2384 | }); 2385 | }; 2386 | 2387 | // Module contents. 2388 | return { 2389 | Client: Client, 2390 | Message: Message 2391 | }; 2392 | // eslint-disable-next-line no-nested-ternary 2393 | })(typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {}); 2394 | return PahoMQTT; 2395 | }); 2396 | --------------------------------------------------------------------------------