아코디언

머릿속에서 파이썬, 자바스크립트, 자바, AngularJS 언어가 뒤섞어 있는 와중에 

헷갈리고 감이 안와서 진짜 핵삽질중.. ㅠㅠ...

AngularJS로 구현하는 가장 쉬운방법. UI-bootstrap 이용해서 디렉티브 이용

http://www.shanidkv.com/blog/angularjs-accordion

알고 보니 아코디언.. 많이 쉬웠다.

그리고 한가지 알게 되었다.

AngularJS는 결국 Javascript의 프레임 워크이기 때문에

막히면 Javascript로 어떻게 만들지 생각을 해보고 적용하면 되고

정 모르겠으면 그냥 javascript로 만들면 된다.

이거 하나만 이해하고 있어도 angularJS할때 좀 많이 덜 헤매일거 같다는 생각이 들었다.

일단 이번에 한 아코디언의 형태는 css의 display를 이용해서

document.getElementsByClassName(titlename)[0].style; 를 이용해서 조정을 하였다.

angularJS가 좋은 점은

언어 변경이 가능한 70개가 넘는 div 리스트를 

단지 html 상에서 7줄로 구현이 가능하다는 점이다.

<div ng-repeat = "j in data">
    <h3 class=""/></h3>
    <div ng-repeat="k in j" ng-if="$index>0" class="panel-heading">
        <div class="{{k.title}}" translate="{{k.title}}"></div>
        <div class="{{k.title}}.Content" translate="{{k.content}}"></div>
    </div>
</div>

사실 더 간단하게 만들수 있으나 이것이 불러오는 json 파일의 형태가 4개의 큰 집합이 있고 그 집합 안에 각각 5~8개의 개별 변수와 데이터가 저장되어 있어서 이런방식으로 짰다. 이렇게 짜면 각 집합 별로 끊어서 구별 지으면서 출력이 가능하다.

이걸 아코디언으로 적용한다고 쓴 js파일내에서의 10줄 까지 포함하면

35개의 아코디언 div 리스트를 만드는데 17코드가 들어간거다. 

좋긴한데 학습곡선이 분명히 있어서 한번 헤매면 답없이 느껴질수도 있을거 같다.

==============================================================

$scope.activeAccordion = function(titlename){
            var b = document.getElementsByClassName(titlename+'.Content');
            var c1 = document.getElementsByClassName(titlename)[0].style;
            var c2 = document.getElementsByClassName(titlename+'.Content')[0].style;
            console.log(b[0].style.display);
 
            if(b[0].style.display === 'none'){
                c1.background = '#4fddc5';
                c1.color = '#ffffff';
                c2.display = 'flex';
                c2.background = '#f0f0f0';
 
            }else{
                c1.background = '#ffffff'
                c1.color = '#000';
                c2.display = 'none';
            }
 
        }

효과 없이 css 입력에 따른 아코디언..  별루 안좋고 조잡하게 짯음..

다시 수정중

참고로 css와 javascript만을 이용해서 짤려는 중이다. Jquery는 angularJS안에서 충돌되는 경우가 발생해서 아예 안쓴다.

    //accordion 
        $scope.activeAccordion = function(titlename){
            var c1 = document.getElementsByClassName(titlename)[0].style;
 
            if(document.getElementById(titlename+'.Content').className === 'hider ng-scope'){
                c1.background = '#4fddc5'; c1.color = '#ffffff';
                document.getElementById(titlename+'.Content').className = 'shower';
 
            }else{
                c1.background = '#ffffff'; c1.color = '#000';
                document.getElementById(titlename+'.Content').className = 'hider ng-scope';
            }
        }

.panel-heading.ng-scope > div.shower{
    -moz-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.1s;
    -moz-transition-timing-function: ease-in;
    -webkit-transition-timing-function: ease-in;
    -o-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    max-height: 1000px;
    overflow: hidden;
}
.panel-heading.ng-scope > div.hider.ng-scope{
    overflow: hidden;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    -moz-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.1s;
    -moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    -o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}

이렇게 짰지만 여전히 마음에 안든다.. 하지만 더이상 일정을 늦출순 없으니 ㅠㅠ,,

공부나 더해야지