A Pen by VISIONCAN.

font-select-dropdown.markdown

font-select dropdown

dropdown menu use AngularJS

A Pen by VISIONCAN on CodePen.

License.

index.html

<div ng-app="fdApp">
  <div class="font-dropdown" tabindex="1" fd-font-dropdown>
    <span class="label" ng-style="{{'fontslist[selectedIdx].style'}}">{{fontslist[selectedIdx].name}}</span>
  <ul class="dropdown-list">
      <li ng-repeat="font in fontslist" ng-click="changeFont($index)" ng-class="{'sel': $index == selectedIdx}" ng-style="{{font.style}}">
          {{font.name}}
      </li>
  </ul>
  </div>
</div>

script.coffee

window.WebFontConfig = {
    google: {
        families: []
    }
}

app = angular.module('fdApp', [])

app.controller('FontDropdownCtrl', ($scope) ->
    WEBFONTAPI = "//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"
    @FONTSLIST = [
        {
            name: "Source Sans Pro"
            face: "Source+Sans+Pro:900italic"
            style:
                fontFamily: "Source Sans Pro"
                fontWeight: 900
                fontStyle: 'italic'
        }
        {
            name: "Quattrocento Sans"
            face: "Quattrocento+Sans"
            style:
                fontFamily: 'Quattrocento Sans'
        }
        {
            name: "Ubuntu"
            face: "Ubuntu:700"
            style:
                fontFamily: 'Ubuntu'
        }
        {
            name: "Arizonia"
            face: "Arizonia"
            style:
                fontFamily: 'Arizonia'
        } 
        {
            name: "Lora"
            face: "Lora:700"
            style:
                fontFamily: "Lora"
                fontWeight: 700
        }
        {
            name: "Sansita One"
            face: "Sansita+One"
            style:
                fontFamily: "Sansita One"
        }
        {
            name: "Armata"
            face: "Armata"
            style:
                fontFamily: "Armata"
        }
        {
            name: "Black Ops One"
            face: "Black+Ops+One"
            style:
                fontFamily: "Black Ops One"
        }
        {
            name: "Russo One"
            face: "Russo+One"
            style:
                fontFamily: "Russo One"
        }
    ]

    @loadFonts = ->
        for font in @FONTSLIST
            WebFontConfig.google.families.push(font.face)

        wf = document.createElement('script')
        wf.src = (if 'https:' is document.location.protocol then 'https:' else 'http:') + WEBFONTAPI
        wf.type = 'text/javascript'
        wf.async = 'true'
        s = document.getElementsByTagName('script')[0]
        s.parentNode.insertBefore(wf, s)
)

app.directive('fdFontDropdown', ->
    return {
        restrict: 'A'
        controller: 'FontDropdownCtrl'
        link: (scope, element, attr, Ctrl) ->
            Ctrl.loadFonts()
            scope.fontslist = Ctrl.FONTSLIST
            scope.selectedIdx = Math.floor(Math.random() * scope.fontslist.length)

            scope.changeFont = (idx) ->
                scope.selectedIdx = idx
                console.log idx

            element.bind('click', ->
                element.toggleClass("active")
            )
    }
)

style.scss

@import "compass";
@import "compass/css3/user-interface";
  
$fontDropdownWidth: 220px;
$fontDropdownHeight: 200px;
$fontDropdownRadius: 5px;
$fontDropdownColor: #2689d6;

body {
  background: #eee;
}

.font-dropdown {
    width: $fontDropdownWidth;
    border-radius: $fontDropdownRadius;
    position: relative;
    margin: 10px auto 0;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.5);
    cursor: pointer;
    outline: none;

    .label {
        @include user-select(none);
        font-size: 1.2em;
        position: relative;
        display: block;
        padding: 0 10px;
        height: 36px;
        line-height: 36px;
        z-index: 2;
        white-space: nowrap;
        overflow: hidden;

        &:after {
            @include transition(transform .3s);
           position: absolute;
	         width: 0;
	         height: 0;
           content: "";
           border-left: 7px solid transparent;
           border-right: 7px solid transparent;
           border-top: 7px solid #ccc;
            left: auto;
            right: 11px;
            bottom: 13px;
        }
    }

    .dropdown-list {
        @include transition(all .2s);
        list-style: none;
        margin: 0;
        padding: 0;
        width: $fontDropdownWidth;
        border-radius: $fontDropdownRadius;
        max-height: $fontDropdownHeight / 3;
        box-shadow: 0 2px 20px rgba(0,0,0,0.15);
        position: absolute;
        z-index: 1;
        left: 0;
        top: 0;
        border: 1px solid #ccc;
        background-color: #fff;
        overflow-x: hidden;
        overflow-y: auto;
        opacity: 0;
        visibility: hidden;
    }

    &.active {
        .dropdown-list {
            max-height: $fontDropdownHeight;
            top: 37px;
            opacity: 1;
            visibility: visible;
        }

        .label:after {
            @include rotate(180deg);
        }
    }

    li {
        padding: 0 10px;
        font-size: 1.4em;
        line-height: 1.5em;
        white-space: nowrap;
        overflow: hidden;
        &:hover {
            color: #fff;
            background-color: $fontDropdownColor;
        }
    }
    .sel {
        background-color: rgb(240,240,240);
        color: $fontDropdownColor;
    }
}