×

Welcome to TagMyCode

Please login or create account to add a snippet.
0
0
 
0
Language: Javascript
Posted by: Isaac Dettman
Added: Apr 25, 2017 1:10 AM
Views: 5
Tags: no tags
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>search title input</title>
  6.     <style type="text/css">
  7.  
  8.         body, html {
  9.             margin: 8px;
  10.             padding: 0;
  11.             min-width: 634px;
  12.             font-size: 12px;
  13.             background: url(../blogtools/includes/images/bg-texture.png);
  14.             font-family: Helvetica, Arial, sans-serif;
  15.             border-collapse: collapse;
  16.         }
  17.  
  18.  
  19.         /**
  20.             GLOBAL
  21.         **/
  22.         .hide {
  23.             display: none !important;
  24.         }
  25.                
  26.         /**
  27.             COMBO TEXT BLOCK
  28.         **/
  29.         .comboTextBlock {
  30.             margin-bottom: 20px;
  31.         }
  32.  
  33.  
  34.         /**
  35.             HEADER CONTAINER
  36.         **/
  37.         .controls__container {
  38.             min-height: 65px;
  39.             border: 1px solid #ddd;
  40.             padding: 7px 8px 7px 20px;
  41.             position: relative;
  42.             border-bottom-width: 0;
  43.             background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FFFFFF), color-stop(100%, #DDDDDD));
  44.         }
  45.  
  46.  
  47.         /**
  48.             DRAG HANDLE
  49.         **/
  50.         .drag__handle {
  51.             position: absolute;
  52.             top: 0;
  53.             left: 0;
  54.             height: 36px;
  55.             width: 18px;
  56.             cursor: pointer;
  57.             background: url("../blogtools/includes/images/desktop/icons/icon_drag_handle.png") no-repeat center center;
  58.         }
  59.  
  60.  
  61.         /**
  62.             TYPE CONTROLS
  63.          **/
  64.         .type-control__container {
  65.             display: inline-block;
  66.             cursor: pointer;
  67.             margin-right: 20px;
  68.             margin-top: 10px;
  69.         }
  70.  
  71.         .type-control__label {
  72.             font-weight: bold;
  73.             font-size: 12px;
  74.             color: #26353f;
  75.         }
  76.  
  77.         .type-control__icon {
  78.             background: url("../blogtools/includes/images/desktop/icons/textblock-type-sprites.png") 0 0;
  79.             width: 40px;
  80.             height: 45px;
  81.             margin-right: 5px;
  82.             display: inline-block;
  83.             vertical-align: middle;
  84.         }
  85.  
  86.  
  87.         /**
  88.             EXTENDED CONTROLLS
  89.         **/
  90.         .extended-controls__container {
  91.             display: inline-block;
  92.             vertical-align: top;
  93.         }
  94.  
  95.  
  96.         /**
  97.             FAST FIND SEARCH
  98.         **/
  99.         .fastfind__container {
  100.             display: inline-block;
  101.             vertical-align: bottom;
  102.         }
  103.  
  104.         .fastfind__input__container {
  105.             display: inline-block;
  106.             vertical-align: bottom;
  107.             border: 1px solid #ddd;
  108.             background: url("../blogtools/includes/images/desktop/icons/icon-magnifying-glass.png") 6px center no-repeat white;
  109.             padding: 4px 5px 4px 21px;
  110.         }
  111.  
  112.         .fastfind__input {
  113.             width: 260px;
  114.             display: inline-block;
  115.             vertical-align: bottom;
  116.             border: 0;
  117.             padding: 0;
  118.             color: #000;
  119.             font-size: 12px;
  120.             font-weight: bold;
  121.             font-family: Helvetica, Arial, sans-serif;
  122.             -webkit-appearance: none;
  123.         }
  124.  
  125.         .fastfind__input:focus {
  126.             outline-style: none;
  127.         }
  128.  
  129.         .fastfind__icon {
  130.             vertical-align: bottom;
  131.             display: inline-block;
  132.             width: 16px;
  133.             height: 11px;
  134.             margin-left: 3px;
  135.         }
  136.  
  137.         .fastfind__icon-loading {
  138.             background: url("../blogtools/includes/images/desktop/icons/icon-loader.gif") center center no-repeat;
  139.         }
  140.  
  141.         .fastfind__button-add {
  142.             vertical-align: bottom;
  143.             display: inline-block;
  144.             width: 9px;
  145.             height: 24px;
  146.             cursor: pointer;
  147.             outline: none;
  148.             background: url("../blogtools/includes/images/desktop/icons/add-sign.png") 0 50% no-repeat;
  149.         }
  150.  
  151.         /**
  152.             FAST FIND RESULTS
  153.         **/
  154.         .fastfind-results__container {
  155.             border: 1px solid #ddd;
  156.             position: absolute;
  157.             background: #fff;
  158.             overflow: hidden;
  159.             min-width: 186px;
  160.             box-shadow: #999 0 0 2px 0;
  161.             padding: 3px 0;
  162.             z-index: 997;
  163.         }
  164.  
  165.         .fastfind-results__list-item--active {
  166.             color: #fff;
  167.             background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(0, 121, 238)), to(rgb(0, 75, 185)));
  168.         }
  169.  
  170.         .fastfind-results__list {
  171.             max-height: 156px;
  172.             margin: 0;
  173.             padding: 0;
  174.             list-style: none;
  175.             overflow: auto;
  176.         }
  177.  
  178.         .fastfind-results__list-item {
  179.             cursor: pointer;
  180.             padding: 8px 22px;
  181.             border: 0 solid #f0f5fc;
  182.             border-bottom-width: 1px;
  183.         }
  184.  
  185.         .fastfind-results__list-item:last-child {
  186.             border-width: 0;
  187.         }
  188.  
  189.         .fastfind-results__list-item:nth-child(2n+1) {
  190.             background-color: #f0f5fc;
  191.         }
  192.  
  193.         .fastfind-results__list-item:nth-child(2n) {
  194.             background-color: #fff;
  195.         }
  196.  
  197.  
  198.         /**
  199.             SELECTED ITEM
  200.         **/
  201.         .selected-item__container {
  202.             font-weight: bold;
  203.             font-size: 12px;
  204.             color: rgb(38, 53, 63);
  205.         }
  206.  
  207.         .selected-item__id {
  208.             display: inline-block;
  209.             vertical-align: bottom;
  210.             margin-right: 12px;
  211.         }
  212.  
  213.         .selected-item__title {
  214.             width: 255px;
  215.             display: inline-block;
  216.             vertical-align: bottom;
  217.             text-overflow: ellipsis;
  218.             white-space: nowrap;
  219.             overflow: hidden;
  220.             margin-right: 6px;
  221.         }
  222.  
  223.         .selected-item__button--delete {
  224.             display: inline-block;
  225.             vertical-align: bottom;
  226.             width: 9px;
  227.             height: 18px;
  228.             cursor: pointer;
  229.             background: url("../blogtools/includes/images/desktop/icons/icon_delete.gif") center center no-repeat;
  230.         }
  231.  
  232.  
  233.         /**
  234.             IMAGE FINDER
  235.         **/
  236.         .image-selector-trigger {
  237.             display: inline-block;
  238.             vertical-align: bottom;
  239.             margin-left: 5px;
  240.             cursor: pointer;
  241.             width: 16px;
  242.             height: 24px;
  243.             outline: none;
  244.             background: url("../blogtools/includes/images/desktop/icons/icon-portrait.png") center center no-repeat;
  245.         }
  246.  
  247.  
  248.         /**
  249.             BLOCK POSITION
  250.         **/
  251.         .position-block__container {
  252.             position: absolute;
  253.             top: 6px;
  254.             right: 30px;
  255.         }
  256.  
  257.         .position-block__option {
  258.             display: inline-block;
  259.             width: 50px;
  260.             margin-bottom: 5px;
  261.             text-align: center;
  262.             cursor: pointer;
  263.         }
  264.  
  265.         .position-block__input {
  266.             display: none;
  267.         }
  268.         .position-block__input:checked + .position-block__icon {
  269.             opacity: 1.0;
  270.         }
  271.  
  272.         .position-block__label {
  273.             display: inline-block;
  274.             color: #4f566d;
  275.             font-size: 10px;
  276.             font-weight: bold;
  277.             text-transform: uppercase;
  278.             margin-bottom: 6px;
  279.         }
  280.  
  281.         .position-block__icon {
  282.             background: url("../blogtools/includes/images/desktop/icons/position-sprites-active.png") 0 0;
  283.             height: 47px;
  284.             width: 48px;
  285.             opacity: 0.3;
  286.         }
  287.  
  288.         .position-block__icon--right {
  289.             background-position: -48px 0;
  290.         }
  291.  
  292.         .position-block__icon--center {
  293.             background-position: -96px 0;
  294.         }
  295.  
  296.         .position-block__icon--curtain {
  297.             background-position: -144px 0;
  298.         }
  299.  
  300.         /**
  301.             ACTION MENU
  302.         **/
  303.         .block-action__container {
  304.             position: absolute;
  305.             top: 7px;
  306.             right: 8px;
  307.         }
  308.  
  309.         .block-action__button {
  310.             display: inline-block;
  311.             height: 17px;
  312.             width: 20px;
  313.             background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(252, 252, 252)), to(rgb(219, 219, 219)));
  314.             border: 1px solid #ccc;
  315.             cursor: pointer;
  316.             outline-style: none;
  317.             background: url("../blogtools/includes/images/desktop/icons/icon-carrot.png") center center no-repeat;
  318.         }
  319.  
  320.         .block-action__button:hover {
  321.             border-color: #999;
  322.         }
  323.  
  324.         .block-action__menu__container {
  325.             position: absolute;
  326.             right: 0;
  327.             background: #fff;
  328.             border: 1px solid #eee;
  329.             padding: 2px;
  330.             box-shadow: rgba(0, 0, 0, 0.498039) 0 1px 3px;
  331.             z-index: 100;
  332.         }
  333.  
  334.         .action-menu__list {
  335.             list-style: none;
  336.             margin: 0;
  337.             padding: 0;
  338.         }
  339.  
  340.         .action-menu__list-item {
  341.             color: #000;
  342.             outline-style: none;
  343.             display: block;
  344.             font-size: 10px;
  345.             font-weight: bold;
  346.             text-decoration: none;
  347.             min-width: 90px;
  348.             padding: 4px 8px;
  349.             cursor: pointer;
  350.         }
  351.  
  352.         .action-menu__list-item:hover {
  353.             background: #ccc;
  354.         }
  355.  
  356.         .action-menu__list-item--divider {
  357.             border-bottom: 1px solid #ccc;
  358.         }
  359.  
  360.  
  361.         /**
  362.             FOOTER WORD COUNT BAR
  363.          */
  364.         .word-count-bar__container {
  365.             position: relative;
  366.             height: 27px;
  367.             overflow-y: hidden;
  368.             background-color: #f0f0f0;
  369.             border: 1px solid rgba(0, 0, 0, 0.2);
  370.         }
  371.         .word-count-bar__word-counter {
  372.             position: absolute;
  373.             top: 7px;
  374.             right: 8px;
  375.             padding-right: 5px;
  376.             color: #838383;
  377.         }
  378.         .word-count-bar__field-requirements {
  379.             line-height: 27px;
  380.             padding: 0 10px;
  381.         }
  382.  
  383.  
  384.         /**
  385.         BLOCK TYPES MENU
  386.          */
  387.         .type-menu__container {
  388.             position: absolute;
  389.             z-index: 998;
  390.             top: -10px;
  391.             width: 355px;
  392.             height: 455px;
  393.             padding: 15px 5px 5px 15px;
  394.             background: #f2f2f2;
  395.             box-shadow: #979797 0 2px 2px;
  396.         }
  397.  
  398.         .type-menu__item {
  399.             display: inline-block;
  400.             white-space: nowrap;
  401.             width: 150px;
  402.             height: 45px;
  403.             padding: 10px;
  404.             font-family: Helvetica, Arial, sans-serif;
  405.             font-weight: bold;
  406.             font-size: 12px;
  407.             color: #26353f;
  408.             cursor: pointer;
  409.         }
  410.  
  411.         .type-menu__item:hover {
  412.             background: #e9e9e9;
  413.         }
  414.  
  415.         .type-menu__item--selected {
  416.             background: #e9e9e9;
  417.         }
  418.  
  419.         .type-menu__item__icon {
  420.             display: inline-block;
  421.             width: 40px;
  422.             height: 45px;
  423.             overflow: hidden;
  424.             margin-right: 5px;
  425.             vertical-align: middle;
  426.             background: url("../blogtools/includes/images/desktop/icons/textblock-type-sprites.png") 0 0;
  427.         }
  428.  
  429.         .type-menu__item__icon--photo {
  430.             background-position: -80px 0;
  431.         }
  432.  
  433.         .type-menu__item__icon--video-text {
  434.             background-position: -160px 0;
  435.         }
  436.  
  437.         .type-menu__item__icon--video {
  438.             background-position: -240px 0;
  439.         }
  440.  
  441.         .type-menu__item__icon--slideshow {
  442.             background-position: -281px 0;
  443.         }
  444.  
  445.         .type-menu__item__icon--cta {
  446.             background-position: -320px 0;
  447.         }
  448.  
  449.         .type-menu__item__icon--poll {
  450.             background-position: -360px 0;
  451.         }
  452.  
  453.         .type-menu__item__icon--text {
  454.             background-position: -400px 0;
  455.         }
  456.  
  457.         .type-menu__item__icon--tweet {
  458.             background-position: -520px 0;
  459.         }
  460.  
  461.         .type-menu__item__icon--html-text {
  462.             background-position: -600px 0;
  463.         }
  464.  
  465.         .type-menu__item__icon--vrod-text {
  466.             background-position: -560px 0;
  467.         }
  468.  
  469.         .type-menu__item__icon--embedded-video {
  470.             background-position: -240px 0;
  471.         }
  472.     </style>
  473. </head>
  474. <body>
  475.  
  476.  
  477.  
  478. <div class="comboTextBlock" data-ordinalnum="0">
  479.     <!-- CONTROLS -->
  480.     <div class="controls__container">
  481.  
  482.         <!-- DRAG HANDLE -->
  483.         <div class="drag__handle"></div>
  484.  
  485.         <!-- TYPE CONTROLS -->
  486.         <div class="type-control__container" data-option="textOnly">
  487.             <div class="type-control__icon"></div>
  488.             <span class="type-control__label">Text Only</span>
  489.         </div>
  490.  
  491.  
  492.         <!-- EXTENDED CONTROLS -->
  493.         <div class="extended-controlls__container">
  494.  
  495.             <!-- SELECTED ITEM -->
  496.             <div class="selected-item__container hide" data="257609">
  497.                 <span class="selected-item__id">257609</span>
  498.                 <span class="selected-item__title">Britney Ever After Stars Test Their J.T. &amp; Spears Knowledge</span>
  499.  
  500.                 <!-- DELETE BUTTON -->
  501.                 <a class="selected-item__button--delete" title="Delete"></a>
  502.                 <input type="hidden" name="optionValue" value="257609">
  503.             </div>
  504.  
  505.             <!-- FAST FIND -->
  506.             <div class="fastfind__container">
  507.                 <div class="fastfind__input__container">
  508.  
  509.                     <!-- SEARCH INPUT -->
  510.                     <input class="fastfind__input" type="text" name="excludedLink" placeholder="Display Name">
  511.  
  512.                     <!-- LOADING ICON -->
  513.                     <span class="fastfind__icon fastfind__icon-loading hide"></span>
  514.                 </div>
  515.  
  516.                 <!-- ADD FAST FIND BUTTON -->
  517.                 <a class="fastfind__button-add hide" href="#" title="Add"></a>
  518.             </div>
  519.  
  520.             <!-- FILE SELECTOR -->
  521.             <a class="image-selector-trigger hide" title="Image Selector"></a>
  522.         </div>
  523.  
  524.         <!-- POSITION BLOCK -->
  525.         <div class="position-block__container">
  526.             <div class="position-block__option">
  527.                 <input class="position-block__input" type="radio" name="position-jsp-0" value="LEFT" checked="checked">
  528.                 <div class="position-block__icon--left position-block__icon"></div>
  529.                 <label class="position-block__label">Left</label>
  530.             </div>
  531.             <div class="position-block__option hide">
  532.                 <input class="position-block__input" type="radio" name="position-jsp-0" value="RIGHT">
  533.                 <div class="position-block__icon--right position-block__icon"></div>
  534.                 <label class="position-block__label">Right</label>
  535.             </div>
  536.             <div class="position-block__option hide">
  537.                 <input class="position-block__input" type="radio" name="position-jsp-0" value="CENTER">
  538.                 <div class="position-block__icon--center position-block__icon"></div>
  539.                 <label class="position-block__label">Center</label>
  540.             </div>
  541.             <div class="position-block__option">
  542.                 <input class="position-block__input" type="radio" name="position-jsp-0" value="CURTAIN">
  543.                 <div class="position-block__icon--curtain position-block__icon"></div>
  544.                 <label class="position-block__label">Curtain</label>
  545.             </div>
  546.         </div>
  547.  
  548.         <!-- SHOW ACTION MENU BUTTON -->
  549.         <div class="block-action__container">
  550.             <a class="block-action__button" title="More" tabindex="-1"></a>
  551.         </div>
  552.     </div>
  553.  
  554.     <!-- FOOTER -->
  555.     <div class="word-count-bar__container">
  556.         <div class="word-count-bar__field-errors"></div>
  557.         <div class="word-count-bar__field-requirements">REQUIRED: Text editor</div>
  558.         <span class="word-count-bar__word-counter">0 words</span>
  559.     </div>
  560. </div>
  561.  
  562. <!-- FAST FIND RESULTS -->
  563. <div class="fastfind-results__container" id="excludedLinkResultContainer">
  564.     <ul class="fastfind-results__list" searchterm="test">
  565.         <li class="fastfind-results__list-item fastfind-results__list-item--active" data="Busted">Busted</li>
  566.         <li class="fastfind-results__list-item" data="Rate-a-trailer">Rate-a-trailer</li>
  567.         <li class="fastfind-results__list-item" data="Mary-Kate Olsen">Mary-Kate Olsen</li>
  568.     </ul>
  569. </div>
  570.  
  571.  
  572. <!-- ACTION MENU -->
  573. <div class="block-action__menu__container" id="actionMenu">
  574.     <ul class="action-menu__list">
  575.         <li class="action-menu__list-item" ordinalnum="0">Add Block Above<!--<a class="action-menu__list-item" href="" tabindex="-1" ordinalnum="0">Add Block Above</a>--></li>
  576.         <li class="action-menu__list-item action-menu__list-item--divider" ordinalnum="0">Add Block Below</li>
  577.         <li class="action-menu__list-item action-menu__list-item--divider" ordinalnum="0">Duplicate</li>
  578.         <li class="action-menu__list-item" ordinalnum="0">Delete</li>
  579.     </ul>
  580. </div>
  581.  
  582. <!-- BLOCK TYPES MENU -->
  583. <div id="typeMenu" class="type-menu__container hide">
  584.     <div class="type-menu__item type-menu__item--selected" data-option="textOnly">
  585.         <div class="type-menu__item__icon type-menu__item__icon--text"></div>
  586.         Text Only
  587.     </div>
  588.     <div class="type-menu__item" data-option="htmlWithText">
  589.         <div class="type-menu__item__icon type-menu__item__icon--html-text"></div>
  590.         HTML + Text
  591.     </div>
  592.     <div class="type-menu__item" data-option="photoOnly">
  593.         <div class="type-menu__item__icon type-menu__item__icon--photo"></div>
  594.         Photo Only
  595.     </div>
  596.     <div class="type-menu__item" data-option="photoWithText">
  597.         <div class="type-menu__item__icon"></div>
  598.         Photo + Text
  599.     </div>
  600.     <div class="type-menu__item" data-option="videoOnly">
  601.         <div class="type-menu__item__icon type-menu__item__icon--video"></div>
  602.         Video Only
  603.     </div>
  604.     <div class="type-menu__item" data-option="videoWithText">
  605.         <div class="type-menu__item__icon type-menu__item__icon--video-text"></div>
  606.         Video + Text
  607.     </div>
  608.     <div class="type-menu__item" data-option="slideshow">
  609.         <div class="type-menu__item__icon type-menu__item__icon--slideshow"></div>
  610.         Slideshow
  611.     </div>
  612.     <div class="type-menu__item" data-option="callToAction">
  613.         <div class="type-menu__item__icon type-menu__item__icon--cta"></div>
  614.         Call to Action
  615.     </div>
  616.     <div class="type-menu__item" data-option="poll">
  617.         <div class="type-menu__item__icon type-menu__item__icon--poll"></div>
  618.         Poll
  619.     </div>
  620.     <div class="type-menu__item" data-option="tweet">
  621.         <div class="type-menu__item__icon type-menu__item__icon--tweet"></div>
  622.         Tweet
  623.     </div>
  624.     <div class="type-menu__item" data-option="tune-in">
  625.         <div class="type-menu__item__icon"></div>
  626.         Tune-In
  627.     </div>
  628.     <div class="type-menu__item" data-option="embeddedVideo">
  629.         <div class="type-menu__item__icon type-menu__item__icon--embedded-video"></div>
  630.         Embedded Video
  631.     </div>
  632.     <div class="type-menu__item" data-option="vrodWithText">
  633.         <div class="type-menu__item__icon type-menu__item__icon--vrod-text"></div>
  634.         VROD + Text
  635.     </div>
  636. </div>
  637.  
  638. <script>
  639.  
  640.     (function (window, document) {
  641.  
  642.  
  643.         const EventDelegator = function EventDelegator (element) {
  644.                        
  645.             this.checkForClassName = function checkForClassName (className, element, command) {
  646.                 return function hasClassName (arrayItem) {
  647.                     var foundItem = (arrayItem.classList !== undefined && arrayItem.classList.contains(className));
  648.                     if (foundItem) {
  649.                         console.dir(arrayItem);
  650.                         command.call(element, arrayItem);
  651.                     }
  652.                     return foundItem;
  653.                 }
  654.             }
  655.            
  656.             this.classNames = {
  657.                 'type-control__container': {
  658.                         element: document.getElementById('typeMenu'),
  659.                                         command: function showTypeMenu (buttonElement) {
  660.                                                 const position = buttonElement.getBoundingClientRect();
  661.                                                 this.style.top = (position.top - 26) + 'px';
  662.                                                 this.style.left = position.left + 'px';
  663.                                                 this.classList.remove('hide');
  664.                                         }
  665.                                 },
  666.                                 'block-action__button': {
  667.                         element: document.getElementById('actionMenu'),
  668.                                         command: function showActionMenu (buttonElement) {
  669.                                                 const position = buttonElement.getBoundingClientRect()
  670.                                                 this.style.top = (position.top) + 'px'
  671.                                                 this.style.left = position.left + 'px'
  672.                                                 this.classList.remove('hide')
  673.                                         }
  674.                                 }
  675.                         }
  676.            
  677.             this.checkForClassNames = function checkForClassNames (classNames) {
  678.                
  679.                                 for (let i = 0, len = classNames.length; i < len; i++) {
  680.                                         const className = classNames[i];
  681.                                         const classNameData = this.classNames[className];
  682.                                        
  683.                                         if (classNameData) {
  684.                                                 this.checkForClassName(className, classNameData.element, classNameData.command);
  685.                                                 break;
  686.                                         }
  687.                                 }
  688.                         }
  689.                        
  690.             this.handleEvent = function handleEvent (event) {
  691.                
  692.                 const path = event.path
  693.                                 let pathElement
  694.                                
  695.                 for (let i = 0, len = path.length; i < len; i++) {
  696.                         pathElement = path[i]
  697.                                 }
  698.                                
  699. //              this.checkPathForClassNames(event)
  700.                 /*if (!event.path.some(
  701.                         this.checkForClassName('type-control__container', this.typeMenu, this.showTypeMenu))) {
  702.                     if (!this.typeMenu.classList.contains('hide')) {
  703.                         this.typeMenu.classList.add('hide');
  704.                     }
  705.                 }*/
  706.             }
  707.  
  708.  
  709.             element.addEventListener('click', this);
  710.         }
  711.  
  712.         var s = new EventDelegator(document);
  713.  
  714.     })(window, document);
  715.  
  716. </script>
  717. </body>
  718. </html>