Semantic-UI/server/files/javascript/shape.js at pre-release · CssFormWork/Semantic-UI · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
semantic.shape = {};

// ready event
semantic.shape.ready = function() {

  // selector cache
  var
    $demo            = $('.demo'),
    $dogDemo         = $('.dog.shape'),
    $directionButton = $('.direction .button'),
    $shapeButton     = $('.type.buttons .button'),
    // alias
    handler
  ;

  // event handlers
  handler = {
    rotate: function() {
      var
        $shape    = $(this).closest('.example').find('.ui.shape'),
        direction = $(this).data('direction') || false,
        animation = $(this).data('animation') || false
      ;
      if(direction && animation) {
        $shape
          .shape(animation + '.' + direction)
        ;
      }
    },

    removeShape: function(){
      var
        shape = $(this).data('shape') || false
      ;
      if(shape) {
        $demo
          .removeClass(shape)
        ;
      }
    },

    changeShape: function() {
      var
        $shape       = $(this),
        $otherShapes = $shape.siblings(),
        shape        = $shape.data('shape')
      ;
      $shape
        .addClass('active')
      ;
      $otherShapes
        .removeClass('active')
        .each(handler.removeShape)
      ;
      $demo
        .addClass(shape)
      ;
    }
  };

  // attach events
  $demo
    .shape({
      debug: true,
      verbose: true
    })
  ;
  $directionButton
    .on('click', handler.rotate)
    .popup({
      position  : 'bottom center'
    })
  ;
  $shapeButton
    .on('click', handler.changeShape)
  ;

  $dogDemo
    .shape()
  ;

};


// attach ready event
$(document)
  .ready(semantic.shape.ready)
;