1/** 2 * Homepage Functions 3 */ 4window.addEventListener("DOMContentLoaded", function () { 5 upcomingCardsCarousel(); 6 heroCodeAnimation(); 7 devsCodeAnimation(); 8 devsSideInteractions(); 9 handleCustomers(); 10 11 /** 12 * Upcoming Cards Carousel 13 */ 14 function upcomingCardsCarousel() { 15 const slider = document.querySelector(".glide--upcoming"); 16 if (!slider) return; 17 18 const options = { 19 type: "carousel", 20 focusAt: "center", 21 startAt: 1, 22 perView: 3, 23 peek: 0, 24 gap: 16, 25 breakpoints: { 26 1050: { 27 perView: 2, 28 focusAt: 1, 29 peek: 16, 30 }, 31 821: { 32 perView: 1, 33 focusAt: 1, 34 peek: 0, 35 }, 36 600: { 37 perView: 1, 38 focusAt: 1, 39 peek: 0, 40 }, 41 }, 42 }; 43 44 const glide = new Glide(slider, options); 45 glide.mount(); 46 } 47 48 function heroCodeAnimation() { 49 const heroCodeElement = document.getElementById("hero-code"); 50 if (!heroCodeElement) return; 51 52 const indent = (level, str) => ' '.repeat(level * 4) + str; 53 54 const heroCode = new AnimatedCodeBox({ 55 options: { 56 hasNoTabs: true, 57 }, 58 codeTabs: [ 59 { 60 fileName: "sell.py", 61 options: { 62 onComplete: () => { 63 setTimeout(() => { 64 heroCode.render(); 65 }, 3000); 66 }, 67 }, 68 code: { 69 numLines: 10, 70 language: "python", 71 steps: [ 72 { 73 text: "trade_client = ", 74 }, 75 { 76 text: "TradingClient(API_KEY, SECRET_KEY", 77 class: "yellow" 78 }, 79 { 80 text: ",\n", 81 }, 82 { 83 text: "paper=", 84 class: "yellow", 85 }, 86 { 87 text: "True", 88 class: "darkgreen", 89 }, 90 { 91 text: ")", 92 class: "yellow", 93 }, 94 { 95 text: "\n", 96 }, 97 { 98 text: "order = ", 99 class: "yellow", 100 }, 101 { 102 text: "trade_client.", 103 }, 104 { 105 type: stepType.DROP_DOWN, 106 options: [ 107 "cancel_orders", 108 "close_position", 109 "get_all_positions", 110 "get_orders", 111 "submit_order", 112 ], 113 optionIndex: 4, 114 class: "yellow", 115 }, 116 { 117 text: "(", 118 class: "yellow" 119 }, 120 { 121 text: "\n" 122 }, 123 { 124 text: indent(1, "MarketOrderRequest(") 125 }, 126 { 127 text: "\n" 128 }, 129 { 130 text: indent(2, "symbol="), 131 class: "yellow", 132 }, 133 { 134 text: "'LPCA'", 135 class: "purple", 136 }, 137 { 138 text: ",\n" 139 }, 140 { 141 text: indent(2, "qty="), 142 class: "yellow", 143 }, 144 { 145 text: "1", 146 class: "darkgreen" 147 }, 148 { 149 text: ",\n", 150 class: "yellow", 151 }, 152 { 153 text: indent(2, "type="), 154 class: "yellow", 155 }, 156 { 157 text: "OrderType.", 158 }, 159 { 160 text: "MARKET", 161 class: "purple", 162 }, 163 { 164 text: ",\n", 165 }, 166 { 167 text: indent(2, "side="), 168 class: "yellow", 169 }, 170 { 171 text: "OrderSide.", 172 }, 173 { 174 text: "BUY", 175 class: "purple" 176 }, 177 { 178 text: ",\n", 179 }, 180 { 181 text: indent(2, "time_in_force="), 182 class: "yellow", 183 }, 184 { 185 text: "TimeInForce.", 186 }, 187 { 188 text: "GTC\n", 189 class: "purple" 190 }, 191 { 192 text: indent(1, ")") 193 } 194 ], 195 }, 196 }, 197 ], 198 element: heroCodeElement, 199 }); 200 heroCode.render(); 201 } 202 203 function devsCodeAnimation() { 204 const devCodeElement = document.getElementById("api-code"); 205 if (!devCodeElement) return; 206 207 const devCode = new AnimatedCodeBox({ 208 options: { 209 hasNoTabs: true, 210 }, 211 codeTabs: [ 212 { 213 fileName: "sell.py", 214 options: { 215 onComplete: () => { 216 setTimeout(() => { 217 devCode.render(); 218 }, 3000); 219 }, 220 }, 221 code: { 222 numLines: 11, 223 language: "python", 224 steps: [ 225 { 226 text: "curl --request POST ", 227 class: "yellow", 228 }, 229 { 230 type: stepType.BLOCK, 231 text: "'https://broker-api.alpaca.markets/v1/trading/accounts/{account_id}/orders'", 232 class: "purple", 233 }, 234 { 235 text: ` \\`, 236 class: "yellow", 237 }, 238 { 239 text: "\n", 240 }, 241 { 242 text: "--header ", 243 class: "yellow", 244 }, 245 { 246 type: stepType.BLOCK, 247 text: "'Apca-Api-Key-Id: <KEY>'", 248 class: "yellow", 249 }, 250 { 251 text: " \\", 252 class: "yellow", 253 }, 254 { 255 text: "\n", 256 }, 257 { 258 text: "--header ", 259 class: "yellow", 260 }, 261 { 262 type: stepType.BLOCK, 263 text: "'Apca-Api-Secret-Key: <SECRET>'", 264 class: "yellow", 265 }, 266 { 267 text: " \\", 268 class: "yellow", 269 }, 270 { 271 text: "\n", 272 }, 273 { 274 text: "--header ", 275 class: "yellow", 276 }, 277 { 278 type: stepType.BLOCK, 279 text: "'Content-Type: application/json'", 280 class: "yellow", 281 }, 282 { 283 text: " \\", 284 class: "yellow", 285 }, 286 { 287 text: "\n", 288 }, 289 { 290 text: "--data-raw '", 291 class: "yellow", 292 }, 293 { 294 text: "{", 295 class: "purple", 296 }, 297 { 298 text: "\n ", 299 }, 300 { 301 text: `"symbol": `, 302 class: "yellow", 303 }, 304 { 305 type: stepType.BLOCK, 306 text: `"AAPL"`, 307 class: "purple", 308 noHighlight: false, 309 }, 310 { 311 text: ",", 312 class: "yellow", 313 }, 314 { 315 text: "\n ", 316 }, 317 { 318 text: `"qty": `, 319 class: "yellow", 320 }, 321 { 322 text: `1`, 323 class: "purple", 324 }, 325 { 326 text: ",", 327 class: "yellow", 328 }, 329 { 330 text: "\n ", 331 }, 332 { 333 text: `"side": `, 334 class: "yellow", 335 }, 336 { 337 text: `"buy"`, 338 class: "purple", 339 }, 340 { 341 text: ",", 342 class: "yellow", 343 }, 344 { 345 text: "\n ", 346 }, 347 { 348 text: `"type": `, 349 class: "yellow", 350 }, 351 { 352 text: `"market"`, 353 class: "purple", 354 }, 355 { 356 text: ",", 357 class: "yellow", 358 }, 359 { 360 text: "\n ", 361 }, 362 { 363 text: `"time_in_force": `, 364 class: "yellow", 365 }, 366 { 367 text: `"day"`, 368 class: "purple", 369 }, 370 { 371 text: "\n", 372 }, 373 { 374 text: "}", 375 class: "purple", 376 }, 377 { 378 text: "'", 379 class: "yellow", 380 }, 381 ], 382 }, 383 console: { 384 steps: [ 385 { 386 text: "// Response", 387 class: "gray", 388 }, 389 { 390 type: stepType.PAUSE, 391 isAnimated: true, 392 speed: 1000, 393 }, 394 { 395 text: "\n", 396 }, 397 { 398 type: stepType.BLOCK, 399 text: `{`, 400 class: "white", 401 noHighlight: false, 402 speed: 100, 403 }, 404 { 405 type: stepType.BLOCK, 406 text: `\n "id": "bc215c69-b3c9-44b4-afff-896962ea6fd0",`, 407 class: "white", 408 noHighlight: false, 409 speed: 100, 410 }, 411 { 412 type: stepType.BLOCK, 413 text: `\n "client_order_id": "1eebf13e-0308-40f4-b4a1-0bb0b37bc896",`, 414 class: "white", 415 noHighlight: false, 416 speed: 100, 417 }, 418 { 419 type: stepType.BLOCK, 420 text: `\n "submitted_at": "2022-08-18T19:21:41.3135829Z",`, 421 class: "white", 422 noHighlight: false, 423 speed: 100, 424 }, 425 { 426 type: stepType.BLOCK, 427 text: `\n "asset_id": "b0b6dd9d-8b9b-48a9-ba46-b9d54906e415",`, 428 class: "white", 429 noHighlight: false, 430 speed: 100, 431 }, 432 { 433 type: stepType.BLOCK, 434 text: `\n "symbol": "AAPL",`, 435 class: "white", 436 noHighlight: false, 437 speed: 100, 438 }, 439 { 440 type: stepType.BLOCK, 441 text: `\n "asset_class": "us_equity",`, 442 class: "white", 443 noHighlight: false, 444 speed: 100, 445 }, 446 { 447 type: stepType.BLOCK, 448 text: `\n "notional": "40",`, 449 class: "white", 450 noHighlight: false, 451 speed: 100, 452 }, 453 { 454 type: stepType.BLOCK, 455 text: `\n "filled_qty": "1",`, 456 class: "white", 457 noHighlight: false, 458 speed: 100, 459 }, 460 { 461 type: stepType.BLOCK, 462 text: `\n "type": "market",`, 463 class: "white", 464 noHighlight: false, 465 speed: 100, 466 }, 467 { 468 type: stepType.BLOCK, 469 text: `\n "side": "buy",`, 470 class: "white", 471 noHighlight: false, 472 speed: 100, 473 }, 474 { 475 type: stepType.BLOCK, 476 text: `\n "time_in_force": "day",`, 477 class: "white", 478 noHighlight: false, 479 speed: 100, 480 }, 481 { 482 type: stepType.BLOCK, 483 text: `\n "status": "filled",`, 484 class: "white", 485 noHighlight: false, 486 speed: 100, 487 }, 488 { 489 type: stepType.BLOCK, 490 text: `\n ...`, 491 class: "white", 492 noHighlight: false, 493 speed: 100, 494 }, 495 { 496 type: stepType.BLOCK, 497 text: `\n}`, 498 class: "white", 499 noHighlight: false, 500 speed: 100, 501 }, 502 { 503 type: stepType.PAUSE, 504 isAnimated: true, 505 }, 506 ], 507 }, 508 }, 509 ], 510 element: devCodeElement, 511 }); 512 devCode.render(); 513 } 514 515 function devsSideInteractions() { 516 const items = document.querySelectorAll(".home__devs__side-item"); 517 518 const handleScroll = () => {
519 items.forEach((item, index) => { 520 const {top} = item.getBoundingClientRect(); 521 522 if (top <= window.innerHeight / 2) { 523 item.classList.add("home__devs__side-item--active"); 524 item.removeEventListener("click", handleClick); 525 526 if (index === items.length - 1) { 527 window.removeEventListener("scroll", handleScroll); 528 } 529 } 530 }) 531 } 532 533 const handleClick = (evt) => { 534 evt.currentTarget.classList.add("home__devs__side-item--active"); 535 evt.currentTarget.removeEventListener("click", handleClick); 536 } 537 538 handleScroll(); 539 window.addEventListener("scroll", handleScroll); 540 items.forEach(item => item.addEventListener("click", handleClick)); 541 } 542 543 function handleCustomers() { 544 const customers = document.querySelectorAll(".home__customer"); 545 const leftBtns = document.querySelectorAll(".home__customer__btn--left"); 546 const rightBtns = document.querySelectorAll(".home__customer__btn--right"); 547 548 const displayNextCustomer = (isBackwards) => () => { 549 const activeIndex = Array.from(customers) 550 .findIndex(customer => customer.classList.contains("home__customer--active")); 551 552 if (activeIndex === -1) { 553 return; 554 } 555 556 const newActiveIndex = isBackwards ? 557 activeIndex === 0 ? customers.length - 1 : activeIndex - 1 558 : (activeIndex + 1) % (customers.length); 559 560 const oldCustomer = customers.item(activeIndex); 561 const newCustomer = customers.item(newActiveIndex); 562 563 oldCustomer.classList.add( 564 isBackwards 565 ? "home__customer--leave-left" 566 : "home__customer--leave-right" 567 ); 568 newCustomer.classList.add( 569 isBackwards 570 ? "home__customer--enter-right" 571 : "home__customer--enter-left" 572 ); 573 574 setTimeout(() => { 575 newCustomer.classList.add("home__customer--active"); 576 newCustomer.classList.remove("home__customer--enter-left"); 577 newCustomer.classList.remove("home__customer--enter-right"); 578 }, 1); 579 580 setTimeout(() => { 581 oldCustomer.classList.remove("home__customer--active"); 582 oldCustomer.classList.remove("home__customer--leave-left"); 583 oldCustomer.classList.remove("home__customer--leave-right"); 584 }, 300); 585 } 586 587 leftBtns.forEach(btn => btn.addEventListener("click", displayNextCustomer(true))); 588 rightBtns.forEach(btn => btn.addEventListener("click", displayNextCustomer())); 589 } 590});
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.