API tools faq
paste
Advertisement
scimenes

JS per creare animazioni web

scimenes
Sep 23rd, 2022
1,169
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 41.93 KB | Source Code | 0 0
raw download clone embed print report
  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
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!