AngularJS Rumi

AngularJS project

by Felipe Alfaro

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<rp-menu type="dices" default-event="mousedown">

    <rp-menu-option action="show('Option 0')">
        <span ng-if="!oh">Enabled</span>
        <span ng-if="oh">Disabled</span>
        <rp-menu-dropdown>
            <rp-menu-option action="oh = false" ng-disabled="!oh">
                Enable
            </rp-menu-option>
            <rp-menu-option action="oh = true" ng-disabled="oh">
                Disable
            </rp-menu-option>
        </rp-menu-dropdown>
    </rp-menu-option>
    
    <rp-menu-option action="show('Option 1')">
        Option 1 - dropdown 0
        <rp-menu-dropdown>
            <rp-menu-content>
                My content
            </rp-menu-content>
            <rp-menu-option action="show('Elemental')">
                Elemental
            </rp-menu-option>
            <rp-menu-option ng-repeat="o in dropDownOne" action="show(o)" ng-disabled="oh">
                {{ o }}
            </rp-menu-option>
        </rp-menu-dropdown>
    </rp-menu-option>
    
    
    
    <rp-menu-option action="show('Option 0')">
        Option 2
    </rp-menu-option>
    <rp-menu-option action="show('Option 3')" ng-disabled="oh">
        Option 3 - dropdown 1
        <rp-menu-dropdown>
            <rp-menu-option ng-repeat="o in dropDownTwo" action="show(o)">
                {{ o }}
            </rp-menu-option>
        </rp-menu-dropdown>
    </rp-menu-option>
    
    <button style="float: right;">asd</button>

</rp-menu>


<rp-menu type="icons" default-event="mousedown">

    <rp-menu-option action="show('Option 0')">
        <i class="fa fa-toggle-on" aria-hidden="true" ng-if="!oh"></i>
        <i class="fa fa-toggle-off" aria-hidden="true" ng-if="oh"></i>
        <rp-menu-dropdown>
            <rp-menu-option action="oh = false" ng-disabled="!oh">
                Enable
            </rp-menu-option>
            <rp-menu-option...

SCSS

body { background: white; }
* { font-family: open sans; box-sizing: border-box;
outline: none; }
h1, h2, h3, h4, h5 { font-weight: 400; }
h1 { text-align: center; }
h1, h2, h3, h4, h5, p { color: rgb(73, 73, 73); }

$menuHeight: 40px;

rp-menu {
    display: block;
    position: relative;
    width: 100%;
    height: $menuHeight;
    line-height: $menuHeight;
    text-align: center;
    cursor: default;
    font-size: 12px;
    z-index: 100;
    rp-menu-option,
    rp-menu-content {
        display: inline-block;
        position: relative;
        height: $menuHeight;
        line-height: $menuHeight;
        padding: 0 10px;
    }
    rp-menu-option {
        cursor: pointer;
    }
    rp-menu-dropdown {
        display: none;
        margin: 0 -10px;
        z-index: 500;
    }
    div.rp-menu-dropdown-trigger {
        position: absolute;
        background: transparent;
        width: 100%;
        height: 40px;
        top: 0;
        left: 0;
    }
    // Variations
    
    $bgMenuDices: #f6f6f6;
    $bgDice: #fbfbfb;
    $borderColorDice: #ebebeb;
    
    &.rp-menu-dices {
        background: $bgMenuDices;
        border: solid 1px $borderColorDice;
        box-shadow: inset rgba(black, .3) 0 0 7px -4px;
        rp-menu-content,
        rp-menu-option {
            border: solid 1px $borderColorDice;
            background: $bgDice;
            margin: -1px;
            color: black;
            display: block;
            float: left;
        }
        rp-menu-content {
            cursor: default;
        }
        rp-menu-option {

            &.rp-menu-option-dropdown {
                padding-right: 30px;
                &:before {
                    display: block;
                    position: absolute;
                    font-family: fontawesome;
                    content: '\f107';
                    right: 0;
                    top: 0;
                    width: 30px;
                    height: $menuHeight;
                   ...

JavaScript

var app = angular.module('app', []);

app.controller('mainController', function($scope, $element){
    $scope.show = function(s){
    	console.info(s);
    };
    $scope.oh = false;
    $scope.dropDownOne = [
    	'Dropdown 0 - option 0', 'Dropdown 0 - option 1',
        'Dropdown 0 - option 2', 'Dropdown 0 - option 3'
    ];
    $scope.dropDownTwo = [
    	'Dropdown 1 - option 0', 'Dropdown 1 - option 1'
    ];
});


var 
menuDirective = [function(){
	var controller = ['$element', '$attrs', function($element, $attrs){
    	var ctrl = this;
        ctrl.customEvent = null;
        ctrl.defaultEvent = $attrs.defaultEvent || 'mousedown';
        if(!$attrs.tabindex) $element.attr('tabindex', 0);
        if($attrs.type) $element.addClass('rp-menu-' + $attrs.type);
    	$element.on('focusout', function(){
        	if(ctrl.customEvent) ctrl.customEvent();
        });
        $element.on('contextmenu', function($event){
        	$event.preventDefault();
        });
    }];
	return {
    	restrict: 'E',
        controller: controller
    }
}],
menuOptionDirective = ['$parse', function($parse){
	var controller = ['$element', '$attrs', function($element, $attrs){
    	var ctrl = this;
        ctrl.$element = $element;
    }];
	function postLink($scope, $element, $attrs, ctrl){
    	var menuCtrl = ctrl[0],
        	dropdownCtrl = ctrl[1];
    	if($attrs.action){
        	$element.on(menuCtrl.defaultEvent, function($event){
            	if($element.attr('disabled')){
                	$event.stopPropagation();
                    $event.preventDefault();
                }else{
                    $scope.$apply(function(){
                        $parse($attrs.action)($scope);
                    });
                }
            });
        }
    }
	return {
    	restrict: 'E',
        controller: controller,
        require: ['^^rpMenu', '?^rpMenuDropdown'],
        link: postLink
    }
}],
menuContentDirective = [function(){
	function postLink($scope, $element, $attrs,...