Advertisement
scimenes

JS per creare animazioni web

Sep 23rd, 2022
1,010
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 41.93 KB | Source Code | 0 0
  1. {
  2.     // ### SNIPPET VERSION 5.9.4 ###
  3.     // Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
  4.     // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
  5.     // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
  6.     // used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  7.     // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
  8.     // Placeholders with the same ids are connected.
  9.     // Example:
  10.     // "Print to console": {
  11.     //  "scope": "javascript,typescript",
  12.     //  "prefix": "log",
  13.     //  "body": [
  14.     //    "console.log('$1');",
  15.     //    "$2"
  16.     //  ],
  17.     //  "description": "Log output to console"
  18.     // }
  19.     // HTML Snipet
  20.     "Html Box": {
  21.         "prefix": "h-box",
  22.         "body": [
  23.             "<div class=\"box$1\">",
  24.             "  <h3> $2 Lorem </h3>",
  25.             "  <p> test </p>",
  26.             "</div>"
  27.         ],
  28.         "description": "Box"
  29.     },
  30.  
  31.     "Html Cover": {
  32.         "prefix": "h-cover",
  33.         "body": [
  34.             "<div class=\"cover$1\" style=\"background-image:linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.6)), url('http://afmarchetti.github.io/alux/image.jpg');\">",
  35.             "  <h3> Lorem </h3>",
  36.             "  <p> test </p>",
  37.             "</div>"
  38.         ],
  39.         "description": "Cover"
  40.     },
  41.  
  42.     "Html Card": {
  43.         "prefix": "h-card",
  44.         "body": [
  45.             "<div class=\"card$1\">",
  46.             "  <div class=\"card$1__img\" style=\"background-image: url('http://afmarchetti.github.io/alux/image.jpg');\"></div>",
  47.             "  <h3> Lorem </h3>",
  48.             "  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis quidem provident totam, possimus reprehenderit repellat. Omnis, iusto officiis harum reprehenderit enim asperiores ex ducimus. Possimus quae, numquam at molestias aut?</p>",
  49.             "</div>"
  50.         ],
  51.         "description": "Card"
  52.     },
  53.  
  54.     "Html Title": {
  55.         "prefix": "h-tit",
  56.         "body": [
  57.             "  <h3 class=\"tit\">${1:lorem ispum dot siam}</h3>"
  58.         ],
  59.         "description": "Title"
  60.     },
  61.  
  62.     "Subtitle": {
  63.         "prefix": "h-sub",
  64.         "body": [
  65.             "  <p class=\"sub\">${1:lorem ispum dot siam}</p>"
  66.         ],
  67.         "description": "Subtitle"
  68.     },
  69.  
  70.     "Text": {
  71.         "prefix": "h-text",
  72.         "body": [
  73.             "  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis quidem provident totam, possimus reprehenderit repellat. Omnis, iusto officiis harum reprehenderit enim asperiores ex ducimus. Possimus quae, numquam at molestias aut?</p>"
  74.         ],
  75.         "description": "Text"
  76.     },
  77.  
  78.     "Html Button": {
  79.         "prefix": "h-btn",
  80.         "body": [
  81.             "  <a class=\"btn$1\" href=\"\">Lorem</a>"
  82.         ],
  83.         "description": "Button"
  84.     },
  85.  
  86.     "Html Col 1": {
  87.         "prefix": "h-1col",
  88.         "body": [
  89.             "<div class=\"grid\">",
  90.             "  <div class=\"col-100\">",
  91.             "    <h3> Lorem </h3>",
  92.             "  </div>",
  93.             "</div>"
  94.         ],
  95.         "description": "Col 1"
  96.     },
  97.  
  98.     "Html Col 2": {
  99.         "prefix": "h-2col",
  100.         "body": [
  101.             "<div class=\"grid\">",
  102.             "  <div class=\"col-50\">",
  103.             "    <h3> Lorem </h3>",
  104.             "  </div>",
  105.             "  <div class=\"col-50\">",
  106.             "    <h3> Lorem </h3>",
  107.             "  </div>",
  108.             "</div>"
  109.         ],
  110.         "description": "Col 2"
  111.     },
  112.  
  113.     "Html Col 3": {
  114.         "prefix": "h-3col",
  115.         "body": [
  116.             "<div class=\"grid\">",
  117.             "  <div class=\"col-33\">",
  118.             "    <h3> Lorem </h3>",
  119.             "  </div>",
  120.             "  <div class=\"col-33\">",
  121.             "    <h3> Lorem </h3>",
  122.             "  </div>",
  123.             "  <div class=\"col-33\">",
  124.             "    <h3> Lorem </h3>",
  125.             "  </div>",
  126.             "</div>"
  127.         ],
  128.         "description": "Col 3"
  129.     },
  130.  
  131.     "Html Col 4": {
  132.         "prefix": "h-4col",
  133.         "body": [
  134.             "<div class=\"grid\">",
  135.             "  <div class=\"col-25\">",
  136.             "    <h3> Lorem </h3>",
  137.             "  </div>",
  138.             "  <div class=\"col-25\">",
  139.             "    <h3> Lorem </h3>",
  140.             "  </div>",
  141.             "  <div class=\"col-25\">",
  142.             "    <h3> Lorem </h3>",
  143.             "  </div>",
  144.             "  <div class=\"col-25\">",
  145.             "    <h3> Lorem </h3>",
  146.             "  </div>",
  147.             "</div>"
  148.         ],
  149.         "description": "Col 4"
  150.     },
  151.  
  152.     "Html Comment": {
  153.         "prefix": "h-com",
  154.         "body": [
  155.             "<!-- $1 -->"
  156.         ],
  157.         "description": "Comment"
  158.     },
  159.  
  160.     "Style": {
  161.         "prefix": "h-style",
  162.         "body": [
  163.             "<link rel=\"stylesheet\" href=\"$1\">"
  164.         ],
  165.         "description": "Style"
  166.     },
  167.  
  168.     "Jquery": {
  169.         "prefix": "h-jquery",
  170.         "body": [
  171.             "<!-- Jquery -->",
  172.             "<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js\"></script>"
  173.         ],
  174.         "description": "Jquery"
  175.     },
  176.  
  177.     "Google Font": {
  178.         "prefix": "h-googlefont",
  179.         "body": [
  180.             "<!-- Google Font -->",
  181.             "<link rel=\"stylesheet\"  href=\"//fonts.googleapis.com/css?family=Heebo:400,700\" type=\"text/css\" />"
  182.         ],
  183.         "description": "Google Font"
  184.     },
  185.  
  186.     "Html Template": {
  187.         "prefix": "h-template",
  188.         "body": [
  189.             "<!DOCTYPE html>",
  190.             "<html lang=\"en\">",
  191.             "<head>",
  192.             "  <meta charset=\"UTF-8\">",
  193.             "  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
  194.             "  <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
  195.             "  <title>Document</title>",
  196.             "  <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css\">",
  197.             "  <link rel=\"stylesheet\" href=\"style.css\">",
  198.             "",
  199.             "</head>",
  200.             "<body>",
  201.             "",
  202.             "  <h1>Hey, Ciao Mondo! </h1>",
  203.             "",
  204.             "  <script src=\"https://code.jquery.com/jquery-1.12.4.min.js\"></script>",
  205.             "",
  206.             "</body>",
  207.             "</html>"
  208.         ],
  209.         "description": "Template"
  210.     },
  211.  
  212.     "Html Template v2": {
  213.         "prefix": "h-template-2",
  214.         "body": [
  215.             "<!DOCTYPE html>",
  216.             "<html lang=\"en\">",
  217.             "<head>",
  218.             "  <meta charset=\"UTF-8\">",
  219.             "  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
  220.             "  <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
  221.             "  <title>Document</title>",
  222.             "  <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\" rel=\"stylesheet\">",
  223.             "  <style>",
  224.             "  /* Reset */",
  225.             "  body, html{ font-family: 'Intro', sans-serif; font-size: 16px; box-sizing: border-box;margin: 0;padding: 0;}*,*:before,*:after{ box-sizing: border-box; }h1,h2,h3,h4,h5,h6, p, ol, ul{margin: 0 0 1rem 0;padding: 0;}ol,ul{list-style-type: none;}img{height: auto;}h1{font-size: 4rem;} h2{font-size: 3rem;} h3{font-size: 2rem;} h4{font-size: 1rem;} h5{font-size: 0.8rem;} h6{font-size: 0.6rem;}a{text-decoration:none}",
  226.             "  </style>",
  227.             "",
  228.             "</head>",
  229.             "<body>",
  230.             "",
  231.             "  <h1>Hey, Ciao Mondo! </h1>",
  232.             "",
  233.             "   <script> /* js code */ </script>",
  234.             "",
  235.             "</body>",
  236.             "</html>"
  237.         ],
  238.         "description": "Template v2"
  239.     },
  240.  
  241.     // CSS Snipet
  242.     "FlexBox": {
  243.         "prefix": "c-fb-flexbox",
  244.         "body": [
  245.             "display:flex;justify-content:center;align-items: center;"
  246.         ],
  247.         "description": "FlexBox"
  248.     },
  249.  
  250.     "Background Image": {
  251.         "prefix": "c-bgimg",
  252.         "body": [
  253.             "background: url($1) no-repeat center center; background-size:cover;"
  254.         ],
  255.         "description": "Background Image"
  256.     },
  257.  
  258.     "Background Gradient": {
  259.         "prefix": "c-bg-gradient",
  260.         "body": [
  261.             "background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 100%), url($1) no-repeat center center;"
  262.         ],
  263.         "description": "Background Gradient"
  264.     },
  265.  
  266.     "Box": {
  267.         "prefix": "c-box",
  268.         "body": [
  269.             ".box$1{  text-align: center; padding:10px; margin:10px; min-height:10px; display:flex; flex-direction:column; justify-content:center ;}"
  270.         ],
  271.         "description": "Box"
  272.     },
  273.  
  274.     "Cover": {
  275.         "prefix": "c-cover",
  276.         "body": [
  277.             ".cover$1{ text-align: center; padding:10px; margin:0px; min-height:600px; width:100%; display:flex; flex-direction:column; justify-content:center;  background-position: center center; background-size:cover;}",
  278.             ".cover$1 * {color:#fff}"
  279.         ],
  280.         "description": "Cover"
  281.     },
  282.  
  283.     "Card": {
  284.         "prefix": "c-card",
  285.         "body": [
  286.             ".card$1{padding:20px;box-shadow: 0 5px 20px rgba(0,0,0,.1);border-radius: 10px;overflow: hidden;margin: 0 15px 30px 15px; min-height: 450px}",
  287.             ".card$1__img{min-height:200px;display: block;background-position: center center; background-size:cover;margin: -20px -20px 20px -20px;}",
  288.             ""
  289.         ],
  290.         "description": "Card"
  291.     },
  292.  
  293.     "Reset Css": {
  294.         "prefix": "c-reset",
  295.         "body": [
  296.             "/* ! Reset */",
  297.             "body, html{ font-size: 16px; font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", Arial, sans-serif; box-sizing: border-box;margin: 0;padding: 0;}",
  298.             "*,*:before,*:after{ box-sizing: border-box; }",
  299.             "h1,h2,h3,h4,h5,h6, p, ol, ul{margin: 0;padding: 0;}",
  300.             "ol,ul{list-style-type: none;}",
  301.             "img{height: auto;}",
  302.             ""
  303.         ],
  304.         "description": "Reset Css"
  305.     },
  306.  
  307.     "Helpers": {
  308.         "prefix": "c-helpers",
  309.         "body": [
  310.             "/* ! Helpers  */",
  311.             ".mt-0{margin-top: 0 }",
  312.             ".mt-1{margin-top: 10px}",
  313.             ".mt-2{margin-top: 20px}",
  314.             ".mt-3{margin-top: 40px}",
  315.             ".mt-4{margin-top: 100px }",
  316.             "",
  317.             ".mb-0{margin-bottom: 0}",
  318.             ".mb-1{margin-bottom: 10px}",
  319.             ".mb-2{margin-bottom: 20px}",
  320.             ".mb-3{margin-bottom: 40px}",
  321.             ".mb-4{margin-bottom: 100px}",
  322.             "",
  323.             ".p-0{padding: 0}",
  324.             ".p-1{padding: 10px}",
  325.             ".p-2{padding: 20px}",
  326.             ".p-3{padding: 40px}",
  327.             ".p-4{padding: 100px}",
  328.             "",
  329.             ".text-center { text-align: center; }",
  330.             ".text-right { text-align: right; }",
  331.             ".text-left { text-align: left; }",
  332.             ".img-res { width: 100%; height: auto; margin-bottom: 20px;vertical-align: middle;}"
  333.         ],
  334.         "description": "Helpers"
  335.     },
  336.  
  337.     "Title System": {
  338.         "prefix": "c-titsystem",
  339.         "body": [
  340.             "/* ! Title System */",
  341.             "h1 {font-size: 54px;margin-bottom: 20px}",
  342.             "h2 {font-size: 34px;margin-bottom: 20px}",
  343.             "h3 {font-size: 24px;margin-bottom: 20px}",
  344.             "h4, p{font-size: 16px;margin-bottom: 20px}"
  345.         ],
  346.         "description": "Title System"
  347.     },
  348.  
  349.     "Button System": {
  350.         "prefix": "c-btnsystem",
  351.         "body": [
  352.             ".btn { font-style: 16px; text-transform: uppercase;background: #000; color:#fff; text-decoration: none;padding: 10px 15px; display: inline-block;margin:0 5px 20px 5px; border-radius: 4px;}  "
  353.         ],
  354.         "description": "Button System"
  355.     },
  356.  
  357.     "Button": {
  358.         "prefix": "c-btn",
  359.         "body": [
  360.             ".btn$1{ padding: 10px 20px; font-size: 16px; background:#000; color:#fff;border-radius:4px; }"
  361.         ],
  362.         "description": "Button"
  363.     },
  364.  
  365.     "Block Basic": {
  366.         "prefix": "c-block",
  367.         "body": [
  368.             ".${1:block}{width: 100%; height: 300px; background: #333; display: flex; align-items: center; justify-content: center;}",
  369.             ".${1:block}__content{color:#fff; text-align:center}"
  370.         ],
  371.         "description": "Block Basic"
  372.     },
  373.  
  374.     "Border": {
  375.         "prefix": "c-bd",
  376.         "body": [
  377.             "border: 1px solid red;"
  378.         ],
  379.         "description": "Border"
  380.     },
  381.  
  382.     "Comment Big": {
  383.         "prefix": "c-combig",
  384.         "body": [
  385.             "/* -------------------------------------------------------------------------------- */",
  386.             "/* ! $1 */",
  387.             "/* -------------------------------------------------------------------------------- */"
  388.         ],
  389.         "description": "Comment Big"
  390.     },
  391.  
  392.     "Media Query": {
  393.         "prefix": "c-mediaquery",
  394.         "body": [
  395.             "@media (max-width: 768px) {",
  396.             "  $1",
  397.             "}"
  398.         ],
  399.         "description": "Media Query"
  400.     },
  401.  
  402.     "WP Child Theme": {
  403.         "prefix": "c-childtheme",
  404.         "body": [
  405.             "/*",
  406.             "Theme Name: Theme Child",
  407.             "Theme URL: http://yourdomain.com",
  408.             "Description: Theme Child",
  409.             "Theme Author: Mario Rossi",
  410.             "Author URL: http://yourdomain.com",
  411.             "Template: chaplin",
  412.             "Version: 1.0.0",
  413.             "Text Domain: theme-child",
  414.             "",
  415.             "*/"
  416.         ],
  417.         "description": "Child Theme"
  418.     },
  419.  
  420.     "Animate All": {
  421.         "prefix": "c-animate",
  422.         "body": [
  423.             ".animate {  -webkit-transition: all 0.3s ease-in-out;",
  424.             "      -moz-transition: all 0.3s ease-in-out;",
  425.             "      -ms-transition: all 0.3s ease-in-out;",
  426.             "      -o-transition: all 0.3s ease-in-out;",
  427.             "      transition: all 0.3s ease-in-out; }"
  428.         ],
  429.         "description": "Animate All"
  430.     },
  431.  
  432.     "Border Box": {
  433.         "prefix": "c-borderbox",
  434.         "body": [
  435.             "*,",
  436.             "*:before,",
  437.             "*:after {",
  438.             "  -webkit-box-sizing: border-box;",
  439.             "     -moz-box-sizing: border-box;",
  440.             "          box-sizing: border-box;",
  441.             "}"
  442.         ],
  443.         "description": "Border Box"
  444.     },
  445.  
  446.     "Grid System": {
  447.         "prefix": "c-gridsystem",
  448.         "body": [
  449.             "/* ! Grid System */",
  450.             ".grid { margin: 0 auto; padding: 10px; max-width: 1200px; display: flex; flex-flow: row; flex-wrap: wrap;}",
  451.             ".grid--center{justify-content: center;}",
  452.             ".col{ flex: 1;}",
  453.             ".v-center{justify-content:center;display: flex;min-height: 100%;align-items: center;}",
  454.             "",
  455.             "[class*='col-'] { position: relative;}",
  456.             "",
  457.             ".col-20{ width: 20%; }",
  458.             ".col-25{ width: 25%; }",
  459.             ".col-30{ width: 30%; }",
  460.             ".col-33{ width: 33.33%; }",
  461.             ".col-50{ width: 50%; }",
  462.             ".col-70{ width: 70%; }",
  463.             ".col-80{ width: 80%; }",
  464.             ".col-100{ width: 100%; }",
  465.             "",
  466.             "@media (max-width: 991px) {",
  467.             "  .tab-20 { width: 20%; }",
  468.             "  .tab-25 { width: 25%; }",
  469.             "  .tab-33 { width: 33.33%; }",
  470.             "  .tab-50 { width: 50%; }",
  471.             "  .tab-100 { width: 100%; }",
  472.             "}",
  473.             "",
  474.             "@media (max-width: 768px) {",
  475.             "  [class*='col-'] { width: 100%;}",
  476.             "  .sma-20 { width: 20%; }",
  477.             "  .sma-25 { width: 25%; }",
  478.             "  .sma-33 { width: 33.33%; }",
  479.             "  .sma-50 { width: 50%; }",
  480.             "  .sma-100 { width: 100%; }",
  481.             "",
  482.             "  .sma-hide{display:none}",
  483.             "}"
  484.         ],
  485.         "description": "Grid System"
  486.     },
  487.  
  488.     "Font Family": {
  489.         "prefix": "c-fontfamily",
  490.         "body": [
  491.             "font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;"
  492.         ],
  493.         "description": "Font Family"
  494.     },
  495.  
  496.     "Translate": {
  497.         "prefix": "c-translate",
  498.         "body": [
  499.             "transform: translateY(20px);"
  500.         ],
  501.         "description": "Translate"
  502.     },
  503.  
  504.     "Transition": {
  505.         "prefix": "c-transition",
  506.         "body": [
  507.             "transition: all 1s cubic-bezier(.215, .61, .355, 1);"
  508.         ],
  509.         "description": "Transition"
  510.     },
  511.  
  512.     "Box Shadow": {
  513.         "prefix": "c-boxshadow",
  514.         "body": [
  515.             "box-shadow: 0 5px 20px rgba(0,0,0,.05);"
  516.         ],
  517.         "description": "Box Shadow"
  518.     },
  519.  
  520.     "Vertical Center": {
  521.         "prefix": "c-verticalcenter",
  522.         "body": [
  523.             "display: flex; width: 100%; height: 100%; align-items: center;"
  524.         ],
  525.         "description": "Vertical Center"
  526.     },
  527.  
  528.     "Animation": {
  529.         "prefix": "c-animation",
  530.         "body": [
  531.             "animation: my-animation 5s 3 ease-in-out;"
  532.         ],
  533.         "description": "Animation"
  534.     },
  535.  
  536.     "Keyframe": {
  537.         "prefix": "c-keyframe",
  538.         "body": [
  539.             "@keyframes my-animation{",
  540.             "",
  541.             "  0% {transform: rotate(0deg);}",
  542.             "  20%{transform: rotate(0deg);}",
  543.             "  40%{transform: rotate(10deg);}",
  544.             "  60%{transform: rotate(-10deg);}",
  545.             "  80%{transform: rotate(0deg);}",
  546.             "  100% {transform: rotate(0deg);}",
  547.             "",
  548.             "}"
  549.         ],
  550.         "description": "Keyframe"
  551.     },
  552.  
  553.     // Java Snipet
  554.     "console.log": {
  555.         "prefix": "j-log",
  556.         "body": [
  557.             "console.log(${1:\"crash\"});$2"
  558.         ],
  559.         "description": "console.log"
  560.     },
  561.  
  562.     "Click Js": {
  563.         "prefix": "j-click-toggle",
  564.         "body": [
  565.             "let ${1:item} = document.querySelector('.toggle-single');",
  566.             "${1:item}.addEventListener(\"click\", function() {",
  567.             "  ${1:item}.classList.toggle('toggle-active');",
  568.             "});"
  569.         ],
  570.         "description": "Click Js"
  571.     },
  572.  
  573.     "Js Scroll to element": {
  574.         "prefix": "j-scroll-to",
  575.         "body": [
  576.             "const links = document.querySelectorAll(\"ul.menu-scroll a\");",
  577.             "",
  578.             "links.forEach((link) => {",
  579.             "  link.addEventListener(\"click\", clickHandler);",
  580.             "})",
  581.             "",
  582.             "function clickHandler(e) {",
  583.             "  e.preventDefault();",
  584.             "  const href = this.getAttribute(\"href\");",
  585.             "  const offsetTop = document.querySelector(href).offsetTop - 80; // offset from top",
  586.             "",
  587.             "  scroll({",
  588.             "    top: offsetTop,",
  589.             "    behavior: \"smooth\"",
  590.             "  });",
  591.             "}"
  592.         ],
  593.         "description": "Js Scroll to element"
  594.     },
  595.  
  596.     "querySelectorAll": {
  597.         "prefix": "j-selectall",
  598.         "body": [
  599.             "let items = document.querySelectorAll('${1:.selector}');"
  600.         ],
  601.         "description": "querySelectorAll"
  602.     },
  603.  
  604.     "querySelector": {
  605.         "prefix": "j-select",
  606.         "body": [
  607.             "let items = document.querySelector('${1:.selector}');"
  608.         ],
  609.         "description": "querySelector"
  610.     },
  611.  
  612.     "forEach": {
  613.         "prefix": "j-foreach",
  614.         "body": [
  615.             "${1:items}.forEach((item) => {",
  616.             "  item.addEventListener(\"click\", function() {",
  617.             "    item.classList.toggle('toggle-active');",
  618.             "  });",
  619.             "});"
  620.         ],
  621.         "description": "forEach"
  622.     },
  623.  
  624.     "for of": {
  625.         "prefix": "j-forof",
  626.         "body": [
  627.             "for (let item of ${1:items}) {",
  628.             " item.addEventListener(\"click\", function() {",
  629.             "   item.classList.toggle('toggle-active');",
  630.             " });",
  631.             "}"
  632.         ],
  633.         "description": "for of"
  634.     },
  635.  
  636.     "Add class on Scroll": {
  637.         "prefix": "j-addclasscroll",
  638.         "body": [
  639.             "window.addEventListener('scroll', function(e) {",
  640.             "  if(window.scrollY > 300){",
  641.             "    document.body.classList.add('scroll-down');",
  642.             "  } else {",
  643.             "    document.body.classList.remove('scroll-down');",
  644.             "  }",
  645.             "});"
  646.         ],
  647.         "description": "Add class on Scroll"
  648.     },
  649.  
  650.     "Observer": {
  651.         "prefix": "j-observer",
  652.         "body": [
  653.             "// elements",
  654.             "var elements_to_watch = document.querySelectorAll('.watch');",
  655.             "// callback ",
  656.             "var callback = function(items){",
  657.             "  items.forEach((item) => {",
  658.             "    if(item.isIntersecting){",
  659.             "      item.target.classList.add(\"in-page\");",
  660.             "    } else{",
  661.             "      item.target.classList.remove(\"in-page\");",
  662.             "    }",
  663.             "  });",
  664.             "}",
  665.             "// observer",
  666.             "var observer = new IntersectionObserver(callback, { threshold: 0.5 } );",
  667.             "// apply",
  668.             "elements_to_watch.forEach((element) => {",
  669.             "  observer.observe(element); ",
  670.             "});"
  671.         ],
  672.         "description": "Observe elements"
  673.     },
  674.  
  675.     "Comment Js": {
  676.         "prefix": "j-com",
  677.         "body": [
  678.             "/*  -----------------------------------------------------------------------------------------------",
  679.             "  $1",
  680.             "--------------------------------------------------------------------------------------------------- */"
  681.         ],
  682.         "description": "Comment Js"
  683.     },
  684.  
  685.     //Jquery Snipepts
  686.  
  687.     "Toggle jQuery": {
  688.         "prefix": "jq-toggle",
  689.         "body": [
  690.             "/* Open Panel */",
  691.             "$( \".trigger\" ).on('click', function() {",
  692.             "  $(\".target\").toggleClass(\"open\");",
  693.             "});"
  694.         ],
  695.         "description": "Toggle jQuery"
  696.     },
  697.  
  698.     "Scroll Down jQuery": {
  699.         "prefix": "jq-scroll",
  700.         "body": [
  701.             "/* Scroll Down */",
  702.             "$('.scroll-down').click(function(event){",
  703.             "  event.preventDefault();",
  704.             "  //scroll down the panel",
  705.             "  $(\"html, body\").animate({ scrollTop: $('#anchor').offset().top }, 700);",
  706.             "});"
  707.         ],
  708.         "description": "Scroll Down jQuery"
  709.     },
  710.  
  711.     "Scroll Class jQuery": {
  712.         "prefix": "jq-scrollclass",
  713.         "body": [
  714.             "/* Scroll Class */",
  715.             "var scroll_pos = 0;",
  716.             "$(document).scroll(function() {",
  717.             "  scroll_pos = $(this).scrollTop();",
  718.             "  if(scroll_pos > 40) {",
  719.             "    $(\"body\").addClass( \"scroll-down\" );",
  720.             "  } else {",
  721.             "    $(\"body\").removeClass( \"scroll-down\" );",
  722.             "  }",
  723.             "});"
  724.         ],
  725.         "description": "Scroll Class jQuery"
  726.     },
  727.  
  728.     "Scroll Nav jQuery": {
  729.         "prefix": "jq-scrollnav",
  730.         "body": [
  731.             "// Scroll Navigation",
  732.             "$(\"#menu a[href*='#']\").click( function() {",
  733.             "  var target = $(this).attr(\"href\");",
  734.             "  $(\"body, html\").animate({",
  735.             "    scrollTop: $(target).offset().top - 80",
  736.             "  }, 300);",
  737.             "  return false;",
  738.             "});"
  739.         ],
  740.         "description": "Scroll Nav jQuery"
  741.     },
  742.  
  743.     "Document Ready jQuery": {
  744.         "prefix": "jq-doc",
  745.         "body": [
  746.             "$( document ).ready(function() {",
  747.             "  $1",
  748.             "});"
  749.         ],
  750.         "description": "Document Ready jQuery"
  751.     },
  752.  
  753.     "Click jQuery": {
  754.         "prefix": "jq-click",
  755.         "body": [
  756.             "/* Click */",
  757.             "$( \".trigger\" ).on('click', function() {",
  758.             "  // do something",
  759.             "});"
  760.         ],
  761.         "description": "Click jQuery"
  762.     },
  763.  
  764.     "Add Class jQuery": {
  765.         "prefix": "jq-addclass",
  766.         "body": [
  767.             "  $(\"body\").addClass( \"my-css-class\" );"
  768.         ],
  769.         "description": "Add Class jQuery"
  770.     },
  771.  
  772.     "Remove Class jQuery": {
  773.         "prefix": "jq-removeclass",
  774.         "body": [
  775.             "  $(\"body\").removeClass( \"my-css-class\" );"
  776.         ],
  777.         "description": "Remove Class jQuery"
  778.     },
  779.  
  780.     // PHP Snippet
  781.     ".text.html.php": {
  782.         "prefix": "p-tag",
  783.         "body": [
  784.             "<?php",
  785.             "  $1",
  786.             "?>"
  787.         ],
  788.         "description": ".text.html.php"
  789.     },
  790.  
  791.     "Include": {
  792.         "prefix": "p-include",
  793.         "body": [
  794.             "<?php include(\"$1\");?>"
  795.         ],
  796.         "description": "Include"
  797.     },
  798.  
  799.     "Var Dump": {
  800.         "prefix": "var_dump()",
  801.         "body": [
  802.             "var_dump($1)"
  803.         ],
  804.         "description": "Var Dump"
  805.     },
  806.  
  807.     "Prepare": {
  808.         "prefix": "p-prepare",
  809.         "body": [
  810.             "$$query = $$mysqli->prepare(\"INSERT INTO posts(value1, value2) VALUES( ?, ?)\");",
  811.             "$$query->bind_param('ss',$$value1, $$value2);",
  812.             "if($$query->execute()){",
  813.             "  echo \"Data added successfully.\";",
  814.             "} else {",
  815.             "  die(\"Data add failed: \" . htmlspecialchars($$query->error));",
  816.             "}"
  817.         ],
  818.         "description": "Prepare"
  819.     },
  820.  
  821.     // WP Snippets
  822.  
  823.     "Custom Loop": {
  824.         "prefix": "wp-custom-loop",
  825.         "body": [
  826.             "<?php /* Custom Loop */",
  827.             "",
  828.             "$$custom_loop = new WP_Query( array(",
  829.             "  'post_type'     => 'page',",
  830.             "  'posts_per_page' => 3,",
  831.             "  'orderby'        => 'menu_order',",
  832.             "  'order'          => 'ASC',",
  833.             "  ${1:// 'tax_query' => array(",
  834.             "  //   array( 'taxonomy' => 'people',",
  835.             "  //      'field'    => 'slug',",
  836.             "  //     'terms'    => 'bob',",
  837.             "  //   )",
  838.             "  //  )}",
  839.             ")); ?>",
  840.             "",
  841.             "<?php if ($$custom_loop->have_posts()) : while($$custom_loop->have_posts()) : $$custom_loop->the_post(); ?>",
  842.             "",
  843.             "  <?php the_post_thumbnail('thumbnail', array('class' => '','alt' => get_the_title())); ?>",
  844.             "  <h3><?php the_title(); ?></h3>",
  845.             "  <?php the_content(); ?>",
  846.             "",
  847.             "  <?php wp_reset_postdata(); ?>",
  848.             "  <?php endwhile; endif; ?>"
  849.         ],
  850.         "description": "Custom Loop"
  851.     },
  852.  
  853.     "Img": {
  854.         "prefix": "wp-imgbg",
  855.         "body": [
  856.             "<?php /* Image Url */",
  857.             "  $$image_attributes =  wp_get_attachment_image_src( get_post_thumbnail_id( $$post->ID ), 'large' );",
  858.             "?>",
  859.             "<div class=\"$1\" style=\"background: url(<?php echo $$image_attributes[0]; ?>) center center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover;\">",
  860.             "  $2",
  861.             "</div>"
  862.         ],
  863.         "description": "Img"
  864.     },
  865.  
  866.     "Uri": {
  867.         "prefix": "wp-uri",
  868.         "body": [
  869.             "<?php echo get_stylesheet_directory_uri(); ?>"
  870.         ],
  871.         "description": "Uri"
  872.     },
  873.  
  874.     "Header": {
  875.         "prefix": "wp-header",
  876.         "body": [
  877.             "<?php get_header(); ?>"
  878.         ],
  879.         "description": "Header"
  880.     },
  881.  
  882.     "Is Search": {
  883.         "prefix": "wp-is-search",
  884.         "body": [
  885.             "<?php if ( is_search() ) { ?>",
  886.             "<?php esc_html_e('Result for:', 'slug-theme'); ?> <strong><i><?php echo $$s ?></i></strong>",
  887.             "<?php } else  if ( is_category() || is_tag() ) { ?>",
  888.             "<?php echo single_cat_title() ?>",
  889.             "<?php } else if ( is_home() ){ ?>",
  890.             "<?php single_post_title(); ?>",
  891.             "<?php } else if ( is_date() ){ ?>",
  892.             "<?php single_month_title(' '); ?>",
  893.             "<?php } else if ( is_archive() ){ ?>",
  894.             "<?php post_type_archive_title(); ?>",
  895.             "<?php } ?>"
  896.         ],
  897.         "description": "Is Search"
  898.     },
  899.  
  900.     "Loop": {
  901.         "prefix": "wp-loop",
  902.         "body": [
  903.             "<?php if (have_posts()) :?><?php while(have_posts()) : the_post(); ?>",
  904.             "",
  905.             "  <!-- loop content -->",
  906.             "",
  907.             "<?php endwhile; ?>",
  908.             "  <p><?php previous_posts_link( 'Older posts' ); ?> - <?php next_posts_link( 'Newer posts' ); ?></p>",
  909.             "<?php else : ?>",
  910.             "  <p><?php esc_html_e('Sorry, no posts matched your criteria.', 'slug-theme'); ?></p>",
  911.             "<?php endif; ?>"
  912.         ],
  913.         "description": "Loop"
  914.     },
  915.  
  916.     "Post Class": {
  917.         "prefix": "wp-post-class",
  918.         "body": [
  919.             "<?php post_class(); ?>"
  920.         ],
  921.         "description": "Post Class"
  922.     },
  923.  
  924.     "Permalink": {
  925.         "prefix": "wp-permalink",
  926.         "body": [
  927.             "<?php the_permalink(); ?>"
  928.         ],
  929.         "description": "Permalink"
  930.     },
  931.  
  932.     "Title": {
  933.         "prefix": "wp-title",
  934.         "body": [
  935.             "<?php the_title(); ?>"
  936.         ],
  937.         "description": "Title"
  938.     },
  939.  
  940.     "Time": {
  941.         "prefix": "wp-time",
  942.         "body": [
  943.             "<?php the_time('j M , Y') ?>"
  944.         ],
  945.         "description": "Time"
  946.     },
  947.  
  948.     "Category": {
  949.         "prefix": "wp-category",
  950.         "body": [
  951.             "<?php the_category(', '); ?>"
  952.         ],
  953.         "description": "Category"
  954.     },
  955.  
  956.     "Excerpt": {
  957.         "prefix": "wp-excerpt",
  958.         "body": [
  959.             "<?php the_excerpt();?>"
  960.         ],
  961.         "description": "Excerpt"
  962.     },
  963.  
  964.     "Sidebar": {
  965.         "prefix": "wp-sidebar",
  966.         "body": [
  967.             "<?php get_sidebar(); ?>"
  968.         ],
  969.         "description": "Sidebar"
  970.     },
  971.  
  972.     "Footer": {
  973.         "prefix": "wp-footer",
  974.         "body": [
  975.             "<?php get_footer(); ?>"
  976.         ],
  977.         "description": "Footer"
  978.     },
  979.  
  980.     "Language": {
  981.         "prefix": "wp-lang",
  982.         "body": [
  983.             "<?php language_attributes();?>"
  984.         ],
  985.         "description": "Language"
  986.     },
  987.  
  988.     "Description": {
  989.         "prefix": "wp-desc",
  990.         "body": [
  991.             "<?php bloginfo( 'description' ); ?>"
  992.         ],
  993.         "description": "Description"
  994.     },
  995.  
  996.     "Head": {
  997.         "prefix": "wp-head",
  998.         "body": [
  999.             "<?php wp_head(); ?>"
  1000.         ],
  1001.         "description": "Head"
  1002.     },
  1003.  
  1004.     "Foot": {
  1005.         "prefix": "wp-foot",
  1006.         "body": [
  1007.             "<?php wp_footer(); ?>"
  1008.         ],
  1009.         "description": "Foot"
  1010.     },
  1011.  
  1012.     "Body": {
  1013.         "prefix": "wp-body",
  1014.         "body": [
  1015.             "<?php body_class(); ?>"
  1016.         ],
  1017.         "description": "Body"
  1018.     },
  1019.  
  1020.     "Home": {
  1021.         "prefix": "wp-home",
  1022.         "body": [
  1023.             "<?php echo home_url(); ?>"
  1024.         ],
  1025.         "description": "Home"
  1026.     },
  1027.  
  1028.     "Blog Title": {
  1029.         "prefix": "wp-blog-tit",
  1030.         "body": [
  1031.             "<?php bloginfo('title'); ?>"
  1032.         ],
  1033.         "description": "Blog Title"
  1034.     },
  1035.  
  1036.     "Menu": {
  1037.         "prefix": "wp-menu",
  1038.         "body": [
  1039.             "<?php",
  1040.             "wp_nav_menu(array(",
  1041.             "  'theme_location' => 'header',",
  1042.             "  //'walker' => new Clean_Walker_Nav(),",
  1043.             "  'container' => false,",
  1044.             "  'items_wrap' => '<ul>%3$s</ul>'",
  1045.             "));",
  1046.             "?>"
  1047.         ],
  1048.         "description": "Menu"
  1049.     },
  1050.  
  1051.     "Name": {
  1052.         "prefix": "wp-name",
  1053.         "body": [
  1054.             "<?php bloginfo('name'); ?>"
  1055.         ],
  1056.         "description": "Name"
  1057.     },
  1058.  
  1059.     "Is Page Template": {
  1060.         "prefix": "wp-is-page-template",
  1061.         "body": [
  1062.             "<?php if (is_page_template( '$1' )) { ?>",
  1063.             "",
  1064.             "  <!-- content to show -->",
  1065.             "",
  1066.             "<?php } ?>"
  1067.         ],
  1068.         "description": "Is Page Template"
  1069.     },
  1070.  
  1071.     "Copyright": {
  1072.         "prefix": "wp-copy",
  1073.         "body": [
  1074.             "<?php esc_html_e('&copy; Copyright ', 'slug-theme'); ?> <?php echo date(\"o\");?>"
  1075.         ],
  1076.         "description": "Copyright"
  1077.     },
  1078.  
  1079.     "Theme Setup": {
  1080.         "prefix": "wp-theme-setup",
  1081.         "body": [
  1082.             "<?php",
  1083.             "/*  Theme setup",
  1084.             "/* ------------------------------------ */",
  1085.             "if ( ! function_exists( 'slug-theme_setup' ) ) {",
  1086.             "",
  1087.             "  function nakedpress_setup() {",
  1088.             "",
  1089.             "    // Enable title in header",
  1090.             "    add_theme_support( 'title-tag' );",
  1091.             "",
  1092.             "    // Enable automatic feed links",
  1093.             "    add_theme_support( 'automatic-feed-links' );",
  1094.             "",
  1095.             "    // Enable featured image",
  1096.             "    add_theme_support( 'post-thumbnails' );",
  1097.             "",
  1098.             "    // Thumbnail sizes",
  1099.             "    add_image_size( 'nakedpress_single', 800, 999, false );",
  1100.             "    add_image_size( 'nakedpress_big', 1400, 928, true );   //(cropped)",
  1101.             "",
  1102.             "    // Custom menu areas",
  1103.             "    register_nav_menus( array(",
  1104.             "      'header' => esc_html__( 'Header', 'slug-theme' )",
  1105.             "    ) );",
  1106.             "",
  1107.             "    // Load theme languages",
  1108.             "    load_theme_textdomain( 'slug-theme', get_template_directory().'/languages' );",
  1109.             "",
  1110.             "  }",
  1111.             "",
  1112.             "}",
  1113.             "add_action( 'after_setup_theme', 'slug-theme_setup' );",
  1114.             "?>"
  1115.         ],
  1116.         "description": "Theme Setup"
  1117.     },
  1118.  
  1119.     "Sidebar Setup": {
  1120.         "prefix": "wp-sidebar-setup",
  1121.         "body": [
  1122.             "<?php",
  1123.             "/*  Register sidebars",
  1124.             "/* ------------------------------------ */",
  1125.             "if ( ! function_exists( 'slug-theme_sidebars' ) ) {",
  1126.             "",
  1127.             "  function nakedpress_sidebars() {",
  1128.             "    register_sidebar(array( 'name' => esc_html__( 'Primary', 'slug-theme' ),'id' => 'primary','description' => esc_html__( 'Normal full width sidebar.', 'slug-theme' ), 'before_widget' => '<div id=\"%1$s\" class=\"widget %2$s\">','after_widget' => '</div>','before_title' => '<h3>','after_title' => '</h3>'));",
  1129.             "  }",
  1130.             "",
  1131.             "}",
  1132.             "add_action( 'widgets_init', 'slug-theme_sidebars' );",
  1133.             "?>"
  1134.         ],
  1135.         "description": "Sidebar Setup"
  1136.     },
  1137.  
  1138.     "Script Setup": {
  1139.         "prefix": "wp-script-setup",
  1140.         "body": [
  1141.             "<?php",
  1142.             "/*  Enqueue javascript",
  1143.             "/* ------------------------------------ */",
  1144.             "if ( ! function_exists( 'slug-theme_scripts' ) ) {",
  1145.             "  function nakedpress_scripts() {",
  1146.             "",
  1147.             "    wp_enqueue_script( 'slug-theme-script', get_template_directory_uri() . '/js/script.js', array( 'jquery' ),'', true );",
  1148.             "    if ( is_singular() && get_option( 'thread_comments' ) )  { wp_enqueue_script( 'comment-reply' ); }",
  1149.             "",
  1150.             "  }",
  1151.             "}",
  1152.             "add_action( 'wp_enqueue_scripts', 'slug-theme_scripts' );",
  1153.             "?>"
  1154.         ],
  1155.         "description": "Script Setup"
  1156.     },
  1157.  
  1158.     "Style Setup": {
  1159.         "prefix": "wp-style-setup",
  1160.         "body": [
  1161.             "<?php",
  1162.             "/*  Enqueue css",
  1163.             "/* ------------------------------------ */",
  1164.             "if ( ! function_exists( 'slug-theme_styles' ) ) {",
  1165.             "  function nakedpress_styles() {",
  1166.             "",
  1167.             "    wp_enqueue_style( 'slug-theme-style', get_template_directory_uri().'/style.css');",
  1168.             "",
  1169.             "   }",
  1170.             "}",
  1171.             "add_action( 'wp_enqueue_scripts', 'slug-theme_styles' );",
  1172.             "?>"
  1173.         ],
  1174.         "description": "Style Setup"
  1175.     },
  1176.  
  1177.     "Thumbnail": {
  1178.         "prefix": "wp-thumbnail",
  1179.         "body": [
  1180.             "<?php the_post_thumbnail('thumbnail', array('class' => 'img-res','alt' => get_the_title())); ?>"
  1181.         ],
  1182.         "description": "Thumbnail"
  1183.     },
  1184.  
  1185.     "Content": {
  1186.         "prefix": "wp-content",
  1187.         "body": [
  1188.             "<?php the_content(esc_html__('Read More...', 'slug-theme'));?>"
  1189.         ],
  1190.         "description": "Content"
  1191.     },
  1192.  
  1193.     "Page Link": {
  1194.         "prefix": "wp-pagelink",
  1195.         "body": [
  1196.             "<?php wp_link_pages('pagelink=Page %'); ?>"
  1197.         ],
  1198.         "description": "Page Link"
  1199.     },
  1200.  
  1201.     "Tag": {
  1202.         "prefix": "wp-tag",
  1203.         "body": [
  1204.             "<?php the_tags('', ', ', ''); ?>"
  1205.         ],
  1206.         "description": "Tag"
  1207.     },
  1208.  
  1209.     "Comments": {
  1210.         "prefix": "wp-comment",
  1211.         "body": [
  1212.             "<?php comments_template(); ?>"
  1213.         ],
  1214.         "description": "Comments"
  1215.     },
  1216.  
  1217.     "Dinamic Sidebar": {
  1218.         "prefix": "wp-dinamicsidebar",
  1219.         "body": [
  1220.             "<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('primary') ) : ?>",
  1221.             "<?php endif; ?>"
  1222.         ],
  1223.         "description": "Dinamic Sidebar"
  1224.     },
  1225.  
  1226.     "Text Translate": {
  1227.         "prefix": "wp-text-translate",
  1228.         "body": [
  1229.             "<?php esc_html_e( 'Results for: ', 'nextframe'); ?>"
  1230.         ],
  1231.         "description": "Text Translate"
  1232.     },
  1233.  
  1234.     "Search": {
  1235.         "prefix": "wp-search",
  1236.         "body": [
  1237.             "<?php get_search_form(); ?>"
  1238.         ],
  1239.         "description": "Search"
  1240.     },
  1241.  
  1242.     "Search Form": {
  1243.         "prefix": "wp-searchform",
  1244.         "body": [
  1245.             "<form class=\"search-form\" role=\"search\" method=\"get\" action=\"<?php echo home_url(); ?>\">",
  1246.             "  <input  type=\"text\" placeholder=\"<?php esc_html_e('Search', 'slug-theme'); ?>\" name=\"s\">",
  1247.             "  <button type=\"submit\"><i class=\"fa fa-search\"></i></button>",
  1248.             "</form>"
  1249.         ],
  1250.         "description": "Search Form"
  1251.     },
  1252.  
  1253.     "Comments Template": {
  1254.         "prefix": "wp-commentstemplate",
  1255.         "body": [
  1256.             "<?php",
  1257.             "// ##########  Do not delete these lines",
  1258.             "if (isset($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME'])){",
  1259.             "  die (esc_html__('Please do not load this page directly. Thanks!', 'nakedpress' )); }",
  1260.             "if ( post_password_required() ) { ?>",
  1261.             "  <p class=\"nocomments\"><?php esc_html_e('This post is password protected. Enter the password to view comments.', 'nakedpress'); ?></p>",
  1262.             "<?php",
  1263.             "  return; }",
  1264.             "// ##########  End do not delete section",
  1265.             "",
  1266.             "// Display Comments Section",
  1267.             "if ( have_comments() ) : ?>",
  1268.             "  <h3 id=\"comments\"><?php comments_number( esc_html__( 'No Responses', 'nakedpress' ), esc_html__( '1 Response', 'nakedpress' ), esc_html__( '% Responses', 'nakedpress') ); ?></h3>",
  1269.             "    <div class=\"navigation\">",
  1270.             "      <div class=\"alignleft\"><?php previous_comments_link() ?></div>",
  1271.             "      <div class=\"alignright\"><?php next_comments_link() ?></div>",
  1272.             "    </div>",
  1273.             "  <ol class=\"commentlist\">",
  1274.             "    <?php",
  1275.             "    wp_list_comments(array(",
  1276.             "      'avatar_size' => 64,",
  1277.             "    ));",
  1278.             "    ?>",
  1279.             "  </ol>",
  1280.             "  <div class=\"navigation\">",
  1281.             "    <div class=\"alignleft\"><?php previous_comments_link() ?></div>",
  1282.             "    <div class=\"alignright\"><?php next_comments_link() ?></div>",
  1283.             "  </div>",
  1284.             "  <?php",
  1285.             "  if ( ! comments_open() ) : // There are comments but comments are now closed ?>",
  1286.             "    <p class=\"nocomments\"><?php esc_html_e('Comments are closed.', 'nakedpress'); ?></p>",
  1287.             "  <?php",
  1288.             "  endif;",
  1289.             "",
  1290.             "else : // I.E. There are no Comments",
  1291.             "  if ( comments_open() ) : // Comments are open, but there are none yet",
  1292.             "    // echo\"<p>Be the first to write a comment.</p>\";",
  1293.             "  else : // comments are closed ?>",
  1294.             "    <p class=\"nocomments\"><?php esc_html_e('Comments are closed.', 'nakedpress'); ?></p>",
  1295.             "  <?php",
  1296.             "  endif;",
  1297.             "endif;",
  1298.             "",
  1299.             "// Display Form/Login info Section",
  1300.             "// the comment_form() function handles this and can be used without any paramaters simply as \"comment_form()\"",
  1301.             "comment_form(array(",
  1302.             "  // see codex http://codex.wordpress.org/Function_Reference/comment_form for default values",
  1303.             "  // tutorial here http://blogaliving.com/wordpress-adding-comment_form-theme/",
  1304.             "  'comment_field' => '<p><textarea name=\"comment\" id=\"comment\" cols=\"58\" rows=\"10\" tabindex=\"4\" aria-required=\"true\"></textarea></p>',",
  1305.             "  'label_submit' => ''.esc_html__('Submit Comment','nakedpress').'',",
  1306.             "  'comment_notes_after' => ''",
  1307.             "  ));",
  1308.             "",
  1309.             "// RSS comments link",
  1310.             "echo '<div class=\"comments_rss\">';",
  1311.             "post_comments_feed_link(''.esc_html__('Comments RSS Feed', 'nakedpress').'');",
  1312.             "echo '</div>';",
  1313.             "",
  1314.             "?>"
  1315.         ],
  1316.         "description": "Comments Template"
  1317.     },
  1318.  
  1319.     "404": {
  1320.         "prefix": "wp-404",
  1321.         "body": [
  1322.             "<h1><?php esc_html_e( 'Oops! That page can&rsquo;t be found.', 'slug-theme' ); ?></h1>",
  1323.             "<h2><?php esc_html_e( '404 Error', 'slug-theme' ); ?></h2>",
  1324.             "<p><?php esc_html_e( 'The page you are trying to reach does not exist, or has been moved. Please use the menus or the search box to find what you are looking for.', 'slug-theme' ); ?></p> "
  1325.         ],
  1326.         "description": "404"
  1327.     },
  1328.  
  1329.     "Walker": {
  1330.         "prefix": "wp-walker",
  1331.         "body": [
  1332.             "<?php",
  1333.             "class Clean_Walker_Nav extends Walker_Nav_Menu {",
  1334.             "  /**",
  1335.             "  * Filter used to remove built in WordPress-generated classes",
  1336.             "  * @param  mixed $var The array item to verify",
  1337.             "  * @return boolean      Whether or not the item matches the filter",
  1338.             "  */",
  1339.             "  function filter_builtin_classes( $$var ) {",
  1340.             "    return ( FALSE === strpos( $$var, 'item' ) ) ? $$var : '';",
  1341.             "  }",
  1342.             "",
  1343.             "  function start_lvl( &$$output, $$depth = 0, $$args = array() ) {",
  1344.             "    $$indent = str_repeat(\"\\t\", $$depth);",
  1345.             "    $$output .= \"\\n$indent<ul class=\\\"dropdown-menu\\\">\\n\";",
  1346.             "  }",
  1347.             "",
  1348.             "  function start_el( &$$output, $$item, $$depth = 0, $$args = array(), $$id = 0 ) {",
  1349.             "    $$indent = ( $$depth ) ? str_repeat( \"\\t\", $$depth ) : '';",
  1350.             "",
  1351.             "    $$class_names = $$value = '';",
  1352.             "",
  1353.             "    $$unfiltered_classes = empty( $$item->classes ) ? array() : (array) $$item->classes;",
  1354.             "    $$classes = array_filter( $$unfiltered_classes, array( $$this, 'filter_builtin_classes' ) );",
  1355.             "",
  1356.             "    /* add custom classes if is active */",
  1357.             "    if ( preg_grep(\"/^current-menu-item/\", $$unfiltered_classes) ) {",
  1358.             "      $$classes[] = 'active';",
  1359.             "    }",
  1360.             "",
  1361.             "    /* add custom classes if is parent */",
  1362.             "    if ( preg_grep(\"/^menu-item-has-children/\", $$unfiltered_classes ) ) {",
  1363.             "      $$classes[] = 'dropdown';",
  1364.             "    }",
  1365.             "",
  1366.             "    $$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $$classes ), $$item, $$args ) );",
  1367.             "    $$class_names = $$class_names ? ' class=\"' . esc_attr( $$class_names ) . '\"' : '';",
  1368.             "",
  1369.             "    $$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $$item->ID, $$item, $$args );",
  1370.             "    $$id = $$id ? ' id=\"' . esc_attr( $$id ) . '\"' : '';",
  1371.             "",
  1372.             "",
  1373.             "    $$output .= $$indent . '<li' . $$value . $$class_names .'>';",
  1374.             "",
  1375.             "",
  1376.             "    $$atts = array();",
  1377.             "    $$atts['title']  = ! empty( $$item->attr_title ) ? $$item->attr_title : '';",
  1378.             "    $$atts['target'] = ! empty( $$item->target )     ? $$item->target     : '';",
  1379.             "    $$atts['rel']    = ! empty( $$item->xfn )        ? $$item->xfn        : '';",
  1380.             "    $$atts['href']   = ! empty( $$item->url )        ? $$item->url        : '';",
  1381.             "",
  1382.             "    $$atts = apply_filters( 'nav_menu_link_attributes', $$atts, $$item, $$args );",
  1383.             "",
  1384.             "    $$attributes = '';",
  1385.             "    foreach ( $$atts as $$attr => $$value ) {",
  1386.             "      if ( ! empty( $$value ) ) {",
  1387.             "        $$value = ( 'href' === $$attr ) ? esc_url( $$value ) : esc_attr( $$value );",
  1388.             "        $$attributes .= ' ' . $$attr . '=\"' . $$value . '\"';",
  1389.             "      }",
  1390.             "    }",
  1391.             "",
  1392.             "    $$item_output = $$args->before;",
  1393.             "",
  1394.             "    /* dropdown */",
  1395.             "    if ( preg_grep(\"/^menu-item-has-children/\", $$unfiltered_classes ) ) {",
  1396.             "      $$item_output .= '<a'. $$attributes .' data-toggle=\"dropdown\">';",
  1397.             "    } else {",
  1398.             "      $$item_output .= '<a'. $$attributes .'>';",
  1399.             "    }",
  1400.             "",
  1401.             "    $$item_output .= $$args->link_before . apply_filters( 'the_title', $$item->title, $$item->ID ) . $$args->link_after;",
  1402.             "",
  1403.             "    /* dropdown */",
  1404.             "    if ( preg_grep(\"/^menu-item-has-children/\", $$unfiltered_classes ) ) {",
  1405.             "      $$item_output .= '<div class=\"arrow animate\"></div></a>';",
  1406.             "    } else {",
  1407.             "      $$item_output .= '</a>';",
  1408.             "    }",
  1409.             "",
  1410.             "    $$item_output .= $$args->after;",
  1411.             "",
  1412.             "    $$output .= apply_filters( 'walker_nav_menu_start_el', $$item_output, $$item, $$depth, $$args );",
  1413.             "  }",
  1414.             "",
  1415.             "} // Walker_Nav_Menu",
  1416.             "?>"
  1417.         ],
  1418.         "description": "Walker"
  1419.     },
  1420.  
  1421.     "Include in functions.php": {
  1422.         "prefix": "wp-incfunctions",
  1423.         "body": [
  1424.             "require_once('inc/nakedpress_navwalker.php');"
  1425.         ],
  1426.         "description": "Include in functions.php"
  1427.     },
  1428.  
  1429.     "Include Parts": {
  1430.         "prefix": "wp-inc",
  1431.         "body": [
  1432.             "<?php get_template_part('inc/example-cover'); ?>"
  1433.         ],
  1434.         "description": "Include Parts"
  1435.     },
  1436.  
  1437.     "Child Theme": {
  1438.         "prefix": "wp-childtheme",
  1439.         "body": [
  1440.             "<?php /* Child Theme */",
  1441.             "add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);",
  1442.             "function enqueue_child_theme_styles() {",
  1443.             "",
  1444.             "  wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );",
  1445.             "  wp_enqueue_style( 'child-style',",
  1446.             "    get_stylesheet_directory_uri() . '/style.css',",
  1447.             "    array('parent-style'),",
  1448.             "    wp_get_theme()->get('Version')",
  1449.             "  );",
  1450.             "",
  1451.             "} ?>"
  1452.         ],
  1453.         "description": "Child Theme"
  1454.     },
  1455.  
  1456.     "Template": {
  1457.         "prefix": "wp-template",
  1458.         "body": [
  1459.             "<?php",
  1460.             "  /*",
  1461.             "  *",
  1462.             "  * Template Name: Template Name",
  1463.             "  *",
  1464.             "  */",
  1465.             "?>"
  1466.         ],
  1467.         "description": "Template"
  1468.     },
  1469.  
  1470.     "Custom Shortcode": {
  1471.         "prefix": "wp-shortcode-custom",
  1472.         "body": [
  1473.             "function custom_shortcode() {",
  1474.             "",
  1475.             "  $$buffer = '<div class=\"shortcode-custom\">';",
  1476.             "  $$buffer .= '<p>Ciao!</p>';",
  1477.             "  $$buffer .= '</div>';",
  1478.             "",
  1479.             "  return $$buffer;",
  1480.             "}",
  1481.             "add_shortcode('nameshortcode', 'custom_shortcode');"
  1482.         ],
  1483.         "description": "Custom Shortcode"
  1484.     },
  1485.  
  1486.     "Custom Color Palette Gutenberg": {
  1487.         "prefix": "wp-custom-color-gutenberg",
  1488.         "body": [
  1489.             "function nakedbase_custom_gutenberg_color_palette() {",
  1490.             "  add_theme_support(",
  1491.             "    'editor-color-palette',",
  1492.             "    [",
  1493.             "      [",
  1494.             "        'name'  => esc_html__( 'Brown', 'nakedbase' ),",
  1495.             "        'slug'  => 'brown',",
  1496.             "        'color' => '#3a3335',",
  1497.             "       ],",
  1498.             "       [",
  1499.             "         'name'  => esc_html__( 'Orange', 'nakedbase' ),",
  1500.             "         'slug'  => 'orange',",
  1501.             "         'color' => '#f0544f',",
  1502.             "       ],",
  1503.             "       [",
  1504.             "         'name'  => esc_html__( 'Light Gray', 'nakedbase' ),",
  1505.             "         'slug'  => 'light-gray',",
  1506.             "         'color' => '#eee',",
  1507.             "       ],",
  1508.             "       [",
  1509.             "         'name'  => esc_html__( 'White', 'nakedbase' ),",
  1510.             "         'slug'  => 'white',",
  1511.             "         'color' => '#fff',",
  1512.             "       ],",
  1513.             "",
  1514.             "     ]",
  1515.             "   );",
  1516.             "}",
  1517.             "add_action( 'after_setup_theme', 'nakedbase_custom_gutenberg_color_palette' );"
  1518.         ],
  1519.         "description": "Custom Color Palette Gutenberg"
  1520.     },
  1521.  
  1522.     "Logged In": {
  1523.         "prefix": "wp-logged-in",
  1524.         "body": [
  1525.             "<?php if ( is_user_logged_in() ) { ?> <?php } ?>"
  1526.         ],
  1527.         "description": "Logged In"
  1528.     },
  1529.  
  1530.     "Comment Php": {
  1531.         "prefix": "p-comment",
  1532.         "body": [
  1533.             "/*",
  1534.             " * @functions ",
  1535.             " * @description ",
  1536.             " *",
  1537.             " */"
  1538.         ],
  1539.         "description": "Comment with description in php"
  1540.     },
  1541.  
  1542.     // HTML Snipet variant
  1543.     "Comment": {
  1544.         "prefix": "h-com",
  1545.         "body": [
  1546.             "<!-- $1 -->"
  1547.         ],
  1548.         "description": "Comment"
  1549.     },
  1550.  
  1551.     "Col 1": {
  1552.         "prefix": "h-1col",
  1553.         "body": [
  1554.             "<div class=\"grid\">",
  1555.             "  <div class=\"col-100\">",
  1556.             "    <h3> Lorem </h3>",
  1557.             "  </div>",
  1558.             "</div>"
  1559.         ],
  1560.         "description": "Col 1"
  1561.     },
  1562.  
  1563.     "Col 2": {
  1564.         "prefix": "h-2col",
  1565.         "body": [
  1566.             "<div class=\"grid\">",
  1567.             "  <div class=\"col-50\">",
  1568.             "    <h3> Lorem </h3>",
  1569.             "  </div>",
  1570.             "  <div class=\"col-50\">",
  1571.             "    <h3> Lorem </h3>",
  1572.             "  </div>",
  1573.             "</div>"
  1574.         ],
  1575.         "description": "Col 2"
  1576.     },
  1577.  
  1578.     "Col 3": {
  1579.         "prefix": "h-3col",
  1580.         "body": [
  1581.             "<div class=\"grid\">",
  1582.             "  <div class=\"col-33\">",
  1583.             "    <h3> Lorem </h3>",
  1584.             "  </div>",
  1585.             "  <div class=\"col-33\">",
  1586.             "    <h3> Lorem </h3>",
  1587.             "  </div>",
  1588.             "  <div class=\"col-33\">",
  1589.             "    <h3> Lorem </h3>",
  1590.             "  </div>",
  1591.             "</div>"
  1592.         ],
  1593.         "description": "Col 3"
  1594.     },
  1595.  
  1596.     "Col 4": {
  1597.         "prefix": "h-4col",
  1598.         "body": [
  1599.             "<div class=\"grid\">",
  1600.             "  <div class=\"col-25\">",
  1601.             "    <h3> Lorem </h3>",
  1602.             "  </div>",
  1603.             "  <div class=\"col-25\">",
  1604.             "    <h3> Lorem </h3>",
  1605.             "  </div>",
  1606.             "  <div class=\"col-25\">",
  1607.             "    <h3> Lorem </h3>",
  1608.             "  </div>",
  1609.             "  <div class=\"col-25\">",
  1610.             "    <h3> Lorem </h3>",
  1611.             "  </div>",
  1612.             "</div>"
  1613.         ],
  1614.         "description": "Col 4"
  1615.     },
  1616. }
  1617.  
Tags: js
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement