Giter Club home page Giter Club logo

rc's People

Contributors

kieregh avatar kieregh2 avatar redblock avatar

Watchers

 avatar  avatar  avatar  avatar

rc's Issues

rc-control.js > utility.js 적용 요청

모바일 페이지 풋터 또는 기타 위치에서 빈번하게 사용되는 기능들을 utility.js 에 적용 요청합니다.

image

// Scroll Top 
$('body').on('tap', '[data-scroll="top"]', function() {
    $('.content').animate({scrollTop:0}, 'fast');
    return false;
});


// History Back
$('body').on('tap’, '[data-history="back"]', function() {
    window.history.back();
});


// Document Reload
$('body').on('tap', '[data-location="reload"]', function() {
    window.location.reload();
});

관련문서

https://docs.google.com/document/d/1BS7sdH04WW9KEsqIDuBK3mt777RWzMGsNBq2o1plk18/edit#heading=h.nv83hhicbxwn

material-design-style drawer 옵션화 요청

@kieregh , 요청하신 material-design-style drawer 입니다.
문서를 보시면 별도의 css와 js 를 추가해야 구현이 가능한 상태인데요.

drawer 익스텐션의 옵션으로 아래의 방식이 구현가능하면 좋지 않을까도 생각됩니다. ( 추가되는 css 는rc-snap.css 에 내장시킨후 drawer에 별도의 class를 부여하면 적용하면 될 것 같습니다.

문서
http://rc.kimsq.com/extensions/snap/#material-design-style

데모
http://rc.kimsq.com/examples/extensions/snap/material-design-style.html

image

css 추가

.snap-drawer-left {
  position: fixed;
  top: 0;
  left: -1px;
  right: 0;
  bottom: 0;
  -webkit-transform: translate3d(-265px, 0, 0);
          transform: translate3d(-265px, 0, 0);
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
          box-shadow: 0px 0px 10px rgba(0,0,0,0.9);
}
.snapjs-left .snap-drawer-left {
  z-index: 11;
}

js 추가

snapper = new Snap({
  element: $("#myDrawer")[0],
  maxPosition: 1,
  minPosition: -1,
  transitionSpeed: 0.1,
})

// Initialize drawer
RC_initDrawer();

모달 애니메이션 효과

@kieregh 모달 호출시 data-animation="scale" 의 옵션이 설정되었다면 모달의 컨테이너에 data-animation에 지정된 값이 모달 컨테이너의 클래스로 동적으로 지정되어야 하는데, 현재 관련 기능이 누락되어 있는 것 같습니다. 확인 요청 합니다.

<div class="modal scale">
    ...
</div>

자세한것은 아래를 참조해 주세요.
모달 애니메이션 효과 데모 및 소스코드

loader > overlay 안됐던 이슈 관련

해당 내용을 검토한 결과 overlay 관련 css 가 누락되어 있는 것을 발견했습니다.
추가로 loader 아이콘도 추가해주시기 바랍니다.

Static Backdrop with Animation 관련

@kieregh , Static Backdrop with Animation 기능이 이미 내장이 되어 있는 것 확인했습니다.

아래 예제에 적용되어 있는데요.
http://rc.kimsq.com/examples/components/popup/static-backdrop-with-animation.html

아래 스크립트를 내장하는 방안을 요청 합니다.

      $('.backdrop').tap(function() {
        $("#myPopup .popup-content").addClass("animated shake");
        setTimeout(function() {
          $('#myPopup .popup-content').removeClass('animated shake');
        }, 600);
      });

$('.backdrop').tap(function() { 이부분이 작동하지 않는데요. .backdroptap 이벤트가 적용되지 않는 부분도 확인 요청 합니다.

모달 content 에 infinite-scroll 적용시 이슈

이슈

작업상황 :
id="myModal" 이라는 모달 하나에 아래의 템플들을 불러오는 상황.
- 회원 리스트 ( 무한스크롤 적용)
- 설정 페이지 ( 무한 스크롤 불필요)

현상 :

  1. '회원 리스트'를 불러와서 무한 스크롤 실행(정상작동)
  2. '설정 페이지' 호출했더니 이 페이지에서도 무한 스크롤이 작동됨.

원인

  • 최초 '회원 리스트' 에서 .content 에 무한 스크롤을 초기화했는 모달이 닫히면서 .content 내부 영역만 삭제가 되어 다른 내용이 호출되어도 .content 에 초기화된 무한 스크롤이 작동되는 현상

고려사항

모달의

부분까지 모두 삭제 즉, <div class="modal"></div> 내부 전체를 삭제하는 경우에는 본 이슈가 발생하지 않을 수 있으나 이렇게 할 경우 각 템플릿에 똑같은 를 추가해줘야 하는 이슈 발생. 실제 작업시 값은 동적으로 변경하고 content 영역에 템플릿(페이지)을 호출하고 있음.

제안

  • scroll 대상 전용 div 에 대한 class 및 css 추가(content 와 같은 속성으로 scroll 이 가능하도록)
  • 이렇게 하면...스크롤이 필요한 템플릿에서 이 scroll 전용 div 로 wrapping 을 해주고 해당 모달이 닫히면서 해당 scroll 전용 div 도 삭제되므로 본 이슈는 발생하지 않을 것으로 판단됨.

이상입니다.

미처리 작업 정리 -- 금주 주말내 완료 목표

  1. drawer.js 정리
    • 익스텐션 처리하고 /dist/extension/snap/version/rc.snap.js 로 저장
  2. 폼 요소 픽스 및 업로드
  3. affix 픽스
  4. loader > css 추가
  5. swiper 문서 수정 > 원문대로
    • 문서 원문에 추가할 예정
  6. extention 자동으로 push 바인딩된 사항 제거
  7. 모든 extension 은 rc.- 를 붙인다.
  8. bs tab.js 추가
  9. collapse.js 추가

컴포넌트 닫기 data-dismiss="컴포넌트명" 관련 이슈 2 가지

  1. 기능설명 오류 정정
    자체적으로 history 옵션을 체크하도록 되어 있습니다.
    따라서, 아래의 설명은 수정되야 합니다.
    ' history 를 기록하지 않는 경우에만 사용한다 '

  2. history 적용된 컴포넌트가 닫히지 않은 상태에서 다른 url 로 이동한 경우 보완사항
    예를 들어, 모달을 열고 모달 내부에 있는 특정 링크를 클릭해서 해당 URL 로
    도큐먼트 전체가 이동하여 reload 가 된 경우 최초에 컴포넌트를 열면서 RC 에 기록된 history
    가 남아 있게 되어 이후의 백버튼을 누를 경우오작동하는 사례가 발견되었습니다.

    요컨대, 컴포넌트 내부의 링크 요소 마크업에도 data-dismiss="컴포넌트명" 을 추가하여
    다른 URL 로 이동하는 동시에 오픈된 컴포넌트가 프로그램적으로 닫히도록 해줘야 합니다.

이상입니다.

[개선] modal 에서 popup,sheet 호출할 경우에 대응한 component z-index 수정

@kieregh , 모달에서 팝업 또는 시트를 호출할 경우에 컴포넌트의 z-index 값이 동일하여 제대로 표현안되는 경우가 있었는데요. 이를 위해 개선하였습니다.

아래 스크린샷은 기사보기(모달)에서 기사공유를 위해 우측상단의 공유버튼을 터치하여 팝업을 호출한 예시 입니다.
image

데모

http://break.kimsq.co.kr/kfm/mobile/

수정내역

b33644d

RC 파일명 체계 관련

@kieregh 님, 지난 스마트미디어 X캠프를 준비하며 TV UI에 대해 이해하는 계기가 되었는데요.

TV UI는 데스크탑과 모바일의 중간성격이며 BS기반하에 싱글페이지 구성 및 history, 키보드 방향키 컨트롤 등으로 구성하겠다는 판단을 하게되었습니다. RC기반으로 충분히 TV 프론트 프레임웍을 만들수 있음을 알게되었는데요.

TV UI 데모

또한 데스크탑 또한 BS 기반위에 일관성 있는 컨포넌트 , 컨트롤 호출 및 제어가 필요하다는 생각 또한 가지게 되었습니다.

그래서 아래와 같은 생각을 하게되었습니다.

image

image

[공지] modal,popup 닫기 데이타속성명 변경

@kieregh , modal 과 popup 닫는 데이터 속성을 아래와 같이 변경했습니다.
문서와 예제 모두 수정했습니다. 앞으로 공식적으로 컴포넌트를 닫는 데이터 속성은 data-dismiss로 안내하겠습니다.

변경 전
data-history="back"

변경 후
data-dismiss="modal" data-dismiss="popup"

관련 커밋

sheet,popover 컴포넌트 추가 요청

@kieregh 님, popup 컨포넌트와 유사하게 sheet,popover 컨포넌트를 rc-component.js 에 각각 추가 요청합니다.

popup 클래스를 각각 sheet와 popover 로 치환 적용해 주면됩니다.

브랜드 변경 ( Ratchet plus --> kimsQ RC )

@kieregh , 브랜드에 대해서 고민을 해왔는데요. kimsQ RC 로 통일하는게 효과적이겠다는 판단을 했습니다.
현재, 공식 홈페이지에 변경해 놓았습니다.

파일명 또한 alpha2 릴리즈 때 아래와 같이 변경할 계획 입니다.

Core

  • rc.css
  • rc.min.css
  • rc.js
  • rc.min.js

Extra

  • rc-progress.css
  • rc-progress.min.css

Extension

  • rc-snap.js
  • rc-snap.css
  • rc-swipe.js
  • rc-photoswipe.js

컨포넌트 활성화(active) 시 display:bock 인라인방식 적용요청

@kieregh 님, 비활성화된 컨포넌트가 화면 밖에 존재할 때는 상관없으나, zoom(scale) 이펙트와 같이 비활성상태의 컨포넌트가 화면 가시권에 존재할 경우, 화면내에 자리잡는 현상을 막기 위해 아래와 같이 요청합니다.

CSS에서 적용할 경우, 에니메이션 이펙트가 불완전하게 작동하여 인라인으로 적용함

최초

인라인 스타일 없음,

활성

style="display:block"

비활성

style="display:none"


적용대상

  • modal , popup, sheet, popover, fbutton

라이선스 원문 링크 수정 요청

js 파일 내부에 라이선스 원문 링크를 아래와 같이 수정 요청합니다.

수정 전

수정후


참고사항

https://ko.wikipedia.org/wiki/MIT_%ED%97%88%EA%B0%80%EC%84%9C

MIT 허가서는 미국의 매사추세츠 공과대학교에서 자기 학교의 소프트웨어 공학도들을 돕기 위해 개발한 허가서이다. MIT 허가서를 따르는 소프트웨어를 개조한 제품을 반드시 오픈 소스로 배포해야 한다는 규정이 없으며,GNU 일반 공중 허가서의 엄격함을 피하려는 사용자들에게 인기가 있다.

요약하면 MIT 허가서는 다음과 같은 라이선스이다.

  1. 이 소프트웨어를 누구라도 무상으로 제한없이 취급해도 좋다. 단, 저작권 표시 및 이 허가 표시를 소프트웨어의 모든 복제물 또는 중요한 부분에 기재해야 한다.
  2. 저자 또는 저작권자는 소프트웨어에 관해서 아무런 책임을 지지 않는다.

RC 프로젝트 소개문구 검토 요청

@kieregh , RC 프로젝트 개요에 관한 내용 입니다. 추가/수정해야 할 내용이 있는지, 문법상의 오류가 없는지 확인요청합니다.


https://github.com/kimsQ/rc/tree/master

kimsQ RC

Makes front-end mobile web & apps development faster and easier.
kimsQ RC is the function extended version of Ratchet.

Special thanks

kimsQ RC would like to thank the authors of components that have gone into the making of this framework. Their contributions have helped make it great.

Offical site & Community

Documentaion

Q&A

  • For help using kimsQ RC, ask on StackOverflow using the tag kimsQ-rc

Author & Maintainers

@gitaeks, @kieregh

Contact

Copyright and license

Copyright 2016 Redblock, Inc.

Licensed under the MIT License

swiper 도규먼트에 대한 저의 의견

해당 도큐먼트에 아래와 같이 기록하셨고 저번 미팅때 요청하셨는데요...
(pagination 분리사항 포함)

$('[data-extension="swiper"]').RC_initSwiper()

본래 swiper 를 초기화하는 방식을 리뷰해보면....아래와 같습니다.

  <script>        
  var mySwiper = new Swiper ('.swiper-container', {
    // Optional parameters
    direction: 'vertical',
    loop: true,

    // If we need pagination
    pagination: '.swiper-pagination',

    // Navigation arrows
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',

    // And if we need scrollbar
    scrollbar: '.swiper-scrollbar',
  })        
  </script>

즉, 본래 특정 selector 기준으로 초기화하도록 되어 있고 pagination 정의도 별도로
세팅하도록 되어 있습니다.

swiper 는 마크업 세팅과 위와 같은 초기화 설정부분 등 적용하기가 번거로운 extension
이라고 생각합니다. 그래서 RC 에서 좀더 수월하고 심플하게 사용하도록 한 번 더 래핑을
하는 개념이라고 생각해서 현재의 방식으로 작업을 한 것입니다.

따라서, 요청하신 내용은 본래의 swiper 세팅 방법을 사용하는 것과 크게 다르지 않고
커스텀 소지가 많은 부분은 사용자의 선택으로 남겨두는 것이 낫다는 판단입니다.

이상입니다.

컨포넌트 backdrop static 옵션 구현 요청

@kieregh 모달을 제외하고 backdrop을 출력하는 컨포넌트 전체에 포함되는 옵션입니다.

backdrop false 와 함께 static 옵션이 필요합니다.

해당 옵션은 백드럽을 탭핑했을때에도 컨포넌트를 비활성 시키지 않는 옵션인데요.
주로 popup 컴포넌드로 경고대화창 등으로 활용할 때 사용됩니다.

데모

https://jsfiddle.net/gitaek/1wu2p4L1/

참고 -bs의 modal의 static 옵션과 기능이 유사

http://getbootstrap.com/javascript/#modals-options

fbutton 컨터이너 아이디 미지정 관련

@kieregh, 아래 id="myFbutton" 가 없으면 작동이 안되는데요.

인라인 방식에서

특히 인라인 방식에서는 다른 컨포넌트와 마찬가지로 ID가 필요없을 것 같습니다.

<div class="fbutton fbutton-br slidein-spring" id="myFbutton">
...
</div>

스크립트 방식에서 #myFbutton 아이디 하나만 지정하면 되지 않을까 판단됩니다.

$(document).on('tap','#myFbutton .fbutton-button-main .',function(){
    $('#myFbutton').fbutton({
            toggle : true,
            history : true,
            backdrop : true
    });
});

fbutton inline 예제

https://jsfiddle.net/gitaek/6egokxkp/

fbutton script 예제

https://jsfiddle.net/gitaek/o0Lt0mxd/

backdrop 지속시간 관련

컨포넌트 호출시에 backdrop이 출력하는 주된 이유는 다른 터치를 제한하기 위함 입니다.
보통 백드롭을 터치하면 백드롭이 닫히는데요. 현재 그럴경우, 하위의 터치영역에 영향을 주고 있습니다.

tap의 지속시간과 관련이 예상되는데요. backdrop tap에서는 시간을 늘릴필요성이 있어 보입니다.

image

data-trigger 기능 관련 요청

각종 컨포넌트의 기본 적용된 트리거 형식은 tap click 입니다.
이를 마크업 인라인 형식으로 수정적용할 수 있는 기능을 요청 합니다.

형식

data-trigger="***"

종류

  • data-trigger="tap"
  • datal-trigger="doubleTap"
  • data-trigger="press"
  • data-trigger="drag"
  • data-trigger="flick"

사용예시

<button data-toggle="fbutton" data-trigger=”tap press”>

중복지정 가능

affix 기능 관련 > affix 클래스를 코어에서 정의할지 여부 결정 요청

affix 기능은 결국 아래와 같은 해당 엘리먼트에 'affix 클래스틀 추가하는 것' 이라 할 수 있는데요...

 <div data-control="scroll" data-type="affix">
</div>

이하 데모 예제에는 해당 페이지에서 아래와 같이 추가해줬습니다.
https://jsfiddle.net/kiere/fxrL6tr8/15/

<style>
.affix {position: fixed;top:45px;z-index: 10;}
.affix-top, .affix-bottom {z-index: 10}
</style>

기본적으로 아래의 2 가지 항목은 필수 조정이 되야 합니다.

    1. position: fixed
    1. z-index:

참고로....해당 페이지의 다른 마크업 요소의 상태에 따라서도 조정이 필요한 경우도 있을 것으로
생각합니다.

control.js > form.js - https://standards.usa.gov/form-controls/ 관련

해당 마크업, css .js 를 검토해봤는데요....
일단, css/ js 파일용량이 커서 전체 리소스에 영향을 끼칠까 우려됩니다.
특히, js 부분은 form 과 관련된 부분외에도 매우 많은 상황인데요...

그래서..일단..제가 css 와 마크업만 가지고 아래와 같이 구현을 해봤습니다.
http://www.withconsumer.net/rc-test/form/default.html

기존 component/control 의 js/css 파일과 충돌여부룰 체크하기 위해 일단 모든 파일을 링크했습니다.
구제척으로 작업된 내용은 아래와 같습니다.

  1. auswds.css 파일 추가
  2. /rc-test/dist/ 폴더에 auswds.css 전용 img 폴더 추가 (체크박스 체크표시 등 이미지)

일단, 위 2 가지 추가사항으로만 디자인은 나오는 것 같습니다.
혹시 script 상으로 컨트롤이 불가능한지 확인하기 위해서 checkbox/radio 값 체크시 실시간
피드백을 출력시켰습니다.

요컨대, 관련 js 파일은 필요 없지 않나 하는 판단을 합니다.
검토 후 의견 주시기 바랍니다.

이상입니다.

fbutton 템플릿 옵션 및 related-target를 이용한 Target ID 생략

@kieregh 님, 인라인 방식에서는 결국 자기 자신이니, related-target를 활용하면 별도의 아이디 지정이 필요없지 않을까도 생각이 됩니다. 아울러 template 옵션도 아래와 같이 처리가 가능한지 확인 요청 합니다.

<div class="fbutton fbutton-br slidein-spring" data-toggle="fbutton" data-template="/component/fbutton-01.html">

</div>

참고 related-target

http://getbootstrap.com/javascript/#modals-related-target

page 컴포넌트 direction 옵션의 필요성에 대하여

@kieregh , 페이지 컴포넌트를 기획할때 목록/보기 화면(2단계)에 적용을 주목적으로 개발되었는데요.

필요성

쇼핑몰 주문단계, 회원가입단계, 신청서 등록단계 등 다단계 액션페이지가 필요한 경우가 많은 것 같습니다.
현재 page 컨포넌트는 단방향성에 대해서만 지원하고 있는데요. 다단계 액션페이지 구조에서는 원하는 특정 페이지로 이동되는 경우가 빈번하게 발생합니다.

예를 들어 신청서 등록 과정이 3단계로 구성되어 있다고 하면,
신청서 마지막 단계에서 최초 액션페이지로 이동시키는 경우가 있을 것 입니다.

제안

direction 옵션 추가제안

data-direction="left | right"
기본값 : left

아래와 같이 마크업 되었다면, 저장 버튼을 터치하면 #3.right 가 적용됩니다.

<div id="3" class="page right">
  <button  data-toggle="page" data-start="#3" data-target="#1" data-direction="right">
    저장
  </button>
</div>

해당 옵션이 적용할 경우, 자기 자신에 .right 가 부여됩니다.

검색시 autocomplete 기능구현을 위한 Bootstrap-3-Typeahead 커스텀 요청

@kieregh , 검색시 autocomplete 기능구현을 위해 Bootstrap-3-Typeahead 를 익스텐션 추가하고 연계된 예제를 추가하였습니다.

bootstrap3-typeahead.js에서 마크업 생성 부만 수정하여 rc-typeahead.js로 생성하여 예제에 임포트 하였습니다.

데모

http://rc.kimsq.com/examples/search/autocomplete.html

문제 및 요청사항

검색어 입력시 자동으로 생성되는 아래 마크업이 bar영역에 생성되어 화면구성이 깨짐
.content 내부에 생성되도록 변경이 필요합니다.

<ul class="table-view">
  ...
</ul>

image

모달 컨포넌트 호출시 히스토리 기록이 안되는 문제

케르님, 모달은 정상적으로 호출되나, 호출된 모달에 히스토리가 기록이 안되는 오류가 있습니다.
그렇다보니, data-history="back" 을 통한 모달 닫기가 안되되고 있습니다.

모달 컨포넌트 이외에 다른 컨포넌트에서 적용 요청합니다.

image

modal에서 popup을 호출할 경우, data-dismiss 문제

@kieregh , 컴포넌트의 이중호출시에 data-dismiss의 문제를 발견하여 개선 요청합니다.

문제점

modal 에서 popup을 호출하고 팝업을 닫기 위해 data-dismiss="popup"이 적용된 버튼을 터치할 경우 popup,modal 모두 닫히는 경우 발생

임시처방

data-history="back" 을 적용하여 해결하였지만, data-dismiss="popup"로 popup만 닫을수 있어야 할 것 같습니다.

데모

http://break.kimsq.co.kr/kfm/mobile/ 에서 기사 터치

image

모달 URL 옵션 기본값

@kieregh 현재, 모달의 url 옵션의 기본값이 없음으로 지정되어 있는데요.

문제점

그렇다보니, URL 옵션이 지정되지 않을 경우, 최종 파일명이 없어지는 현상이 있습니다. 최종파일명의 경로가 없는 URL이 공유될 경우, 외부접속시 없는 페이지로 유도될 가능성이 있습니다.

요청사항

url옵션의 기본값(미지정의 경우)을 현재 URL을 변경하지 않도록 처리하면 해결되지 않을까 합니다.

기본 false

예제

http://kimsq.github.io/rc/examples/component/modal/modal-option-title.html

데스크탑 click 이벤트 이슈 관련

관련하여 수정작업 후 아래와 같이 커밋을 했습니다.
f3826e1
그런데...커밋 페이제이 나타나지를 않네요....

위 수정된 소스가 적용된 샘플은 아래에서 확인 가능합니다

  1. push 테스트 : http://www.withconsumer.net/rc-test/control/duck.php
  2. segment 테스트 : http://www.withconsumer.net/rc-test/control/affix.html

위 커밋내용에서도 말했지만....tap 이벤트를 사용해서 a 이벤트가 안되는 것은 아니었음을
다시 한 번 말씀 드립니다.

이상입니다.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.