Social Reiot

Social Game Developer wandering in strange dungeon.

Getattr vs. Hasattr

  • 특정 모듈에 있는 속성, 함수, 변수들의 존재 유무를 알 수 있다.
  • 만약 속성이 함수라서 실행해야 한다면 callable() 을 이용할 것.
  • getattr( module , name , default ) 를 사용하면 hasattr 로 체크하지 않아도 된다.
  • 현재 모듈에 특정 함수의 존재 여부는 getattr(sys.modules[name], func) 로 검사하면 된다.

GeoPtProperty

  • 2개의 float ( lat, lng ) 를 저장한다.
  • 값의 범위는 위도(lat) -90 ~ 90, 경도(lng) -180 ~ 180 까지.
  • 문자열로도 초기화할 수 있다. ex> entity.geo = 10.0,20.9

jQuery UI Widget _trigger

  • 위젯의 options 에 들어 있는 함수를 실행한다. 따라서, 위젯 생성시에 등록해두거나, 나중에 등록해도 무방하다.
  • 위젯의 element 를 컨텍스트로 해서 jQuery.trigger() 로 실행한다.
1

this.element.trigger( event, data );

Have_app_server vs. On_production_server

사실 하고 싶은 건, (app id, on production server) 조합으로 적합한 facebook setting 을 로딩하는 건데.. 웬지 잘 안되었던 것 같은 느낌 :)

1
2
3
4
5

from google.appengine.api import apiproxy_stub_map
import os
have_appserver = bool(apiproxy_stub_map.apiproxy.GetStub('datastore_v3'))
on_production_server = have_appserver and \
  not os.environ.get('SERVER_SOFTWARE', '').lower().startswith('devel')

jQuery UI Widget _setOption

jQuery UI widget 은 기본적으로 한번에 여러 개의 옵션을 설정할 수 있다.

1

$('...').somewidget('option',{aa:bb, cc:dd});

하나의 옵션을 설정할 때의 추가적인 로직을 넣으려면 _setOption() 을 재정의하면 된다.

1
2
3

_setOption: function(key,value){
  if(key=='some'){...do something...}
}

가끔은 여러 개의 옵션을 한번에 설정할 때, 그 중 몇몇 옵션이 바뀔 경우에 대한 추가적인 로직을 넣으려면 _setOptions 를 재정의하면 된다. jQuery UI Dialog 의 코드가 가장 좋은 예제일 것이다. 다만 1.8.6 부터 지원하니까 버전에 주의하길.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

_setOptions: function( options ) {
  var self = this,
  resizableOptions = {},
  resize = false;

  $.each( options, function( key, value ) {
      self._setOption( key, value );

      if ( key in sizeRelatedOptions ) {
          resize = true;
      }
      if ( key in resizableRelatedOptions ) {
          resizableOptions[ key ] = value;
      }
  });

  if ( resize ) {
      this._size();
  }
  if ( this.uiDialog.is( ":data(resizable)" ) ) {
      this.uiDialog.resizable( "option", resizableOptions );
  }
}

CSS Cursor With URL

CSS 커서 속성에 URL 을 사용할 수 있다.

1

W.map.css('cursor','url(/images/sprites/aidbomb.png) 30 30, crosshair');

이때 주의할 점은

  • 무조건 디폴트 커서를 지정해줘야 한다.
  • IE 는 .cur .ani 만 지원한다. anchor 기능도 지원하지 않는다.

Git Clean

가끔 git reset hard HEAD 로 정리를 해도, untracked 파일들은 남아있게 된다. 이런 파일들을 모조리 지우고 싶을 때 clean 명령을 사용할 것.

1

git clean -f -d

jquery.ui.tooltip

개요

  • jquery ui 1.9 에서부터 지원된다. 1.8 에서 사용하려면 약간의 소스 수정이 필요하다.
  • 기본적으로 title 속성을 툴팁 텍스트로 사용한다. 동적으로 컨텐트를 만들려면 content 함수를 이용해서 DOM 을 리턴해야 한다.
  • 툴팁은 dialog 와 마찬가지로 body 에 추가된다. 자동으로 ui-tooltip-1 ui-tooltip-2 와 같이 id 가 붙는다.
  • this.element 는 툴팁을 띄우는 원본 DOM 이고, 툴팁 컨텐트에 직접 접근하려면 this.tooltip 또는 this.widget() 을 이용해야 한다.
  • beforeOpen 같은 걸 지원하면 좋을텐데.. 일단은 없다. 뜨지 않게 하려면 disable 시키는 수 밖에 없다.
  • 툴팁 내부 컨텐트에 jquery ui 위젯을 사용하려면 open 콜백에서 적용할 것.

툴팁 내부에 템플릿을 적용한 후 Progressbar 넣기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

xxx.tooltip({
  content: function(){
      return $('#building-unit-tooltip-tmpl')
      .tmpl(unit);
  },
  open: function(event){
      var timeRatio = (unit.maxTime-unit.remainTime) / unit.maxTime * 100;
      var $tooltip = $(this).data('tooltip').widget();
      $tooltip
      .find('div.progressbar')
      .progressbar({value:timeRatio})
      .end()
      .find('.ui-progressbar-value')
      .animate({
          width: "100%"
      }, {
          duration: unit.remainTime*1000
      });
  }});

DIV Layering With Z-index

구글맵처럼 (바닥 - 마커 - 오버레이) 등 여러 개의 레이어로 구성하고, 그 안에 위치한 각종 마커들끼리의 z-index 를 상황(?)에 따라서 코드 레벨에서 정렬해야 한다고 가정하자.

1
2
3
4
5
6
7
8
9
10

<div id="map">
  <div id="ground">
  <div id="first" class="marker">1st</div>
  <div id="second" class="marker">2nd</div>
  </div>
  <div id="overlay">
  <div id="third" class="overlay">3rd</div>
  <div id="fourth" class="overlay">4th</div>
  </div>
</div>

보통 맵은 relative, 레이어들은 absolute 로 두게 된다. 이때 레이어들의 z-index 를 지정하지 않으면(또는 auto 로 설정하면), #first 마커의 z-index 를 9999 로 잡으면 상위 레이어 위로 올라오게 된다.

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

#map {
  position: relative;
  width: 100%;
  height: 500px;
  background-color: gray;
}
.marker, .overlay {
  position: absolute;
  text-align: center;
}
#ground {
  position: absolute;
  left: 0;
  top: 0;
  background-color: #ededed;
  z-index: 1000;
}
#overlay {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1001;
}
#first {
  width: 100px;height: 100px;
  background-color: yellow;
}
#second {
  width: 50px;height: 200px;
  background-color: green;
}
#third {
  width: 200px;height: 50px;
  background-color: red;
}
#fourth {
  width: 50px;height: 300px;
  background-color: blue;
 }

대신 그냥 각 레이어들의 z-index 를 각각 1000,1001 로 설정하기만 하면, 아무리 하위 레이어의 마커에 높은 z-index 를 줘도, 절대 상위 레이어를 침범하지는 않게 된다.