모달 타이틀/컨텐츠 옵션 미작동

gitaeks commented 8 years ago

@kieregh 모달 컨포넌트에서 타이틀과 컨텐츠 옵션이 작동되지 않습니다. 확인 요청합니다.

예제 및 데모

kieregh commented 8 years ago

title, content 관련 현재 아래와 같이 작업되었습니다.

title

이 것은 그 동안 작업을 통해서 data-role="title" 로 확정된 것으로 알고 이 값으로 작업했습니다.

content

늘곁애 작업을 하면서...data-content="" 값 하나만 가지고서는 아무것도 할 수 없음을 체험했습니다. data- 속성으로 넘겨야할 불특정 내용들이 매우 많이 필요하다는 것을 알았습니다. 또한, 하나의 엘리먼트(이벤트 핸들러)에 data- 값이 중복사용되면 안되는 이슈도 있습니다.

그래서...data-title 을 제외한 data 속성 값을 아래와 같이 구분 및 사용하도록 했습니다.

이벤트 핸들러 data- 마크업 형식 아래와 같이 dataType 과 dataName 을 ':' 로 구분을 해서 넘깁니다.
data-dataType:dataName="dataValue"

여기서 dataType 은 아래의 4 가지로 구분되며 해당 컴포넌트의 해당 엘리먼트에 적용하는 방법은 아래와 같습니다. $target(엘리먼트) = $(component).find('[data-'+dataName+'-role="'+dataName+'"]')

1) bg : $(target).css('background-image','url('+dataValue+')') 2) img : $(target).attr('src',dataValue) 3) inputVal : $(target).val(dataValue) 4) text : $(target).text(dataValue) 5) html : $(target).html(dataValue)
해당 엘리먼트(target) 마크업 형식 data-dataName-role="dataName"

data- 마크업 예제

배경 이미지 적용하는 경우

 <a data-toggle="modal" data-target="#myModal" data-bg:coverImg="cover.jpg">모달 오픈</a>

<!-- modal 시작 -->
<div id="myModal" class="modal">
    <header class="bar bar-nav">
        <a class="icon icon-close pull-right" data-history="back"></a>
        <h1 class="title" data-role="title">Modal</h1>
    </header>
    <div class="content">
        <p class="content-padded" data-coverImg-role="coverImg">배경이미지 적용</p>
    </div>
</div>

이상입니다.

gitaeks commented 8 years ago

어떤 내용인지 이해했습니다. 그렇다면, 스크립트방식의 적용은 어떻게 되나요 ?
가장 많이 사용되는 data-type이 text 형 이라고 판단되는데요. 기본값 개념을 적용하여 복잡도를 줄이고 BS와의 일관성을 유지하면 어떨까 합니다.

예를 들어 아래의 2가지 경우는 같게 처리하는 것 입니다. data-text:content=“컨텐츠” 과 data-content=“컨텐츠”

가능할까요 ?

gitaeks commented 8 years ago

data-role="title" 을 문서의 데모에 적용해 놓았습니다.

https://jsfiddle.net/gitaek/Lvg7ukdr/ https://jsfiddle.net/gitaek/t2hmcdmc/

kieregh commented 8 years ago

스크립트 방식 예제는 아래에서 확인할 수 있습니다.

http://www.withconsumer.net/rc-test/modal/1-4-4-script.html

위 예제 소스를 통해서 아래의 2 가지 사항을 발견했습니다.

1) text 타입인 경우 기본값 적용 관련

기능을 만드는 것은 문제가 안되나 그 과정이 오히려 로직을 복잡하게 만들 수 있을 것 같습니다.
또한, 스크립트 방식인 경우를 보면 url, title 같은 값과 text:aaa, html:bbb 같은 값들이 형태가 다르게 나타납니다. 오히려 이렇게 구분을 하는 것이 좋지 않나 생각합니다.
즉, data- 속성으로 넘어오는 값들을 아래와 같이 크게 2 가지로 구분해야 할 것 같습니다. 가. 모달 기능에 영향을 미치는 값 나. 모달 마크업 및 내용에 영향을 미치는 값 ( type : name 형식)

요컨대, 해당 컴포넌트 기능에 영향을 미치는 값(show,backdrop,trigger,title,url 등)은 ':' 없이 사용하고 해당 컴포넌트 마크업에 적용(내용 추가/변경 및 html 추가/변경)하는 값들은 ':' 를 사용해서 그 값의 타입을 명확히 표현을 해주는 것입니다. (기본값 없이)

2) 'title' or title 이슈 추가의견 'html:snsBtn' : 과 같이.... ':' 이 포함된 경우에는 해당 키값에 반드시 홑따옴표('')를 붙여줘야 합니다.

결국, 일관성을 유지하기 위해서 일괄적으로 'title' 과 같은 방법으로 하는 것이 맞을 것 같습니다.

이상입니다.

gitaeks commented 8 years ago

좀더, 다양한 상황을 통해 검증해봐야 할 것 같습니다.

해당 마크업 형식을 아래와 같이 조정하면 어떨까 합니다. dataName를 2번 기술해야 하는 것은 비효율적으로 보입니다. 타이틀의 경우, data-role="title" 인데요. 일관성있는 기술이 필요해 보입니다.

data-dataName-role="dataName" --> data-role="dataName"

kieregh commented 8 years ago

이렇게 한 이유는 중복 이슈 때문입니다. 늘곁애 하면서 발생했던 문제이구요...

예를 들어서...어떤 엘리먼트에 2 개 이상의 data-role="" 을 부여해야 할 상황이 발생했을때.. data-role="coverimg" data-role="content" ...이런 경우... data-role="coverimg" 하나만 인식됩니다.

요컨대, 하나의 엘리먼트에 여러개의 data-role 값을 사용하기 위한 것입니다.

gitaeks commented 8 years ago

원칙적으로 단일 엘리먼트에 복수의 data-role는 적용하지 않는것으로 하겠습니다.

kieregh commented 8 years ago

복수의 data-role 을 적용하지 않는다는 표현은....조금 부적절한 것 같습니다.

적용하던 안하던 data-role 은 앞에 것 하나만 인식됩니다.
즉, rc 차원에서 가이드하거나 권고할 사항이 아니라...rc 가 아닌 상황에서도 그렇게 사용하면 안되는 이슈입니다.

redblock commented 8 years ago

확인했습니다.

Open Business Platform ::킴스큐 kimsQ ::

(주)레드블럭 권기택

break@kimsq.com Office : 1544-1507
www.kimsq.com

2016년 5월 11일 오후 5:28, kiere notifications@github.com님이 작성:

복수의 data-role 을 적용하지 않는다는 표현은....조금 부적절한 것 같습니다.

적용하던 안하던 data-role 은 앞에 것 하나만 인식됩니다.

즉, rc 차원에서 가이드하거나 권고할 사항이 아니라...rc 가 아닌 상황에서도 그렇게 사용하면 안되는 이슈입니다.

— You are receiving this because you are subscribed to this thread. Reply to this email directly or view it on GitHub https://github.com/kimsQ/rc/issues/2#issuecomment-218394817

kimsQ / rc